/* ATHLECOR. Warstwa reakcji i typografii, wersja 3, 06.10.2026.
   Wersja 1 celowała w klasy ze strony głównej i dlatego nie obejmowała podstron.
   Ta jest ogólna: reguły opierają się na rodzaju elementu i na jego miejscu
   w dokumencie, a nazwy klas służą tylko do doprecyzowania.
   Sprawdzona na czterech szablonach: główna, karta produktu, strona dyscypliny, artykuł.
   Do Shadow DOM (ankieta, asystent, opinie, korzyści) wchodzi dotyk-v3.js.
   Nie zmienia treści, cen, układu ani kolejności sekcji. */

:root {
  --dot-ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dot-szybko: 120ms;
  --dot-baza: 180ms;
}

/* ============================================================
   0. KROJE ZASTĘPCZE O DOPASOWANYCH METRYKACH
   Wszystkie kroje jadą na font-display: swap, więc przeglądarka rysuje
   najpierw krojem zastępczym, a potem podmienia. Zastępczy ma inne proporcje,
   więc tekst przeskakuje. To druga, obok paska zgody, przyczyna skoku układu.
   Zmierzone na żywej stronie, na napisie z polskimi znakami, przy 100 px:
     Neue Haas Unica   szerokość 3057,1   wzrost 0,75   spadek 0,25
     Helvetica Neue    szerokość 3081,6   wzrost 0,95   spadek 0,21
     Arial             szerokość 3090,7   wzrost 0,91   spadek 0,21
   Nadpisujemy metryki obu krojów zastępczych tak, żeby zajmowały dokładnie
   tyle samo miejsca co docelowy. Podmiana przestaje być widoczna w układzie.
   Pomiar po korekcie, na pełnej próbce z polskimi znakami: wysokość wiersza
   zgadza się co do piksela, szerokość różni się o mniej niż 0,01 procenta.
   ============================================================ */

@font-face {
  font-family: 'Helvetica Neue';
  src: local('Helvetica Neue'), local('HelveticaNeue');
  size-adjust: 99.2%;
  ascent-override: 75.6%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Arial';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 98.91%;
  ascent-override: 75.8%;
  descent-override: 25.3%;
  line-gap-override: 0%;
}

/* ============================================================
   1. ODPOWIEDŹ NA WCIŚNIĘCIE
   Na produkcji nie ma ani jednej reguły :active, na żadnej podstronie.
   Jedyną reakcją na dotyk jest domyślny niebieski błysk Androida,
   czyli kolor spoza palety marki.
   ============================================================ */

html body a,
html body button,
html body [role="button"],
html body summary,
html body label {
  -webkit-tap-highlight-color: transparent;
}

/* przyciski. Skala w dół, bo przycisk jest rzeczą, którą się wciska */
html body button,
html body [role="button"],
html body summary,
html body input[type="submit"] {
  transition:
    transform var(--dot-szybko) var(--dot-ease),
    background-color var(--dot-szybko) var(--dot-ease),
    color var(--dot-szybko) var(--dot-ease);
}

html body button:active,
html body [role="button"]:active,
html body summary:active,
html body input[type="submit"]:active {
  transform: scale(0.97);
}

/* odnośniki. Gaśnie krycie, bo skala na tekście w zdaniu wyglądałaby fałszywie */
html body a {
  transition: opacity var(--dot-szybko) var(--dot-ease);
}

html body a:active {
  opacity: 0.55;
}

/* duże powierzchnie: kafle, karty, wiersze FAQ, rolki.
   Przy dużym elemencie 3 procent czyta się jako skok, więc 1 procent */
html body .n-kk:active,
html body .n-kard:active,
html body .n-rolka:active,
html body .ar-karta:active,
html body .ath-tile--pick:active,
html body .hb-link__a:active,
html body .n-faq__q:active,
html body .n-dp__q:active,
html body .crv-tab:active {
  transform: scale(0.99);
  opacity: 1;
}

/* małe przyciski ikonowe. Mocniejsza skala, bo inaczej jej nie widać */
html body .crv-strz:active,
html body .n-rolki-naw button:active,
html body .n-film__dzwiek:active,
html body .lupa-btn:active {
  transform: scale(0.92);
}

/* ============================================================
   2. CELE DOTYKOWE
   Zmierzone na 375 px: główna 37 z 89, karta produktu 42 z 90,
   strona dyscypliny 52 z 120, artykuł 28 z 36.
   ============================================================ */

@media (pointer: coarse) {

  /* a. przyciski rosną same. Przycisk prawie nigdy nie stoi w środku zdania */
  html body button,
  html body [role="button"],
  html body input[type="submit"],
  html body .n-btn,
  html body .crv-cta,
  html body .crv-tab {
    /* serwis ustawia własne min-height: 40px z wyższą swoistością,
       a 44 px to podłoga, nie propozycja */
    min-height: 44px !important;
  }

  /* przyciski z samą ikoną rosną też w poziomie */
  html body .lupa-btn,
  html body .crv-strz,
  html body .n-rolki-naw button,
  html body .n-film__dzwiek,
  html body header button,
  html body .k-ile button,
  html body .k-ile input {
    min-height: 44px;
    min-width: 44px;
  }

  /* b. odnośniki w nagłówku, nawigacji i stopce. Stoją w kolumnach jeden pod
     drugim, więc rosną same. Nakładające się pola trafienia odbierałyby sobie
     dotyk. Własne reguły serwisu mają tu wyższą swoistość, stąd !important
     na dwóch własnościach i tylko w tych trzech miejscach dokumentu */
  html body header a,
  html body header button,
  html body nav a,
  html body nav button,
  html body footer a,
  html body footer button,
  html body footer p a,
  html body footer li a,
  html body footer nav a,
  html body footer nav button {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
  }

  /* c. odnośniki stojące samotnie, poza zdaniem. Rośnie pole trafienia,
     element zostaje na swoim miejscu i w swoim rozmiarze */
  html body header a,
  html body .n-link,
  html body .sj-lang,
  html body .n-ocena,
  html body .n-st__zrodlo,
  html body .k20-op__all,
  html body .k20-dowody a,
  html body .n-pasek a,
  html body .n-kk__n a,
  html body .mq-podstawy__t a,
  html body .n-rolki-wiecej,
  html body .in-cta,
  html body .crv-nazwa a,
  html body .g2__n a,
  html body .g2__wszystkie a,
  html body .hb-link__z a {
    position: relative;
  }

  html body header a::after,
  html body .n-link::after,
  html body .sj-lang::after,
  html body .n-ocena::after,
  html body .n-st__zrodlo::after,
  html body .k20-op__all::after,
  html body .k20-dowody a::after,
  html body .n-pasek a::after,
  html body .n-kk__n a::after,
  html body .mq-podstawy__t a::after,
  html body .n-rolki-wiecej::after,
  html body .in-cta::after,
  html body .crv-nazwa a::after,
  html body .g2__n a::after,
  html body .g2__wszystkie a::after,
  html body .hb-link__z a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    min-width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

}

/* ============================================================
   3. NAJMNIEJSZE TEKSTY
   Pasek dostawy miał 9 px, opisy w kartach produktów 13 px przy
   interlinii 1,35. Token nadpisu to 11 px, token tekstu to 1,55.
   ============================================================ */

html body .sc-interp {
  font-size: 11px;
  letter-spacing: 0.08em;
}

@media (max-width: 760px) {
  html body .g2__korz {
    font-size: 14px;
    line-height: 1.5;
  }
  html body .g2__info,
  html body .crv-olimp {
    font-size: 13px;
    line-height: 1.5;
  }
  html body .n-czlowiek__tytul {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* ============================================================
   4. MATERIAŁ W NAGŁÓWKU: ŚWIADOMIE NIE ROBIMY
   Apple stawia w tym miejscu warstwę szkła, pod którą przejeżdża treść.
   System marki mówi wprost coś innego: "brand jest płaski i precyzyjny,
   głębokość niesie kreska 1 px". Brand book od 06.10 jest nadrzędny.
   Zostawiamy białą belkę z kreską. Przywrócenie szkła to trzy deklaracje:
   background rgba(255,255,255,.82) i backdrop-filter blur(14px) saturate(140%)
   na html body header, oba z !important, bo nagłówek ma styl w atrybucie.
   ============================================================ */

/* ============================================================
   5. HOVER NA DOTYKU
   Żadna z reguł :hover na produkcji nie jest osłonięta zapytaniem
   o rodzaj wskaźnika, więc stan najechania zostaje na telefonie
   przyklejony do ostatnio dotkniętego elementu.
   ============================================================ */

@media (hover: none) {
  html body .ath-tile--pick:hover .ath-tile__img { filter: none; }
  html body .ath-tile--pick:hover .ath-h3 { color: inherit; }
  html body #athlecor60 .option:hover { transform: none; background: inherit; }
  html body .n-kk__ujecie:hover { border-color: inherit; }
  html body .n-dp__taby button:hover,
  html body .n-dp__blisko:hover,
  html body .n-rolki-naw button:hover { border-color: inherit; }
}

/* ============================================================
   6. OGRANICZONY RUCH
   Reakcja zostaje, znika tylko przesunięcie i skala.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html body *:active { transform: none !important; }
  html body button,
  html body [role="button"],
  html body a { transition-duration: 1ms; }
}

/* ============================================================
   7. STAN NAJECHANIA I WYBORU, KTÓRYCH BRAKOWAŁO
   a) Główny przycisk „Przejdź do produktów i zestawów” nie miał
      żadnej reakcji na najechanie. Pozostałe czarne przyciski serwisu
      rozjaśniają się do #2A2A28, więc ten dostaje to samo.
   b) Filtry na liście produktów trzymały czarne tło na pierwszym
      przycisku, bo tło ustawia skrypt raz i już go nie zdejmuje.
      Wiążemy wygląd z aria-pressed, który jest prowadzony poprawnie.
   ============================================================ */

@media (hover: hover) {
  html body .n-btn:hover,
  html body .hb-cta__b:hover,
  html body .g2__dodaj:hover,
  html body .n-rec__dodaj a:hover {
    background: #2a2a28;
  }
  html body .n-btn--ghost:hover {
    background: #f2f2ef;
  }
}

html body .kt-kat button[aria-pressed="true"] {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border-color: #0a0a0a !important;
}

html body .kt-kat button[aria-pressed="false"] {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: #d9d9d9 !important;
}

@media (hover: hover) {
  html body .kt-kat button[aria-pressed="false"]:hover {
    border-color: #0a0a0a !important;
  }
}

/* ── 8. CZARNY TEKST NA CZARNYM TLE PRZY NAJECHANIU ──────────────────
   Zgłosił Adam Kuzański 06.10. Serwis ma globalną regułę a:hover{color:#0a0a0a}.
   Każdy ciemny przycisk, który jest odnośnikiem, traci przy najechaniu biały
   tekst i robi się czarny na czarnym. Zmierzone: kontrast spada z 19 do 1,0.
   Znalezione na pięciu stronach i w siedmiu różnych klasach, w tym w jednym
   odnośniku bez klasy, więc nie da się tego naprawić listą nazw.
   Skrypt oznacza odnośniki o ciemnym tle atrybutem, reguła trzyma biel. */

@media (hover: hover) {
  html body a[data-dot-ciemny]:hover,
  html body a[data-dot-ciemny]:focus-visible { color: #ffffff; }
}

/* ── 9. PUSTY KONTENER ZGÓD ZJADA KLIKNIĘCIA ─────────────────────────
   Zgłosił Adam Kuzański 06.10: „guziki przestały działać” na produkty.html,
   Windows, Chrome i DuckDuckGo. Przyczyna: <div id="athlecor-cookies"> zostaje
   w dokumencie po schowaniu paska, dalej jest position: fixed przy dole ekranu,
   ma z-index 9000 i pointer-events: auto, a przy tym jest przezroczysty i pusty.
   Zmierzone na produkty.html: pas 1920 na 109 px nad dolną krawędzią okna
   przechwytywał kliknięcia w 8 przycisków, w tym „Dodaj do koszyka”
   i wybór wariantu. Przy 1280 px w 4 przyciski.

   Kontener nigdy nie powinien łapać kliknięć sam z siebie, tylko jego treść. */

/* 15.10.2026: trzy reguły tej sekcji usunięte. Pasek zgody rysuje się w shadow DOM, więc dla CSS kontener był
   zawsze pusty: :empty chowało pasek, a pointer-events:none wyłączało jego przyciski. Od 06.10 nikt nie mógł dać
   zgody na stronach serwisu. analytics.js po wyborze usuwa kontener (remove()), więc nie zostaje pusty pas. */