/* LUMIÈRE · vitrine.css: categorias, até R$ 20, todos os produtos e Kits (celular primeiro, todas as
 * larguras; montar-site com css_todas_larguras). Direção nova (30/10/2026, revisão crítica v3):
 *   - banner baixo de cada categoria: a foto da campanha de um lado e o texto do outro, num painel liso
 *     (texto nunca por cima da modelo); Até R$ 20 abre com os próprios produtos sobre o fundo das fotos;
 *   - contagem e faixa de preço uma vez só, na linha de cima da grade, em caixa normal;
 *   - filtros em pílula, o mesmo componente em toda largura (no celular, a linha corre de lado);
 *   - Kits: cartões com a composição das fotos dos produtos (#F7F1EC, sem foto antiga), a lista com
 *     miniatura, a soma real e o botão cobre "Levar os três" / "Levar os quatro".
 * HTML: _fonte/paginas/vitrines.mjs, _fonte/modelos/vitrine.html e rituais.html. JS: js/vitrine.js. */

/* =====================================================================================================
 * Composição dos produtos (colagem de cada kit e bancada ao lado da foto do banner): UMA imagem pronta,
 * feita no PC pelo _fonte/montar-composicoes.mjs (alfa real de cada produto, escala da altura real, base
 * comum a 78% da altura, vãos iguais, sombra de contato só sob cada um, fundo #F7F1EC). Aqui só o encaixe:
 * a imagem tem a proporção do quadro (bancada 4:5, kit 2:1) e cobre o quadro; se o quadro esticar um pouco
 * (painel mais alto que a foto), a linha da base fica no mesmo lugar (object-position a 78%).
 * ===================================================================================================== */
.composicao { display: block; width: 100%; height: 100%; background: var(--placa); }
.composicao img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }

/* =====================================================================================================
 * Cabeça das listas: banner (categorias e até R$ 20) ou cabeça simples (todos os produtos).
 * Banner (crítica v4): a foto 4:5 de um lado, num quadro da altura do banner, e o painel nude do outro com
 * o título, o texto, a contagem com a faixa de preço e os filtros (nada de 70% de nude vazio). Celular: a
 * foto quadrada em cima e o painel embaixo.
 * ===================================================================================================== */
.lista__cabeca { width: var(--pagina); margin: 16px auto 0; }
.lista__cabeca--banner { display: grid; gap: 12px; }
.lista__foto { overflow: hidden; border-radius: var(--raio-card); background: var(--placa); aspect-ratio: 1; }
.lista__foto-img, .lista__foto-img img { display: block; width: 100%; height: 100%; }
.lista__foto-img img { object-fit: cover; }
.lista__foto--produtos { aspect-ratio: 16 / 9; }
.lista__bancada { display: none; }
.lista__texto { display: grid; align-content: center; gap: 10px; min-width: 0; }
.lista__cabeca--banner .lista__texto { padding: 20px 16px; border-radius: var(--raio-card); background: var(--nude); }
.lista__titulo { font: 700 clamp(28px, 1.2rem + 2vw, 44px) / 1.08 var(--f-texto); letter-spacing: -.01em; }
.lista__corpo { max-width: 52ch; font: 400 16px / 1.5 var(--f-texto); color: var(--tinta-2); }
.lista__conta { font: 500 14px / 1.4 var(--f-texto); color: var(--tinta); font-variant-numeric: tabular-nums lining-nums; }
.lista__texto .filtros { margin-top: 4px; }
/* celular: os filtros do painel quebram em linhas (pílulas um pouco menores), em vez de correr de lado: o
 * filtro ativo fica sempre à vista e nenhum fica sozinho numa linha nas listas de hoje (medido em 360 e 390);
 * os Kits, com nomes longos, continuam correndo de lado (.filtros--rola) */
@media (max-width: 640px) {
  .lista__texto .filtros:not(.filtros--rola) { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .lista__texto .filtros:not(.filtros--rola) .filtros__grupo { flex-wrap: wrap; width: auto; }
  .lista__texto .filtros:not(.filtros--rola) .filtro { padding: 0 12px; font-size: 13.5px; }
  .lista__texto .filtros--rola { margin-inline: -16px; padding-inline: 16px; }
}
/* Corpo e banho, com os nomes mais longos: abaixo de 375 px, pílulas mais justas (o "Cabelo" não fica sozinho) */
@media (max-width: 374px) {
  .lista--corpo-e-banho .lista__texto .filtros:not(.filtros--rola) .filtros__grupo { gap: 6px; }
  .lista--corpo-e-banho .lista__texto .filtros:not(.filtros--rola) .filtro { padding: 0 10px; font-size: 12.5px; }
}
/* busca de Todos os produtos: a mesma pílula da busca do cabeçalho (comum.css, .busca) */
.lista-busca { width: min(100%, 640px); margin-top: 4px; }
/* computador e tablet largo: painel | foto 4:5 (largura fixa, altura pela proporção) e, de 1280 px para cima,
 * a bancada. A altura vem da foto (ou do painel, se ele for mais alto): nada transborda para a grade. */
@media (min-width: 768px) {
  .lista__cabeca { margin-top: 24px; }
  .lista__cabeca--banner {
    --foto-l: clamp(240px, 26vw, 360px);
    grid-template-columns: minmax(0, 1fr) var(--foto-l);
    gap: clamp(12px, 1.6vw, 20px);
  }
  .lista__cabeca--banner .lista__texto { order: -1; align-content: center; padding: clamp(24px, 3.2vw, 52px); }
  .lista__cabeca--banner .lista__foto { width: 100%; aspect-ratio: 4 / 5; }
  /* Até R$ 20 sem foto: a bancada no lugar dela, mais larga */
  .lista__cabeca--banner .lista__foto--produtos:not(.lista__bancada) { aspect-ratio: auto; min-height: calc(var(--foto-l) * 1.25); }
  .lista__cabeca--banner:has(.lista__foto--produtos:not(.lista__bancada)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .lista__bancada { display: none; }
}
@media (min-width: 1280px) {
  /* painel | foto | bancada: a bancada é um quadro 4:5 da largura da foto (a imagem da composição tem a
   * mesma proporção: encaixe exato); o painel fica com o resto */
  .lista__cabeca--banner:has(.lista__bancada) { grid-template-columns: minmax(0, 1fr) var(--foto-l) var(--foto-l); }
  .lista__cabeca--banner .lista__bancada { display: block; aspect-ratio: 4 / 5; }
}

/* =====================================================================================================
 * A vitrine: filtros, a linha da contagem com a ordem, a grade (2 / 3 / 4 colunas)
 * ===================================================================================================== */
.vitrine { width: var(--pagina); margin: 20px auto 0; }
.filtros { margin-inline: calc(-1 * var(--borda)); padding-inline: var(--borda); overflow-x: auto; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros:empty { display: none; }
.filtros__grupo { display: flex; gap: 8px; width: max-content; margin: 0; padding: 2px 0; list-style: none; }
.filtro {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--raio-pilula);
  background: var(--papel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 22%, transparent);
  color: var(--tinta);
  font: 500 14px / 1 var(--f-texto);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--d-micro), color var(--d-micro), box-shadow var(--d-micro);
}
.filtro:hover { box-shadow: inset 0 0 0 1px var(--tinta); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--branco); box-shadow: none; }
.vitrine__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; margin: 16px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.vitrine__faixa { font: 400 14px / 1.4 var(--f-texto); color: var(--tinta-2); font-variant-numeric: tabular-nums lining-nums; }
.ordem { display: flex; align-items: center; gap: 8px; }
.ordem__rotulo { font: 500 14px / 1 var(--f-texto); color: var(--tinta-2); }
.ordem__campo {
  min-height: 44px;
  padding: 0 36px 0 14px;
  border: 0;
  border-radius: var(--raio);
  background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232A1F19' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 22%, transparent);
  font: 500 14px / 1 var(--f-texto);
  appearance: none;
}
.vitrine__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; margin: 0; padding: 0; list-style: none; }
.vitrine__grade > [hidden] { display: none; }
.vitrine__nada { display: grid; justify-items: start; gap: 10px; margin-bottom: 24px; padding: 24px; border-radius: var(--raio-card); background: var(--nude); }
.vitrine__nada [data-nada-busca], .vitrine__nada [data-nada-filtro] { display: grid; justify-items: start; gap: 8px; }
.lista__escolhidos { margin-top: var(--respiro-secao); }
.vitrine__nada[hidden], .vitrine__nada [hidden] { display: none; }
@media (min-width: 641px) {
  .filtro { padding: 0 15px; font-size: 13.5px; }
  .filtros { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .filtros__grupo { flex-wrap: wrap; width: auto; }
  .vitrine__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(16px, 2vw, 24px); }
}
@media (min-width: 1024px) {
  .vitrine__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =====================================================================================================
 * Kits
 * ===================================================================================================== */
.kits { width: var(--pagina); margin: 28px auto 0; }
.kits__cabeca { display: grid; gap: 8px; }
.kits__titulo { font: 700 clamp(28px, 1.2rem + 2vw, 44px) / 1.08 var(--f-texto); letter-spacing: -.01em; }
.kits__corpo { max-width: 60ch; font: 400 16px / 1.5 var(--f-texto); color: var(--tinta-2); }
.kits__indice { margin: 8px calc(-1 * var(--borda)) 0; padding-inline: var(--borda); overflow-x: auto; scrollbar-width: none; }
.kits__indice::-webkit-scrollbar { display: none; }
.kits__lista { display: grid; gap: 28px; margin-top: 24px; }
.kit-pronto { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--raio-card); box-shadow: inset 0 0 0 1px var(--linha); scroll-margin-top: 140px; }
.kit-pronto__imagem { aspect-ratio: 2 / 1; overflow: hidden; background: var(--placa); }
/* coluna: o total e o botão presos ao pé do cartão (os cartões vizinhos têm a mesma altura e listas de
 * tamanhos diferentes: total e botão ficam na mesma linha, sem vazio no pé) */
.kit-pronto__info { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 16px 20px; }
.kit-pronto__rotulo { font: 600 var(--t-micro) / 1.4 var(--f-texto); letter-spacing: var(--e-micro); text-transform: uppercase; color: var(--tinta-2); }
.kit-pronto__titulo { font: 700 clamp(22px, 1rem + 1vw, 28px) / 1.15 var(--f-texto); letter-spacing: -.01em; }
.kit-pronto__linha { font: 400 15px / 1.5 var(--f-texto); color: var(--tinta-2); }
.kit-pronto__itens { margin: 6px 0 14px; padding: 0; list-style: none; }
.kit-pronto__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas: "mini nome preco" "mini marca preco";
  align-items: center;
  column-gap: 12px;
  padding-block: 10px;
  border-top: 1px solid var(--linha);
}
.kit-pronto__mini { grid-area: mini; display: block; width: 64px; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--placa); }
.kit-pronto__mini picture, .kit-pronto__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kit-pronto__nome { grid-area: nome; align-self: end; font: 500 15px / 1.3 var(--f-texto); }
.kit-pronto__nome a { color: inherit; text-decoration: none; }
.kit-pronto__nome a:hover { text-decoration: underline; text-decoration-color: var(--cobre); text-underline-offset: 4px; }
.kit-pronto__marca { grid-area: marca; align-self: start; font: 400 13px / 1.35 var(--f-texto); color: var(--tinta-2); }
.kit-pronto__preco { grid-area: preco; font: 700 16px / 1.2 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.kit-pronto__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linha); font: 600 17px / 1.2 var(--f-texto); }
.kit-pronto__total strong { font: 700 22px / 1 var(--f-texto); }
.kit-pronto__botao { width: 100%; min-height: 52px; margin-top: 4px; font-size: 16px; }
.kit-pronto__fora { margin-top: 8px; padding: 14px; border-radius: var(--raio); background: var(--nude); font: 500 14px / 1.4 var(--f-texto); }
@media (min-width: 641px) {
  .kits__indice { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .kits__indice .filtros__grupo { flex-wrap: wrap; width: auto; }
  .kit-pronto__info { padding: 22px 24px 26px; }
  .kit-pronto__item { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .kit-pronto__mini { width: 72px; }
}
@media (min-width: 1024px) {
  .kits__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(20px, 2.4vw, 32px); }
  .kit-pronto__botao { width: auto; align-self: flex-start; padding-inline: 44px; }
}

/* seção nova do painel sem banner e sem produto com recorte (09/11/2026): a foto quadrada do primeiro produto,
 * inteira no quadro (o fundo dela é o mesmo --placa do quadro: nenhuma faixa aparece) */
.lista__foto--produto picture, .lista__foto--produto img { display: block; width: 100%; height: 100%; }
.lista__foto--produto img { object-fit: contain; }