/* ==========================================================================
   Doce Capricho — páginas de loja (/lojas/{slug}) e perguntas (/perguntas)

   Arquivo próprio em vez de componentes.css: são páginas de SEO local, que
   reaproveitam faixa, cartão, botão e sobretítulo do design system e só
   acrescentam o que não existia — a ficha da loja e a lista de perguntas.
   ========================================================================== */

.container--texto { max-width: 52rem; }

/* Trilha "Início › Loja Queimados" — espelha o BreadcrumbList do schema.org. */
.trilha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    font-size: var(--txt-sm);
    color: var(--cor-texto-suave);
}

.secao__cabeca--esquerda { align-items: flex-start; text-align: left; }

/* --- Página da loja ------------------------------------------------------ */

.loja-pagina { padding-top: var(--sp-6); }

.loja-topo {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}

.loja-topo__texto { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.loja-topo__titulo { font-size: var(--txt-4xl); line-height: 1.05; }
.loja-topo__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
/* "Confeitaria e cafeteria", segunda linha do h1: menor, para a marca e a unidade seguirem o título. */
.loja-topo__tipo { display: block; margin-top: var(--sp-2); font-size: var(--txt-2xl); color: var(--cacau-500); }

/* O texto próprio da loja (Seo\Apresentacao), abaixo do topo; com a foto da fachada, lado a lado. */
.loja-sobre {
    margin-top: var(--sp-7);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--cor-borda-suave);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: center;
}
.loja-sobre--com-foto { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.loja-sobre__texto { display: flex; flex-direction: column; gap: var(--sp-3); }
.loja-sobre__titulo { font-size: var(--txt-2xl); }
.loja-sobre__texto p { max-width: var(--largura-texto); }
.loja-sobre__foto { aspect-ratio: 16 / 9; overflow: hidden; }
.loja-sobre__foto img { width: 100%; height: 100%; object-fit: cover; }

.loja-situacao {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--txt-sm);
    font-weight: var(--peso-semi);
    color: var(--cor-texto-suave);
}

.loja-situacao::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cacau-300);
}

.loja-situacao--aberta { color: var(--cor-sucesso); }
.loja-situacao--aberta::before { background: var(--cor-sucesso); }

.loja-ficha {
    margin: 0;
    padding: var(--sp-5) var(--sp-6);
    display: grid;
    gap: var(--sp-4);
}

.loja-ficha__item dt {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--txt-xs);
    font-weight: var(--peso-semi);
    letter-spacing: var(--tracking-largo);
    text-transform: uppercase;
    color: var(--cacau-500);
}

.loja-ficha__item dt svg { color: var(--cor-acao); }
.loja-ficha__item dd { margin: var(--sp-1) 0 0; line-height: 1.5; color: var(--cor-texto); }
.loja-ficha__suave { color: var(--cor-texto-suave); font-size: var(--txt-sm); }

.loja-doces {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
}

.loja-doce { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.loja-doce__nome { font-size: var(--txt-xl); }
.loja-doce__nome a { color: var(--cor-texto); text-decoration: none; }
.loja-doce__nome a:hover { color: var(--cor-link); text-decoration: underline; }
.loja-doce__desc { font-size: var(--txt-sm); color: var(--cor-texto-suave); }

.loja-nota { margin-top: var(--sp-5); font-size: var(--txt-sm); color: var(--cor-texto-suave); max-width: none; text-align: center; }

.loja-outras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-4);
}

.loja-outra {
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    text-decoration: none;
    color: var(--cor-texto);
    transition: border-color var(--transicao);
}

.loja-outra:hover { border-color: var(--cor-acao); color: var(--cor-texto); }
.loja-outra__nome { font-family: var(--fonte-display); font-size: var(--txt-2xl); color: var(--cacau-800); }
.loja-outra__endereco { font-size: var(--txt-sm); color: var(--cor-texto-suave); }

/* --- Perguntas ----------------------------------------------------------- */

.perguntas { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }

.pergunta {
    padding: var(--sp-4) var(--sp-5);
    background: var(--cor-mesa);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-md);
}

.pergunta__titulo { font-size: var(--txt-xl); margin-bottom: var(--sp-2); }
.pergunta__resposta { color: var(--cor-texto); max-width: none; }

.perguntas__lojas-titulo { font-size: var(--txt-2xl); margin: var(--sp-6) 0 var(--sp-4); }

/* --- Política de Privacidade e Termos de uso (site/legal.php) ------------ */

.legal__versao { margin-top: var(--sp-2); font-size: var(--txt-sm); color: var(--cor-texto-suave); }
.legal { line-height: 1.65; }
.legal h2 { font-size: var(--txt-2xl); margin: var(--sp-6) 0 var(--sp-3); scroll-margin-top: 7rem; }
.legal h3 { font-size: var(--txt-xl); margin: var(--sp-5) 0 var(--sp-2); }
.legal p, .legal ul { margin: 0 0 var(--sp-4); }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: var(--sp-2); }
.legal a { color: var(--cor-link); overflow-wrap: anywhere; }
.legal-tabela { overflow-x: auto; margin: 0 0 var(--sp-5); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-md); background: var(--cor-mesa); }
.legal-tabela table { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); }
.legal-tabela th, .legal-tabela td { padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--cor-borda-suave); }
.legal-tabela tr:last-child td { border-bottom: 0; }
.legal-tabela th { background: var(--cor-parede); font-weight: var(--peso-semi); }
.legal__lojas-titulo { font-size: var(--txt-2xl); margin: var(--sp-6) 0 var(--sp-4); }
.legal__whatsapp { margin-top: var(--sp-2); min-height: 44px; display: inline-flex; align-items: center; font-weight: var(--peso-semi); color: var(--cor-link); }
.legal__outro { margin-top: var(--sp-6); }
.legal__outro a { min-height: 44px; display: inline-flex; align-items: center; }

/* --- Celular ------------------------------------------------------------- */

@media (max-width: 760px) {
    .loja-topo { grid-template-columns: minmax(0, 1fr); }
    .loja-topo__titulo { font-size: var(--txt-3xl); }
    .loja-topo__tipo { font-size: var(--txt-xl); }
    .loja-sobre, .loja-sobre--com-foto { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-6); }
    .loja-doces { grid-template-columns: minmax(0, 1fr); }
    .loja-ficha { padding: var(--sp-5); }
}

/* No rodapé, o nome de cada loja virou link para a página dela. */
a.rodape__titulo { text-decoration: none; }
a.rodape__titulo:hover { color: var(--creme-100); text-decoration: underline; }

/* --- Página de categoria (/vitrine/{slug}) e os links entre categorias ---- */

.categoria-pagina { padding-top: var(--sp-6); }

.categoria-topo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: center;
    margin-bottom: var(--sp-7);
}
.categoria-topo--com-capa { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.categoria-topo__texto { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; max-width: 40rem; }
.categoria-topo__titulo { font-size: var(--txt-4xl); line-height: 1.05; }
/* A capa do universo: 16:9, como o cartão da home (Formatos: categorias). */
.categoria-topo__capa { aspect-ratio: 16 / 9; overflow: hidden; }
.categoria-topo__capa img { width: 100%; height: 100%; object-fit: cover; }

.categoria-pagina__cabeca { margin-bottom: var(--sp-5); }
.categoria-pagina__mais { margin-top: var(--sp-5); }

.categorias-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin: var(--sp-6) 0;
}
.categorias-links__rotulo {
    font-size: var(--txt-xs);
    font-weight: var(--peso-semi);
    letter-spacing: var(--tracking-largo);
    text-transform: uppercase;
    color: var(--cacau-500);
}
.categorias-links__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Navegação, não ação: contorno fino, sem rosa de botão (docs/design.md, regras 1 e 2). */
.categorias-links__item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--sp-4);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--raio-pill);
    background: var(--cor-mesa);
    color: var(--cor-texto);
    font-size: var(--txt-sm);
    text-decoration: none;
}
.categorias-links__item:hover { border-color: var(--cor-acao); color: var(--cor-link); }

@media (max-width: 760px) {
    .categoria-topo, .categoria-topo--com-capa { grid-template-columns: minmax(0, 1fr); }
    /* No celular, a foto em cima e o texto embaixo, como na capa da home. */
    .categoria-topo__capa { order: -1; }
    .categoria-topo__titulo { font-size: var(--txt-3xl); }
}