/* Filtry list produktów v2 — hurtownia-lux.pl (24.10.2026, właściciel: «слабый фильтр»). Ładowany tylko na listach
   (kategoria, marka, sklep, wyszukiwanie) po main.css — inc/filters.php, assets/js/filtry.js. Klasy fx-* (stare .flt-*
   w main.css już nie pasują do znaczników). Wygląd hurtowni: Open Sans, czerwień i biel, proste rogi, zmienne z :root.
   Komputer (≥ 1000 px): kolumna po lewej. Telefon i tablet: „Filtry (N)” → panel na cały ekran z jednym przewijaniem
   (bez wewnętrznych pasków przewijania — długie listy: 8 pozycji + „Pokaż więcej”) i „Pokaż N produktów”. */

.fx-layout { --fx-red: var(--acc, var(--acc)); --fx-ink: var(--ink, #0E0F24); --fx-muted: var(--muted, #545C6B); --fx-line: var(--line, #D6DCEA); --fx-soft: var(--soft, #E8EBF8); --fx-zero: #9AA1B0; --fx-box: #929AAA; }

/* ---------- pasek nad listą: Filtry (telefon), licznik, sortowanie ---------- */
.fx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.fx-tools .woocommerce-notices-wrapper { flex: 1 0 100%; }
.fx-tools .woocommerce-notices-wrapper:empty { display: none; }
.fx-tools .woocommerce-result-count { margin: 0; flex: 1 1 auto; font-size: 14.5px; color: var(--fx-muted); }
.fx-count b { color: var(--fx-ink); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-page { white-space: nowrap; }
.fx-tools .woocommerce-ordering { margin: 0 0 0 auto; }
.fx-tools .woocommerce-ordering select { min-height: 40px; }
.fx-open { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid #B9C0D0; border-radius: var(--r, 3px); background: var(--white, #fff); color: var(--fx-ink); font-weight: 600; font-size: 14.5px; }
.fx-open:hover { border-color: var(--fx-red); color: var(--fx-red); }
.fx-open-n, .fx-sel { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--fx-red); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- chipy wybranych filtrów ---------- */
.fx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.fx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; max-width: 100%; padding: 0 5px 0 11px; border: 1px solid transparent; border-radius: var(--r, 3px); background: var(--fx-soft); color: var(--fx-ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color .15s; }
.fx-chip-k { color: var(--fx-muted); font-weight: 400; }
.fx-chip-x { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; background: #fff; font-size: 16px; line-height: 1; }
.fx-chip:hover { background: var(--acc-soft, var(--acc-soft)); }
.fx-chip:hover .fx-chip-x { background: var(--fx-red); color: #fff; }
.fx-chip-clear { padding: 4px 2px; font-size: 13px; font-weight: 600; color: var(--fx-red); }
.fx-empty { margin: 4px 0 24px; }

/* ---------- panel ---------- */
.fx-head { display: flex; align-items: center; gap: 12px; }
.fx-title { margin: 0; font-size: 18px; font-weight: 700; flex: 1 1 auto; }
.fx-clear-top { font-size: 13px; font-weight: 600; color: var(--fx-red); }
.fx-x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--fx-ink); font-size: 30px; line-height: 1; margin-right: -10px; }
.fx-sec { border-bottom: 1px solid var(--fx-line); }
.fx-sec:last-child { border-bottom: 0; }
.fx-h { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 46px; margin: 0; padding: 6px 0; font-size: 14px; font-weight: 700; color: var(--fx-ink); }
.fx-hl { flex: 1 1 auto; min-width: 0; }
summary.fx-h { cursor: pointer; list-style: none; user-select: none; padding-right: 18px; position: relative; }
summary.fx-h::-webkit-details-marker { display: none; }
summary.fx-h::after { content: ""; position: absolute; right: 4px; top: 19px; width: 7px; height: 7px; border-right: 2px solid var(--fx-muted); border-bottom: 2px solid var(--fx-muted); transform: rotate(45deg); transition: transform .15s; }
details[open] > summary.fx-h::after { transform: rotate(-135deg); top: 22px; }
summary.fx-h:hover .fx-hl { color: var(--fx-red); }
/* skrót wybranych wartości pod nazwą — gdy sekcja zwinięta (telefon: lista nagłówków jak w Allegro) */
.fx-sum { flex: 1 0 100%; order: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--fx-red); }
details[open] > summary .fx-sum { display: none; }

.fx-list { list-style: none; margin: 0 0 12px; padding: 0; }
.fx-list > li { margin: 0; }
.fx-opt, .fx-cat { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 3px 0; color: var(--fx-ink); text-decoration: none; font-size: 14px; line-height: 1.3; }
.fx-l { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fx-c { flex: 0 0 auto; font-size: 12px; color: var(--fx-muted); font-variant-numeric: tabular-nums; }
.fx-box { flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center; border: 1.5px solid var(--fx-box); border-radius: 3px; background: #fff; transition: background-color .12s, border-color .12s; }
.fx-opt.is-radio .fx-box { border-radius: 50%; }
a.fx-opt:hover .fx-box { border-color: var(--fx-red); }
a.fx-opt:hover .fx-l, a.fx-cat:hover .fx-l { color: var(--fx-red); }
.fx-opt.is-on .fx-box { background: var(--fx-red); border-color: var(--fx-red); }
.fx-opt.is-on .fx-box::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.fx-opt.is-radio.is-on .fx-box::after { width: 6px; height: 6px; margin: 0; border: 0; border-radius: 50%; background: #fff; transform: none; }
.fx-opt.is-on .fx-l { font-weight: 600; }
.fx-opt.is-zero, .fx-cat.is-zero { color: var(--fx-zero); cursor: default; }
.fx-opt.is-zero .fx-box { border-color: #CBD1DF; background: var(--fx-soft); }
.fx-opt.is-zero .fx-c, .fx-cat.is-zero .fx-c { color: var(--fx-zero); }
.fx-opt.is-busy .fx-box { border-color: var(--fx-red); }
.fx-opt:focus-visible, .fx-cat:focus-visible { outline-offset: 0; }
.fx-sub { margin: 2px 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fx-muted); }

/* drzewo kategorii: wyżej (‹), bieżąca (czerwona kreska), podkategorie (wcięte) */
.fx-tree .fx-h { min-height: 40px; }
.fx-up { margin-bottom: 2px; }
.fx-cat.is-up { min-height: 30px; font-size: 13.5px; color: var(--fx-muted); }
.fx-cat.is-up::before { content: "‹"; flex: 0 0 10px; font-size: 18px; line-height: 1; color: var(--fx-muted); }
.fx-cat.is-cur { min-height: 34px; padding-left: 10px; border-left: 3px solid var(--fx-red); font-weight: 700; }
.fx-kids { padding-left: 13px; }
.fx-kids .fx-cat { min-height: 32px; }

/* długie listy: 8 pozycji + „Pokaż więcej (N)” (bez wewnętrznych pasków przewijania); wybrane zawsze widać */
.fx-list.is-long:not(.is-open):not(.is-search) > li:nth-child(n+9):not(.is-on) { display: none; }
.fx-list > li[hidden] { display: none !important; }
.fx-more { display: inline-block; margin: -6px 0 12px; padding: 4px 0; border: 0; background: none; color: var(--fx-red); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.fx-more:hover { text-decoration: underline; }
.fx-more[hidden] { display: none; }
.fx-more.is-busy { opacity: .55; cursor: progress; } /* reszta długiej listy w drodze (?hlx_fx=1&fx_lista=…, 28.10.2026) */
.fx-find { width: 100%; min-height: 38px; margin: 0 0 8px; padding: 0 10px; border: 1px solid #BFC6D6; border-radius: var(--r, 3px); background: #fff; font-size: 14px; }
.fx-find:focus { border-color: var(--fx-ink); outline: none; box-shadow: 0 0 0 3px rgba(15, 16, 32, .1); }
.fx-none { margin: 0 0 12px; font-size: 13px; color: var(--fx-muted); }

/* cena: suwak (punkty co 2,5 % produktów) + pola od–do */
.fx-price { margin: 2px 0 14px; }
.fx-range { position: relative; height: 30px; margin: 2px 9px 6px; }
.fx-range[hidden] { display: none; }
.fx-track { position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: #D0D6E4; }
.fx-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 2px; background: var(--fx-red); }
.fx-r { position: absolute; left: -9px; width: calc(100% + 18px); top: 0; height: 30px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.fx-r:focus { outline: none; }
.fx-r::-webkit-slider-runnable-track { height: 30px; background: none; border: 0; }
.fx-r::-moz-range-track { height: 30px; background: none; border: 0; }
.fx-r::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: 5px; border: 2px solid var(--fx-ink); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); cursor: grab; }
.fx-r::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border: 2px solid var(--fx-ink); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); cursor: grab; }
.fx-r:focus-visible::-webkit-slider-thumb { outline: 3px solid #1F7BFF; outline-offset: 2px; }
.fx-r:focus-visible::-moz-range-thumb { outline: 3px solid #1F7BFF; outline-offset: 2px; }
.fx-r:active::-webkit-slider-thumb { cursor: grabbing; border-color: var(--fx-red); }
.fx-pin { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: end; gap: 6px; }
.fx-pin label { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; color: var(--fx-muted); }
.fx-pin input { width: 100%; min-width: 0; min-height: 40px; padding: 0 8px; border: 1px solid #BFC6D6; border-radius: var(--r, 3px); background: #fff; font-size: 15px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.fx-pin input::-webkit-outer-spin-button, .fx-pin input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fx-pin input:focus { border-color: var(--fx-ink); outline: none; box-shadow: 0 0 0 3px rgba(15, 16, 32, .1); }
.fx-dash { padding-bottom: 10px; color: var(--fx-muted); }
.fx-go { min-height: 40px; min-width: 44px; padding: 0 10px; border: 0; border-radius: var(--r, 3px); background: var(--fx-ink); color: #fff; font-weight: 700; font-size: 14px; }
.fx-go:hover { background: #000; }
.fx-cur { margin: 6px 0 0; font-size: 12px; color: var(--fx-muted); }

/* ładowanie: lista przygaszona, pasek u góry */
.fx-layout.is-loading .fx-main { opacity: .55; transition: opacity .15s; pointer-events: none; }
.fx-layout.is-loading .fx-show { opacity: .7; }
.fx-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 130; height: 3px; background: var(--acc, var(--acc)); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.fx-bar.is-on { opacity: 1; transform: scaleX(.86); transition: transform 2.6s cubic-bezier(.08, .6, .2, 1), opacity .1s; }
.fx-bar.is-on.is-done { opacity: 0; transform: scaleX(1); transition: transform .18s ease-out, opacity .22s .12s; }
.fx-in ul.products { animation: fx-in .26s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fx-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fx-in ul.products { animation: none; } .fx-bar.is-on { transition: none; } }

/* ---------- telefon i tablet: panel na cały ekran ---------- */
@media (max-width: 999px) {
  .fx { display: none; }
  .fx.is-open { position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; background: #fff; }
  .fx-head { flex: 0 0 auto; min-height: 56px; padding: 4px 16px; border-bottom: 1px solid var(--fx-line); }
  .fx-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 16px 24px; }
  .fx-foot { flex: 0 0 auto; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--fx-line); background: #fff; box-shadow: 0 -6px 16px rgba(15, 16, 32, .07); }
  .fx-clear { display: grid; place-items: center; min-height: 48px; padding: 0 16px; border: 1px solid #BFC6D6; border-radius: var(--r, 3px); color: var(--fx-ink); font-weight: 600; text-decoration: none; }
  .fx-clear[hidden] { display: none; }
  .fx-show { flex: 1 1 auto; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--r, 3px); background: var(--fx-red); color: #fff; font-weight: 700; font-size: 15.5px; font-variant-numeric: tabular-nums; }
  .fx-show[disabled] { background: #838B9A; }
  .fx-show.is-busy { position: relative; color: rgba(255, 255, 255, .75); }
  .fx-h { min-height: 54px; font-size: 15px; }
  summary.fx-h::after { top: 23px; }
  details[open] > summary.fx-h::after { top: 26px; }
  .fx-opt, .fx-cat { min-height: 44px; font-size: 15px; }
  .fx-cat.is-up { min-height: 40px; font-size: 14.5px; }
  .fx-find, .fx-pin input { font-size: 16px; } /* iOS bez powiększania przy wpisywaniu */
  .fx-clear-top { display: none; }
  html.fx-lock, html.fx-lock body { overflow: hidden; }
  .fx-tools .woocommerce-result-count { order: 3; flex-basis: 100%; }
  .fx-tools .woocommerce-ordering { flex: 1 1 150px; min-width: 0; }
  .fx-tools .woocommerce-ordering select { width: 100%; min-width: 0; }
  .fx-open { flex: 1 1 140px; justify-content: center; }
}

/* ---------- komputer: kolumna po lewej ---------- */
@media (min-width: 1000px) {
  .fx-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: start; }
  .fx { min-width: 0; }
  .fx-head { padding: 2px 0 10px; border-bottom: 2px solid var(--fx-ink); }
  .fx-open, .fx-x, .fx-foot { display: none !important; }
  .fx-main { min-width: 0; }
  .fx-layout ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .fx-layout ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1680px) { .fx-layout ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }