/* ds_variants - próbniki wersji kolorystycznych na karcie produktu.
   Wymiary i obrys dziedziczą po motywie (zmienne Bootstrapa), każdą wartość
   można nadpisać zmienną --ds-variants-*. */

.ds-variants {
  --ds-variants-size: 1.5rem;
  --ds-variants-gap: .5rem;
  display: block;
  margin: .75rem 0;
}

.ds-variants__naglowek {
  margin: 0 0 .5rem;
  font-size: .875rem;
  font-weight: 600;
}

.ds-variants__biezacy {
  font-weight: 400;
}

.ds-variants__licznik {
  font-weight: 400;
  color: var(--ds-variants-muted, var(--bs-secondary-color, #767676));
}

.ds-variants__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-variants-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-variants__pozycja a {
  display: block;
  text-decoration: none;
}

.ds-variants__probnik {
  display: block;
  box-sizing: border-box;
  width: var(--ds-variants-size);
  height: var(--ds-variants-size);
  border: 1px solid var(--ds-variants-border, var(--bs-border-color, #dee2e6));
  border-radius: var(--ds-variants-radius, var(--bs-border-radius-sm, .25rem));
  outline: .125rem solid transparent;
  outline-offset: -.125rem;
  transition: outline-color .15s ease;
}

.ds-variants__pozycja a:hover .ds-variants__probnik,
.ds-variants__pozycja a:focus-visible .ds-variants__probnik {
  outline-color: var(--ds-variants-hover, var(--bs-link-hover-color, #555));
}

.ds-variants__pozycja--aktywna .ds-variants__probnik {
  outline-color: var(--ds-variants-active, var(--bs-link-hover-color, #222));
}

/* Tryb miniatur zdjęć: kafelki z okładkami rodzeństwa.
   Wiersz przewija się poziomo we własnym kontenerze, gdy kafelki się nie mieszczą. */
.ds-variants {
  max-width: 100%;
  min-width: 0;
}

.ds-variants--miniatury {
  --ds-variants-thumb: 4rem;
  --ds-variants-thumb-bg: var(--bs-light, #f6f6f6);
}

.ds-variants--miniatury .ds-variants__lista {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: .125rem .125rem .375rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.ds-variants--miniatury .ds-variants__pozycja {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.ds-variants__element {
  display: block;
  box-sizing: border-box;
  border-radius: var(--ds-variants-radius, var(--bs-border-radius-sm, .25rem));
}

.ds-variants--miniatury .ds-variants__element {
  width: var(--ds-variants-thumb);
  height: var(--ds-variants-thumb);
  overflow: hidden;
  border: 1px solid var(--ds-variants-border, var(--bs-border-color, #dee2e6));
  background: var(--ds-variants-thumb-bg);
  outline: .125rem solid transparent;
  outline-offset: 1px;
  transition: outline-color .15s ease;
}

/* Wersja bez zdjęcia: próbnik koloru wypełnia kafelek. */
.ds-variants--miniatury .ds-variants__probnik {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.ds-variants__zdjecie {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-variants--miniatury a.ds-variants__element:hover,
.ds-variants--miniatury a.ds-variants__element:focus-visible {
  outline-color: var(--ds-variants-hover, var(--bs-link-hover-color, #555));
}

.ds-variants--miniatury .ds-variants__pozycja--aktywna .ds-variants__element {
  outline-color: var(--ds-variants-active, var(--bs-link-hover-color, #222));
}

/* 1.3.2 (DW2-52): wersja niedostępna (brak stanu, sprzedaż bez stanu wyłączona) - przygaszona i przekreślona
   ukośną kreską; nadal klikalna, bo jej karta pokazuje „niedostępne” i daje alternatywy. */
.ds-variants__pozycja--brak .ds-variants__element {
  position: relative;
}

.ds-variants__pozycja--brak .ds-variants__element > * {
  opacity: .45;
}

.ds-variants__pozycja--brak .ds-variants__element::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ds-variants-brak, #8a8a8a) 50%, transparent calc(50% + 1px));
  pointer-events: none;
}