/*
 * Miniatury galerii karty produktu na telefonie: jeden wiersz zamiast siatki (1.26.0).
 *
 * Motyw stawia na telefonie siatke 4 kolumn, wiec juz piate zdjecie spada do drugiego
 * wiersza i spycha cene w dol. Tutaj:
 *   1-4 zdjecia  - bez zmian (cwiartki szerokosci),
 *   5 zdjec      - wszystkie w jednym wierszu, nic nie jest schowane,
 *   6 i wiecej   - pasek przewijany w bok; widac 4,5 miniatury, wiec UCIETA polowka
 *                  mowi "jest wiecej", do tego wygaszenie krawedzi i strzalka.
 * Liczbe zdjec czyta :has(), bez zmiany szablonu. Karta produktu (.product__container) i szybki
 * podglad (.quickview) - ten sam szablon galerii (od 2026-09-22; wczesniej podglad lamal 5 zdjec
 * na 4 + 1, bo plik ladowal sie tylko na karcie produktu, a podglad dziedziczy zasoby listingu).
 */
@media (max-width: 767.98px) {
  :is(.product__container, .quickview) .product__thumbnails { --abf-tg: .5rem; position: relative; }
  :is(.product__container, .quickview) .product__thumbnails-list {
    display: flex; gap: var(--abf-tg); margin: 0; padding: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  :is(.product__container, .quickview) .product__thumbnails-list::-webkit-scrollbar { display: none; }
  :is(.product__container, .quickview) .product__thumbnails-list > * { flex: 0 0 calc((100% - 3 * var(--abf-tg)) / 4); min-width: 0; }
  :is(.product__container, .quickview) .product__thumbnails-list:has(> :nth-child(5):last-child) > * { flex-basis: calc((100% - 4 * var(--abf-tg)) / 5); }
  :is(.product__container, .quickview) .product__thumbnails-list:has(> :nth-child(6)) > * { flex-basis: calc((100% - 4 * var(--abf-tg)) / 4.5); }

  /* wygaszenie krawedzi, za ktora cos jeszcze jest (klasy ustawia gallery-thumbs.js) */
  :is(.product__container, .quickview) .abf-thumbs--right .product__thumbnails-list {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  :is(.product__container, .quickview) .abf-thumbs--left .product__thumbnails-list {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  }
  :is(.product__container, .quickview) .abf-thumbs--left.abf-thumbs--right .product__thumbnails-list {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  }

  .abf-thumbs-arrow {
    position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%;
    background: #fff; color: #222; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); cursor: pointer;
  }
  .abf-thumbs-arrow[hidden] { display: none; }
  .abf-thumbs-arrow--next { right: .25rem; }
  .abf-thumbs-arrow--prev { left: .25rem; }
  .abf-thumbs-arrow svg { width: 1.25rem; height: 1.25rem; }

  /* licznik "2 / 7" na zdjeciu glownym - lewy dol (flagi sa u gory, lupa w prawym dole) */
  .abf-gallery-count {
    position: absolute; left: .5rem; bottom: .5rem; z-index: 10;
    padding: .125rem .5rem; border-radius: 1rem; background: rgba(0, 0, 0, .6); color: #fff;
    font-size: .8125rem; line-height: 1.5; font-variant-numeric: tabular-nums; pointer-events: none;
  }
}
@media (min-width: 768px) {
  .abf-thumbs-arrow, .abf-gallery-count { display: none; }
}