.cards{
  display: flex;
  gap: 5px;                 /* mobile */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  margin-bottom: 40px;
}

/* Mobile: 2 por tela (1 gap no meio) */
.cards > product-card{
  flex: 0 0 calc((100% - 5px) / 2);
}

/* Tablet */
@media (min-width: 768px){
  .cards{ gap: 7px;margin-left: 10px;}
  .cards > product-card{
    flex: 0 0 190px;
  }
}

/* Desktop */
@media (min-width: 1100px){
  .cards{ gap: 9px; }

  /* Desktop: usa a largura real do card */
  .cards > product-card{
    flex: 0 0 190px;
  }
}

/* scrollbar (opcional) */
.cards::-webkit-scrollbar{ height: 8px; }
.cards::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; }
/* Scrollbar fina e discreta */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #c5d0da;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #09f;
}