/* Página do kit (v7). Todo seletor começa em .pg-kit. Base: celular de 390 px; telas maiores pelos @media (min-width). */
.pg-kit { display: grid; gap: var(--e3); }
.pg-kit > * { min-width: 0; }

/* Abertura: faixa areia (.faixa, atrás do cabeçalho), voltar, mídia (foto ou mosaico 2 × 2) e texto. */
.pg-kit .pg-kit__voltar { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); font: 600 15px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.pg-kit .pg-kit__topo { display: grid; gap: var(--e5); margin-top: var(--e2); }
.pg-kit .pg-kit__midia { overflow: hidden; border-radius: var(--raio-cartao); background: var(--foto-fundo); }
.pg-kit .pg-kit__midia > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pg-kit .pg-kit__galeria { display: grid; gap: var(--e3); min-width: 0; }
.pg-kit .pg-kit__minis { display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pg-kit .pg-kit__minis::-webkit-scrollbar { display: none; }
.pg-kit .pg-kit__mini { flex: none; width: 64px; height: 64px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--raio-foto); background: var(--foto-fundo); cursor: pointer; }
.pg-kit .pg-kit__mini[aria-pressed="true"] { border-color: var(--oliva); }
.pg-kit .pg-kit__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-kit .pg-kit__mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: none; overflow: visible; }
.pg-kit .pg-kit__mosaico > img { border-radius: 10px; background: var(--foto-fundo); }
.pg-kit .pg-kit__texto { display: grid; align-content: start; min-width: 0; }
.pg-kit .pg-kit__texto > .cabeca { margin-block-end: var(--e3); }
.pg-kit .pg-kit__preco { font-size: 20px; }

/* Painel branco: composição, Assinatura fixa, cores e compra. */
.pg-kit .pg-kit__bloco { display: grid; gap: var(--e5); }
.pg-kit .pg-kit__bloco > * { min-width: 0; }
.pg-kit .pg-kit__pecas-bloco { display: grid; align-content: start; }
.pg-kit .pg-kit__pecas { display: grid; gap: var(--e3); }
.pg-kit .pg-kit__peca { display: flex; align-items: center; gap: var(--e3); min-height: 56px; }
.pg-kit .pg-kit__miniatura { flex: none; width: 56px; height: 56px; border-radius: var(--raio-foto); object-fit: cover; background: var(--foto-fundo); }
.pg-kit .pg-kit__peca-botao { display: flex; align-items: center; gap: var(--e3); width: 100%; min-height: 56px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pg-kit .pg-kit__nome { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; color: var(--tinta); font: 600 16px/1.3 var(--sans); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filete); }
.pg-kit .pg-kit__lado { display: grid; align-content: start; gap: var(--e4); }
.pg-kit .pg-kit__fixa { display: grid; justify-items: start; gap: var(--e2); }
.pg-kit .pg-kit__pilula { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 56px; padding: 6px 18px 6px 6px; border: 1px solid var(--ass); border-radius: var(--raio-pilula); box-shadow: inset 0 0 0 1px var(--ass); background: var(--branco); color: var(--ass); text-decoration: none; }
.pg-kit .pg-kit__pilula-nome { font: 600 15px/1.2 var(--sans); overflow-wrap: anywhere; }
.pg-kit .pg-kit__retrato { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.pg-kit .pg-kit__cores { display: grid; justify-items: start; gap: var(--e3); }
.pg-kit .pg-kit__nota { color: var(--suave); }
.pg-kit .pg-kit__compra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); }
.pg-kit .pg-kit__preco-compra { font-size: 20px; }
.pg-kit .pg-kit__aviso { padding-top: var(--e3); border-top: 1px solid var(--filete); color: var(--suave); font-size: 14px; }
.pg-kit .pg-kit__vazio { padding-block: var(--e5); }

@media (min-width: 720px) {
  .pg-kit .pg-kit__pecas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .pg-kit { gap: var(--e5); }
  .pg-kit .pg-kit__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--e7); }
  .pg-kit .pg-kit__bloco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--e7); }
  .pg-kit .pg-kit__aviso { grid-column: 1 / -1; }
}

/* Janela com a foto da peça (popup): trilho que desliza entre a foto e o detalhe. */
.pg-kit__zoom { width: min(92vw, 560px); max-width: none; max-height: 92dvh; padding: 0; border: 0; border-radius: var(--raio-cartao); background: var(--papel); color: var(--tinta); overflow: hidden; }
.pg-kit__zoom::backdrop { background: rgb(52 45 37 / .55); }
.pg-kit__zoom-caixa { display: grid; max-height: 92dvh; }
.pg-kit__zoom-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e3) var(--e2) var(--e4); }
.pg-kit__zoom-titulo { font: 600 17px/1.3 var(--sans); overflow-wrap: anywhere; }
.pg-kit__zoom-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pg-kit__zoom-trilho::-webkit-scrollbar { display: none; }
.pg-kit__zoom-foto { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; }
.pg-kit__zoom-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; max-height: 70dvh; object-fit: contain; background: var(--foto-fundo); }
.pg-kit__zoom-dica { padding: var(--e2) var(--e4) var(--e4); font-size: 14px; color: var(--suave); }