/* smart-search — styl widgetu.
   Neutralny, dopasowany do jasnego motywu ecoric. Zmienne na gorze = punkty
   dostrojenia pod marke bez grzebania w reszcie pliku. */

:root {
    --ss-accent: #d32f2f;
    --ss-border: #e4e4e4;
    --ss-bg: #fff;
    --ss-soft: #fdf8ef;
    --ss-muted: #767676;
    /* Kreska miedzy sekcjami panelu. Osobny token, bo `--ss-border` obsluguje takze
       obrys calego panelu i pol formularza — sklep, ktorego paleta ma bardzo jasne
       szarosci, moze wzmocnic sam podzial sekcji, nie obrysowujac wszystkiego. */
    --ss-divider: var(--ss-border);
    --ss-radius: 4px;
    --ss-shadow: 0 12px 40px rgba(0, 0, 0, .16);
    /* Szerokosc kolumny filtrow na stronie wynikow. Sklep, ktory ma szerszy kontener
       albo dluzsze nazwy cech, zmienia to jednym tokenem zamiast nadpisywac uklad. */
    --ss-side-width: 260px;
    /* Wyscolka pozioma przejetej strony wynikow.
       ⚠ Na stronie kategorii nasz panel siedzi w KOLUMNIE MOTYWU i dziedziczy jego
       wyscolke; na stronie wynikow tej kolumny nie ma, wiec zaczyna sie tam, gdzie
       zaczyna sie kontener tresci. Roznica jest decyzja motywu (u nas 20 px w kolumnie
       wobec 12 px w tresci), a nie nasza — dlatego zostaje tokenem z zerem w domysle,
       a wyrownuje ja motyw, ktory jako jedyny zna obie liczby. */
    --ss-wyniki-pad: 0px;
}

/* Natywne podpowiedzi sklepu chowamy dopiero, gdy nasz widget faktycznie sie podpial
   i ustawil klase `ss-on`. Gdy JS nie wstanie, sklep dziala po staremu.
   Pierwszy selektor to ecoric/jms_ajaxsearch (PS 1.7), reszta to ps_searchbar (PS 9). */
html.ss-on .search-result-area,
html.ss-on .ps-searchbar__dropdown,
html.ss-on #ps_searchbar_results,
html.ss-on .js-search-results { display: none !important; }

/* --- panel --------------------------------------------------------------- */

.ss-drop {
    position: absolute;
    z-index: 100000;
    background: var(--ss-bg);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-shadow);
    font-size: 14px;
    line-height: 1.35;
    color: #222;
}

.ss-panel {
    position: relative;
    display: grid;
    grid-template-columns: 260px 240px 1fr;
    align-items: start;
    max-height: 78vh;
    overflow-y: auto;
}

.ss-col { padding: 20px 22px; min-width: 0; }
.ss-col-nav { background: var(--ss-soft); border-right: 1px solid var(--ss-divider); align-self: stretch; }
.ss-col-hero { border-right: 1px solid var(--ss-divider); align-self: stretch; }

/* Puste kolumny nie mogą zostawiać dziur w układzie.
   ⚠ `:empty` na dziecku NIE ZWIJA ścieżki gridu — trzeba osobno poprawić
   `grid-template-columns`, inaczej po kolumnie zostaje puste miejsce. */
.ss-col:empty { display: none; }

/* ⚠ Zwijanie ścieżek TYLKO w układzie szerokim. Selektor z `:has()` ma specyficzność
   (0,3,0) i wygrywa z regułami responsywnymi na `.ss-panel` (0,1,0) — także tymi
   z węższych zakresów, mimo że stoją niżej w pliku. Bez tego ograniczenia panel
   z jednym trafieniem dostawał na telefonie kolumny `260px 104px`: pasek nawigacji
   trzymał swoją szerokość, a na produkt zostawało tyle, co nic. Poniżej 1000 px układ
   i tak rozstrzygają zapytania medialne na dole pliku. */
@media (min-width: 1001px) {
    .ss-panel:has(.ss-col-hero:empty) { grid-template-columns: 260px 1fr; }
    .ss-panel:has(.ss-col-nav:empty) { grid-template-columns: 240px 1fr; }
    /* Dokładnie jedno trafienie: idzie na kafel „polecany", więc siatka zostaje pusta. */
    .ss-panel:has(.ss-col-grid:empty) { grid-template-columns: 260px minmax(0, 1fr); }
    .ss-panel:has(.ss-col-nav:empty):has(.ss-col-grid:empty) {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ⚠ Kafel „polecany" w szerokiej kolumnie KŁADZIEMY NA PŁASK — ta sama decyzja,
       co na telefonie i z tego samego powodu. Panel ma stałą szerokość, więc po zwinięciu
       ścieżek kolumna ma ~818 px, a zdjęcie jest kwadratem (`aspect-ratio: 1/1`): pionowy
       kafel urósłby razem z nią do 818 px wysokości i zjadł cały ekran. Poziomy trzyma
       84-pikselowe zdjęcie niezależnie od tego, ile miejsca dostanie. */
    .ss-panel:has(.ss-col-grid:empty) .ss-hero {
        display: flex;
        align-items: center;
        gap: 14px;
        text-align: left;
    }

    .ss-panel:has(.ss-col-grid:empty) .ss-hero-img {
        flex: 0 0 84px;
        width: 84px;
        margin-bottom: 0;
    }

    .ss-panel:has(.ss-col-grid:empty) .ss-hero-name { margin-bottom: 4px; }

    /* ⚠ Na kaflu położonym na płask NIE MA wstążek — ta sama zasada, co na miniaturze
       64 px w liście podpowiedzi. Zdjęcie ma tu 84 px, a sam napis wstążki jest od niego
       szerszy: wychodził poza obrys, a druga wstążka schodziła do drugiego wiersza
       i kładła się na zdjęciu. Obniżkę widać obok, w cenie przekreślonej. */
    .ss-panel:has(.ss-col-grid:empty) .ss-hero .ss-flags { display: none; }
}

/* Naglowek sekcji ma byc ETYKIETA, nie trescia. Wczesniej mial 15px/700/#111, czyli
   byl wiekszy i ciemniejszy od nazw produktow pod nim (13,5px/400) — trzy sekcje panelu
   krzyczaly glosniej niz to, po co klient przyszedl. */
.ss-h {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ss-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ss-col-hero .ss-h, .ss-col-grid .ss-h { margin-bottom: 14px; }
.ss-col-nav .ss-h + .ss-h,
.ss-col-nav .ss-chips + .ss-h,
.ss-col-nav .ss-cats + .ss-h { margin-top: 24px; }

.ss-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: var(--ss-muted);
    cursor: pointer;
    padding: 2px 6px;
}

.ss-close:hover { color: #111; }

/* --- zapytania ----------------------------------------------------------- */

.ss-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ss-chip {
    display: inline-block;
    padding: 6px 11px;
    background: #f3e3c2;
    color: #4a3a1a;
    border-radius: 3px;
    text-decoration: none;
    font-size: 13.5px;
}

.ss-chip:hover { background: #ecd6a8; color: #4a3a1a; text-decoration: none; }

/* --- kategorie ----------------------------------------------------------- */

.ss-cats { list-style: none; margin: 0; padding: 0; }
.ss-cats li { margin: 0 0 9px; }

.ss-cats a, .ss-cat-plain {
    color: #6b5a2e;
    text-decoration: none;
    display: inline-block;
}

.ss-cats a:hover { color: var(--ss-accent); text-decoration: none; }
.ss-cat-n { color: var(--ss-muted); font-size: 12.5px; }

/* --- popularny produkt --------------------------------------------------- */

.ss-hero { display: block; text-align: center; color: #222; text-decoration: none; }
.ss-hero:hover { text-decoration: none; color: #222; }
.ss-hero:hover .ss-hero-name { color: var(--ss-accent); }

.ss-hero-img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: #fafafa;
    border-radius: var(--ss-radius);
    overflow: hidden;
    margin-bottom: 12px;
}

.ss-hero-img img { max-width: 100%; max-height: 100%; display: block; }

.ss-hero-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
}

.ss-hero .ss-price { font-size: 19px; }

/* --- siatka produktow w panelu ------------------------------------------- */

.ss-plist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.ss-plist .ss-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ss-plist .ss-card .ss-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    aspect-ratio: auto;
    margin: 0;
}

.ss-plist .ss-card .ss-name { -webkit-line-clamp: 2; font-size: 13.5px; margin-bottom: 3px; }
.ss-plist .ss-card .ss-price { font-size: 14px; }

/* --- wspolne kafelki ----------------------------------------------------- */

.ss-card {
    display: block;
    color: #222;
    text-decoration: none;
}

.ss-card:hover { text-decoration: none; color: #222; }
.ss-card:hover .ss-name { color: var(--ss-accent); }
.ss-card.ss-on-item, .ss-hero.ss-on-item { outline: 2px solid var(--ss-accent); outline-offset: 3px; }

.ss-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-radius: 3px;
    overflow: hidden;
}

.ss-thumb img { max-width: 100%; max-height: 100%; display: block; }
.ss-noimg { width: 100%; height: 100%; background: #f0f0f0; display: block; }

/* --- wstazki promocji ----------------------------------------------------
 * Odpowiednik wstazek, ktore sklep rysuje na listingu. Zrodlem jest cena
 * (`price_old` w dokumencie), wiec wstazka wchodzi i schodzi razem z promocja.
 *
 * ⚠ `pointer-events: none` jest konieczne: caly kafelek to jeden <a>, a wstazka
 * lezy nad zdjeciem. Bez tego klikniecie w nia nie robi nic - kursor pokazuje
 * odnosnik, a klik przepada, co wyglada jak zepsuty kafelek.
 *
 * ⚠ Kolory ida z `--ss-accent`, czyli z tego samego tokenu, ktory motyw podmienia
 * na barwe marki. Wpisany hex znaczylby wstazke w kolorze innego sklepu rodziny.
 */
.ss-flags {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    width: 100%;
    padding: 8px;
    pointer-events: none;
}

.ss-flag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--ss-radius);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

.ss-flag--sale {
    color: #fff;
    background: var(--ss-accent);
    border: 1px solid var(--ss-accent);
}

/* Odwrocenie tej samej pary barw, zeby dwie wstazki obok siebie dalo sie odroznic
   bez czytania - tak samo robi listing sklepu. */
.ss-flag--discount {
    color: var(--ss-accent);
    background: var(--ss-bg);
    border: 1px solid var(--ss-accent);
}

/* Kafel "Produs recomandat" w panelu ma wlasny kontener miniatury, wiec potrzebuje
   punktu odniesienia osobno - bez tego wstazka ucieklaby do najblizszego rodzica
   z pozycjonowaniem, czyli poza zdjecie. */
.ss-hero-img { position: relative; }

.ss-body { display: block; min-width: 0; }

.ss-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ss-name mark { background: #ffef9f; color: inherit; padding: 0; }

.ss-price { display: block; font-weight: 700; color: var(--ss-accent); }
.ss-old { font-weight: 400; color: var(--ss-muted); }

.ss-all {
    display: block;
    margin-top: 18px;
    padding: 11px 12px;
    text-align: center;
    font-weight: 700;
    color: #222;
    background: #f6f6f6;
    text-decoration: none;
    border-radius: var(--ss-radius);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .04em;
}

.ss-all:hover { background: #eee; text-decoration: none; color: #222; }

.ss-empty { padding: 26px 18px; color: var(--ss-muted); text-align: center; }

/* --- strona wynikow ------------------------------------------------------ */

/* Natywna siatka PrestaShopa jest chowana dopiero, gdy inline-skrypt w <head>
   ustawi klase — dzieki temu przy wylaczonym JS strona dziala po staremu.
   Ostatnia regula dotyczy przypadku, gdy natywna wyszukiwarka nie znalazla nic
   i zamiast listy wyrenderowala komunikat „nic nenalezeno". */
html.ss-takeover #js-product-list,
html.ss-takeover #products > #products-top,
html.ss-takeover #js-product-list-header,
html.ss-takeover #products > .page-content.not-found { display: none !important; }

/* ⚠ Wyrownanie do kolumny motywu — patrz `--ss-wyniki-pad` na gorze pliku. Domyslnie zero,
   wiec sklep, ktory nic nie ustawi, dostaje uklad jak dotad. */
.ss-results.ss-layout-side:not(.ss-tryb-kategoria) { padding-inline: var(--ss-wyniki-pad, 0px); }

/* Strona wynikow: kolumna filtrow | wyniki.
   ⚠ Druga sciezka to `minmax(0, 1fr)`, a nie `1fr` — kolumna gridu ma domyslnie
   `min-width: auto`, wiec siatka produktow rozpychalaby uklad zamiast sie zwezac. */
.ss-results {
    margin: 0 0 30px;
    display: grid;
    grid-template-columns: var(--ss-side-width) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* Pasek nad wynikami (`filtersLayout = top`) i strona bez ani jednego filtra —
   w obu przypadkach zostaje jedna kolumna, a `.ss-side` po prostu stoi nad trescia. */
.ss-results.ss-layout-top,
.ss-results.ss-bez-filtrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.ss-results.ss-bez-filtrow .ss-side { display: none; }

/* Kolumna jedzie z trescia, a nie przykleja sie do gory ekranu: przy dziesieciu
   wartosciach w grupie przyklejona kolumna i tak nie miesci sie w oknie, a zabiera
   miejsce naglowkowi sklepu. */
.ss-side { min-width: 0; }

/* ⚠⚠ Panel TOWARZYSZY liscie przy przewijaniu. Bez tego znika po pierwszym ekranie:
   zmierzone na `/nove-produkty` przy oknie 757 px — po przewinieciu o 1500 px ZERO z pieciu
   grup filtrow bylo w kadrze, przy liscie wysokiej na 6153 px. Klient, ktory chce zmienic
   wybor, musi wtedy wrocic na sama gore strony.

   ⚠ `max-height` i wlasne przewijanie sa WARUNKIEM, nie dodatkiem: panel ma 871–922 px przy
   oknie 757, czyli jest WYZSZY NIZ EKRAN. Samo przyklejenie zostawiloby jego dol (cena,
   rozmiar) trwale poza zasiegiem — dokladnie tak, jak panel mega menu wychodzil poza dolna
   krawedz, zanim dostal to samo ograniczenie.

   ⚠ `100dvh`, nie `100vh` — na przegladarkach mobilnych `100vh` nie uwzglednia chowajacego
   sie paska adresu. `overscroll-behavior: contain`, zeby przewijanie panelu nie przenosilo
   sie na strone pod nim po dojechaniu do konca listy filtrow.

   ⚠ `align-self: start` jest profilaktyka, nie ozdobnikiem: dzis rodzicem jest kolumna
   `display: block` i sticky dziala bez tego, ale w siatce albo flexie element rozciagniety
   na wysokosc wiersza NIE MA sie jak przesuwac — a wyglada to na niedzialajaca wlasciwosc.

   ⚠ Odstep od gory liczy `front.js` z RZECZYWISTEJ dolnej krawedzi przyklejonego naglowka.
   Wartosc zapasowa obowiazuje, gdy skrypt sie nie wykonal albo motyw nie ma naglowka
   przyklejonego — panel jest wtedy przyklejony nieco nizej, a nie schowany pod naglowkiem. */
@media (min-width: 992px) {
    .ss-side {
        position: sticky;
        top: var(--ss-sticky-top, 88px);
        align-self: start;
        max-height: calc(100dvh - var(--ss-sticky-top, 88px) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Miejsce na pasek przewijania rezerwowane z gory — inaczej tresc panelu przeskakuje
           w bok w chwili, gdy filtr rozwinie sie na tyle, ze pasek sie pojawia. */
        scrollbar-gutter: stable;
    }
}
.ss-main { min-width: 0; }

.ss-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--ss-border);
    margin-bottom: 20px;
}

.ss-count { font-size: 15px; }
.ss-sort { padding: 7px 10px; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); background: #fff; }

/* ⚠ Siatka polecanych (`ss-best-grid`) dzieli regule z siatka wynikow, ale ma WLASNA
   nazwe klasy: kod doladowujacy kolejna strone wynikow szuka `.ss-grid` w calej kolumnie
   i wpisywalby do niej kafelki, gdyby obie siatki nazywaly sie tak samo. */
/* ⚠ Siatka WLASNA obowiazuje wylacznie tam, gdzie kafelki sklada widget. Przy kafelkach
   natywnych uklad nalezy do motywu (`.products`), a nasza regula musialaby zostac wylaczona
   jawnie: arkusz modulu jest POZA warstwami kaskady, wiec bije `@layer` motywu niezaleznie
   od specyficznosci — czyli `display: grid` stad przykrylby siatke sklepu bez sladu. */
.ss-grid:not(.ss-grid--natywna),
.ss-best-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 22px;
}

.ss-best { margin-top: 34px; }

.ss-best-title {
    font-size: 19px;
    margin: 0 0 18px;
    padding-top: 22px;
    border-top: 1px solid var(--ss-border);
}

.ss-grid .ss-card .ss-thumb,
.ss-best-grid .ss-card .ss-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 10px;
    border-radius: var(--ss-radius);
}

.ss-grid .ss-card .ss-name,
.ss-best-grid .ss-card .ss-name { -webkit-line-clamp: 3; font-size: 14px; margin-bottom: 6px; }
.ss-grid .ss-card .ss-price,
.ss-best-grid .ss-card .ss-price { font-size: 15px; }

.ss-loading, .ss-empty-page { padding: 40px 0; text-align: center; color: var(--ss-muted); }
.ss-empty-page strong { display: block; font-size: 18px; color: #222; margin-bottom: 8px; }

.ss-more {
    display: block;
    margin: 26px auto 0;
    padding: 12px 34px;
    border: 1px solid #222;
    background: #fff;
    color: #222;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--ss-radius);
}

.ss-more:hover { background: #222; color: #fff; }

/* --- mniejsze ekrany ----------------------------------------------------- */

/* Tablet: na dwie kolumny duzy kafel nie ma gdzie sie zmiescic obok siatki. */
@media (max-width: 1000px) and (min-width: 721px) {
    .ss-panel { grid-template-columns: 240px 1fr; }
    .ss-col-hero { display: none; }
}

/* Telefon: wszystko jedna kolumna, ale „Oblibeny produkt" zostaje — tyle ze polozony
   na plask, zeby nie zjadal calego ekranu. */
@media (max-width: 720px) {
    .ss-panel { grid-template-columns: 1fr; max-height: 72vh; }
    .ss-col-nav, .ss-col-hero { border-right: 0; border-bottom: 1px solid var(--ss-border); }
    .ss-col { padding: 16px; }
    .ss-plist { grid-template-columns: 1fr; gap: 12px; }
    .ss-grid:not(.ss-grid--natywna) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }

    .ss-hero { display: flex; align-items: center; gap: 14px; text-align: left; }
    .ss-hero-img { flex: 0 0 84px; width: 84px; margin-bottom: 0; }
    .ss-hero-name { font-size: 14px; -webkit-line-clamp: 2; margin-bottom: 4px; }
    .ss-hero .ss-price { font-size: 16px; }
    /* Kafel na płask: wstążki nie mieszczą się na 84 px — patrz komentarz przy tej
       samej regule w układzie szerokim. */
    .ss-hero .ss-flags { display: none; }
}

/* --- filtry na stronie wynikow -------------------------------------------
   Wszystko na tokenach `--ss-*` z gory pliku, wiec motyw sklepu dostraja te filtry
   tym samym jednym miejscem co reszte widgetu (patrz `ababink.scss` w motywie
   garibald: `:root { --ss-accent: var(--bs-primary); }`).
   Element `.ss-live` jest tylko dla czytnika ekranu — ma byc niewidoczny, ale NIE
   `display:none`, bo tresci ukrytej w ten sposob czytniki nie odczytuja. */

.ss-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- uklad boczny (domyslny) ---------------------------------------------
   Grupy stoja jedna pod druga, a lista wartosci jest w toku strony. Dzieki temu
   kilka rozwinietych grup nie ma jak sie przykryc — to ten sam powod, dla ktorego
   filtry kategorii w sklepach stoja w kolumnie, a nie w pasku. */

.ss-filters { font-size: 14px; }

.ss-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--ss-divider);
    margin-bottom: 2px;
}

.ss-filters-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ss-muted);
}

/* Krzyzyk zamyka wylacznie szuflade na waskim ekranie — w kolumnie nie ma czego
   zamykac, wiec jest tam ukryty (patrz media query na dole pliku). */
.ss-fclose {
    display: none;
    padding: 0 6px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--ss-muted);
    cursor: pointer;
}

.ss-fgroup { border-bottom: 1px solid var(--ss-divider); }

/* ⚠ Odstępy są dobrane do natywnego panelu `ps_facetedsearch` na stronach kategorii
   (zmierzone na tym motywie: nagłówek grupy 40 px, wiersz wartości 24 px przy odstępie
   26 px). Klient przechodzi między jednym a drugim w obrębie jednego sklepu, więc
   gęstsze filtry na kategorii czytają się jak inny, staranniejszy komponent.
   Nasz krój jest przy tym MNIEJSZY (14 px wobec 16 px), więc cała różnica siedziała
   w wyściółce wiersza — natywny ma ją zerową. */
.ss-fgroup > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 9px 0;
    font-weight: 600;
}

.ss-fgroup > summary::-webkit-details-marker { display: none; }

/* Strzalka rozwiniecia: sam znak, bez grafiki — kierunek jest jedyna informacja,
   ktora ta ikona niesie, wiec obracamy ja przy otwarciu grupy. */
.ss-fgroup > summary::after {
    content: '';
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ss-muted);
    border-bottom: 2px solid var(--ss-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s;
}

.ss-fgroup[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.ss-fcount {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ss-accent);
    color: #fff;
    font-size: 12px;
    text-align: center;
}

/* Owijka tresci grupy. Istnieje dla jednej rzeczy: `<details>` otwiera sie skokowo,
   a animowac da sie tylko wysokosc elementu o znanym rozmiarze (patrz `animujGrupy`).
   ⚠ `overflow: hidden` jest przy tym warunkiem koniecznym — bez niego tresc wystaje
   poza animowana wysokosc i zamiast rozwijania widac przeskok. */
.ss-fbody { overflow: hidden; }

/* ⚠ Lista wartosci NIE MA juz wlasnego przewijania. Zagniezdzone przewijanie w panelu
   filtrow jest pulapka: kolko myszy przewija raz liste, raz strone, zaleznie od tego,
   gdzie stoi kursor, a na dotyku trafienie w waski wewnetrzny suwak jest kwestia
   szczescia. Dluga liste skraca „pokaz wszystkie" (`.ss-fmore`).

   `flex` z kolumna jest tu po to, zeby dalo sie ustawiac `order` — wartosci wybite
   przez pozostale filtry ida na dol BEZ przestawiania ich w DOM. */
.ss-fvals {
    display: flex;
    flex-direction: column;
    padding: 0 0 6px;
}

/* ⚠ Wyściółka pionowa jest mała (3 px), ale NIE zerowa jak w natywnym panelu — wiersz
   ma tu tło pod kursorem i zaokrąglenie, więc przy zerze podświetlenie oblepiałoby sam
   tekst i wyglądało na przycięte. 3 px daje 27 px wysokości, czyli praktycznie tyle,
   ile natywne 26 px w odstępie. */
.ss-fval {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    border-radius: var(--ss-radius);
    cursor: pointer;
    font-weight: 400;
    margin: 0;
    transition: opacity .18s, color .18s;
}

.ss-fval:hover { background: var(--ss-soft); }
.ss-fval-on { font-weight: 600; }

/* ⚠ Bez tego zaznaczone pole wyboru jest NIEBIESKIE — to domyslny kolor przegladarki,
   a nie sklepu. Jedna wlasciwosc zalatwia to bez podmiany znacznika na wlasny rysunek,
   wiec pole zostaje natywne: obsluga klawiatura, stan dla czytnika ekranu i zachowanie
   na dotyku sa w nim za darmo. */
.ss-fval input[type="checkbox"] { accent-color: var(--ss-accent); }

/* Wartosc, ktorej pozostale filtry nie zostawily ani jednego produktu. ⚠ Zostaje na
   liscie, zamiast znikac: znikajaca wartosc zabiera informacje, ze cos takiego w ogole
   jest w ofercie, i przestawia liste pod palcem klienta przy kazdym kliknieciu. */
.ss-fval-off {
    color: var(--ss-muted);
    opacity: .5;
    cursor: default;
}

.ss-fval-off:hover { background: none; }
.ss-fval-off .ss-swatch { filter: grayscale(1); }

/* Wartosci ponad prog, dopoki klient nie rozwinie listy. */
.ss-fval-hid { display: none; }

.ss-fmore {
    margin: 0 0 8px;
    padding: 2px 6px;
    background: none;
    border: 0;
    color: var(--ss-accent);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
/* ⚠ Klasa, nie `:nth-of-type(1)` — probnik koloru jest w wierszu PRZED nazwa, wiec
   pozycyjny selektor rozciagalby na cala szerokosc kwadracik zamiast tekstu. */
.ss-fname { flex: 1; }
.ss-fn { color: var(--ss-muted); font-size: 12px; }

.ss-fprice { display: block; }
.ss-price-pola { display: flex; align-items: center; gap: 6px; }
.ss-price-pola input {
    width: 90px;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
}

.ss-fclear {
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: none;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    color: var(--ss-muted);
    cursor: pointer;
}

.ss-fclear:hover { border-color: var(--ss-accent); color: var(--ss-accent); }

/* ⚠ Oba przyciski siedza w DOM na stale, a chowa je atrybut `hidden` — a wlasna regula
   `display` bije regule przegladarki `[hidden]{display:none}`, bo ta ma najnizsza
   mozliwa specyficznosc. Stad bliznacze reguly przy KAZDYM `display` w tym pliku. */
.ss-fclear[hidden],
.ss-fdone[hidden] { display: none; }

/* Zamkniecie szuflady na waskim ekranie. Na szerokim filtry sa widoczne w kolumnie
   i nie ma czego zamykac — pokazuje go dopiero media query na dole pliku. */
.ss-fdone {
    display: none;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: var(--ss-accent);
    border: 0;
    border-radius: var(--ss-radius);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* --- wybrane filtry nad wynikami -----------------------------------------
   ⚠ Na waskim ekranie to JEDYNE miejsce, w ktorym widac, co jest wlaczone: panel
   filtrow jest tam schowany w szufladzie. Kazdy kafelek zdejmuje swoja wartosc, wiec
   cofniecie jednego wyboru nie wymaga otwierania filtrow. */

.ss-fchips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.ss-fchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    background: var(--ss-soft);
    border: 1px solid var(--ss-border);
    border-radius: 999px;
    color: inherit;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
}

.ss-fchip:hover { border-color: var(--ss-accent); color: var(--ss-accent); }
.ss-fchip-x { font-size: 16px; line-height: 1; opacity: .6; }

.ss-fchip-clear {
    padding: 5px 4px;
    background: none;
    border: 0;
    color: var(--ss-muted);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.ss-fchip-clear:hover { color: var(--ss-accent); }

/* Stan zajetosci: wyniki przygasaja na czas zapytania i przestaja przyjmowac
   klikniecia. ⚠ Same filtry NIE gasna — klient wlasnie w nie klika i musi widziec,
   ze jego zaznaczenie zostalo przyjete. */
.ss-busy .ss-main .ss-grid,
.ss-busy .ss-main .ss-more {
    opacity: .45;
    pointer-events: none;
}

.ss-main .ss-grid { transition: opacity .18s; }

/* Przycisk otwierajacy szuflade. Na szerokim ekranie filtry sa juz widoczne w kolumnie,
   wiec przycisk nie ma po co istniec — pokazuje go dopiero media query na dole pliku. */
.ss-fbtn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ss-bg);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    font-weight: 600;
    cursor: pointer;
}

.ss-backdrop { display: none; }

/* Komunikat o poszerzeniu zapytania. Nie jest bledem — to wyjasnienie, dlaczego
   wyniki nie zawieraja wszystkich wpisanych slow. */
.ss-broadened {
    margin: -6px 0 12px;
    padding: 8px 12px;
    background: var(--ss-soft);
    border-left: 3px solid var(--ss-accent);
    border-radius: var(--ss-radius);
    color: var(--ss-muted);
    font-size: 14px;
}

/* --- uklad gorny (`filtersLayout = top`) ---------------------------------
   Grupy stoja obok siebie w pasku, a lista wartosci wisi NAD siatka produktow, zeby
   rozwiniecie filtra nie przesuwalo tego, na co klient wlasnie patrzy.
   ⚠ Cena tego rozwiazania: dwie rozwiniete grupy zaslanialyby sie nawzajem, wiec
   widget pilnuje, zeby w tym ukladzie otwarta byla najwyzej jedna (patrz `zamknijGrupy`
   w smartsearch.js). Uklad boczny takiej pilnowanej wylacznosci nie potrzebuje. */

.ss-layout-top .ss-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--ss-soft);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
}

.ss-layout-top .ss-filters-head { padding: 0; border: 0; margin: 0; align-self: center; }
.ss-layout-top .ss-filters-label { margin-right: 4px; }

.ss-layout-top .ss-fgroup { position: relative; border-bottom: 0; }

.ss-layout-top .ss-fgroup > summary {
    padding: 6px 12px;
    font-weight: 400;
    white-space: nowrap;
    background: var(--ss-bg);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
}

.ss-layout-top .ss-fgroup > summary::after { display: none; }
.ss-layout-top .ss-fgroup[open] > summary { border-color: var(--ss-accent); }

/* ⚠ W tym ukladzie lista wartosci WISI NAD trescia, wiec owijka nie moze jej przycinac.
   Za to cena jest taka, ze grupy w pasku nie sa animowane — animacja wysokosci wymaga
   wlasnie przyciecia. Uklad boczny, czyli domyslny, ma jedno i drugie. */
.ss-layout-top .ss-fbody { overflow: visible; }

.ss-layout-top .ss-fvals {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    background: var(--ss-bg);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-shadow);
}

.ss-layout-top .ss-fclear { width: auto; margin: 0; align-self: center; padding: 6px 12px; }

/* --- szuflada filtrow na waskim ekranie -----------------------------------
   Prog 992 px, czyli ten sam, na ktorym mega menu przechodzi w hamburger — „telefon"
   ma w tym sklepie znaczyc jedno. Ponizej niego kolumna filtrow nie miesci sie obok
   siatki produktow, a pasek nad wynikami zajmuje pol ekranu. */

@media (max-width: 991px) {
    .ss-results,
    .ss-results.ss-layout-top { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .ss-fbtn { display: inline-flex; }

    /* Szuflada wjezdza z lewej — z tej strony klient spodziewa sie filtrow, bo tam
       stoja na szerokim ekranie. */
    .ss-side {
        position: fixed;
        z-index: 100001;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(88vw, 340px);
        overflow-y: auto;
        padding: 16px;
        background: var(--ss-bg);
        box-shadow: var(--ss-shadow);
        transform: translateX(-100%);
        transition: transform .22s ease;
    }

    .ss-side-open .ss-side { transform: translateX(0); }

    .ss-side-open .ss-backdrop {
        display: block;
        position: fixed;
        z-index: 100000;
        inset: 0;
        background: rgba(0, 0, 0, .45);
    }

    /* W szufladzie wszystkie grupy wygladaja tak samo jak w kolumnie, takze przy
       ustawieniu „pasek nad wynikami" — na 390 px pasek nie ma sensu. */
    .ss-layout-top .ss-filters { display: block; padding: 0; background: none; border: 0; margin: 0; }
    .ss-layout-top .ss-fgroup { position: static; border-bottom: 1px solid var(--ss-divider); }
    .ss-layout-top .ss-fgroup > summary { padding: 11px 0; font-weight: 600; background: none; border: 0; }
    .ss-layout-top .ss-fgroup > summary::after { display: block; }
    .ss-layout-top .ss-fbody { overflow: hidden; }
    .ss-layout-top .ss-fvals {
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0 0 10px;
        max-height: none;
        overflow: visible;
    }
    .ss-layout-top .ss-fclear { width: 100%; margin-top: 14px; }

    /* ⚠ Przycisk zamykajacy szuflade stoi na dole i JEST PRZYKLEJONY. W szufladzie nie
       widac wynikow, wiec bez liczby na przycisku klient zamyka filtry w ciemno — a bez
       przyklejenia musialby najpierw przewinac dwadziescia wartosci rozmiaru, zeby go
       w ogole znalezc. */
    /* ⚠ `width: calc(100% + 32px)`, a NIE `width: auto`. Przycisk jest kontrolka
       formularza, wiec nawet jako `display: block` dobiera szerokosc do TRESCI, a nie do
       rodzica — przy `auto` wychodzil na polowe szerokosci szuflady i wygladal jak
       przypadkowo wstawiony guzik. Nadmiar 32 px zjadaja ujemne marginesy, ktore wypychaja
       go poza wciecie szuflady. */
    .ss-fdone {
        display: block;
        position: sticky;
        bottom: -16px;
        width: calc(100% + 32px);
        margin: 10px -16px -16px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
    }

    .ss-filters-head {
        position: sticky;
        top: 0;
        background: var(--ss-bg);
        padding: 4px 0 10px;
    }

    .ss-fclose { display: block; }

    /* Blokada przewijania strony pod otwarta szuflada. Zdejmuje ja zamkniecie szuflady
       ORAZ poszerzenie okna — patrz `matchMedia` w smartsearch.js. */
    body.ss-noscroll { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-side { transition: none; }
    .ss-fgroup > summary::after { transition: none; }
    .ss-fval { transition: none; }
    .ss-main .ss-grid { transition: none; }
}

@media (max-width: 767px) {
    .ss-price-pola input { width: 100%; }
}

/* --- strony informacyjne (CMS) -------------------------------------------

   ⚠ Kolejnosc waznosci jest tu wyrazona UKLADEM, a nie kolorem czy rozmiarem:
   produkt jest tym, po co klient przyszedl, a strona informacyjna odpowiada na
   pytanie obok zakupu. Dlatego lista stron nigdy nie stoi miedzy produktami —
   albo siedzi z boku (gdy produkty sa), albo przejmuje srodek (gdy ich nie ma). */

/* --- karty szybkich odpowiedzi ------------------------------------------- */

/* ⚠ Karta ma wlasne tlo i ramke, bo niesie ODPOWIEDZ, a nie odnosnik: bez wyroznienia
   ginie miedzy lista stron stojaca tuz pod nia. */
.ss-answers { margin-bottom: 18px; }

.ss-answer {
    padding: 12px 14px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    background: #fafaf7;
}

.ss-answer + .ss-answer { margin-top: 10px; }

.ss-answer-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.ss-answer-rows { margin: 0; }

.ss-answer-rows dt {
    font-size: 12px;
    color: var(--ss-muted);
    line-height: 1.3;
}

/* ⚠ `overflow-wrap` jest tu warunkiem, nie ozdoba: numer konta zapisany ciagiem ma
   24 znaki bez spacji, a kolumna nawigacyjna panelu ma 260 px. */
.ss-answer-rows dd {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.4;
    color: #222;
    overflow-wrap: anywhere;
}

.ss-answer-rows dd:last-child { margin-bottom: 0; }

.ss-answer-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: inherit;
}

/* Lista pozycji wewnatrz wiersza — cennik przewoznikow. Bez punktorow, bo pozycje
   maja wlasna interpunkcje (cena, czas dostawy) i kropka przed nazwa czytalaby sie
   jak trzeci separator. */
.ss-answer-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ⚠ Wciecie zawiniecia, a nie sam odstep miedzy pozycjami. Nazwy przewoznikow siegaja
   tu 72 znakow i na waskim ekranie lamia sie na dwie linie — bez wciecia druga linia
   zaczyna sie tam, co pierwsza i czyta sie jak KOLEJNA pozycja cennika. Zmierzone na
   390 px: cztery z pieciu pozycji sa dwuwierszowe. */
.ss-answer-items li {
    padding-left: 12px;
    text-indent: -12px;
}

.ss-answer-items li + li { margin-top: 5px; }

/* --- karta w glownej kolumnie strony wynikow ------------------------------

   ⚠ Zawezone do KARTY PIERWSZEJ w `.ss-main`, czyli do przypadku „sa produkty, a karta
   stoi nad nimi". Przy zerze trafien karta lezy pod komunikatem i ma wlasna regule
   nizej; w panelu podpowiedzi stoi w kolumnie 260 px, gdzie uklad dwukolumnowy nie ma
   sie w co zmiescic. */
.ss-main > .ss-answers:first-child { margin-bottom: 20px; }

/* Karta stoi tu na pelnej szerokosci kolumny wynikow, wiec dostaje wiecej oddechu niz
   w panelu podpowiedzi — przy 988 px ciasny padding czyta sie jak przyklejona notka. */
.ss-main > .ss-answers:first-child .ss-answer { padding: 16px 18px; }
.ss-main > .ss-answers:first-child .ss-answer-title { font-size: 15px; margin-bottom: 10px; }

@media (min-width: 700px) {
    /* Etykieta obok wartosci, a nie nad nia: w kolumnie na 988 px uklad pionowy
       rozciaga karte na wysokosc, ktorej tresc nie potrzebuje, i odsuwa wyniki
       produktowe nizej, niz musi. */
    .ss-main > .ss-answers:first-child .ss-answer-rows {
        display: grid;
        grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
        gap: 6px 18px;
        align-items: baseline;
    }

    .ss-main > .ss-answers:first-child .ss-answer-rows dd { margin: 0; }
}

/* Na stronie wynikow karta stoi w glownej kolumnie — tam moze oddychac. */
.ss-empty-page + .ss-answers { max-width: 520px; margin: 0 auto 22px; text-align: left; }

.ss-pages-box { margin-top: 18px; }
.ss-col-nav .ss-pages-box:first-child { margin-top: 0; }

.ss-pages-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ss-pages-list a {
    display: block;
    padding: 6px 0;
    color: inherit;
    text-decoration: none;
}

.ss-pages-list a:hover .ss-page-title,
.ss-pages-list a:focus-visible .ss-page-title { text-decoration: underline; }

.ss-page-title {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}

/* Zajawka tylko w trybie wyroznionym — w skromnym zabieralaby uwage produktom. */
.ss-page-excerpt {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ss-muted);
    /* Dwie linie: zajawka ma podpowiedziec, czy to ta strona, a nie zastapic jej. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ss-pages-hint {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--ss-muted);
}

/* Tryb wyrozniony: strony sa jedyna odpowiedzia, wiec dostaja podklad i wieksze
   tytuly. Podklad idzie z `--ss-soft`, czyli tokenu, ktory sklep i tak dostraja. */
.ss-pages-hero {
    padding: 16px 18px;
    background: var(--ss-soft);
    border-radius: var(--ss-radius);
}

.ss-pages-hero .ss-page-title {
    font-size: 15px;
    font-weight: 600;
}

.ss-pages-hero .ss-pages-list a { padding: 8px 0; }
.ss-pages-hero .ss-pages-list li + li { border-top: 1px solid var(--ss-divider); }

/* Komorka siatki na stronie wynikow. Bez `hidden` zostawialaby po sobie odstep
   gridu na kazdej stronie bez trafien w stronach informacyjnych. */
.ss-pages[hidden] { display: none; }

/* ⚠ Na szerokim ekranie komorka ma stanac POD filtrami, czyli w pierwszej kolumnie.
   Wymuszamy to jawnie zamiast liczyc na automatyczne rozmieszczanie: przy ukladzie
   `top` i przy stronie bez filtrow siatka ma jedna kolumne i pozycja wyszlaby inna. */
.ss-results.ss-layout-side .ss-pages { grid-column: 1; }

@media (max-width: 991px) {
    /* Kolumna filtrow zamienia sie w szuflade, wiec strony ida pod wyniki — to
       jedyne miejsce, w ktorym klient je zobaczy bez otwierania czegokolwiek. */
    .ss-results.ss-layout-side .ss-pages { grid-column: 1; margin-top: 24px; }
}

/* --- panel bez ani jednego produktu ---------------------------------------

   ⚠ Siatka panelu ma trzy SZTYWNE sciezki, a `.ss-col:empty` chowa element — sciezka
   zostaje. Bez tego wariantu tresc lezala w kolumnie 240 px, a prawa strona panelu
   (`1fr`) stala pusta. Kolumny sa po to, zeby oddzielic nawigacje od siatki produktow;
   bez produktow nie ma czego dzielic, wiec panel schodzi do jednej kolumny. */
.ss-panel-solo { grid-template-columns: minmax(0, 1fr); }

.ss-col-solo { padding: 22px 24px; }

.ss-nores-msg {
    margin: 0;
    /* Miejsce na krzyzyk, ktory stoi absolutnie w prawym gornym rogu panelu. Bez tego
       na waskim ekranie komunikat lamie sie pod niego i ostatnie slowo pierwszej linii
       wchodzi pod znak zamkniecia. */
    padding-right: 28px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.ss-nores-hint {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--ss-muted);
}

/* Odstep dostaja dopiero elementy PO komunikacie — sam komunikat ma stac przy gorze
   panelu, a nie plywac w srodku. */
.ss-col-solo .ss-h,
.ss-col-solo .ss-pages-box { margin-top: 18px; }

/* W jednej kolumnie strony informacyjne moga isc szerzej: dwie na rzad, zeby trzy
   pozycje nie budowaly wysokiej sciany tekstu pod krotkim komunikatem. */
@media (min-width: 700px) {
    .ss-col-solo .ss-pages-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 24px;
    }

    /* Kreska rozdziela sasiadow w PIONIE, wiec przy dwoch kolumnach nie moze wisiec
       na kazdym elemencie procz pierwszego — pierwsza pozycja drugiej kolumny stoi
       w tym samym rzedzie co pierwsza pozycja pierwszej. */
    .ss-col-solo .ss-pages-list li + li { border-top: 0; }
    .ss-col-solo .ss-pages-list li:nth-child(n+3) { border-top: 1px solid var(--ss-divider); }
}

/* --- probniki kolorow w filtrach -----------------------------------------

   ⚠ Probnik stoi OBOK nazwy, nigdy zamiast niej. Dwa powody, oba twarde:
   1. Sam kolor jako jedyny nosnik informacji lamie WCAG 1.4.1 („Uzycie koloru").
   2. W tym katalogu `Negru` (#000000) i `Bleumarin` (#050041) roznia sie o piec
      jednostek w jednym kanale — na kwadraciku 14 px sa nie do odroznienia,
      a to sa dwa najczestsze kolory w ofercie.
   Siatka samych probnikow bez podpisow odpada wiec niezaleznie od katalogu. */

/* Próbnik koloru. ⚠ Kształt i promień MUSZĄ zgadzać się z próbnikiem na karcie produktu —
   to ten sam wybór dla klienta, więc dwa różne kształty czytają się jak dwa różne
   mechanizmy. Motywy rodziny Bootstrapa (Hummingbird i forki) rysują tam kwadrat
   o promieniu `--bs-border-radius-sm`, więc bierzemy go wprost; `--ss-swatch-radius`
   zostaje punktem dostrojenia dla sklepu, który ma to inaczej, a 3 px to zapas dla
   motywu spoza Bootstrapa.

   ⚠ Rozmiar jest MNIEJSZY niż na karcie (16 px wobec 24 px) i to jest zamierzone:
   karta pokazuje kilka kolorów w jednym rzędzie, a filtr kilkanaście wartości jedna
   pod drugą. 16 px to zresztą rozmiar, który sam motyw ma na próbnik w wersji zwartej. */
.ss-swatch {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: var(--ss-swatch-radius, var(--bs-border-radius-sm, 3px));
    /* ⚠ Obrys na KAZDYM probniku, nie tylko na jasnych. Bez niego biel („Alb", #ffffff)
       znika na bialym tle panelu — a obrys dokladany warunkowo tylko jasnym sprawia,
       ze probniki roznia sie miedzy soba czyms poza kolorem, czyli dokladnie tym,
       czego maja nie robic. Poloprzezroczysta czern dziala na obu koncach skali. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}

/* Zaznaczona wartosc: pierscien w kolorze marki dookola probnika. Sam pogrubiony
   podpis (`.ss-fval-on`) ginie w liscie kilkunastu pozycji.

   ⚠ Pierscien jest NA ZEWNATRZ, a nie wciety do srodka jak na karcie produktu. Tam
   obrys wchodzi w probnik (`outline-offset: -2px`), ale tam probnik ma 24 px i zostaje
   20 px koloru. Tutaj ma 16 px, wiec wciety obrys zjadalby jedna czwarta powierzchni
   — czyli akurat to, co klient ma ocenic. */
.ss-fval-on .ss-swatch {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25),
                0 0 0 2px var(--ss-bg),
                0 0 0 3px var(--ss-accent);
}

/* ⚠ Cel dotykowy w szufladzie filtrow. Wiersz mial 31 px, czyli mniej niz 44 px
   zalecane dla dotyku (WCAG 2.5.5). Na myszy 31 px jest w porzadku i wiecej zmiescimy
   w kolumnie, wiec podnosimy to WYLACZNIE tam, gdzie filtry obsluguje sie palcem —
   czyli w wysuwanym panelu ponizej progu ukladu bocznego. */
@media (max-width: 991px) {
    .ss-side .ss-fval { padding: 12px 6px; }
    .ss-side .ss-swatch { width: 20px; height: 20px; }
}

/* --- suwak ceny -----------------------------------------------------------

   ⚠ Dwa NATYWNE `<input type=range>` polozone na sobie, a nie wlasny element ciagniety
   myszka. Natywny suwak jest z definicji obslugiwany klawiatura, ma role i wartosc dla
   czytnika ekranu i dziala na dotyku — wlasny wymagalby odtworzenia tego wszystkiego. */

.ss-slider {
    position: relative;
    height: 26px;
    margin: 2px 8px 10px;
}

/* Tor rysujemy sami, bo dwa suwaki nie maja czym pokazac, ze wybor jest MIEDZY nimi. */
.ss-slider-tor {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    margin-top: -2px;
    background: var(--ss-border);
    border-radius: 2px;
}

.ss-slider-wybor {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--ss-accent);
    border-radius: 2px;
}

.ss-slider input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    /* ⚠ Oba suwaki leza na sobie, wiec gorny przechwytywalby klikniecia na calej
       szerokosci i dolny uchwyt bylby nie do zlapania. Zdarzenia przyjmuja WYLACZNIE
       uchwyty (nizej), a nie tor. */
    pointer-events: none;
}

.ss-slider input[type="range"]:focus-visible { outline: none; }

.ss-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ss-bg);
    border: 2px solid var(--ss-accent);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.ss-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ss-bg);
    border: 2px solid var(--ss-accent);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* Fokus z klawiatury musi byc widoczny na samym uchwycie — obrys na calym elemencie
   obrysowalby pasek na cala szerokosc i nie powiedzialby, ktory uchwyt jest aktywny. */
.ss-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--ss-bg), 0 0 0 5px var(--ss-accent);
}

.ss-slider input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--ss-bg), 0 0 0 5px var(--ss-accent);
}

/* Na dotyku uchwyt musi byc wiekszy — 16 px to cel, w ktory sie nie trafia palcem. */
@media (max-width: 991px) {
    .ss-slider { height: 34px; }
    .ss-slider input[type="range"] { height: 34px; }
    .ss-slider input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
    .ss-slider input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }
}

/* --- filtry na stronie kategorii ------------------------------------------
   ⚠ Panel wchodzi do KOLUMNY MOTYWU, na miejsce natywnego `ps_facetedsearch`, a nie do
   wlasnej siatki. Kolumna motywu ma szerokosc z jego siatki (`col-lg-3`), a tresc obok
   swoja — zabranie kolumny zostawiloby wyniki na trzech czwartych szerokosci strony,
   a poprawianie tego znaczyloby wpisanie do modulu klas siatki KONKRETNEGO motywu. */

/* ⚠ Jedna kolumna TYLKO wtedy, gdy panel poszedl do kolumny motywu. Gdy motyw nie ma
   kolumny bocznej, panel zostaje u nas i musi stanac OBOK wynikow — inaczej po przejeciu
   siatki filtry ladowalyby nad produktami, na calej szerokosci strony. */
.ss-results.ss-tryb-kategoria.ss-kat-kolumna { display: block; }
.ss-results.ss-kat-kolumna .ss-side { width: auto; }

/* Po przejeciu siatki znika natywna lista, pasek sortowania i stronicowanie.
   ⚠ Naglowek i stopka kategorii ZOSTAJA — to tresc kategorii (nazwa, opis, opis SEO
   pod lista), a nie lista produktow. */
html.ss-kat-przejete #js-product-list,
html.ss-kat-przejete #js-product-list-top,
html.ss-kat-przejete #js-product-list-bottom { display: none !important; }

/* Przycisk otwierajacy szuflade, gdy siatka jest jeszcze natywna. Na szerokim ekranie
   panel stoi w kolumnie i przycisk nie ma po co istniec — pokazuje go media query nizej. */
.ss-fbtn-kat { margin: 0 0 12px; }

@media (max-width: 991px) {
    /* ⚠ Klasa jest na <html>, bo w trybie kategorii panel siedzi poza `.ss-results` —
       selektor liczony od `.ss-results` nigdy by go nie dosiegnal. */
    html.ss-side-open .ss-side { transform: translateX(0); }
    html.ss-side-open .ss-backdrop {
        display: block;
        position: fixed;
        z-index: 100000;
        inset: 0;
        background: rgba(0, 0, 0, .45);
    }
    /* Kolumna motywu na waskim ekranie nie ma juz czego trzymac — panel jest szuflada. */
    .ss-results.ss-kat-kolumna .ss-side { width: min(88vw, 340px); }
}