/* ATHLECOR: galeria pionowa karty produktu (30.10.2026, wątek galerii, Adrian: „zdjęcia po lewej, więcej ich widać,
   przewijają się razem z opisem, jeden wzorzec na wszystkie karty”).
   Jeden DOM, dwa układy: od 900 px stos zdjęć w lewej kolumnie z podpisami, prawa kolumna (cena, przycisk) przyklejona;
   do 899 px pasek przewijany palcem z licznikiem, linią postępu i miniaturami.
   Opis wzorca i jak dołożyć do kolejnej strony: _CENTRALA/galeria-produktu-2026-10-30/WZORZEC.md */

/* Stary kadr ze strzałkami zostaje w DOM (lupa i skrypt karty z niego korzystają), ale go nie widać.
   Warunkiem jest obecność nowego bloku [data-gp] przed nim (pierwsze dziecko .k-gal), nie klasa, bo runtime
   potrafi przepisać atrybut class na starych węzłach. Bez skryptu klient widzi dzisiejszą galerię. */
html body .k20 .k-gal > [data-gp] ~ .k-gal__kadry,
html body .k20 .k-gal > [data-gp] ~ .k20-galnav,
html body .k20 .k-gal > [data-gp] ~ .k-gal__min { display: none !important; }
/* karty kreatyny mają na telefonie .k-gal { max-height: 180px; overflow: hidden } pod stary kadr 180 px;
   nowa galeria (390 px kadru, licznik, miniatury) musi z tego wyjść. Dwie reguły osobno: :has() dla przeglądarek,
   które je znają, klasa gp-on dla reszty (nieznany selektor unieważniłby całą listę). */
html body .k20 .k-gal.gp-on { max-height: none !important; overflow: visible !important; }
html body .k20 .k-gal:has(> [data-gp]) { max-height: none !important; overflow: visible !important; }

.gp { margin: 0; min-width: 0; }
.gp__stos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 0; padding: 0; }
.gp__stos:focus-visible { outline: 2px solid #0A0A0A; outline-offset: 4px; }
.gp__k { margin: 0; min-width: 0; }
/* kadr: kwadrat niezależny od pliku (packshot 800, plansza 1200, skan 600 x 850), więc stos ma stałą wysokość
   i nic nie skacze przy wczytywaniu */
.gp__btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #FFFFFF;
  cursor: zoom-in; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; aspect-ratio: 1 / 1;
  overflow: hidden; }
.gp__btn--skan { background: #EEEEEC; }
/* kwadrat także bez obsługi aspect-ratio (starsze Safari i WebView): wysokość z padding-top */
.gp__btn::before { content: ""; display: block; padding-top: 100%; }
.gp__btn:focus-visible { outline: 2px solid #0A0A0A; outline-offset: 3px; }
.gp__btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.gp__html { position: absolute; inset: 0; background: #000; color: #fff; display: flex; flex-direction: column;
  justify-content: center; gap: 14px; padding: 24px; text-align: left; overflow: hidden; }
/* podpis: numer w Plex Mono jak listy w serwisie (brand book: numery, nie fajki) */
.gp__c { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 0; font-size: 0.875rem; line-height: 1.35;
  color: #3A3A38; }
.gp__nr { font-family: 'IBM Plex Mono', Menlo, monospace; font-weight: 300; font-size: 0.8125rem; letter-spacing: .04em;
  color: #6C6C6C; }

/* KOMPUTER: dwie kolumny, przyklejanie. Prawa strona siatki to dwa elementy (.k-top i .k-oferta), więc sticky dostają
   .k-gal (obszar na dwa wiersze) i .k-oferta (drugi wiersz). W siatce przykleja się ta kolumna, która jest krótsza
   od swojego obszaru; element wyższy od okna prowadzi skrypt (zatrzymanie dołem przy przewijaniu w dół). */
@media (min-width: 900px) {
  /* kolumna zdjęć zajmuje dwa wiersze siatki; bez tej reguły przeglądarka rozdziela jej nadmiar wysokości na OBA wiersze
     i panel zakupu (.k-oferta, drugi wiersz) zjeżdża o ponad 1000 px pod nazwę (zmierzone 30.10: .k-top 553 -> 1582 px).
     Pierwszy wiersz ma być tak wysoki jak nazwa i opis, cały nadmiar idzie do drugiego. */
  html body .k20 .k-hero__grid.gp-siatka { grid-template-rows: auto 1fr; }
  /* --gp-gora ustawia skrypt: dół przyklejonego nagłówka (header position:fixed, 69 px na komputerze) plus 16 px */
  html body .k20 .k-hero__grid > .k-gal.gp-on,
  html body .k20 .k-hero__grid > .k-gal.gp-on ~ .k-oferta { position: sticky; top: var(--gp-gora, 16px); align-self: start; }
  .gp__pas-nav, .gp__min { display: none; }
}

/* TELEFON: pasek przewijany palcem, jeden kadr na ekran (plansze mają pismo 8,5 do 11,7 px przy 390 px,
   każde pomniejszenie zbija je poniżej 10 px, więc bez podglądu następnego kadru), „co dalej” mówią licznik i miniatury */
@media (max-width: 899px) {
  .gp__stos { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .gp__stos::-webkit-scrollbar { display: none; }
  .gp__k { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .gp__c { display: none; }
  .gp__pas-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 22px 0; }
  .gp__lic { flex: 0 0 auto; font-family: 'IBM Plex Mono', Menlo, monospace; font-weight: 300; font-size: 0.75rem;
    letter-spacing: .04em; color: #3A3A38; white-space: nowrap; }
  .gp__linia { flex: 1 1 auto; max-width: 160px; height: 2px; background: #EAEAEA; overflow: hidden; display: block; }
  .gp__linia i { display: block; height: 100%; background: #0A0A0A; }
  .gp__min { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 22px 2px;
    scroll-padding: 0 22px; }
  .gp__min::-webkit-scrollbar { display: none; }
  .gp__min button { flex: 0 0 auto; width: 64px; min-height: 48px; padding: 0; border: 1px solid #EAEAEA; border-radius: 6px;
    background: #fff; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center;
    -webkit-appearance: none; appearance: none; }
  .gp__min button[aria-current="true"] { border-color: #0A0A0A; box-shadow: inset 0 0 0 1px #0A0A0A; }
  .gp__min button:focus-visible { outline: 2px solid #0A0A0A; outline-offset: 2px; }
  .gp__min img { display: block; width: 100%; height: 46px; object-fit: contain; }
  .gp__min-t { font-family: 'IBM Plex Mono', Menlo, monospace; font-size: 0.5625rem; letter-spacing: .04em;
    text-transform: uppercase; color: #3A3A38; padding: 0 4px; text-align: center; line-height: 1.2; }
}
/* 03.11.2026, Adrian: „A, pełna szerokość”. Wariant B (kadry 86 % z podglądem następnego, ?galeria=podglad) usunięty. */
@media (prefers-reduced-motion: no-preference) {
  .gp__stos, .gp__min { scroll-behavior: smooth; }
  .gp__linia i { transition: transform 180ms ease; }
}