* {box-sizing: border-box; margin: 0; padding: 0;}

.slider {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 50px auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: flex;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.slider img {
    width: 100%;
    flex: 0 0 100%;
    scroll-snap-align: start;
    border-radius: 15px;
    user-select: none;
    pointer-events: none;
}

.dots {
    position: absolute;
    bottom: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dots span {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dots span.active {
    background: white;
}



/* Contenitore orizzontale a scorrimento */
.strip {
  display: flex;
  flex-wrap: nowrap;        /* tutti su un rigo */
  gap: 12px;                /* spazio tra i quadrati */
  padding: 12px;
  overflow-x: auto;         /* abilita lo scroll orizzontale */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* scorrimento fluido su iOS */
  scroll-snap-type: x proximity;     /* snap “morbido” ai riquadri (opzionale) */

  /* Nasconde la scrollbar dove possibile (opzionale) */
  scrollbar-width: none;    /* Firefox */
}
.strip::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* I riquadri quadrati */
.tile {
  flex: 0 0 auto;           /* non farli crescere o andare a capo */
  width: 120px;             /* lato del quadrato (puoi usare % o clamp) */
  aspect-ratio: 1 / 1;      /* mantiene la forma quadrata */
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  display: grid;
  place-items: center;
  font: 600 16px/1.2 system-ui, sans-serif;

  /* allineamento al “snap” (opzionale) */
  scroll-snap-align: start;
}

/* Esempio responsive: riduci la dimensione su schermi piccoli */
@media (max-width: 480px) {
  .tile { width: 90px; }
}