/* Trilho horizontal das seções de produtos (páginas de categoria e de produto).
   Mostra 4 por vez no desktop e 2 no celular; as setas só aparecem quando existe
   mesmo conteúdo para aquele lado. */

.product-rail-wrapper { position: relative; }

.product-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.product-rail::-webkit-scrollbar { display: none; }

/* Até 4 cartões visíveis no desktop — mas quando a seção tem menos que isso
   (--rail-count, vindo do ProductRail.tsx), eles esticam para preencher a
   fileira em vez de deixar espaço vazio à direita. O limite fica embutido na
   própria fórmula (não numa custom property à parte): as duas declarações de
   `flex` — esta e a do media query abaixo — precisam vencer inteiras uma da
   outra, e uma `--rail-visible` intermediária compartilhada pelas duas
   quebrava essa troca. Descontamos os vãos de 22px entre eles; o 0.5px a
   menos absorve o arredondamento de subpixel do navegador, que senão vaza
   uns pixels e corta o último cartão. */
.product-rail > * {
  flex: 0 0 calc((100% - 22px * (min(4, var(--rail-count, 4)) - 1)) / min(4, var(--rail-count, 4)) - 0.5px);
  min-width: 0;
}

.product-rail-nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #e5ded4;
  border-radius: 50%;
  background: #fff;
  color: #17130f;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  transition: background .2s ease;
}
.product-rail-nav:hover { background: #f4f1eb; }
/* Dentro da seção, não pendurado na borda - clicar do lado do círculo antes
   ainda acertava o fundo transparente (fora da hitbox) e parecia que o botão
   não respondia. */
.product-rail-nav.prev { left: 8px; }
.product-rail-nav.next { right: 8px; }

/* Halo invisível: soma até 16px de raio de tolerância ao redor do círculo
   visível, sem mudar o desenho. Mira imprecisa perto da borda passa a acertar
   mesmo assim. */
.product-rail-nav::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
}

@media (max-width: 900px) {
  /* Só aqui vale o snap: quem rola é o dedo, e ele agradece o alinhamento.
     No desktop o snap brigava com a animação das setas e travava a rolagem. */
  .product-rail {
    gap: 10px;
    scroll-snap-type: x proximity;
  }
  /* No celular, até 2 cartões visíveis, mesmo raciocínio: 1 vão de 10px. */
  .product-rail > * {
    flex: 0 0 calc((100% - 10px * (min(2, var(--rail-count, 2)) - 1)) / min(2, var(--rail-count, 2)) - 0.5px);
    scroll-snap-align: start;
  }
  /* No celular a rolagem com o dedo já resolve; setas só atrapalhariam. */
  .product-rail-nav { display: none; }
}