/**
 * PRO Shade Finder - panel klienta.
 * Jezyk wizualny producenta: monochrom, promien 0, hairline 1px, bez cieni.
 * Kroj pisma dziedziczy z motywu sklepu: modul deklarowal Poppins, ktorego
 * nigdy nie ladowal, wiec klient i tak widzial kroj zapasowy - a kreator ma
 * wygladac jak reszta sklepu, w ktorym stoi.
 */

.psf {
  --psf-ink: #000;
  --psf-soft: #616161;
  --psf-line: #e5e5e5;
  --psf-grey: #f0f0f0;
  --psf-paper: #fff;
  --psf-off: #d9d9d9;
  /* Tor paska postepu: ta sama szarosc, co pod paskiem "do darmowej dostawy"
     w sklepie producenta (theme.css, .free-shipping-progress-container). */
  --psf-track: #f3f3f3;
  /* Czerwien etykiet bledu. #f00 na bieli ma kontrast 4.0:1 (ponizej AA dla
     malego tekstu), wiec przyciemniona. */
  --psf-err: #d40000;
  /* Znacznik wyboru wprost z systemu producenta: SZARY KWADRAT z czarna okragla
     kropka po zaznaczeniu, ten sam ksztalt dla wyboru pojedynczego i
     wielokrotnego. Wariant biurkowy 14 pikseli, mobilny 20 - przelaczany
     nizej w zapytaniu o szerokosc. */
  --psf-check: 14px;
  --psf-check-dot: 6px;
  --psf-check-dot-off: 4px;
  /* Kadr kafelka zdjecia (szerokosc x wysokosc). Ta sama proporcja liczy
     powiekszenie zdjec po stronie serwera (PanelService::PHOTO_FRAME_RATIO =
     116 / 147) - zmiana tu wymaga zmiany tam. */
  --psf-tile-w: 116px;
  --psf-tile-h: 147px;
  /* aspect-ratio przyjmuje LICZBY, nie dlugosci - var(--psf-tile-w) / var(--psf-tile-h)
     bylo nieprawidlowe i przegladarka odrzucala cala deklaracje (kadr slidera na
     telefonie mial 0 px wysokosci). Proporcja osobno, te same liczby. */
  --psf-tile-ratio: 116 / 147;

  background: var(--psf-paper);
  color: var(--psf-ink);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  /* Strona CMS motywu bywa justowana (classic: .page-cms) - kreator wyrownuje
     do poczatku wiersza, inaczej odpowiedzi mialy rozciagniete odstepy. */
  text-align: start;
  border: 1px solid var(--psf-line);
}

.psf *, .psf *::before, .psf *::after { box-sizing: border-box; }
/* przycisk glowny ma wlasny kolor, reszta dziedziczy po panelu */
/* Niska swoistosc (0,1,1) - inaczej przebijalaby proste hover/on (czarne tlo +
   biala czcionka) i tekst zostawalby ciemny na ciemnym. .psf-cta ma wlasny
   kolor z regul o wyzszej swoistosci. */
.psf button { font-family: inherit; font-size: inherit; color: inherit; }
/* Obrys fokusu: ostry, 2 px, tylko przy nawigacji klawiatura. Po kliknieciu
   myszka motyw sklepu (Bootstrap: button:focus { outline: 5px auto }) rysowal
   na przyciskach panelu obrys "auto", ktory Chrome maluje z ZAOKRAGLONYMI
   rogami - system projektowy producenta nie ma zaokraglen (wlasciciel, 17 wrzesnia).
   Swoistosc (0,2,1) po to, zeby wygrac z regulami motywu na button:focus. */
.psf[data-psf] :focus-visible { outline: 2px solid var(--psf-ink); outline-offset: 2px; }
.psf[data-psf] :focus:not(:focus-visible) { outline: none; }
/* Dotyk: iOS Safari podswietla stukniety element ZAOKRAGLONYM cieniem - wylaczone,
   stan wybrania i tak pokazuje obramowanie i znacznik. */
.psf[data-psf] button, .psf[data-psf] a, .psf[data-psf] [tabindex] { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .psf *, .psf *::before, .psf *::after { transition-duration: 0.01ms !important; }
}

/* Obie fazy na tym samym bialym tle panelu (wlasciciel, wrzesien 2026: bez
   szarego tla w zadnej wersji). --psf-grey zostaje tylko pod zdjeciami
   i pod notka. */
.psf-inner { padding: 28px 24px 24px; }

.psf-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.psf-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.psf-progress span { font-size: 10px; color: var(--psf-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Pasek jak pasek "do darmowej dostawy" sklepu producenta (kolory: tor #f3f3f3,
   wypelnienie czarne), wysokosc 2 piksele (wlasciciel). Konce proste, jak
   reszta systemu (promien 0). */
.psf-progress i { flex: 1; height: 2px; background: var(--psf-track); position: relative; display: block; }
/* Wypelnienie skaluje sie transformacja (kompozytor), nie szerokoscia
   (uklad w kazdej klatce przejscia); JS podaje scaleX(ulamek). */
.psf-progress i b { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--psf-ink); transform-origin: left center; transition: transform 0.25s ease; }


/* Motyw sklepu potrafi stylowac elementy po identyfikatorze strony (u producenta
   `#cms h2` daje 14 px z odstepem 20 px, `#main #content a` wage 500), a taki
   selektor przebija klasy kreatora bez wzgledu na kolejnosc arkuszy. Typografia
   naglowka i waga odsylaczy sa zamkniete na stale (!important): kreator ich
   nigdzie nie zmienia, a bez tego pytanie na stronie CMS producenta malalo. */
.psf h2 { margin: 0 0 4px; margin-top: 0 !important; margin-bottom: 4px !important; padding: 0 !important; font-size: 22px !important; font-weight: 500 !important; line-height: 1.2 !important; text-transform: none !important; color: var(--psf-ink) !important; }
.psf a { font-weight: inherit !important; }
/* Rozmiar wprost, nie z reguly p motywu: classic daje akapitom 15 px, motyw producenta
   12 px - panel ma wygladac tak samo w kazdym motywie (DS: tekst 12 px). */
.psf .psf-lead { margin: 0 0 18px; font-size: 12px; line-height: 1.5; color: var(--psf-soft); }

/* Odpowiedzi leza w siatce, nie w jednej kolumnie: przy szerokim panelu
   mieszcza sie dwie albo trzy obok siebie, przy waskim schodza do jednej.
   Kazda jest osobnym kafelkiem z hairline, promien zostaje zerowy. */
.psf-options {
  display: grid;
  /* min(280px, 100%): na bardzo waskim ekranie (320 px) kolumna nie moze byc
     szersza niz panel - inaczej kafelki wystawaly o kilka pikseli poza prawa
     krawedz i panel dostawal poziome przewijanie. */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 10px;
}
/* Wszystko w kafelku wysrodkowane w pionie: nazwa i opis odpowiedzi stoja
   dokladnie na srodku probki koloru albo zdjecia, znacznik tez. Wczesniej
   tresc szla do gory (flex-start), a probka 64 px stala na srodku - tekst
   wychodzil 6 do 16 pikseli nad srodkiem grafiki. */
.psf-option {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px;
  background: var(--psf-paper); border: 1px solid var(--psf-line);
  text-align: left; cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.psf-option:hover { border-color: var(--psf-ink); }
/* Zaznaczenie rysujemy ramka wewnetrzna, wiec kafelek nie zmienia rozmiaru. */
.psf-option.on { border-color: var(--psf-ink); box-shadow: inset 0 0 0 1px var(--psf-ink); }
.psf-option > span { flex: 1; min-width: 0; }

/* Znacznik wyboru stoi z PRAWEJ: kwadrat o promieniu 0 (system projektowy producenta), po
   zaznaczeniu ciemna kropka - ten sam przy wyborze jednokrotnym i
   wielokrotnym; o trybie mowi rola radio/checkbox i podtytul pytania.
   Wielkosc jak we wzorcu, 18 pikseli. */
.psf-mark {
  width: var(--psf-check); height: var(--psf-check); flex: none; margin-left: auto; align-self: center;
  border-radius: 0; position: relative; background: var(--psf-line);
  transition: background 0.2s ease;
}
.psf-option:hover .psf-mark, .psf-card--choice:hover .psf-mark { background: var(--psf-off); }
.psf-option.on .psf-mark::after, .psf-card--choice.on .psf-mark::after {
  content: ""; position: absolute;
  left: var(--psf-check-dot-off); top: var(--psf-check-dot-off);
  width: var(--psf-check-dot); height: var(--psf-check-dot);
  border-radius: 50%; background: var(--psf-ink);
}

/* Probka koloru: kwadrat, bo promien w tym systemie jest zerowy. */
.psf-swatch {
  width: 24px; height: 24px; flex: none; align-self: center;
  box-shadow: inset 0 0 0 1px var(--psf-line);
}

.psf-foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.psf .psf-cta {
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 50px; padding: 0 28px; background: var(--psf-ink); border: 0; color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; transition: background 0.2s ease;
}
.psf .psf-cta:hover { background: #202020; }
.psf .psf-cta[disabled] { background: var(--psf-off); color: var(--psf-soft); cursor: default; }
/* Przycisk koszyka jak "Dodaj do koszyka" na karcie produktu sklepu producenta: 60 px. */
.psf .psf-cta--block { width: 100%; height: 60px; }
/* Tresc przycisku koszyka jak w sklepie producenta: "Dodaj do koszyka | cena",
   po 10 px z kazdej strony kreski. Jeden element w flexie, zeby gap
   przycisku nie rozsuwal czlonow. */
.psf .psf-cta-label { display: inline-flex; align-items: center; white-space: nowrap; }
.psf .psf-cta-sep { padding: 0 10px; }
.psf-link {
  background: none; border: 0; padding: 0 0 2px; border-bottom: 1px solid var(--psf-ink);
  /* Jawny kolor - inaczej <a> (np. "Zobacz produkt") bierze domyslny
     niebieski kolor linku przegladarki zamiast czerni producenta. */
  color: var(--psf-ink); text-decoration: none;
  cursor: pointer; line-height: 1; transition: color 0.2s ease, border-color 0.2s ease;
}
.psf-link:link, .psf-link:visited { color: var(--psf-ink); }
.psf-link:hover { color: var(--psf-soft); border-bottom-color: var(--psf-soft); }
/* Na dotyku odsylacz o wysokosci 15 px dostaje niewidoczny obszar stukniecia
   ok. 44 px (pseudoelement); wyglad, obrys fokusu i podkreslenie bez zmian. */
@media (pointer: coarse) {
  .psf-link { position: relative; }
  .psf-link::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
  .psf-trail-i { padding-top: 10px; padding-bottom: 10px; }
}
/* Odnosnik w stopce to <button>, a przycisk wysrodkowuje tekst: gdy w waskim
   panelu zawija sie na dwie linie albo stopka go rozciaga, wygladal jak
   wysrodkowany podpis. Ma czytac sie jak zwykly odnosnik, od lewej. */
.psf-foot .psf-link { text-align: left; }

/* Wstep i objasnienie na cala szerokosc panelu (wlasciciel, 20 wrzesnia): kreska
   objasnienia konczyla sie w polowie panelu przez dawne max-width. */
.psf-explain {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--psf-line);
  font-size: 11px; line-height: 1.6; color: var(--psf-soft);
}

/* karty produktow i wyniku */
.psf-cards { display: grid; }
.psf-card {
  display: grid; grid-template-columns: var(--psf-tile-w) 1fr auto; gap: 16px; align-items: center;
  width: 100%; padding: 12px; background: var(--psf-paper); border: 1px solid var(--psf-line);
  margin-bottom: -1px; position: relative; text-align: left; cursor: pointer;
  transition: border-color 0.2s ease;
}
.psf-card:hover, .psf-card.on { border-color: var(--psf-ink); z-index: 1; }
/* Karta bywa odsylaczem (<a class="psf-card">: akcesoria, inne produkty,
   uwaga o kolorze) - bez tego brala niebieski kolor linku przegladarki. */
.psf a.psf-card, .psf a.psf-card:link, .psf a.psf-card:visited, .psf a.psf-card:hover { color: inherit; text-decoration: none; }
.psf-card--static { cursor: default; }
/* Karta do wyboru na ekranie wyniku (dwie propozycje): znacznik jak przy
   odpowiedziach, w prawym gornym rogu; zaznaczenie to czarne obramowanie
   1 px (wlasciciel: nie grubsze), rozmiar karty bez zmian. Zaznaczona karta
   idzie do koszyka. */
.psf-card--choice { cursor: pointer; }
.psf-card--choice.on { border-color: var(--psf-ink); }
.psf-card--choice .psf-mark { position: absolute; top: 12px; right: 12px; margin: 0; }
.psf[data-psf] .psf-card--choice:focus-visible { outline: 1px solid var(--psf-ink); outline-offset: 2px; }
.psf-card-media { width: var(--psf-tile-w); height: var(--psf-tile-h); background: var(--psf-grey) center/cover no-repeat; box-shadow: inset 0 0 0 1px var(--psf-line); }
/* Zdjecie produktu bez obrysu. Hairline zostaje przy probce koloru, bo
   bardzo jasny odcien bez niego znika na bialym tle. */
.psf-card-media--photo { box-shadow: none; }
/* Kafelki karty wyniku: najpierw probka wygranego odcienia, potem zdjecia
   kombinacji z karty produktu (u producenta opakowanie, rozmaz odcienia,
   zdjecie na twarzy) obok siebie, kazdy w kadrze 116x147, bez obrysow.
   Kafelki PRZYLEGAJA do siebie (wlasciciel: obok siebie, to wazne) i od
   641 px stoja w jednym rzedzie - nie zawijaja sie. Na szerokim ekranie
   tresc (numer odcienia, pod nim nazwa produktu, cena) stoi PO PRAWEJ od
   kafelkow; na wezszym (do 1024 px) schodzi pod nie, a na telefonie kafelki
   stoja dwa plus dwa (wlasciciel), kazdy na polowe szerokosci karty, a przy
   nieparzystej liczbie kafelkow jako jeden kadr-slider z listwami. Po
   najechaniu na KAFELEK jego zawartosc rosnie o 20 procent wewnatrz kadru -
   osobno kazdy, uklad sie nie rusza.
   Bez zaokraglen i cieni, jak reszta systemu. */
.psf-card--tiles { grid-template-columns: auto minmax(120px, 1fr) auto; gap: 12px 16px; }
.psf-card-tiles { display: flex; flex-wrap: nowrap; gap: 0; }
.psf-card-tile { display: block; width: var(--psf-tile-w); height: var(--psf-tile-h); flex: none; overflow: hidden; background: var(--psf-grey); }
.psf-card-tile > * { display: block; width: 100%; height: 100%; transition: transform 0.3s ease; }
.psf-card-tile > .psf-card-media { box-shadow: none; }
/* --psf-fit (z serwera, >= 1) wycina biale pasy miniatury PrestaShop, zeby
   zdjecia naprawde przylegaly; powiekszenie po najechaniu mnozy sie z nim. */
/* Wymiary jawnie i na stale: edytor stron (.elementor img { height: auto }) i motyw
   (#product .elementor img { width: 100% }) inaczej rozjezdzaly kafelek. */
.psf-card-tile > img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transform: scale(var(--psf-fit, 1)); }
/* Tylko przy prawdziwym najechaniu: na dotyku emulowany hover zostawal po
   stuknieciu i zdjecie stalo powiekszone do nastepnego stukniecia. */
@media (hover: hover) and (pointer: fine) {
  .psf-card-tile:hover > * { transform: scale(1.2); }
  .psf-card-tile:hover > img { transform: scale(calc(var(--psf-fit, 1) * 1.2)); }
}
/* Listwy slidera 1:1 z M1/M2 PRO Sales Booster (.psb-shot-nav / .psb-shot-dot):
   NA zdjeciu, od lewej krawedzi kadru, 30 px od dolu, biale polprzezroczyste
   kreski 2 px z numerem nad kazda; aktywna pelna biel, po najechaniu 85%;
   pasek postepu (::before) wypelnia aktywna kreske w czasie jednego slajdu
   (--psf-shot-delay ze slidera), biegnie tylko przy klasie is-playing.
   Kreski od lewej jak tam (75 px, najwyzej 22vw, odstep 10 px); gdy kadr
   jest za waski na piec kresek (kadr karty jest wezszy niz look w M1/M2),
   kurcza sie rowno, zeby zmiescic sie do prawego marginesu. Na szerokim
   ekranie ukryte (kafelki stoja w rzedzie). */
.psf-shot-nav { display: none; position: absolute; left: 28px; right: 28px; bottom: 30px; z-index: 3; justify-content: flex-start; gap: 10px; }
.psf-shot-dot { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 1 75px; min-width: 0; max-width: 22vw; position: relative; padding: 0; border: 0; background: none; cursor: pointer; font-style: normal; }
.psf-shot-num { font-size: 12px; font-weight: 400; line-height: 18px; color: rgba(255, 255, 255, 0.5); transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.psf-shot-dot.on .psf-shot-num { color: var(--psf-paper); }
.psf-shot-dot:hover .psf-shot-num { color: rgba(255, 255, 255, 0.85); }
.psf-shot-dot::after { content: ""; display: block; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.5); }
.psf-shot-dot::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--psf-paper); transform: scaleX(0); transform-origin: left center; }
.psf-shot-dot.on::before { animation: psf-shot-progress var(--psf-shot-delay, 6000ms) linear both; animation-play-state: paused; }
.psf-card-tiles--slider.is-playing .psf-shot-dot.on::before { animation-play-state: running; }
@keyframes psf-shot-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1024px) {
  .psf-card--tiles { grid-template-columns: 1fr; grid-template-areas: "tiles" "body" "price"; }
  .psf-card--tiles .psf-card-tiles { grid-area: tiles; }
  .psf-card--tiles .psf-card-body { grid-area: body; }
  .psf-card--tiles .psf-card-price { grid-area: price; }
  .psf-card--tiles.psf-card--choice .psf-mark { top: auto; bottom: 12px; }
}
/* Czasy przejsc zeruje juz pierwszy blok reduced-motion (gora pliku); tu
   tylko to, co nie jest przejsciem: pasek listwy i powiekszenie po najechaniu. */
@media (prefers-reduced-motion: reduce) {
  .psf-shot-dot::before { display: none; }
  .psf-card-tile:hover > * { transform: none; }
  .psf-card-tile:hover > img { transform: scale(var(--psf-fit, 1)); }
}
.psf-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Typografia karty 1:1 z kartami kategorii sklepu producenta (zmierzone 18.09.2026,
   wlasciciel: "tak"): nazwa 12 px zwykla czarna, cena 12 px zwykla #616161,
   wiersz cechy: etykieta zwykla czarna, wartosc 500 czarna. */
.psf-card-name { font-size: 12px; font-weight: 400; line-height: 1.35; }
.psf-card-meta { font-size: 10px; color: var(--psf-soft); }
/* Profil produktu slowami odpowiedzi (jak u producenta: wykonczenie, krycie,
   typ cery) - drobny tekst pod nazwa, kazde pytanie w osobnym wierszu. */
.psf-card-profile { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; font-size: 10px; line-height: 1.5; color: var(--psf-ink); }
.psf-card-profile span { font-weight: 500; }
.psf-card-profile b { font-weight: 400; }
/* Uwaga o rozjezdzie wybranego produktu z odpowiedziami klienta. */
.psf .psf-mismatch { margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--psf-line); border-left: 2px solid var(--psf-ink); background: var(--psf-paper); font-size: 12px; line-height: 1.5; color: var(--psf-soft); }
.psf .psf-mismatch b { font-weight: 500; color: var(--psf-ink); }
.psf-card-price { font-size: 12px; font-weight: 400; color: var(--psf-soft); white-space: nowrap; padding-right: 8px; }
/* Promocja: cena sprzed obnizki stoi PRZED cena dzisiejsza, przekreslona
   i zgaszona. Kolejnosc jest wazna - klient czyta od lewej, wiec najpierw
   widzi, ile bylo, potem ile jest. */
/* Przecena 1:1 z karta kategorii sklepu producenta (zmierzone 19.09.2026, /90-promocje):
   cena podstawowa 14 px, 400, #7a7a7a, przekreslona; cena dzisiejsza 12 px, 400,
   czerwona #ff0000 (ta sama czerwien co w DS); plakietka "-30%" to czarny tag
   10 px 500 (product-flag discount). Bez promocji cena zostaje szara. */
.psf-card-price.is-off { display: inline-flex; align-items: center; gap: 6px; }
.psf-card-was { color: #7a7a7a; font-size: 14px; font-weight: 400; text-decoration: line-through; }
.psf-card-now { color: #ff0000; font-weight: 400; }
.psf-tag--off { font-variant-numeric: tabular-nums; }


/* Faza zero: ekran wyboru "dobierz / znajdz odpowiednik" i notka o zrodle. */
.psf-start { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.psf-start-opt { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px 18px; border: 1px solid var(--psf-line); background: transparent; cursor: pointer; font: inherit; color: inherit; }
.psf-start-opt:hover { border-color: var(--psf-ink); }
.psf-start-opt b { font-size: 14px; }
.psf-start-opt span { font-size: 12px; color: var(--psf-soft); }
.psf-src-note { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; padding: 10px 12px; border: 1px solid var(--psf-line); }
.psf-src-note .psf-card-media { width: 44px; height: 44px; flex: none; }
.psf-src-note span { font-size: 12px; color: var(--psf-soft); }
.psf-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.psf-tag {
  display: inline-flex; align-items: center; height: 17px; padding: 1px 6px;
  background: var(--psf-ink); color: #fff; font-size: 10px; font-weight: 500;
  line-height: 1; text-transform: uppercase; white-space: nowrap;
}
.psf-tag--out { background: none; color: var(--psf-soft); box-shadow: inset 0 0 0 1px var(--psf-soft); }
.psf-tag--err { background: none; color: var(--psf-err); box-shadow: inset 0 0 0 1px var(--psf-err); }
/* Metoda wspolrzednych: procent zgodnosci przy karcie odcienia. */
.psf-tag--pct { background: none; color: var(--psf-ink); box-shadow: inset 0 0 0 1px var(--psf-ink); font-variant-numeric: tabular-nums; }
/* Pasmo zgodnosci - nazwany komunikat pewnosci zamiast procentu. */
/* Promien 0 obowiazuje takze tutaj - kropka pasma jest kwadratem. */
/* Upsell - polecane produkty przy wyniku. */
.psf-upsell { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--psf-line); }
.psf-upsell-h { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--psf-soft); margin-bottom: 12px; }
.psf-note { margin-top: 10px; padding: 10px 12px; background: var(--psf-grey); font-size: 10px; line-height: 1.6; }
.psf-note b { font-weight: 500; }

.psf-actions { display: flex; margin-top: 16px; background: var(--psf-ink); }
.psf-actions .psf-cta { flex: 1; }

/* Wariant z przyciskiem otwierajacym okno: zdanie i przycisk w jednym rzedzie,
   a gdy panel jest waski (zakladka obok opisu, telefon), przycisk schodzi pod
   zdanie w calosci - wczesniej flex sciskal go i "Dobierz swoj odcien" lamalo
   sie na trzy linie. */
.psf-open { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 24px; }
.psf-open .psf-lead { margin: 0; flex: 1 1 260px; }
.psf-open .psf-cta { flex: none; white-space: nowrap; margin-left: auto; }
.psf-modal { position: fixed; inset: 0; z-index: 1050; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); padding: 20px; }
.psf-modal.open { display: flex; }
.psf-modal .psf { width: min(760px, 100%); max-height: 100%; overflow: auto; border-color: var(--psf-ink); }

/* Region statusu dla czytnika ekranu: tytul nowego kroku, poza wzrokiem. */
.psf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.psf-loading { padding: 40px 24px; text-align: center; color: var(--psf-soft); }

/* Plynne przejscie miedzy krokami (Panel.prototype.swap w front.js):
   - min-height dojezdza do wysokosci nowej tresci zamiast skakac,
   - psf-busy: obecny krok przygaszony na czas zapytania, bez wymazywania,
   - psf-enter: stan startowy nowej tresci (zdejmowany w nastepnej klatce),
     wiec tresc wjezdza zamiast wpadac. prefers-reduced-motion wyzej zeruje
     czasy wszystkich przejsc w .psf, wiec i tych. */
[data-psf-body] { transition: min-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease; }
[data-psf-body].psf-busy { opacity: 0.55; pointer-events: none; }
[data-psf-body].psf-enter { opacity: 0; transform: translateY(6px); transition: none; }

@media (max-width: 640px) {
  /* Wariant mobilny systemu producenta: kontrolki rosna, znacznik wyboru
     z 14 na 20 pikseli, kropka z 6 na 8,57. */
  .psf { --psf-check: 20px; --psf-check-dot: 8.57px; --psf-check-dot-off: 5.715px; }
  .psf-inner { padding: 20px 16px; }
  .psf-card { grid-template-columns: 84px 1fr; }
  /* Na telefonie kafelki dwa plus dwa (wlasciciel: cztery w rzedzie byly za
     male): po dwa w rzedzie, kazdy na polowe szerokosci karty, proporcje
     kadru 116:147 zostaja, dalej bez odstepow, tresc pod nimi. Regula
     .psf-card wyzej (84px 1fr) stoi pozniej niz blok do 1024 px, wiec kolumne
     trzeba powtorzyc. */
  .psf-card--tiles { grid-template-columns: 1fr; }
  .psf-card-media { width: 84px; height: 105px; }
  .psf-card-tiles { width: 100%; flex-wrap: wrap; }
  .psf-card-tile { width: 50%; height: auto; aspect-ratio: var(--psf-tile-ratio); }
  .psf-card-tile > .psf-card-media { width: 100%; height: 100%; }
  /* Nieparzysta liczba kafelkow (probka + 2 albo 4 zdjecia): jeden kadr-slider
     na cala szerokosc karty (proporcje kafelka 116:147, wiec powiekszenie
     --psf-fit z serwera wycina biale pasy tak samo jak na biurku; kafelki
     jeden na drugim, widoczny ten z klasa on, przejscie przez
     przezroczystosc) i na nim biale listwy z numerami 1:1 ze sliderem looku
     w PRO Sales Booster (regula .psf-shot-nav wyzej; wlasciciel, 17 wrzesnia).
     Bez osieroconego kafelka i bez pasa koloru. Parzysta liczba kafelkow
     (2 albo 4) zostaje po dwa w rzedzie. */
  .psf-card-tiles--slider { position: relative; display: block; overflow: hidden; aspect-ratio: var(--psf-tile-ratio); touch-action: pan-y; }
  .psf-card-tiles--slider > .psf-card-tile { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; opacity: 0; transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
  .psf-card-tiles--slider > .psf-card-tile.on { opacity: 1; }
  .psf-card-tiles--slider > .psf-shot-nav { display: flex; }
  .psf-card-price { grid-column: 2; padding: 0; }
  .psf .psf-cta { width: 100%; height: 60px; }
  .psf-foot { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .psf-foot .psf-link { align-self: flex-start; }
}


html.psf-locked, html.psf-locked body { overflow: hidden; }

/* kafelek wyboru produktu ze zdjeciem (faza 1) */
.psf-option.photo { padding: 12px 20px; }
.psf-option .psf-opt-photo { width: 44px; height: 55px; flex: none; border-radius: 0; box-shadow: inset 0 0 0 1px var(--psf-line); background: var(--psf-grey) center/cover no-repeat; }
/* Zaznaczenie kafelka ze zdjeciem rysujemy ramka na PRZYCISKU - miniatura
   zostaje miniatura, a nie polem znacznika. */
.psf-option.photo.on { box-shadow: inset 0 0 0 2px var(--psf-ink); }
.psf-option.photo span { font-weight: 500; }

/* 1.0.4: zapamietany odcien na starcie, ocena trafienia, odpowiedniki w innych produktach. */
.psf .psf-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--psf-line); }
.psf .psf-feedback-h { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--psf-soft); }
.psf .psf-feedback-btns { display: flex; gap: 6px; }
.psf .psf-feedback .psf-mini { padding: 6px 12px; border: 1px solid var(--psf-ink); background: none; font: inherit; font-size: 12px; cursor: pointer; }
.psf .psf-feedback .psf-mini:hover { background: var(--psf-ink); color: #fff; }
.psf .psf-others { margin-top: 18px; }
.psf .psf-foot .psf-link + .psf-link { margin-left: 16px; }

/* Polecany produkt na przejsciu: hairline grubszy, bez zmiany tla - lista
   ma zostac lista wyborow, a nie ekranem z jedna wyroznona opcja. */
.psf-card--pick { box-shadow: inset 0 0 0 2px var(--psf-ink); }

/* Ostrzezenie o kolorze: wybrany produkt nie ma odcienia w kolorycie klienta.
   Ton uwagi, nie bledu - klient dostal wynik, tylko wie, co traci. */
/* Uwaga o kolorze. Wczesniej tlo bralo --psf-soft, ktore w tym systemie jest
   kolorem TEKSTU (ciemna szarosc), wiec caly blok wychodzil ciemny, a opis na
   nim byl nieczytelny. Tlo jest bialy papier, wyroznia go lewa krawedz. */
.psf-alert {
    margin: 18px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--psf-line);
    border-left: 2px solid var(--psf-ink);
    background: var(--psf-paper);
}

.psf-alert-h {
    font-size: 14px;
    font-weight: 500;
    color: var(--psf-ink);
    margin-bottom: 4px;
}

.psf-alert-lead {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--psf-soft);
}

/* Naglowek ekranu startowego: tytul po lewej, skrot "znam swoj produkt"
   po prawej. Skrot nie jest trzecia rownorzedna droga, tylko pominieciem
   pytan o produkt, wiec ma wage odnosnika, a nie karty. */
.psf-start-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.psf-start-head h2 { margin-right: auto; }

.psf-start-skip {
    flex: none;
    white-space: nowrap;
}

/* Druga linia odpowiedzi: po niej klient rozpoznaje swoja cere szybciej niz
   po samej nazwie. Ton drugorzedny, zeby nie konkurowala z etykieta. */
.psf-opt-note {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 12px;
    line-height: 1.35;
    color: var(--psf-soft);
}

/* Probki koloru sa tu cala odpowiedzia, wiec dostaja wiecej miejsca niz
   kwadracik przy odpowiedzi tekstowej. Karnacja 38, podton i koloryt 64 -
   te dwa rysujemy na karnacji klienta, wiec roznice widac dopiero z bliska. */
.psf-options--palette .psf-swatch { width: 38px; height: 38px; }
.psf-options--tiles .psf-swatch { width: 64px; height: 64px; }

/* Wybor wielokrotny. Kolko z kropka to jezyk radia - mowi "wybierz jedno".
   Przy pytaniu o typ cery i o priorytety klient moze zaznaczyc kilka
   odpowiedzi, wiec znacznik jest kwadratem, a zaznaczony dostaje ptaszek. */
.psf-multi-hint {
    display: inline-flex;
    align-items: center;
    margin: 0 0 12px;
    padding: 4px 10px;
    border: 1px solid var(--psf-line);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--psf-soft);
}
/* Wybor wielokrotny NIE ma osobnego znacznika. System projektowy producenta rysuje pole
   wyboru i pole jednokrotne dokladnie tak samo: szary kwadrat z czarna
   okragla kropka po zaznaczeniu. Wczesniej stal tu bialy ptaszek, ktory
   z systemu nie pochodzil. Ze ktorych odpowiedzi mozna wskazac kilka, mowi
   znacznik nad lista ("Mozesz wybrac kilka odpowiedzi"). */

/* Odnosnik rozwijajacy liste produktow po wyborze. */
.psf-more { margin-top: 14px; }

/* Pasek krokow. Klient widzi na nim, co juz o sobie powiedzial, i wraca
   klinieciem do dowolnego kroku za soba. Przy odpowiedzi o kolor stoi jej
   probka, bo to wlasnie kolor jest tam trescia. */
.psf-trail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
}
.psf-trail-i {
    display: flex;
    /* Srodek, nie linia bazowa: przy dojsciu odpowiedzi (11 px, wyzsza linia)
       numer i nazwa kroku przesuwaly sie o piksel w dol. Stala wysokosc linii
       16 px na kazdym czlonie - zeton ma te sama wysokosc z odpowiedzia i bez. */
    align-items: center;
    line-height: 16px;
    gap: 8px;
    padding: 6px 10px;
    background: var(--psf-paper);
    border: 1px solid var(--psf-line);
    font: inherit;
    color: var(--psf-soft);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.psf-trail-i:hover:not(.off) { border-color: var(--psf-ink); color: var(--psf-ink); }
.psf-trail-i.on { border-color: var(--psf-ink); color: var(--psf-ink); }
.psf-trail-i.off { cursor: default; opacity: 0.55; }
.psf-trail-n { font-size: 10px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.04em; }
.psf-trail-a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 16px;
    color: var(--psf-ink);
}
.psf-trail-a i {
    width: 12px;
    height: 12px;
    flex: none;
    box-shadow: inset 0 0 0 1px var(--psf-line);
}

/* Na telefonie nazwa kroku z odpowiedzia schodzi z widoku (zostaje sama
   odpowiedz), ale zostaje w drzewie dostepnosci (display: none ucinal nazwe
   przycisku kroku czytnikowi). Krok bez odpowiedzi (biezacy, przyszly) trzyma
   nazwe, bo chip bylby pusty. */
@media (max-width: 640px) {
    .psf-trail-i { position: relative; }
    .psf-trail-i:has(.psf-trail-a:not(.psf-trail-a--generic)) .psf-trail-n { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ZAPYTANIA O KONTENER. Panel bywa wezszy niz okno: zakladka "Dobor odcienia"
   obok opisu na karcie produktu to prawa kolumna motywu, ok. 480 px na biurku,
   a okno (forma modal) ma 760 px. Zapytania o szerokosc OKNA wyzej tego nie
   widza - karta wyniku z czterema kafelkami (464 px) plus trescia po prawej
   wychodzila poza panel, a numer odcienia, nazwa i cena byly obciete. Ponizej
   te same uklady, co przy oknie do 1024 i do 640 px, ale mierzone szerokoscia
   PANELU: tresc pod kafelkami do 860 px tresci panelu (piec kafelkow 580 px +
   odstepy + tresc co najmniej 120 px + cena + wnetrze karty to ok. 850 px;
   przy progu 700 px okno 760 px z czterema zdjeciami wychodzilo poza panel -
   przeklikanie 17 wrzesnia), kafelki dwa plus dwa i przyciski na cala
   szerokosc do 480 px.
   Rozmiary kontrolek (znacznik 20 px na telefonie) zostaja przy oknie, bo to
   sprawa dotyku, nie miejsca. */
.psf-inner { container-type: inline-size; container-name: psf; }
@container psf (max-width: 860px) {
  .psf-card--tiles { grid-template-columns: 1fr; grid-template-areas: "tiles" "body" "price"; }
  .psf-card--tiles .psf-card-tiles { grid-area: tiles; }
  .psf-card--tiles .psf-card-body { grid-area: body; }
  .psf-card--tiles .psf-card-price { grid-area: price; }
  .psf-card--tiles.psf-card--choice .psf-mark { top: auto; bottom: 12px; }
}
@container psf (max-width: 480px) {
  .psf-card-tiles { width: 100%; flex-wrap: wrap; }
  .psf-card-tile { width: 50%; height: auto; aspect-ratio: var(--psf-tile-ratio); }
  .psf-card-tile > .psf-card-media { width: 100%; height: 100%; }
  .psf-card-tiles--slider { position: relative; display: block; overflow: hidden; aspect-ratio: var(--psf-tile-ratio); touch-action: pan-y; }
  .psf-card-tiles--slider > .psf-card-tile { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; opacity: 0; transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
  .psf-card-tiles--slider > .psf-card-tile.on { opacity: 1; }
  .psf-card-tiles--slider > .psf-shot-nav { display: flex; }
  .psf .psf-cta { width: 100%; height: 60px; }
  .psf-foot { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .psf-foot .psf-link { align-self: flex-start; }
}