/* =============================================================================
FILTRY NA TELEFONIE (css/mobile-filters.css) - 2026-10-01
Działa tylko z js/mobile-filters.js (klasa html.mf-on) i tylko do 768 px.
========================================================================== */
/* na komputerze elementy dodane przez skrypt są ukryte (skrypt i tak działa tylko na telefonie) */
@media (min-width: 769px) {
.mf-filtry, .mf-sort, .mf-szukaj, .mf-cena, .mf-tytul__ile, .mf-glowa, .mf-stopka, .mf-plywajacy { display: none !important; }
}
@media (max-width: 768px) {
/* ── Pasek nad listą: [Filtry (n)] [Sortuj] ─────────────────────────── */
.mf-on .product-list__filters-trigger { display: none !important; }
.mf-on .display-details.mf-wiersz {
display: flex !important;
flex-wrap: wrap;
align-items: stretch;
gap: 8px;
}
.mf-on .mf-wiersz .display-details__counter {
order: 3;
flex: 1 1 100%;
font-size: 13px;
color: #666;
}
.mf-filtry,
.mf-on .mf-wiersz .display-details__sorting {
box-sizing: border-box;
flex: 1 1 0;
min-height: 46px;
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 !important;
padding: 0 12px !important;
border: 1px solid #c9d1d8 !important;
border-radius: 10px;
background: #fff;
color: #1a1a1a;
font: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: .3px;
cursor: pointer;
}
.mf-filtry { background: #1a1a1a; border-color: #1a1a1a !important; color: #fff; }
.mf-filtry svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mf-filtry__ile {
min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box;
border-radius: 11px; background: #e20000; color: #fff;
font-size: 12px; line-height: 22px; text-align: center;
}
.mf-filtry__ile[hidden] { display: none; }
/* pływający „Filtry” nad dolnym menu, gdy pasek przewinie się poza ekran */
.mf-plywajacy {
position: fixed;
left: 50%;
bottom: calc(98px + env(safe-area-inset-bottom));
z-index: 9990;
display: flex;
align-items: center;
gap: 8px;
padding: 0 18px;
height: 44px;
border: 0;
border-radius: 999px;
background: #1a1a1a;
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 700;
box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
transform: translate(-50%, 140px);
opacity: 0;
pointer-events: none;
transition: transform .2s ease, opacity .2s ease;
cursor: pointer;
}
.mf-plywajacy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mf-plywajacy.mf-widoczny { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
html.mf-otwarte .mf-plywajacy { display: none; }
.mf-on .mf-wiersz .display-details__sorting { position: relative; }
.mf-sort { font-weight: 500; font-size: 13px; color: #555; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 95px; }
.mf-on .mf-wiersz .display-details__sorting .dropdown-menu { left: 0; right: 0; top: calc(100% + 4px); z-index: 50; }
/* aktywne filtry jako przewijane pigułki */
.mf-on .selectedFilters-js {
display: flex !important;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
padding: 8px 0 4px;
margin: 0;
}
.mf-on .selectedFilters-js::-webkit-scrollbar { display: none; }
.mf-on .selectedFilters-js .product-list__filtersButton {
flex: 0 0 auto;
cursor: pointer;
display: inline-flex !important;
align-items: center;
gap: 6px;
margin: 0 !important;
padding: 7px 10px 7px 14px !important;
border: 1px solid #f2b8b8 !important;
border-radius: 999px !important;
background: #fff1f1 !important;
color: #c40000 !important;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.mf-on .selectedFilters-js .product-list__filtersButton.hidden { display: none !important; }
.mf-on .selectedFilters-js #reset-filters { order: 99; background: #fff !important; border-color: #c9d1d8 !important; color: #444 !important; }
.mf-on .selectedFilters-js .product-list__filtersButton svg { width: 14px; height: 14px; fill: currentColor; }
/* ── Szuflada ───────────────────────────────────────────────────────── */
.mf-on .product-list__filters.searchFilters-js { display: none !important; }
.mf-otwarte .product-list__filters.searchFilters-js {
display: flex !important;
flex-direction: column;
position: fixed !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
z-index: 100001 !important;
background: #fff !important;
overflow: hidden !important;
box-shadow: none !important;
}
html.mf-otwarte, html.mf-otwarte body, html.mf-otwarte .product-list-js { overflow: hidden !important; }
html.mf-otwarte .bottomMenu, html.mf-otwarte .sticky-cart { visibility: hidden; }
.mf-glowa {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
padding: 12px 12px 12px 18px;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.mf-glowa__tytul { flex: 1; font-size: 20px; font-weight: 700; color: #1a1a1a; text-align: left; }
.mf-wyczysc { border: 0; background: none; color: #c40000; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; padding: 8px; cursor: pointer; }
.mf-zamknij { border: 0; background: none; font-size: 32px; line-height: 1; color: #333; padding: 0 6px; cursor: pointer; }
/* środek przewijany */
.mf-otwarte .product-list__filters.searchFilters-js > div:not(.mf-glowa):not(.mf-stopka) {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 0 18px 16px;
}
.mf-on .product-list__filters .filter-group-list { margin: 0 !important; padding: 0 !important; list-style: none; }
/* grupy: bez kart, przycisków „Zastosuj” i „Rozwiń” */
.mf-on .product-list__filters .filter-group-wrapper {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid #e5e5e5 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: none !important;
}
.mf-on .product-list__filters .productsList__filters--filterButtonBox,
.mf-on .product-list__filters .filter-more,
.mf-on .product-list__filters .filter-less { display: none !important; }
.mf-on .product-list__filters .filter-group { margin: 0 !important; padding: 0 !important; list-style: none; }
/* tytuł grupy = przycisk rozwijania */
.mf-on .product-list__filters .mf-tytul {
display: flex !important;
align-items: center;
gap: 8px;
margin: 0 !important;
padding: 16px 0 !important;
text-align: left !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: .3px;
text-transform: uppercase;
color: #1a1a1a !important;
cursor: pointer;
list-style: none;
}
.mf-on .product-list__filters .mf-tytul::after {
content: "";
margin-left: auto;
width: 9px; height: 9px;
border-right: 2px solid #444; border-bottom: 2px solid #444;
transform: rotate(45deg) translateY(-3px);
transition: transform .15s;
}
.mf-on .product-list__filters .mf-otwarta > .mf-tytul::after,
.mf-on .product-list__filters .mf-otwarta .filter-group > .mf-tytul::after { transform: rotate(-135deg) translateY(-2px); }
.mf-tytul__ile {
min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
border-radius: 10px; background: #e20000; color: #fff;
font-size: 12px; line-height: 20px; text-align: center; letter-spacing: 0;
}
.mf-tytul__ile[hidden] { display: none; }
/* zwinięta grupa: tylko tytuł */
.mf-on .product-list__filters .filter-group-wrapper:not(.mf-otwarta) .filter-group > li:not(.mf-tytul),
.mf-on .product-list__filters .price-filter:not(.mf-otwarta) > *:not(.mf-tytul) { display: none !important; }
/* opcje: pełna szerokość, duże pola do kliknięcia */
.mf-on .product-list__filters .mf-otwarta .filter:not(.hidden):not(.mf-ukryta) { display: block !important; }
.mf-on .product-list__filters .filter.mf-ukryta { display: none !important; }
.mf-on .product-list__filters .filter { margin: 0 !important; padding: 0 !important; text-align: left !important; }
/* opcje ponad 5 pierwszych sklep trzyma w ukrytym div.redundant („Rozwiń”) - pokazujemy wszystkie */
.mf-on .product-list__filters .mf-otwarta .filter-group > .redundant { display: block !important; margin: 0 !important; padding: 0 !important; }
.mf-on .product-list__filters .filter label {
display: flex !important;
align-items: center;
gap: 12px;
position: relative;
box-sizing: border-box !important;
width: 100% !important;
min-height: 46px;
margin: 0 !important;
padding: 6px 0 6px 34px !important;
justify-content: flex-start !important;
text-align: left !important;
font-size: 15px;
cursor: pointer;
}
.mf-on .product-list__filters .filter .filter-label { text-align: left !important; }
/* kwadrat pola wyboru (label::before ze sklepu) - wyśrodkowany w wierszu, większy */
.mf-on .product-list__filters .filter label::before {
top: 50% !important;
left: 0 !important;
width: 20px !important;
height: 20px !important;
border-radius: 5px !important;
transform: translateY(-50%);
}
.mf-on .product-list__filters .filter .checkBoxes__checkIcon { flex: 0 0 auto; }
.mf-on .product-list__filters .filter-input:disabled + label { opacity: .45; }
.mf-on .product-list__filters .mf-otwarta .filter-group > li:last-child { padding-bottom: 10px !important; }
/* wyszukiwanie w długiej liście */
.mf-szukaj { list-style: none; margin: 0 0 6px; }
.mf-szukaj input {
width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px;
border: 1px solid #c9d1d8; border-radius: 8px; font: inherit; font-size: 15px;
}
/* cena */
.mf-on .product-list__filters .price-filter .productsList__priceSlider-js { margin: 6px 10px 14px !important; }
.mf-on .product-list__filters .price-filter__tag-wrapper { display: none !important; }
.mf-cena { display: flex; align-items: center; gap: 10px; padding: 0 0 16px; }
.mf-cena__pole {
flex: 1 1 0; display: flex; align-items: center; gap: 6px;
height: 44px; padding: 0 10px; box-sizing: border-box;
border: 1px solid #c9d1d8; border-radius: 8px; font-size: 13px; color: #666;
}
.mf-cena__pole input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 15px; color: #1a1a1a; background: none; -moz-appearance: textfield; }
.mf-cena__pole input::-webkit-outer-spin-button, .mf-cena__pole input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mf-cena__kreska { color: #999; }
/* stopka */
.mf-stopka {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid #e5e5e5;
background: #fff;
box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
}
.mf-stopka__info { flex: 1; font-size: 13px; color: #666; }
.mf-pokaz {
flex: 0 0 auto; min-width: 170px; height: 50px; padding: 0 20px;
border: 0; border-radius: 10px; background: #e20000; color: #fff;
font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
}
/* ── Kafelki produktów na liście - telefon (do 768 px), 2026-10-02 ─────────────────────────
Zasady (Baymard / NN/g / Material): równe karty w siatce, nazwa max 3 linie o stałej wysokości,
cena w jednej linii i wyraźnie większa, przycisk koszyka 44×44 px (min. pole dotyku),
informacja Omnibus czytelna, ale drugoplanowa; brak pustych bloków nad listą. */
@media (max-width: 768px) {
html body .product-list .products-container.test-product-container { gap: 10px !important; align-items: stretch; }
html body .product-list .products-container.test-product-container .product-item__placeholder { height: 100%; }
html body .product-list .products-container.test-product-container .product-item {
display: flex; flex-direction: column; height: 100%;
padding: 8px 8px 10px !important;
border: 1px solid #ececec; border-radius: 14px !important; background: #fff;
box-sizing: border-box;
}
html body .product-list .products-container.test-product-container .product-item .product-url { display: flex; flex-direction: column; flex: 1 1 auto; height: auto !important; text-decoration: none; }
/* zdjęcie: kwadrat, całe widoczne */
html body .product-list .products-container.test-product-container .product-item__link { margin: 0 0 8px !important; height: auto !important; }
html body .product-list .products-container.test-product-container .product-item__image { width: 100% !important; aspect-ratio: 1 / 1; height: auto !important; display: flex; align-items: center; justify-content: center; }
html body .product-list .products-container.test-product-container .product-item__image img { margin: 0 !important; max-width: 100%; max-height: 100%; width: 100% !important; height: 100% !important; object-fit: contain; }
/* nazwa: 3 linie, stała wysokość - ceny w rzędzie są na tej samej wysokości */
html body .product-list .products-container.test-product-container .product-item__description { height: auto !important; }
html body .product-list .products-container.test-product-container .product-item__description h2 {
margin: 0 0 8px !important; font-size: 13px !important; line-height: 1.35 !important;
letter-spacing: 0 !important; font-weight: 500 !important; color: #1f1f1f;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
min-height: calc(1.35em * 3);
}
html body .product-list .products-container.test-product-container .product-item__description h2 * { letter-spacing: 0 !important; }
/* cena + koszyk: cena w jednej linii po lewej, koszyk po prawej, Omnibus pod spodem na całą szerokość */
html body .product-list .products-container.test-product-container .product-item__priceAndDiscountsContainer { margin-top: auto; }
html body .product-list .products-container.test-product-container .product-item__priceAndExtraButton {
display: grid !important; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 6px; row-gap: 2px;
align-items: center; margin: 0 !important;
}
html body .product-list .products-container.test-product-container .product-item__prices,
html body .product-list .products-container.test-product-container .productsList3__prices,
html body .product-list .products-container.test-product-container .old-and-min-price { display: contents !important; }
html body .product-list .products-container.test-product-container .product-item__priceAndExtraButton .redPrice,
html body .product-list .products-container.test-product-container .product-item__priceAndExtraButton .normalPrice,
html body .product-list .products-container.test-product-container .product-item__priceAndExtraButton .price {
grid-column: 1; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important;
white-space: nowrap; letter-spacing: 0 !important;
}
html body .product-list .products-container.test-product-container .product-item__priceAndExtraButton .oldPrice {
grid-column: 1; font-size: 12px !important; line-height: 1.2 !important; color: #8a8a8a !important;
letter-spacing: 0 !important; white-space: nowrap;
}
html body .product-list .products-container.test-product-container .product-item__priceAndExtraButton .min-price {
grid-column: 1 / -1; order: 9; margin-top: 4px; font-size: 10.5px !important; line-height: 1.3 !important;
color: #8a8a8a !important; font-weight: 400 !important;
}
html body .product-list .products-container.test-product-container .product-item__priceAndExtraButton .min-price * { font-size: inherit !important; line-height: inherit !important; }
html body .product-list .products-container.test-product-container .product-item__addToCart {
grid-column: 2; grid-row: 1 / span 2; justify-self: end;
width: 44px !important; height: 44px !important; min-width: 44px; padding: 0 !important;
border-radius: 12px !important; display: flex !important; align-items: center; justify-content: center;
}
/* znacznik „Promocja” i serduszko - mniejsze, nie zasłaniają zdjęcia */
html body .product-list .products-container.test-product-container .product-flags { top: 10px !important; left: 10px !important; }
html body .product-list .products-container.test-product-container .product-flags span { font-size: 11px !important; padding: 2px 8px !important; border-radius: 6px !important; margin-bottom: 4px !important; }
/* pusty pasek „wybrane filtry”, gdy żaden filtr nie jest wybrany */
.display-details__selectedFilters:not(:has(> :not(.hidden))) { display: none !important; }
.product-list__grid.product-list__grid-js { margin-top: 8px !important; }
/* pływający przycisk „‹” (wstecz): nie na środku ekranu nad produktami, tylko w lewym dolnym rogu nad menu */
#backArrow.back-arrow {
top: auto !important; bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
right: auto !important; left: 12px !important;
width: 40px !important; height: 40px !important; opacity: .92;
box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
}
/* otwarte menu „Kategorie” (sklep dodaje wtedy body.noscroll) - chowamy pasek „Dodaj do koszyka” karty
produktu i pływające przyciski, żeby nie zasłaniały menu */
@media (max-width: 768px) {
body.noscroll .sticky-cart,
body.noscroll #backArrow,
html:has(.bottomMenu .showBottomMenuSection-js.menuActive) .sticky-cart { display: none !important; }
}
/* lista produktów na telefonie bez osobnego przewijania listy i bez „dociągania” do produktów:
custom.css robił z .product-list-js osobny przewijany pojemnik (100dvh) ze scroll-snap na każdym
produkcie (scroll-snap-stop: always) - przewijanie „przyklejało się” do produktów i trudno było
wrócić do filtrów u góry. Teraz przewija się cała strona; przywracanie pozycji po powrocie
(custom.js) samo przełącza się wtedy na przewijanie okna. */
@media (max-width: 599px) {
html body .product-list-js { height: auto !important; max-height: none !important; overflow: visible !important; scroll-snap-type: none !important; scroll-padding-top: 0 !important; }
html body .product-list-js .product-url,
html body .product-list-js .product-item__description { scroll-snap-align: none !important; scroll-snap-stop: normal !important; }
}
/* górny pasek „Konkurencyjne ceny, europejska dostawa” - ukryty na prośbę właściciela */
#topBanner { display: none !important; }