/* 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;
  /* `safe center`: com menos produtos do que cabem numa fileira, centraliza o
     grupo em vez de deixá-lo grudado à esquerda com um vazio enorme do lado
     direito. Com produtos demais pra caber (overflow, rola de lado), o `safe`
     desiste de centralizar e volta pro alinhamento à esquerda sozinho — senão
     o `center` cortaria os primeiros produtos, inacessíveis rolando pro início
     (mesmo raciocínio já usado em .stitch-category-rail, editorial-home.css). */
  justify-content: safe center;
}
.product-rail::-webkit-scrollbar { display: none; }

/* Sempre 4 cartões de largura no desktop, mesmo quando a seção tem menos
   produtos que isso — sobra espaço vazio à direita em vez de esticar.
   Existiu aqui uma versão que esticava o cartão pra preencher a fileira
   (mais bonito com 3-4 produtos), mas com 1 produto só ele virava uma foto
   enorme, quase do tamanho da seção inteira — mesmo com um piso de 2, ainda
   grande demais. Espaço vazio é menos chamativo que uma foto desproporcional.
   Descontamos o vão de 22px entre os 4; 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 * 3) / 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 #DCDDD0;
  border-radius: 50%;
  background: #fff;
  color: #2A2718;
  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: #F3F4EC; }
/* 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, sempre 2 cartões de largura, mesmo raciocínio: 1 vão de 10px. */
  .product-rail > * {
    flex: 0 0 calc((100% - 10px) / 2 - 0.5px);
    scroll-snap-align: start;
  }
  /* No celular a rolagem com o dedo já resolve; setas só atrapalhariam. */
  .product-rail-nav { display: none; }
}