/* ============================================================================
   CORREÇÕES DE LAYOUT — VTDigital · 04/11/2026 · versão final
   Medido no site no ar com Chromium 1280×900 e 390×844.
   Entra só o que foi testado e não piorou nada. O que parecia correção e piorou
   ficou de fora, com a medição anotada — está tudo no fim do arquivo.
   Só CSS: nenhum HTML e nenhum JS precisam mudar.
   Instalação: subir este arquivo e incluir UMA linha em cada página, depois do
   último CSS de ajustes (ajustes-633-kits.css):
     <link rel="stylesheet" href="correcoes-layout.css?v=6.33.5">
   ========================================================================== */

/* ============================ 1. A PÁGINA QUE PULA AO TROCAR DE CARD ======
   Polaroid (e a página de cartões usa as mesmas peças).
   ANTES: altura da página 2.574 / 3.150 / 2.961 px conforme o kit escolhido
          → 576 px de sobe-e-desce. No celular: 5.097 / 6.048 / 5.021 → 1.027 px.
   DEPOIS: 0 px de variação nas duas larguras (medido, não estimado).
   ========================================================================= */

/* (a) os cards perdem a barra "prévia ao lado / Escolher" depois do primeiro
       clique e a linha encolhe 48 px — e o card escolhido desalinha a base */
.pol-kits { align-items: stretch; }
.pol-kit  { min-height: 365px; }

/* (b) a prévia da moldura tem altura de conteúdo: 192 / 361 / 369 px por kit */
#frames { min-height: 370px; }

/* (c) a grade de fotos cresce com o número de fotos (444 → 666 px) e a barra
       "Mostrando 1–6 de 9" só existe acima de 6 fotos (0 → 56 px):
       janela fixa com rolagem própria + barra sempre reservada */
#slots     { height: 520px; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
#pol-pager { min-height: 56px; }

@media (max-width: 760px) {
  .pol-kit           { min-height: 352px; }
  #frames            { min-height: 0; height: 430px; overflow-y: auto; overscroll-behavior: contain; }
  #slots             { height: 380px; }
  #pol-pager         { min-height: 98px; }
  #montar .polx-head { min-height: 225px; }   /* o nome do kit quebra uma linha a mais */
}

/* ============================ 2. ALVO DE TOQUE NO CELULAR =================
   Botões de 24 a 30 px de altura para o dedo. Medido antes de corrigir:
     foto-documento: 4 pastilhas de preço de 27 px + abas de 36 px
     agendas:        4 amostras de cor de 24 px
     fotos:          aba "Ver Todos" de 30 px
   Vai para 40 px (o ideal de acessibilidade é 44 — 40 já resolve o dedo sem
   engordar as pastilhas e quebrar o desenho do topo).
   ========================================================================= */
@media (max-width: 760px) {
  .rl-pills .pb-pill,
  .fd-hero-pill,
  .fd-tab,
  .ag-swatches button,
  .ft-ptab { min-height: 40px; }

  .ag-swatches button { padding-block: 8px; }
}

/* ==========================================================================
   O QUE FOI TESTADO E FICOU DE FORA (com o número que justifica)
   ==========================================================================

   1) RESERVAR A ALTURA DOS BLOCOS QUE CARREGAM DEPOIS (para matar o salto ao
      abrir). Não funciona: o conteúdo real fica MENOR que a reserva e o bloco
      encolhe na chegada — cria o salto que se queria evitar.
      Medido: fotos 0,18 → 0,39 (piorou 2×) · polaroid 0,01 → 0,29 (piorou).
      Na home e no catálogo quase não mexeu (0,93 → 0,95 / 0,92 → 0,93).

   2) ALINHAR A COLUNA EM 1180 EM TODAS AS PÁGINAS. Também piora o salto: o
      conteúdo é montado depois e, com a coluna mais estreita, ele re-quebra e
      empurra tudo.
      Medido: fotos 0,18 → 0,33 · foto 3×4 0,30 → 0,57.
      Ou seja: alinhar a coluna só faz sentido DEPOIS de resolver o item 3.

   3) O SALTO GRANDE (0,86) CONTINUA, e não é CSS. Aos ~900 ms o app troca o
      conteúdo inteiro do <main>: ele está com 21 px de altura e passa a 776 px,
      e o rodapé sai da tela. Enquanto a página não for pintada antes de buscar
      os dados (ou vier pronta do servidor), esse salto existe — reservar altura
      por bloco não resolve porque o problema é o <main> inteiro.
      É mudança no app.js, não no CSS.

   4) IMAGENS SEM LARGURA E ALTURA: 29 de 30 na home e 48 de 49 no catálogo
      vêm sem width/height. Isso se corrige no HTML de cada imagem, não aqui.
   ========================================================================== */

/* ======================= 3. A PÁGINA NÃO PODE "MUDAR" AO TROCAR O CARD ===
   Medido no ar (6.33.5), altura da página ao trocar entre os três kits:
     1024 px → 12x8 3162 · 9x6 3162 · tripla 3114  →  48 px de salto
     1100 px → 3132 ... 14 px de salto
     360 px  → 27 a 40 px de salto
   Três peças mudavam de altura conforme o kit escolhido:
     1) .polx-head        — o nome do kit leva 1, 2 ou 3 linhas   (77 / 126 / 143 px)
     2) #pol-steps        — "Faltam 9 foto(s)" quebra em 1..5 linhas (49 a 149 px)
     3) .polx-foot-price  — "R$ 12,90" + "1 kit × ..." quebra em 2 linhas (27 / 53 px)
   Cada faixa abaixo é o PIOR caso medido de 10 em 10 px, de 320 a 2560 px, nos 3 kits.
   Altura reservada = altura do conteúdo → a página nunca cresce nem encolhe ao trocar. */

#pol-steps        { min-height: 149px; }
.polx-foot-price  { min-height: 27px; }

@media (min-width: 340px)  { #pol-steps { min-height: 135px; } }
@media (min-width: 370px)  { #pol-steps { min-height: 121px; } }
@media (min-width: 380px)  { #pol-steps { min-height: 108px; } }
@media (min-width: 590px)  { #pol-steps { min-height: 94px;  } }
@media (min-width: 690px)  { #pol-steps { min-height: 106px; } }
@media (min-width: 990px)  { #pol-steps { min-height: 63px;  } }
@media (min-width: 1180px) { #pol-steps { min-height: 49px;  } }

@media (max-width: 760px)  { .polx-foot-price { min-height: 53px; } }
@media (min-width: 761px) and (max-width: 1179px) { .polx-foot-price { min-height: 53px; } }

/* cabeçalho do kit: 77 px de 1100 para cima; 126/143 nas larguras onde o nome quebra */
@media (min-width: 761px) and (max-width: 820px)  { #montar .polx-head { min-height: 143px; } }
@media (min-width: 821px) and (max-width: 1099px) { #montar .polx-head { min-height: 126px; } }

/* tira de prévia no celular: quadro proporcional à tela — em 390 px o kit de 9 fotos
   virava 5 linhas (913 px) dentro de uma janela de 430 px e 5 quadros saíam da caixa */
@media (max-width: 760px) {
  #frames .pol-frame                  { width: min(140px, calc(50% - 6px)); }
  #frames[data-kit="9x6"] .pol-frame  { width: min(84px, calc(33.333% - 8px)); }
  #frames[data-kit="9x6"] .pol-frame .f { height: 29.88px; }
  #frames[data-kit="tripla"] .pol-frame { width: min(112px, calc(50% - 6px)); }
}

/* barra de paginação das fotos: "Mostrando 1–6 de 9" só aparece com mais de 6 fotos e,
   em tela de 350 px para baixo, quebra em outra linha (98 → 137 px) */
@media (max-width: 350px) { #pol-pager { min-height: 137px; } }