/* Seletor de acabamento: nomes legíveis e prazo por opção. */
.vammo-colors fieldset{border:0;padding:0;margin:1rem 0;min-width:0}
.vammo-colors legend{font-size:.9rem;font-weight:600;padding:0;margin-bottom:.65rem;color:#555B63}
.vammo-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.vammo-color{display:flex;align-items:center;gap:.6rem;min-width:0;min-height:54px;padding:.7rem .6rem;border:1px solid #D7DADF;border-radius:10px;background:#FFF;color:#17191D;font:inherit;font-size:.85rem;line-height:1.3;text-align:left;cursor:pointer}
.vammo-color:hover{border-color:#717780}
.vammo-color[aria-pressed=true]{border-color:#FF5A16;box-shadow:0 0 0 1px #FF5A16;background:#FFF7F2}
.vammo-color i{width:23px;height:23px;flex:0 0 23px;border:1px solid #C5C8CD;border-radius:50%}
.vammo-delivery{border-left:3px solid #FF5A16;background:#F5F6F7;padding:.8rem 1rem;font-size:.9rem;line-height:1.5;margin-top:1rem}
.vammo-photo-note{font-size:.875rem;color:#555B63;line-height:1.5;min-height:2.7em;margin:.8rem 0}
.pstage:has(.vammo-photo-note){flex-direction:column}
.pstage #stageImg{width:100%;object-fit:contain}
.pstage #stageImg[hidden]{display:none}
.vammo-photo-note[hidden]{display:none}
/* Tira de miniaturas. O CSS estava pela metade: existia a regra que pinta
   a borda da miniatura ativa, mas a miniatura nunca recebeu tamanho nem
   borda. Sem largura, cada <img> abria no tamanho natural do arquivo, e
   na Q5 isso empilhava seis fotos de 1400x934 embaixo do produto: 5.600px
   de altura so de "miniatura". Agora e uma tira de verdade. */
.gal{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:1rem}
.gal[hidden]{display:none}
.gal button{border:0;background:none;padding:0;cursor:pointer;min-width:0;flex:0 0 auto;line-height:0;border-radius:10px}
.gal button img{
  display:block;width:72px;height:54px;object-fit:contain;
  border:1.5px solid rgba(243,241,236,.16);border-radius:10px;
  background:rgba(247,248,250,.05);padding:3px;
  transition:border-color .2s,transform .2s,background .2s;
}
.gal button:hover img{border-color:rgba(243,241,236,.45);transform:translateY(-2px)}
.gal button:focus-visible img{outline:2px solid #FF5A16;outline-offset:2px}
.gal button[aria-pressed=true] img{border-color:#FF5A16;box-shadow:0 0 0 1px #FF5A16;background:rgba(255,90,22,.08)}
@media(max-width:520px){.gal{gap:.45rem}.gal button img{width:60px;height:45px}}
.detail .detail-img.vammo-detail-photo{aspect-ratio:auto}
.detail .detail-img.vammo-detail-photo img{height:auto;display:block;padding:0;object-fit:contain}
@media(max-width:520px){
 .vammo-color-grid{gap:.5rem}
 .vammo-color{flex-direction:column;text-align:center;font-size:.85rem;padding:.75rem .3rem}
 .vammo-colors legend{text-align:left}
 .vammo-delivery{text-align:left}
}

/* ============================================================
   Palco e navegação de vistas — 16/09/2026
   Estes estilos viviam só no <style> das páginas Vammo. Quando o
   módulo de cores passou a atender outros modelos, a Q5 herdou os
   botões sem o CSS: as duas setas apareciam empilhadas no meio da
   foto. Agora moram aqui, junto do módulo que as cria.
   ============================================================ */
.pstage{position:relative;touch-action:pan-y}
.spin-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  font-size:1.35rem;line-height:1;cursor:pointer;z-index:6;
  background:rgba(255,255,255,.92);color:var(--ink);
  border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(23,25,29,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .2s,border-color .2s,color .2s
}
.spin-arrow:hover{background:var(--o);color:#fff;border-color:var(--o)}
.spin-arrow:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.spin-arrow.left{left:0}
.spin-arrow.right{right:0}
.spin-badge{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  font-size:.72rem;color:var(--ink2);background:rgba(255,255,255,.9);
  border:1px solid var(--line);padding:.35rem .9rem;border-radius:100px;
  z-index:5;pointer-events:none;white-space:nowrap
}
@media(max-width:520px){
  /* No celular a foto ocupa a largura toda: as setas encostam nas
     bordas em vez de ficarem sobre o produto. */
  .spin-arrow{width:40px;height:40px;font-size:1.2rem}
  .spin-arrow.left{left:2px}
  .spin-arrow.right{right:2px}
  .spin-badge{font-size:.68rem;padding:.3rem .7rem}
}