/* Rząd miniaturek – jeden poziom, bez zawijania. Na wąskich ekranach przewijanie poziome. */
.variant-image-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: nowrap;          /* jak chciałeś: zawsze w jednym rzędzie */
  overflow-x: auto;           /* żeby nic się nie ucinało na mobile */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;        /* minimalna przestrzeń dla paska przewijania */
}

/* Pojedynczy wariant: kolumna (kółko + podpis) */
.variant-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: max-content;     /* zapobiega łamaniu w zbyt wąskie kafelki */
  cursor: pointer;
}

/* Kółko na obrazek */
.thumb-circle {
  width: 100px;               /* możesz zmienić */
  height: 100px;              /* proporcja 1:1 */
  border-radius: 50%;
  border: 2px solid transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  transition: border-color .15s ease, transform .06s ease;
}

.thumb-circle:hover { transform: translateY(-1px); }
.variant-item .variant-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }

/* zaznaczenie (ten sam efekt co wcześniej) */
.variant-thumb.selected,
.variant-item.selected .thumb-circle {
  border-color: #0073aa;
}

/* Podpis pod obrazkiem – bez przycinania; zawija się w 2 linie i elipsuje */
.variant-label {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;                /* dostosuj do tła strony */
  text-align: center;
  max-width: 110px;           /* trochę szersze niż kółko, żeby dłuższe frazy się mieściły */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;      /* dwie linie; zmień na 3/4 jeśli chcesz */
  word-break: break-word;
}