/* =============================================================================
FILTRY NA KOMPUTERZE (css/filtry-desktop.css) - 2026-10-02, skrypt: js/filtry-desktop.js
Jeden czytelny panel zamiast osobnych kafelków: przyklejony przy przewijaniu,
kategoria i podkategorie na górze, sekcje rozwijane, opcje wyrównane do lewej
z liczbą produktów po prawej, większe pola wyboru (18 px) i cała linia klikalna.
Tylko od 769 px - telefon ma własną szufladę (css/mobile-filters.css).
============================================================================= */
@media (min-width: 769px) {
/* ── panel ─────────────────────────────────────────────────────────────── */
html.bs-fd body .product-list-wrapper .product-list__filters {
position: sticky !important; top: 16px; align-self: flex-start;
max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: #d6d6d6 transparent;
box-sizing: border-box; padding: 0 !important;
background: #fff; border: 1px solid #ebebeb !important; border-radius: 16px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
}
/* odstęp panelu od listy produktów (panel pływa po lewej - margines przesuwałby listę pod spodem) */
html.bs-fd body .product-list-wrapper .product-list__grid-wrapper { padding-left: 28px !important; box-sizing: border-box !important; }
html.bs-fd body .product-list-wrapper .product-list__filters::-webkit-scrollbar { width: 6px; }
html.bs-fd body .product-list-wrapper .product-list__filters::-webkit-scrollbar-thumb { background: #d6d6d6; border-radius: 6px; }
html.bs-fd body .product-list-wrapper .product-list__filters > div { display: flex; flex-direction: column; }
html.bs-fd body .product-list-wrapper .product-list__filters .filter-group-list { margin: 0 !important; padding: 0 !important; list-style: none; text-align: left !important; }
/* ── gdzie jestem: kategoria nadrzędna, bieżąca, podkategorie ──────────── */
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav {
order: -2; margin: 0 !important; padding: 16px 18px 14px !important; text-align: left !important;
border: 0 !important; border-bottom: 1px solid #f0f0f0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav__previous {
display: flex !important; align-items: center; gap: 4px; margin: 0 0 6px !important; padding: 0 !important; text-align: left !important;
}
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav__previous svg { width: 14px !important; height: 14px !important; margin: 0 !important; fill: #8a8a8a; }
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav__previous .changeCategoryLink,
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav__previous a {
font-size: 13px !important; font-weight: 500 !important; color: #6b6b6b !important; text-decoration: none !important;
letter-spacing: 0 !important; text-transform: none !important; cursor: pointer;
}
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav__previous .changeCategoryLink:hover,
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav__previous a:hover { color: #e20000 !important; }
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav__current {
margin: 0 !important; padding: 0 !important; text-align: left !important;
font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important;
text-transform: none !important; letter-spacing: 0 !important; color: #1f1f1f !important;
}
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav__current:empty { display: none; }
/* bez dzielenia słów w połowie („Komunaln-e”) - zawijamy całe wyrazy */
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav,
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav * { word-break: normal !important; overflow-wrap: break-word !important; hyphens: manual !important; }
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav ul { margin: 8px 0 0 !important; padding: 0 !important; list-style: none; text-align: left !important; }
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav ul:empty { display: none; }
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav ul ul { margin: 0 0 0 14px !important; }
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav li {
display: flex !important; align-items: center; gap: 2px; margin: 0 !important; padding: 0 !important;
font-size: 13.5px; color: #8a8a8a; text-align: left !important;
}
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav li > span:first-child { display: none; }   /* strzałka sklepu */
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav li .changeCategoryLink,
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav li a {
display: block; flex: 1 1 auto; min-width: 0; padding: 6px 8px !important; margin: 0 0 0 -8px !important; border-radius: 8px;
font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.3 !important; color: #262626 !important;
text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; cursor: pointer;
transition: background-color .12s ease, color .12s ease;
}
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav li .changeCategoryLink:hover,
html.bs-fd body .product-list-wrapper .product-list__filters .category-nav li a:hover { background: #f5f5f5; color: #e20000 !important; }
/* ── nagłówek „Filtry” ─────────────────────────────────────────────────── */
html.bs-fd .bs-fd-naglowek {
order: -1; display: flex; align-items: center; gap: 8px;
padding: 14px 18px 4px; background: #fff;
}
html.bs-fd .bs-fd-naglowek__tytul { font-size: 15px; font-weight: 700; color: #1f1f1f; letter-spacing: 0; }
html.bs-fd .bs-fd-naglowek__ile {
display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
border-radius: 10px; background: #e20000; color: #fff; font-size: 11px; font-weight: 700;
}
html.bs-fd .bs-fd-naglowek__ile:empty { display: none; }
html.bs-fd .bs-fd-naglowek__wyczysc {
display: none; margin-left: auto; padding: 4px 0; border: 0; background: none; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 600; color: #e20000; text-decoration: underline; text-underline-offset: 3px;
}
html.bs-fd .bs-fd-naglowek--aktywne .bs-fd-naglowek__wyczysc { display: inline-block; }
html.bs-fd .bs-fd-naglowek__wyczysc:hover { color: #b30000; }
html.bs-fd .bs-fd-naglowek__wyczysc:focus-visible { outline: 2px solid #e20000; outline-offset: 2px; border-radius: 4px; }
/* ── grupy ─────────────────────────────────────────────────────────────── */
html.bs-fd body .product-list-wrapper .product-list__filters .filter-group-wrapper {
margin: 0 !important; padding: 14px 18px !important; width: auto !important; min-height: 0 !important;
border: 0 !important; border-bottom: 1px solid #f0f0f0 !important; border-radius: 0 !important;
background: none !important; box-shadow: none !important; text-align: left !important;
}
html.bs-fd body .product-list-wrapper .product-list__filters .filter-group-wrapper:last-of-type { border-bottom: 0 !important; }
html.bs-fd body .product-list-wrapper .product-list__filters .filter-group { margin: 0 !important; padding: 0 !important; list-style: none; text-align: left !important; }
html.bs-fd body .product-list-wrapper .product-list__filters .bs-fd-tytul {
display: flex !important; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
margin: 0 !important; padding: 2px 0 !important; border: 0 !important; background: none !important;
font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #1f1f1f !important;
text-align: left !important; text-transform: none !important; letter-spacing: 0 !important;
cursor: pointer; user-select: none;
}
html.bs-fd body .product-list-wrapper .product-list__filters .bs-fd-tytul:focus-visible { outline: 2px solid #e20000; outline-offset: 4px; border-radius: 4px; }
html.bs-fd body .product-list-wrapper .product-list__filters .bs-fd-tytul::before,
html.bs-fd body .product-list-wrapper .product-list__filters .bs-fd-tytul::after { display: none !important; }
html.bs-fd .bs-fd-tytul__ile {
display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
border-radius: 10px; background: #e20000; color: #fff; font-size: 11px; font-weight: 700;
}
html.bs-fd .bs-fd-tytul__ile:empty { display: none; }
html.bs-fd .bs-fd-tytul__strz {
width: 16px; height: 16px; margin-left: auto; flex: none; background: #6b6b6b; transition: transform .2s ease;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.bs-fd .bs-fd-zwin .bs-fd-tytul__strz { transform: rotate(-90deg); }
/* zwinięta sekcja: tylko tytuł */
html.bs-fd body .product-list-wrapper .product-list__filters .filter-group-wrapper.bs-fd-zwin .filter-group > :not(.filter-group__title),
html.bs-fd body .product-list-wrapper .product-list__filters .price-filter.bs-fd-zwin > :not(.price-filter__title) { display: none !important; }
html.bs-fd body .product-list-wrapper .product-list__filters .filter-group-wrapper:not(.bs-fd-zwin) .filter-group__title,
html.bs-fd body .product-list-wrapper .product-list__filters .price-filter:not(.bs-fd-zwin) .price-filter__title { margin-bottom: 8px !important; }
/* przycisk „Zastosuj” sklepu - na komputerze filtr działa od razu */
html.bs-fd body .product-list-wrapper .product-list__filters .productsList__filters--filterButtonBox { display: none !important; }
/* ── opcje ─────────────────────────────────────────────────────────────── */
html.bs-fd body .product-list-wrapper .product-list__filters li.filter {
margin: 0 !important; padding: 0 !important; text-align: left !important; list-style: none;
}
html.bs-fd body .product-list-wrapper .product-list__filters li.filter.bs-fd-ukryj { display: none !important; }
html.bs-fd body .product-list-js .product-list-wrapper .product-list__filters .checkBoxes__container input + label {
display: flex !important; align-items: center; gap: 10px; position: relative;
width: 100% !important; min-height: 36px; box-sizing: border-box; margin: 0 !important;
padding: 7px 8px 7px 38px !important; border-radius: 8px;
font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.3 !important; color: #262626 !important;
text-align: left !important; text-transform: none !important; letter-spacing: 0 !important;
transition: background-color .12s ease;
}
html.bs-fd body .product-list-js .product-list-wrapper .product-list__filters .checkBoxes__container input + label:hover { background: #f5f5f5; }
html.bs-fd body .product-list-js .product-list-wrapper .product-list__filters .checkBoxes__container input + label:focus-visible { outline: 2px solid #e20000; outline-offset: 0; }
html.bs-fd body .product-list-js .product-list-wrapper .product-list__filters .checkBoxes__container input + label::before {
left: 10px !important; top: 50% !important; margin: 0 !important; transform: translateY(-50%);
width: 18px !important; height: 18px !important; box-sizing: border-box;
border: 1.5px solid #b5b5b5 !important; border-radius: 5px !important; background: #fff !important;
transition: background-color .12s ease, border-color .12s ease;
}
html.bs-fd body .product-list-js .product-list-wrapper .product-list__filters .checkBoxes__container input + label:hover::before { border-color: #7a7a7a !important; }
html.bs-fd body .product-list-js .product-list-wrapper .product-list__filters .checkBoxes__container input:checked + label::before { background: #e20000 !important; border-color: #e20000 !important; }
html.bs-fd body .product-list-js .product-list-wrapper .product-list__filters .checkBoxes__container input:checked + label .checkBoxes__checkIcon {
display: flex !important; align-items: center; justify-content: center;
position: absolute; left: 10px !important; top: 50% !important; width: 18px; height: 18px; margin: 0 !important; transform: translateY(-50%);
}
html.bs-fd body .product-list-js .product-list-wrapper .product-list__filters .checkBoxes__container input + label .checkBoxes__checkIcon svg {
width: 12px !important; height: 12px !important; margin: 0 !important; fill: #fff !important;
}
/* nazwa + liczba produktów (js/filtry-desktop.js); oryginalny tekst sklepu ukryty */
html.bs-fd body .product-list-wrapper .product-list__filters label.bs-fd-l .filter-label { display: none !important; }
html.bs-fd .bs-fd-nazwa { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
html.bs-fd .bs-fd-ile { flex: none; margin-left: auto; font-size: 12px; color: #8a8a8a; font-variant-numeric: tabular-nums; }
html.bs-fd .checkBoxes__container input:checked + label .bs-fd-nazwa { font-weight: 600; color: #1f1f1f; }
html.bs-fd body .product-list-wrapper .product-list__filters li.filter.bs-fd-zero label { opacity: .45; }
/* „Rozwiń / Zwiń” sklepu jako link */
html.bs-fd body .product-list-wrapper .product-list__filters .filter-toggle {
width: fit-content; margin: 4px 0 0 !important; padding: 6px 8px !important; border-radius: 8px;
font-size: 13px !important; font-weight: 600 !important; color: #e20000 !important; letter-spacing: 0 !important; text-transform: none !important;
text-decoration: none !important; cursor: pointer; background: none !important; border: 0 !important;
}
html.bs-fd body .product-list-wrapper .product-list__filters .filter-toggle:hover { background: #fff1f1 !important; }
/* wyszukiwanie w grupie: pokaż wszystkie opcje, schowaj „Rozwiń” */
html.bs-fd body .product-list-wrapper .product-list__filters .bs-fd-szuka .redundant { display: block !important; }
html.bs-fd body .product-list-wrapper .product-list__filters .bs-fd-szuka .filter-toggle { display: none !important; }
html.bs-fd .bs-fd-szukaj { list-style: none; margin: 0 0 6px !important; padding: 0 !important; }
html.bs-fd .bs-fd-szukaj__pole {
width: 100%; height: 36px; box-sizing: border-box; margin: 0; padding: 0 10px 0 34px;
border: 1.5px solid #e0e0e0; border-radius: 10px; outline: none;
font: inherit; font-size: 13.5px; color: #1f1f1f;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 10px center / 16px no-repeat;
transition: border-color .15s ease;
}
html.bs-fd .bs-fd-szukaj__pole:focus { border-color: #1f1f1f; }
html.bs-fd .bs-fd-brak { list-style: none; padding: 6px 8px; font-size: 13px; color: #8a8a8a; }
/* ── cena ──────────────────────────────────────────────────────────────── */
html.bs-fd body .product-list-wrapper .product-list__filters .productsList__priceSlider-js {
margin: 14px 9px 16px !important; height: 4px !important; border: 0 !important; border-radius: 4px; background: #e6e6e6 !important;
}
html.bs-fd body .product-list-wrapper .product-list__filters .productsList__priceSlider-js .ui-slider-range { background: #e20000 !important; border-radius: 4px; }
html.bs-fd body .product-list-wrapper .product-list__filters .productsList__priceSlider-js .ui-slider-handle {
top: -7px !important; width: 18px !important; height: 18px !important; margin-left: -9px !important; margin-top: 0 !important; box-sizing: border-box;
border: 2px solid #e20000 !important; border-radius: 50% !important; background: #fff !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: grab;
}
html.bs-fd body .product-list-wrapper .product-list__filters .productsList__priceSlider-js .ui-slider-handle:focus-visible { box-shadow: 0 0 0 4px rgba(226, 0, 0, .2); }
html.bs-fd body .product-list-wrapper .product-list__filters .price-filter.bs-fd-ma-pola .price-filter__tag-wrapper { display: none !important; }
html.bs-fd .bs-fd-cena { display: flex; align-items: center; gap: 8px; }
html.bs-fd .bs-fd-cena__pole { position: relative; flex: 1 1 0; min-width: 0; margin: 0; }
html.bs-fd .bs-fd-cena__et { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #8a8a8a; pointer-events: none; }
html.bs-fd .bs-fd-cena__zl { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #8a8a8a; pointer-events: none; }
html.bs-fd .bs-fd-cena input {
width: 100%; height: 38px; box-sizing: border-box; margin: 0; padding: 0 26px 0 30px;
border: 1.5px solid #e0e0e0; border-radius: 10px; outline: none; background: #fff;
font: inherit; font-size: 13.5px; color: #1f1f1f; font-variant-numeric: tabular-nums;
-moz-appearance: textfield; transition: border-color .15s ease;
}
html.bs-fd .bs-fd-cena input::-webkit-outer-spin-button,
html.bs-fd .bs-fd-cena input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html.bs-fd .bs-fd-cena input:focus { border-color: #1f1f1f; }
html.bs-fd .bs-fd-cena__kreska { color: #8a8a8a; }
/* FILTRUJ (ukryty przycisk sklepu dla wyszukiwania) */
html.bs-fd body .product-list-wrapper .product-list__filters .product-list__filters-applay.hidden { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
html.bs-fd .bs-fd-tytul__strz, html.bs-fd .product-list__filters label { transition: none !important; }
}