.elementor .e-a43aa74-0779a92{background-color:#D1C9BE;}.elementor .e-0d34ccb-8f562bb{width:20%;padding-inline-start:0px;padding-inline-end:40px;flex-direction:column;/* =========================================================
 SOFFIE — restyling filtra Themify WooCommerce Product Filter
 Wklej w: Wygląd → Dostosuj → Dodatkowy CSS
 (Zmienne kolorów na górze — podkręć je do gustu.)
 v2 — łapie WSZYSTKIE listy (kategorie + marki), licznik w prawo
 ========================================================= */

:root{
--wpf-text:      #1a1a1a;   /* główny tekst pozycji            */
--wpf-muted:     #9b958a;   /* nagłówki sekcji + liczniki      */
--wpf-line:      #e6e0d5;   /* cienkie separatory              */
--wpf-active-bg: #ddd3c0;   /* tło aktywnej / zaznaczonej poz. */
--wpf-accent:    #1a1a1a;   /* suwak ceny                      */
--wpf-panel-bg:  #ece4d6;   /* tło karty filtra na mobile/tablet */
--wpf-btn-border:#bdb39c;   /* ramka przycisku „Filtry" (wyraźna) */
}

/* ---- Kontener formularza ---- */
.wpf_form{
font-family: "Manrope", sans-serif;
color: var(--wpf-text);
margin: 0;
}

/* ---- Sekcje (KATEGORIE / MARKI / CENA) z cienką linią między nimi ---- */
.wpf_form .wpf_item{
padding: 22px 0;
border-top: 1px solid var(--wpf-line);
}
.wpf_form .wpf_items_wrapper > .wpf_item:first-child{
border-top: 0;
padding-top: 0;
}

/* ---- Nagłówek sekcji ---- */
.wpf_form .wpf_item_name{
font-size: 12px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--wpf-muted);
margin: 0 0 14px;
}

/* =========================================================
 LISTY POZYCJI — działa dla każdej listy w filtrze
 ========================================================= */
.wpf_form .wpf_item ul{
list-style: none;
margin: 0;
padding: 0;
}

/* Ukryj WSZYSTKIE natywne kółka radio/checkbox w całym filtrze
 (pola ukryte filtra są type="hidden", więc ich to nie dotyczy) */
.wpf_form input[type="radio"],
.wpf_form input[type="checkbox"]{
display: none !important;
}

/* Pozycja = klikalny rząd: NAZWA    LICZNIK */
.wpf_form .wpf_item li{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 12px;
margin: 1px 0;
padding: 9px 12px;
border-radius: 8px;
font-size: 15px;
line-height: 1.2;
cursor: pointer;
transition: background .15s ease;
}
.wpf_form .wpf_item li:hover{ background: rgba(0,0,0,.03); }

/* label / link rośnie i wyrównuje swoją zawartość; jeśli licznik
 jest w środku labela — też wyląduje po prawej */
.wpf_form .wpf_item li label,
.wpf_form .wpf_item li > a{
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
min-width: 0;
gap: 12px;
margin: 0;
padding: 0;
cursor: pointer;
color: var(--wpf-text);
}

/* zgaś ewentualne kółko rysowane pseudo-elementem */
.wpf_form .wpf_item li label::before,
.wpf_form .wpf_item li label::after{ content: none !important; }

/* LICZNIK — łapiemy każdą klasę zawierającą "count" i kasujemy bąbelek */
.wpf_form .wpf_item li [class*="count"]{
flex: 0 0 auto;
font-size: 13px;
font-weight: 400;
color: var(--wpf-muted);
background: none !important;
border: 0 !important;
padding: 0 !important;
min-width: 0 !important;
width: auto !important;
height: auto !important;
line-height: inherit !important;
border-radius: 0 !important;
}

/* Aktywna / zaznaczona pozycja — beżowy pasek */
.wpf_form .wpf_item li:has(input:checked),
.wpf_form .wpf_item li.wpf_selected,
.wpf_form .wpf_item li.current{
background: var(--wpf-active-bg);
font-weight: 500;
}

/* =========================================================
 SUWAK CENY — pokrywa jQuery UI ORAZ noUiSlider
 (uchwyty wyśrodkowane na linii, zakres ciemny)
 ========================================================= */

/* --- TOR (pasek) --- */
.wpf_form .ui-slider,
.wpf_form .noUi-target{
position: relative;
height: 4px !important;
background: #c9c0af !important;   /* widoczny tor */
border: 0 !important;
border-radius: 4px !important;
box-shadow: none !important;
margin: 26px 8px 18px;
}
.wpf_form .noUi-base,
.wpf_form .noUi-connects{
height: 100% !important;
border-radius: 4px !important;
}

/* --- ZAZNACZONY ZAKRES (ciemne wypełnienie) --- */
.wpf_form .ui-slider .ui-slider-range,
.wpf_form .noUi-connect,
.wpf_form .wpf_item_price [class*="range"]:not([class*="slider"]){
background: var(--wpf-accent) !important;   /* #1a1a1a */
height: 100% !important;
top: 0 !important;
border-radius: 4px !important;
box-shadow: none !important;
}

/* --- UCHWYTY (białe kółka na linii) --- */
.wpf_form .ui-slider .ui-slider-handle,
.wpf_form .noUi-handle,
.wpf_form .wpf_item_price [class*="handle"]{
width: 16px !important;
height: 16px !important;
background: #fff !important;
border: 2px solid var(--wpf-accent) !important;
border-radius: 50% !important;
box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
cursor: grab;
outline: none;
}
/* centrowanie — jQuery UI */
.wpf_form .ui-slider .ui-slider-handle{
top: 50% !important;
margin-top: -8px !important;
margin-left: -8px !important;
}
/* centrowanie — noUiSlider (handle siedzi w .noUi-origin) */
.wpf_form .noUi-handle{
top: -6px !important;
right: -8px !important;
}
.wpf_form .noUi-handle::before,
.wpf_form .noUi-handle::after{ display: none !important; }  /* kasuje kreski-uchwyty */

.wpf_form .ui-slider .ui-slider-handle:focus,
.wpf_form .noUi-handle:focus{ outline: none; }

/* etykieta zakresu „299 zł – 649 zł" */
.wpf_form .wpf_item_price [class*="price"]{
color: var(--wpf-text);
font-size: 14px;
font-weight: 500;
}

/* =========================================================
 PRZYCISK RESETU
 ========================================================= */
.wpf_form .wpf_reset_btn{ margin-top: 18px; }
.wpf_form .wpf_reset_btn a,
.wpf_form .wpf_reset_btn button{
display: inline-block;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wpf-muted);
text-decoration: none;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.wpf_form .wpf_reset_btn a:hover{ color: var(--wpf-text); }

/* =========================================================
 MOBILE / TABLET — filtr jako rozwijany dropdown + sticky
 ZWIJANIE WŁĄCZA SIĘ DOPIERO gdy skrypt doda klasę .wpf-collapsible.
 Bez skryptu filtr zostaje normalnie widoczny (nie znika).
 Sticky: patrz instrukcja w czacie (Elementor → Sticky na
 kontenerze filtra).
 ========================================================= */
.wpf-mobile-toggle{ display: none; }

@media (max-width: 1024px){
/* --- OTWARTY = pełnoekranowy POP-UP --- */
.wpf_form.wpf-collapsible{ padding: 0; }
.wpf_form.wpf-collapsible.wpf-open{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #faf6f1;          /* kryjące tło jak strona */
  border: 0;
  border-radius: 0;
  padding: 0 20px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* blokada przewijania strony pod pop-upem */
body.wpf-lock{ overflow: hidden; }

/* --- pasek „Filtry" ZWINIĘTY = przycisk z ramką 1px --- */
.wpf_form.wpf-collapsible .wpf-mobile-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 16px;
  background: transparent;                 /* tło jak strona */
  border: 1px solid #b3a88f;               /* ramka BTN */
  border-radius: 0;                        /* kanciasty */
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wpf-text);
  cursor: pointer;
}
/* --- nagłówek pop-upu: przyklejony u góry, pełna szerokość --- */
.wpf_form.wpf-collapsible.wpf-open .wpf-mobile-toggle{
  position: sticky;
  top: 0;
  z-index: 2;
  width: auto;                 /* ← bez tego „−" siada za wcześnie */
  margin: 0 -20px;             /* pełna szerokość pop-upu */
  padding: 18px 20px;
  background: #faf6f1;
  border: 0;
  border-bottom: 1px solid #e6e0d5;   /* podkreślenie taba (pełna szerokość) */
  border-radius: 0;
}
.wpf_form.wpf-collapsible .wpf-mobile-toggle::after{ content: "+"; font-size: 18px; line-height: 1; }
.wpf_form.wpf-collapsible.wpf-open .wpf-mobile-toggle::after{
  content: "\2715  ZAMKNIJ";   /* ✕ + tekst */
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1;
}

/* --- zwijanie TYLKO w trybie collapsible --- */
.wpf_form.wpf-collapsible .wpf_items_wrapper,
.wpf_form.wpf-collapsible .wpf_reset_btn{ display: none; }

/* --- zawartość: bez własnego scrolla, przewija się cały pop-up --- */
.wpf_form.wpf-collapsible.wpf-open .wpf_items_wrapper{
  display: block;
  margin-top: 18px;            /* odstęp od podkreślenia nagłówka */
  max-height: none;
  overflow: visible;
}
.wpf_form.wpf-collapsible.wpf-open .wpf_reset_btn{ display: block; }

/* nazwy sekcji równo z „FILTRY"; pozycje zachowują poziomy padding jak na desktopie */
.wpf_form.wpf-collapsible .wpf_item_name{ padding-left: 0; }

/* --- bez migania: nie przygaszaj pop-upu podczas przeładowania AJAX --- */
.wpf_form.wpf-collapsible.wpf-open,
.wpf_form.wpf-collapsible.wpf-open .wpf_items_wrapper{
  opacity: 1 !important;
}

/* --- gdy kontener filtra jest przyklejony (sticky) --- */
.elementor-sticky--active{
  background: #faf6f1;
  z-index: 99 !important;
  padding-bottom: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
}\n}.elementor .e-8bda6f3-9872cba{width:80%;padding:0px;flex-direction:column;.elementor-wc-products ul.products li.product .button
{
  border-radius: 0px !important;
  font-size: 14px !important;
}\n}.elementor .e-9b49d3d-04b9f5a{padding-block-start:40px;padding-block-end:80px;padding-inline-start:8%;padding-inline-end:8%;background-color:#FAF6F1;flex-direction:row;}