/* "Ver todos" v2 — listagens de veiculos (task 17tjyy3gu2p, 29/09)
   v2: min-height 44px (alvo de toque, laudo designer-revisor 29/09), [hidden] explicito.
   Pedido do operador: cliente tem preguica de clicar pagina 1/2/3, quer ver tudo numa
   tacada so, sem URL nova (zero risco de conteudo duplicado no Google). Carregado SO
   nas mesmas 2 rotas da categoria-premium (taxonomia categoria + product_cat) — home,
   anuncio e institucionais ficam de fora (ver jm_enqueue_ver_todos_assets() em
   functions.php). Tokens de DESIGN.md categoria-premium §6: #940002 primario, sem
   gradiente, motion translateY(-2px)/150ms ease-out. Botao discreto (outline), nao e um
   CTA do tamanho do WhatsApp.
   Correcao CLS (29/09, ressalva HIGH do designer-revisor, laudo v2): o texto do botao
   troca ("Ver todos os N veiculos" -> "Carregando..." -> "Carregando... X de N" ->
   "Continuar carregando (X de N)") e o paragrafo de status aparece/some — sem largura e
   altura reservadas isso empurrava o bloco de descricao/filtro logo abaixo (CLS ~0,45-0,48
   no desktop). Fix: min-width fixo no label (nowrap, sem quebra de linha), status sempre
   ocupando a mesma altura de linha (nunca colapsado por :empty), e o botao "grade"
   (o que fica colado no bloco de descricao) escondido no fim via visibility, nao via
   display:none — preserva o espaco em vez de encolher o wrap. */

.jm-ver-todos-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:100%;
  padding:28px 0;
  text-align:center;
}

.jm-ver-todos-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff;
  color:var(--red-1);
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  min-height:44px;
  padding:13px 26px;
  border:1.5px solid var(--red-1);
  border-radius:999px;
  cursor:pointer;
  transition:transform .15s ease-out, background .15s ease-out, color .15s ease-out;
}

.jm-ver-todos-btn:hover,
.jm-ver-todos-btn:focus-visible{
  background:var(--red-1);
  color:#fff;
  transform:translateY(-2px);
}

.jm-ver-todos-btn:disabled{
  opacity:.6;
  cursor:default;
  transform:none;
}

.jm-ver-todos-btn svg{
  flex-shrink:0;
  transition:transform .2s ease-out;
}

.jm-ver-todos-btn[data-state="loading"] svg{
  animation:jm-ver-todos-spin 0.8s linear infinite;
}

@keyframes jm-ver-todos-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Correcao CLS: largura do texto do botao fixa (nunca quebra linha, nunca redimensiona
   o botao quando o texto troca entre os 4 estados). */
.jm-ver-todos-label{
  display:inline-block;
  min-width:230px;
  white-space:nowrap;
  text-align:center;
}

.jm-ver-todos-status{
  font-size:12.5px;
  font-weight:600;
  color:var(--dark-3);
  opacity:.75;
  line-height:1.3;
  min-height:1.3em;
}

.jm-ver-todos-wrap[hidden]{
  display:none;
}

/* Correcao CLS: o botao "grade" some no fim (finish()) so visualmente — mantem o espaco
   que já ocupava, pra nao encolher o wrap e empurrar o bloco de descricao/filtro logo
   abaixo dele. */
.jm-ver-todos-btn[hidden]{
  visibility:hidden;
  pointer-events:none;
}

.jm-ver-todos-btn[data-state="error"]{
  background:var(--red-1);
  color:#fff;
}

/* Botao logo abaixo da grade da 1a pagina (dentro de .vehicles-content) */
.vehicles-content .jm-ver-todos-wrap{
  padding-top:32px;
}

@media (max-width:760px){

  .jm-ver-todos-btn{
    width:100%;
    justify-content:center;
    min-height:48px;
    padding:14px 16px;
  }

  .jm-ver-todos-label{
    min-width:0;
    width:100%;
  }

}