/* Página da peça (v7). Todo seletor começa em .pg-peca, a raiz do <main>. Base em 390 px; tela maior por min-width. */

/* Topo: galeria e coluna da informação (no celular, uma embaixo da outra). */
.pg-peca .pg-peca__topo,
.pg-peca .pg-peca__coluna { display: grid; gap: var(--e3); }

/* Galeria: painel branco que começa atrás do cabeçalho. */
.pg-peca .galeria { margin-top: calc(-1 * var(--altura-cabecalho)); padding: 0 0 var(--e4); }
.pg-peca .galeria__trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pg-peca .galeria__trilho::-webkit-scrollbar { display: none; }
.pg-peca .galeria__foto { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; }
.pg-peca .galeria__foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--foto-fundo); }
.pg-peca .galeria__controles { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--margem) 0; }
.pg-peca .progresso { position: relative; flex: none; width: 120px; height: 3px; border-radius: var(--raio-pilula); background: var(--filete); overflow: hidden; }
.pg-peca .progresso__barra { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--tinta); transition: transform var(--medio) var(--curva); }
.pg-peca .galeria__seta { display: none; }
.pg-peca .galeria__dica { padding: var(--e2) var(--margem) 0; font-size: 14px; color: var(--suave); }

/* Informação */
.pg-peca .pg-peca__info .conteudo { display: grid; gap: var(--e3); }
.pg-peca .texto-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pg-peca .pg-peca__voltar { justify-self: start; }
.pg-peca .pg-peca__preco { font-size: 20px; line-height: 1.2; }
.pg-peca .pg-peca__medidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3) var(--e4); }
.pg-peca .pg-peca__medidas > div { display: grid; gap: var(--e1); }
.pg-peca .pg-peca__medidas dt { font: 500 13px/1.3 var(--sans); color: var(--suave); }
.pg-peca .pg-peca__medidas dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Acabamento: tamanho, Assinatura, cores, quantidade, observação e ação. */
.pg-peca .pg-peca__formulario { display: grid; gap: var(--e5); }
.pg-peca .pg-peca__formulario > .cabeca { margin-block-end: 0; }
.pg-peca .pg-peca__tamanho .filtros { margin-top: var(--e3); }
.pg-peca .filtro:has(input:checked) { border-color: var(--marrom); background: var(--marrom); color: var(--branco); }
.pg-peca .filtro:has(input:focus-visible) { outline: 3px solid var(--oliva); outline-offset: 3px; }
.pg-peca .pg-peca__combinacao { height: auto; min-height: 44px; max-width: 100%; padding: var(--e2) 18px; line-height: 1.3; text-align: left; }
.pg-peca .pg-peca__amostras { display: inline-flex; flex: none; gap: var(--e1); }
.pg-peca .pg-peca__cores { display: grid; gap: var(--e3); }
.pg-peca .pg-peca__nota,
.pg-peca .pg-peca__aviso { font-size: 14px; color: var(--suave); }

/* Assinatura em pílulas com retrato (C12): regras de secao-assinaturas.css com o prefixo da página. */
.pg-peca .interruptores { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--e2); }
.pg-peca .interruptor { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 6px 12px 6px 6px; border: 1px solid var(--filete); border-radius: var(--raio-pilula); background: rgb(255 253 248 / .7); cursor: pointer; }
.pg-peca .interruptor__gata { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.pg-peca .interruptor__texto { display: grid; min-width: 0; }
.pg-peca .interruptor__nome { font-size: 15px; font-weight: 600; }
.pg-peca .interruptor__tipo { font-size: 13px; color: var(--suave); }
.pg-peca .interruptor__trilho { position: relative; flex: none; width: 30px; height: 18px; margin-left: auto; border-radius: var(--raio-pilula); background: var(--filete); transition: background-color var(--rapido) var(--curva); }
.pg-peca .interruptor__bolinha { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--branco); transition: transform var(--rapido) var(--curva); }
.pg-peca .interruptor:has(input:checked) { border-color: var(--ass); box-shadow: inset 0 0 0 1px var(--ass); background: var(--branco); }
.pg-peca .interruptor:has(input:checked) .interruptor__nome { color: var(--ass); }
.pg-peca .interruptor:has(input:checked) .interruptor__trilho { background: var(--ass); }
.pg-peca .interruptor:has(input:checked) .interruptor__bolinha { transform: translateX(12px); }
.pg-peca .interruptor:has(input:focus-visible) { outline: 3px solid var(--oliva); outline-offset: 3px; }

/* Campos (dom.js field) e observação */
.pg-peca .field { display: grid; gap: var(--e2); }
.pg-peca .field > span,
.pg-peca .field > label { font: 600 15px/1.3 var(--sans); }
.pg-peca .field small { font-size: 13px; color: var(--suave); }
.pg-peca textarea { width: 100%; min-height: 96px; padding: var(--e3); border: 1px solid var(--contorno); border-radius: var(--raio-cartao); background: var(--branco); font: 400 16px/1.5 var(--sans); resize: vertical; }

/* Quantidade: − n + com botões de 44 px */
.pg-peca .stepper { display: inline-flex; align-items: center; gap: var(--e2); }
.pg-peca .stepper-button { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--contorno); border-radius: 50%; background: var(--branco); color: var(--tinta); font: 500 22px/1 var(--sans); cursor: pointer; }
.pg-peca .stepper input { width: 72px; min-height: 44px; padding: 0 var(--e2); border: 1px solid var(--contorno); border-radius: var(--raio-pilula); background: var(--branco); font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; }
.pg-peca .stepper input::-webkit-outer-spin-button,
.pg-peca .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Tamanho de peça com uma variante: texto fixo, sem escolha. */
.pg-peca .pg-peca__tamanho-unico { display: grid; gap: var(--e2); }
.pg-peca .pg-peca__tamanho-unico .t-corpo { font-weight: 600; }

/* Prévia da peça (piecePreview, signature-ui.js): palco 4:5 como o do C12, até 320 px de altura, legenda 14 px. */
.pg-peca .pg-peca__previa { display: grid; }
.pg-peca .piece-preview { display: grid; gap: var(--e3); justify-items: center; margin: 0; }
.pg-peca .piece-preview > img,
.pg-peca .piece-preview > svg { width: min(100%, 256px); height: auto; aspect-ratio: 4 / 5; max-height: 320px; object-fit: contain; border-radius: var(--raio-cartao); background: rgb(255 253 248 / .55); }
.pg-peca .piece-preview figcaption,
.pg-peca .piece-preview .quiet { display: grid; gap: var(--e2); justify-items: center; text-align: center; font-size: 14px; color: var(--suave); }
.pg-peca .piece-preview .preview-selection { display: inline-flex; align-items: center; gap: var(--e2); }
.pg-peca .piece-preview .cat-colors { display: inline-flex; align-items: center; gap: var(--e1); }
.pg-peca .piece-preview .cat-silhouette { max-width: 20px; max-height: 24px; }
/* Foto por IA da combinação (fotos-ia.js): quadrada, maior que o padrão desenhado. */
.pg-peca .pg-peca__foto-ia > img { width: min(100%, 320px); aspect-ratio: 1; max-height: none; object-fit: cover; }
/* Folha com todas as combinações (2ª foto da galeria): 6 colunas × 3 fileiras cabem no quadrado; o topo desce a altura do
   cabeçalho, que fica transparente por cima da galeria. Tocar escolhe a combinação. */
.pg-peca .pg-peca__folha { display: grid; align-content: center; gap: var(--e2); aspect-ratio: 1; box-sizing: border-box; padding: calc(var(--altura-cabecalho) + var(--e1)) var(--e2) var(--e2); background: var(--foto-fundo); }
.pg-peca .pg-peca__folha-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.pg-peca .pg-peca__folha-item { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.pg-peca .pg-peca__folha-item[aria-pressed="true"] { border-color: var(--tinta); }
.pg-peca .pg-peca__folha-item:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.pg-peca .pg-peca__folha-legenda { text-align: center; font-size: 14px; color: var(--suave); }

/* Cartão de kit (cartaoMosaico): cada linha é um <p> (componentes.js) e a seta fica à direita, centrada nas duas linhas. */
.pg-peca .cartao-mosaico .cartao-peca__base > .cartao-mosaico__linha { grid-column: 1; }
.pg-peca .cartao-mosaico .cartao-peca__base > .botao-seta { grid-column: 2; grid-row: 2 / span 2; }
.pg-peca .cartao-mosaico__linha + .cartao-mosaico__linha { margin-top: var(--e1); }

/* Erro, ação e aviso */
.pg-peca .pg-peca__erro { font-weight: 600; color: var(--tinta); }
.pg-peca .pg-peca__acao { display: grid; gap: var(--e3); }
.pg-peca .pg-peca__total { font-size: 18px; }
.pg-peca .pg-peca__acao .botao { width: 100%; justify-content: center; }

@media (min-width: 720px) {
  .pg-peca .pg-peca__acao .botao { width: auto; justify-self: start; }
  .pg-peca .interruptores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .pg-peca .pg-peca__topo { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: start; gap: var(--e7); }
  .pg-peca .galeria { position: sticky; top: 0; padding-bottom: var(--e5); }
  .pg-peca .galeria__seta { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--contorno); border-radius: 50%; background: transparent; color: var(--tinta); cursor: pointer; }
  .pg-peca .pg-peca__coluna { gap: var(--e5); }
  .pg-peca .interruptores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-peca .interruptor__gata { width: 40px; height: 40px; }
}