/* =========================================================================
   AnonShield — Vitrine de softwares (faixa que desliza)
   =========================================================================
   Onde: pagina de produto, embaixo da imagem (o espaco que era das avaliacoes
   do dono anterior). Mostra os outros softwares da MESMA categoria.
   Gerado por: scripts/gerar_produto.py   |  Comportamento: vitrine.js

   Papel na pagina, para nao repetir o "You may also like":
     vitrine        -> descoberta visual, MUITOS itens, so imagem + nome
     You may also like -> 4 cards com preco e botao (comparacao/decisao)

   As artes de produto JA sao renders 3D em perspectiva. Por isso nada de
   rotateY/perspective aqui: somaria duas perspectivas e distorceria a arte
   (e transform animado foi o que causou cintilacao na secao da home).
   ========================================================================= */

.as-vit {
  --as-borda: #E2E7EA;
  --as-superficie: #F4F5F7;
  --as-tinta: #132A36;
  --as-sub: #5B6B78;
  /* O vao entre a imagem do produto e a faixa era ~49px, e só 20px eram meus:
     o resto e a margem que o tema poe no widget da galeria. Margem negativa
     puxa a faixa para dentro dessa folga (sobra ~20px, respirando sem afastar).
     Ajuste aqui se quiser mais perto (-16px) ou mais longe (0). */
  margin: -8px 0 4px;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.as-vit__tit {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--as-sub);
  margin: 0 0 10px;
}

/* =========================================================================
   O CORREDOR
   -------------------------------------------------------------------------
   Antes cada caixa tinha a propria moldura branca, o que criava um serrilhado
   de bordas competindo entre si. Agora a moldura e UMA, envolvendo a faixa
   inteira, e as artes ficam soltas por dentro — le como um trilho.

   A mascara nas pontas faz os itens surgirem e desaparecerem nas bordas do
   corredor, em vez de serem cortados na seco. Serve tambem de dica visual de
   que ha mais conteudo para o lado.
   ========================================================================= */
.as-vit__pista {
  gap: 12px;
  /* o body do site e BRANCO (medido), entao corredor branco se dissolvia no
     fundo. #F4F5F7 e a superficie que o proprio tema usa no quadro das imagens
     dos cards: destaca o trilho sem virar um bloco cinza.
     Alternativa um tom mais fria, tambem da paleta: #EEF3F6. */
  background: var(--as-superficie);
  border: 1px solid var(--as-borda);
  border-radius: 14px;
  padding: 10px 14px;
  /* o item levanta 2px no hover: a folga vertical evita corte */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px,
                      #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px,
              #000 calc(100% - 16px), transparent 100%);
  /* esconde a barra de rolagem sem perder a rolagem em si */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* nao "puxar" a pagina ao chegar no fim da pista no celular */
  overscroll-behavior-x: contain;
  cursor: grab;
}
.as-vit__pista::-webkit-scrollbar { display: none; }

/* MAOZINHA DE ARRASTO EM TODA A REGIAO.
   Cada item e um <a>, e o tema aplica cursor:pointer nos links — o que vencia
   sobre as caixas e dava a impressao de "so clicavel". Marcando os filhos com
   !important, a faixa toda comunica "me arraste"; o clique parado continua
   abrindo o produto. */
.as-vit__pista,
.as-vit__pista a,
.as-vit__pista span,
.as-vit__pista img { cursor: grab !important; }

.as-vit__pista[data-arrastando="1"],
.as-vit__pista[data-arrastando="1"] a,
.as-vit__pista[data-arrastando="1"] span,
.as-vit__pista[data-arrastando="1"] img { cursor: grabbing !important; }

.as-vit__item {
  display: block;          /* <a> inline deixava a caixa e o nome desalinhados */
  flex: 0 0 auto;
  width: 108px;
  text-decoration: none;
  color: inherit;
  /* arrastar a faixa nao deve selecionar texto nem "pegar" a imagem */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.as-vit__cx {
  display: block;          /* era <span> inline: a borda "vazava" em listras */
  /* sem moldura propria: quem molda agora e o corredor */
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;        /* a arte nunca passa por cima do canto arredondado */
  transition: transform .15s, box-shadow .15s;
}
.as-vit__item:hover .as-vit__cx {
  transform: translateY(-2px);
  /* sombra contida: 'overflow-x:auto' na pista faz o navegador recortar tambem
     na vertical, e sombra alta apareceria cortada na borda do corredor */
  box-shadow: 0 3px 8px rgba(10, 40, 60, .16);
}
/* -------------------------------------------------------------------------
   SEM SUBLINHADO / SEM REALCE AO PRESSIONAR
   O tema aplica text-decoration nos estados :hover/:active/:focus do link. O
   inline no <a> cobria o estado normal, mas o NOME e um elemento filho e era
   alcancado nesses estados — dai o sublinhado preto ao pressionar. Aqui zeramos
   em todos os estados, no link e nos descendentes.
   ------------------------------------------------------------------------- */
.as-vit__pista a,
.as-vit__pista a:link,
.as-vit__pista a:visited,
.as-vit__pista a:hover,
.as-vit__pista a:active,
.as-vit__pista a:focus,
.as-vit__pista a *,
.as-vit__pista a:hover *,
.as-vit__pista a:active *,
.as-vit__pista a:focus * { text-decoration: none !important; }

/* arrastar nao deve pintar texto de azul (selecao) nem piscar no toque */
.as-vit__pista,
.as-vit__pista * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}
.as-vit__pista ::selection { background: transparent; }

/* foco: some no clique de mouse, PERMANECE para quem navega por teclado
   (:focus-visible so dispara em teclado — remover isso deixaria o site
   inutilizavel sem mouse) */
.as-vit__item:focus { outline: none !important; }
.as-vit__item:focus-visible .as-vit__cx {
  outline: 2px solid #004C6D;
  outline-offset: 2px;
}

.as-vit__cx img {
  display: block;
  width: 100%;
  height: auto;
  /* a arte e quadrada; manter proporcao evita "pular" no carregamento */
  aspect-ratio: 1 / 1;
  object-fit: contain;
  /* o navegador arrasta imagem por padrao; isso atrapalha puxar a faixa */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;    /* o clique/arrasto e do <a>, nao da imagem */
}

.as-vit__nm {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--as-tinta);
  text-align: center;
  /* nome longo nao empurra o layout */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* quem pediu menos animacao no sistema: nada desliza (o JS tambem respeita),
   mas a pista continua rolavel na mao */
@media (prefers-reduced-motion: reduce) {
  .as-vit__cx { transition: none; }
  .as-vit__item:hover .as-vit__cx { transform: none; }
}

@media (max-width: 480px) {
  .as-vit__item { width: 96px; }
}