/* claude 2026-11-06: Filtry 2.0 - okno (etap 2, podstawowy wyglad; pelny wyglad w etapie 3). Kazda regula zawezona do
   .kf2- albo #kf2-, kolory jako zmienne --kf2-, czcionka sklepu, tylko jasny motyw (04, Wyglad). */
.kf2-overlay, .kf2-slot {
    --kf2-bg: #edf0f4;
    --kf2-surface: #ffffff;
    --kf2-surface-2: #f4f6f9;
    --kf2-ink: #13202f;
    --kf2-ink-2: #3d4c5f;
    --kf2-muted: #5d6c80;
    --kf2-line: #d9e0e8;
    --kf2-line-2: #bfcad7;
    --kf2-brand: #1b3a5c;
    --kf2-brand-ink: #f2f6fa;
    --kf2-accent: #1d5d9b;
    --kf2-accent-soft: #e1ebf6;
    --kf2-good: #1d7549;
    --kf2-warn: #8a5208;
    --kf2-hist: #cbd5e1;
    --kf2-scrim: rgba(8, 16, 26, .45);
    --kf2-shadow: 0 1px 2px rgba(19, 32, 47, .05), 0 6px 18px rgba(19, 32, 47, .06);
    --kf2-font: "Segoe UI", Arial, sans-serif;
    --kf2-radius: 6px;
}

/* --- przycisk otwierajacy (miejsce zarezerwowane w HTML, bez skokow ukladu) --- */
.kf2-slot { display: block; margin: 0 0 10px; min-height: 40px; font-family: var(--kf2-font); }
.kf2-slot-list { margin: 8px 0; }
.kf2-open {
    display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 40px; padding: 8px 16px;
    border: 1px solid var(--kf2-brand); border-radius: var(--kf2-radius); background: var(--kf2-brand); color: var(--kf2-brand-ink) !important;
    font: 600 14px/1.2 var(--kf2-font); text-decoration: none !important; cursor: pointer;
}
.kf2-open:hover, .kf2-open:focus-visible { background: #24497a; }
/* claude 2026-11-10: uwaga Darka: napis "Filtry 2.0" nie zmniejsza sie po najechaniu (style sklepu dla linkow), kolor
   po najechaniu: stonowany czerwony biznesowy */
.kf2-open, .kf2-open:hover, .kf2-open:focus, .kf2-open:focus-visible, .kf2-open:active { font: 600 14px/1.2 var(--kf2-font) !important; letter-spacing: normal !important; }
.kf2-open:hover, .kf2-open:focus-visible { background: #a3161f; border-color: #a3161f; }
.kf2-open:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.kf2-open-icon { display: inline-block; width: 14px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.kf2-open-icon:after { content: ""; position: absolute; left: 3px; right: 3px; top: 2px; border-top: 2px solid currentColor; }
.kf2-slot-side .kf2-open { width: 100%; justify-content: center; }

/* --- nakladka i okno --- */
html.kf2-lock, html.kf2-lock body { overflow: hidden !important; }
.kf2-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* bez inset: Safari < 14.1, Chrome < 87 */ z-index: 2147483000; background: var(--kf2-scrim); font-family: var(--kf2-font); color: var(--kf2-ink); }
.kf2-overlay[hidden] { display: none; }
.kf2-overlay *, .kf2-overlay *:before, .kf2-overlay *:after { box-sizing: border-box; }
.kf2-dialog {
    position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1480px;
    display: flex; flex-direction: column; background: var(--kf2-bg); box-shadow: 0 0 40px rgba(8, 16, 26, .35);
    font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums;
}
.kf2-head { flex: none; display: flex; align-items: center; gap: 16px; padding: 8px 12px 8px 20px; background: var(--kf2-brand); color: var(--kf2-brand-ink); }
.kf2-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.2; color: inherit; }
.kf2-title-pre { font-weight: 400; opacity: .8; }
.kf2-head-count { font-size: 14px; opacity: .9; white-space: nowrap; }
.kf2-close {
    flex: none; width: 44px; height: 44px; border: 1px solid rgba(242, 246, 250, .4); border-radius: var(--kf2-radius); background: transparent;
    color: var(--kf2-brand-ink); font: 400 28px/1 var(--kf2-font); cursor: pointer;
}
.kf2-close:hover { background: rgba(255, 255, 255, .12); }
.kf2-overlay button:focus-visible, .kf2-overlay a:focus-visible, .kf2-overlay input:focus-visible, .kf2-overlay select:focus-visible, .kf2-check:focus-visible + .kf2-value-text {
    outline: 3px solid #f2b705; outline-offset: 2px;
}
.kf2-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.kf2-side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--kf2-surface); border-right: 1px solid var(--kf2-line); }
.kf2-main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 40px; }
.kf2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- lewa kolumna: filtry --- */
.kf2-side-top { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--kf2-surface); border-bottom: 1px solid var(--kf2-line); }
.kf2-side-head { display: flex; align-items: center; justify-content: space-between; }
.kf2-side-title { margin: 0; font-size: 18px; font-weight: 600; }
.kf2-clear { min-height: 32px; padding: 4px 8px; border: 0; background: none; color: var(--kf2-accent); font: 600 13px var(--kf2-font); cursor: pointer; text-decoration: underline; }
.kf2-search { display: block; }
.kf2-search-input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--kf2-line-2); border-radius: var(--kf2-radius); background: var(--kf2-surface-2); color: var(--kf2-ink); font: 14px var(--kf2-font); }
.kf2-group { border-bottom: 1px solid var(--kf2-line); }
.kf2-group-title { margin: 0; font-size: 15px; }
.kf2-group-toggle {
    display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; padding: 8px 16px; border: 0; background: none;
    color: var(--kf2-ink); font: 600 15px var(--kf2-font); text-align: left; cursor: pointer;
}
.kf2-group-toggle:after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--kf2-muted); border-bottom: 2px solid var(--kf2-muted); transform: rotate(-135deg); margin: 4px 4px 0 8px; }
.kf2-group-toggle[aria-expanded="false"]:after { transform: rotate(45deg); margin-top: -4px; }
.kf2-group-body { padding: 0 16px 12px; }
.kf2-group-body[hidden] { display: none; }
.kf2-field { margin: 0 0 10px; }
.kf2-field-label { margin: 6px 0 2px; color: var(--kf2-ink-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kf2-value { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 0; cursor: pointer; }
.kf2-value input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--kf2-brand); }
.kf2-value-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kf2-value-count { flex: none; color: var(--kf2-muted); font-size: 12px; }
.kf2-value.kf2-zero { color: #687484; cursor: default; }
.kf2-value.kf2-zero .kf2-value-count { color: #687484; }
.kf2-value.kf2-on .kf2-value-text { font-weight: 600; }
.kf2-collapsed .kf2-extra:not(.kf2-on) { display: none; }
.kf2-searching .kf2-field .kf2-extra { display: flex; }
.kf2-searching .kf2-value:not(.kf2-hit), .kf2-searching .kf2-tree-item > .kf2-value:not(.kf2-hit) { opacity: .45; }
.kf2-searching .kf2-hit .kf2-value-text { background: #fff3c4; }
.kf2-link { min-height: 32px; padding: 4px 0; border: 0; background: none; color: var(--kf2-accent); font: 600 13px var(--kf2-font); text-decoration: underline; cursor: pointer; }
.kf2-tree { margin: 0; padding: 0 0 0 18px; list-style: none; }
.kf2-tree-top { padding-left: 0; }
.kf2-tree-item { margin: 0; }

/* suwak z histogramem */
.kf2-hist { display: flex; align-items: flex-end; gap: 2px; height: 36px; margin: 6px 0 2px; }
.kf2-bar { flex: 1 1 0; min-width: 2px; height: 0; background: var(--kf2-hist); border-radius: 1px 1px 0 0; }
.kf2-range-inputs { position: relative; height: 34px; margin: 0 2px; }
.kf2-range-inputs input { position: absolute; left: 0; right: 0; top: 6px; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 20px; }
.kf2-range-inputs input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 22px; height: 22px; border: 2px solid var(--kf2-brand); border-radius: 50%; background: #fff; cursor: pointer; }
.kf2-range-inputs input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border: 2px solid var(--kf2-brand); border-radius: 50%; background: #fff; cursor: pointer; }
.kf2-range-inputs input::-webkit-slider-runnable-track { height: 2px; background: var(--kf2-line-2); }
.kf2-range-inputs input.kf2-range-max::-webkit-slider-runnable-track { background: transparent; }
.kf2-range-inputs input::-moz-range-track { height: 2px; background: var(--kf2-line-2); }
.kf2-range-value { margin-top: 2px; color: var(--kf2-ink-2); font-size: 13px; }

/* claude 2026-11-07: etap 3 - naglowki grup z podsumowaniem, cena (suwak log, pola, progi), przyciski wartosci */
.kf2-group-name { flex: 1 1 auto; min-width: 0; }
.kf2-group-sum { flex: 0 1 auto; max-width: 55%; margin-left: 8px; overflow: hidden; color: var(--kf2-accent); font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.kf2-group-sum:empty { display: none; }
.kf2-bar.kf2-bar-on { background: var(--kf2-accent); }
.kf2-hist-price { gap: 1px; height: 44px; margin-top: 2px; }
.kf2-hist-price .kf2-bar { min-width: 1px; }
.kf2-price-ends { display: flex; justify-content: space-between; gap: 10px; margin: 2px 0 8px; }
.kf2-price-end { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--kf2-muted); font-size: 12px; }
.kf2-price-input {
    width: 82px; min-width: 0; min-height: 30px; padding: 3px 6px; border: 1px solid var(--kf2-line); border-radius: 4px; background: var(--kf2-surface);
    color: var(--kf2-ink); font: 13px var(--kf2-font); font-variant-numeric: tabular-nums; text-align: right;
}
.kf2-price-input:hover { border-color: var(--kf2-line-2); }
.kf2-quick, .kf2-vbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.kf2-qbtn, .kf2-vbtn {
    display: inline-flex; align-items: baseline; gap: 6px; min-height: 30px; padding: 4px 9px; border: 1px solid var(--kf2-line-2); border-radius: 4px;
    background: var(--kf2-surface); color: var(--kf2-ink); font: 13px/1.2 var(--kf2-font); cursor: pointer;
}
.kf2-qbtn:hover, .kf2-vbtn:hover { border-color: var(--kf2-brand); }
.kf2-qbtn-count, .kf2-vbtn-count { color: var(--kf2-muted); font-size: 11px; }
.kf2-qbtn.kf2-on, .kf2-vbtn.kf2-on { border-color: var(--kf2-brand); background: var(--kf2-brand); color: var(--kf2-brand-ink); }
.kf2-qbtn.kf2-on .kf2-qbtn-count, .kf2-vbtn.kf2-on .kf2-vbtn-count { color: #c9d7e6; }
.kf2-qbtn.kf2-zero, .kf2-vbtn.kf2-zero { border-color: var(--kf2-line); background: var(--kf2-surface-2); color: #606c7c; cursor: default; }
.kf2-qbtn.kf2-zero .kf2-qbtn-count, .kf2-vbtn.kf2-zero .kf2-vbtn-count { color: #606c7c; }
.kf2-note { margin: 8px 0 0; color: var(--kf2-muted); font-size: 12px; line-height: 1.35; }
.kf2-buttons .kf2-field-label, .kf2-range .kf2-field-label { margin-bottom: 6px; }
.kf2-field + .kf2-field { margin-top: 14px; }

/* --- prawa czesc --- */
.kf2-intro { margin: 0 0 18px; }
.kf2-cat-title { margin: 0 0 4px; color: var(--kf2-ink); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.kf2-lead { max-width: 640px; margin: 0; color: var(--kf2-ink-2); font-size: 14px; }
.kf2-sub { margin: 0 0 10px; color: var(--kf2-ink-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.kf2-sub-note { color: var(--kf2-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.kf2-profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0 0 28px; }   /* claude 2026-11-08: bylo 18 px; nieco wiecej miejsca przed polem opisu (Darek) */
.kf2-profile {
    display: flex; flex-direction: column; gap: 4px; min-height: 104px; padding: 12px 14px; border: 1px solid var(--kf2-line); border-radius: 8px;
    background: var(--kf2-surface); box-shadow: var(--kf2-shadow); color: var(--kf2-ink); font: 14px/1.35 var(--kf2-font); text-align: left; cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.kf2-profile:hover { border-color: var(--kf2-line-2); box-shadow: 0 1px 2px rgba(19, 32, 47, .06), 0 8px 22px rgba(19, 32, 47, .1); }
.kf2-profile.kf2-on { border: 2px solid var(--kf2-brand); padding: 11px 13px; background: var(--kf2-accent-soft); box-shadow: none; }
.kf2-profile-name { font-weight: 600; font-size: 15px; }
.kf2-profile-desc { color: var(--kf2-muted); font-size: 12px; }
.kf2-profile-count { margin-top: auto; padding-top: 6px; color: var(--kf2-accent); font-size: 13px; font-weight: 600; }
.kf2-assets-text { position: relative; margin: 0 0 14px; padding: 0 0 14px 16px; border-bottom: 1px solid var(--kf2-line); color: var(--kf2-ink-2); font-size: 13px; }
.kf2-assets-text:before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--kf2-good); }
/* claude 2026-11-07: pole "Opisz, czego szukasz" (etap 4, 07; wyglad z prototypu: formularz .ask) */
.kf2-ask { display: grid; gap: 8px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--kf2-line); border-radius: 8px; background: var(--kf2-surface); }
.kf2-ask-label { color: var(--kf2-ink); font-size: 15px; font-weight: 600; }
.kf2-ask-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kf2-ask-input {
    flex: 1 1 260px; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 8px 11px; border: 1px solid var(--kf2-line-2); border-radius: var(--kf2-radius);
    background: var(--kf2-surface-2); color: var(--kf2-ink); font: 14px var(--kf2-font);
}
.kf2-ask-input:focus { border-color: var(--kf2-accent); background: var(--kf2-surface); outline: 2px solid var(--kf2-accent-soft); }
.kf2-ask-go {
    flex: 0 0 auto; min-height: 40px; padding: 8px 18px; border: 1px solid var(--kf2-brand); border-radius: var(--kf2-radius); background: var(--kf2-brand);
    color: var(--kf2-brand-ink); font: 600 14px var(--kf2-font); cursor: pointer;
}
.kf2-ask-go:hover { background: #24497a; }
.kf2-ask-go:disabled { opacity: .7; cursor: default; }
.kf2-ask-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kf2-ask-ex-label { color: var(--kf2-muted); font-size: 12.5px; }
.kf2-ask-ex {
    min-height: 28px; padding: 2px 10px; border: 1px dashed var(--kf2-line-2); border-radius: 999px; background: none; color: var(--kf2-ink-2);
    font: 12.5px var(--kf2-font); text-align: left; cursor: pointer;
}
.kf2-ask-ex:hover { border-color: var(--kf2-accent); color: var(--kf2-accent); }
.kf2-ask-out:empty { display: none; }
/* claude 2026-11-07: "Ustawione filtry:" czytelniej (zetony w zwyklej wielkosci, profil jednym zetonem), podpowiedz pod polem,
   propozycje profili (uwagi Darka po tescie na dev) */
.kf2-ask-tip { margin: 0; color: var(--kf2-muted); font-size: 13px; }
.kf2-ask-got { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.kf2-ask-lbl { margin: 2px 0 0; color: var(--kf2-ink); font-size: 14px; font-weight: 600; }
.kf2-ask-chip { padding: 5px 10px; border: 1px solid var(--kf2-line-2); border-radius: var(--kf2-radius); background: var(--kf2-accent-soft); color: var(--kf2-ink); font-size: 14px; line-height: 1.35; }
.kf2-ask-chip-profile { border-color: var(--kf2-brand); background: var(--kf2-surface); }
.kf2-ask-note, .kf2-ask-miss, .kf2-ask-hint { margin: 6px 0 0; color: var(--kf2-ink-2); font-size: 13.5px; }
.kf2-ask-hint { color: var(--kf2-muted); }
.kf2-ask-note { color: var(--kf2-ink-2); }
.kf2-ask-weak { color: var(--kf2-ink-2); }
.kf2-ask-profiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.kf2-ask-prof { border-style: solid; border-color: var(--kf2-brand); color: var(--kf2-brand); font-weight: 600; }
.kf2-ask-busy .kf2-ask-input { background-image: linear-gradient(90deg, transparent, var(--kf2-accent-soft), transparent); background-size: 200% 100%; animation: kf2-ask-wait 1.2s linear infinite; }
@keyframes kf2-ask-wait { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.kf2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.kf2-chips:empty { display: none; }
.kf2-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%; padding: 4px 10px 4px 12px; border: 1px solid #c9d8ea; border-radius: 16px;
    background: var(--kf2-accent-soft); color: var(--kf2-ink); font: 13px var(--kf2-font); text-align: left; cursor: pointer;
}
.kf2-chip:hover { border-color: var(--kf2-brand); }
.kf2-chip-profile { border-style: dashed; background: var(--kf2-surface); }
.kf2-chip-from { color: var(--kf2-accent); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.kf2-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.kf2-count { color: var(--kf2-ink-2); font-size: 16px; }
.kf2-count-n { color: var(--kf2-ink); font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.kf2-count-of { color: var(--kf2-muted); font-size: 13px; }
.kf2-sort { color: var(--kf2-ink-2); font-size: 13px; }
.kf2-sort-select { min-height: 40px; margin-left: 4px; padding: 6px 8px; border: 1px solid var(--kf2-line-2); border-radius: var(--kf2-radius); background: var(--kf2-surface); color: var(--kf2-ink); font: 14px var(--kf2-font); }
.kf2-status { padding: 24px 0; color: var(--kf2-ink-2); }
.kf2-wait { color: var(--kf2-ink-2); }

/* karty produktow */
.kf2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.kf2-card { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--kf2-line); border-radius: 8px; background: var(--kf2-surface); box-shadow: var(--kf2-shadow); transition: border-color .12s; }
.kf2-card:hover { border-color: var(--kf2-line-2); }
.kf2-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 20px; }
.kf2-card-series { color: var(--kf2-accent); font-size: 12px; font-weight: 600; }
.kf2-avail { flex: none; color: var(--kf2-warn); font-size: 12px; }
.kf2-avail-ok { color: var(--kf2-good); }
.kf2-avail-ok:before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.kf2-card-head { display: flex; gap: 10px; margin: 6px 0 2px; }
.kf2-card-img { flex: none; display: block; width: 64px; height: 48px; }
.kf2-card-img img { display: block; width: 64px; height: 48px; object-fit: contain; }
.kf2-card-name { color: var(--kf2-ink) !important; font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none !important; overflow-wrap: anywhere; }
.kf2-card-name:hover { text-decoration: underline !important; }
.kf2-card-pn { color: var(--kf2-muted); font: 12px/1.4 Consolas, "Liberation Mono", Menlo, monospace; overflow-wrap: anywhere; }
.kf2-card-head > div { min-width: 0; }
.kf2-card-params { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0 8px; padding: 0; list-style: none; }
.kf2-param-label { display: block; color: var(--kf2-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kf2-param-value { display: block; font-size: 13px; overflow-wrap: anywhere; }
.kf2-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.kf2-badge { padding: 1px 7px; border: 1px solid var(--kf2-line-2); border-radius: 4px; color: var(--kf2-ink-2); font-size: 12px; }
.kf2-badge:first-child { border-color: #9fbbd9; color: var(--kf2-accent); }
.kf2-card-buy { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--kf2-line); }
.kf2-price { font-size: 18px; font-weight: 700; line-height: 1.2; }
.kf2-price-second { color: var(--kf2-muted); font-size: 12px; }
.kf2-price-ask { font-weight: 600; }
.kf2-compare {
    display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--kf2-brand); border-radius: var(--kf2-radius);
    color: var(--kf2-brand) !important; font-size: 13px; font-weight: 600; text-decoration: none !important;
}
.kf2-compare:hover { background: var(--kf2-accent-soft); }
.kf2-more-wrap { margin: 16px 0 0; text-align: center; }
.kf2-button {
    min-height: 44px; padding: 10px 20px; border: 1px solid var(--kf2-brand); border-radius: var(--kf2-radius); background: var(--kf2-brand);
    color: var(--kf2-brand-ink); font: 600 14px var(--kf2-font); cursor: pointer;
}
.kf2-empty, .kf2-error { padding: 20px; border: 1px solid var(--kf2-line); border-radius: var(--kf2-radius); background: var(--kf2-surface); }
.kf2-empty p, .kf2-error p { margin: 0 0 10px; }
.kf2-empty-title { font-size: 16px; font-weight: 600; }
.kf2-mobilebar { display: none; }

/* --- tablet i telefon: filtry w szufladzie od dolu, staly pasek "Pokaz N produktow" (04, Telefon i tablet) --- */
@media (max-width: 900px) {
    .kf2-body { display: block; position: relative; }
    .kf2-main { height: 100%; padding: 14px 14px 88px; }
    .kf2-side {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; height: 86%; border: 0; border-radius: 12px 12px 0 0;
        box-shadow: 0 -8px 30px rgba(8, 16, 26, .3); transform: translateY(105%); visibility: hidden; padding-bottom: 72px;
        transition: transform .15s ease-out, visibility 0s linear .15s;
    }
    .kf2-drawer-open .kf2-side { transform: none; visibility: visible; transition: transform .15s ease-out; }
    .kf2-mobilebar {
        display: flex; gap: 8px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 10px 12px;
        background: var(--kf2-surface); border-top: 1px solid var(--kf2-line); box-shadow: 0 -4px 12px rgba(19, 32, 47, .08);
    }
    .kf2-mobile-filters, .kf2-mobile-show { min-height: 44px; border-radius: var(--kf2-radius); font: 600 15px var(--kf2-font); cursor: pointer; }
    .kf2-mobile-filters { flex: 0 0 auto; padding: 0 18px; border: 1px solid var(--kf2-brand); background: var(--kf2-surface); color: var(--kf2-brand); }
    .kf2-mobile-show { flex: 1 1 auto; border: 1px solid var(--kf2-brand); background: var(--kf2-brand); color: var(--kf2-brand-ink); }
    /* claude 2026-11-08: odstep przed polem opisu proporcjonalnie mniejszy niz na komputerze (22 zamiast 28 px) */
    .kf2-profiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-bottom: 22px; }
    .kf2-profile { flex: 0 0 calc((100% - 30px) / 4); min-width: 170px; scroll-snap-align: start; }
    .kf2-head-count { display: none; }
    /* claude 2026-11-07: na telefonie i tablecie kazdy element dotykowy co najmniej 44 px (04, Telefon; uwaga Zdzichy do PR #23) */
    .kf2-value, .kf2-chip, .kf2-link, .kf2-clear, .kf2-compare, .kf2-sort-select, .kf2-search-input, .kf2-more-values,
    .kf2-qbtn, .kf2-vbtn, .kf2-price-input, .kf2-ask-input, .kf2-ask-go, .kf2-ask-ex { min-height: 44px; }
    .kf2-qbtn, .kf2-vbtn { align-items: center; padding: 6px 12px; }
    /* claude 2026-11-07: nazwa produktu w karcie jako cel dotykowy co najmniej 44 px (bez zmiany ukladu) */
    .kf2-card-name { display: inline-block; padding: 12px 0; margin: -12px 0; }
    .kf2-range-inputs { height: 44px; }
    .kf2-range-inputs input { top: 0; height: 44px; }
    .kf2-range-inputs input::-webkit-slider-thumb { width: 28px; height: 28px; }
    .kf2-range-inputs input::-moz-range-thumb { width: 24px; height: 24px; }
}
@media (max-width: 560px) {
    .kf2-cat-title { font-size: 22px; }
    .kf2-lead { display: none; }
    .kf2-intro { margin-bottom: 12px; }
    .kf2-head { padding: 6px 8px 6px 14px; }
    .kf2-title { font-size: 17px; }
    .kf2-profile { flex-basis: 72%; min-width: 0; }
    .kf2-grid { grid-template-columns: minmax(0, 1fr); }
    .kf2-toolbar { gap: 6px; }
    .kf2-count { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .kf2-side, .kf2-drawer-open .kf2-side { transition: none; }
    .kf2-ask-busy .kf2-ask-input { animation: none; }
}

/* ===== claude 2026-11-07: prawy pasek, nowy wyglad (etap 3, 05-prawy-pasek.md). Tylko sekcja .kqs-filters z klasa
   kf2-pasek (PHP dodaje ja przy nowym wygladzie) i zetony .kf2-pasek-chips; reszta sklepu bez zmian. Bez JS: sam CSS. ===== */
.kf2-pasek, .kf2-pasek-chips, .kf2-psubmit {
    --kf2-surface: #ffffff;
    --kf2-surface-2: #f4f6f9;
    --kf2-ink: #13202f;
    --kf2-ink-2: #3d4c5f;
    --kf2-muted: #5d6c80;
    --kf2-line: #d9e0e8;
    --kf2-line-2: #bfcad7;
    --kf2-brand: #1b3a5c;
    --kf2-accent: #1d5d9b;
    --kf2-accent-soft: #e1ebf6;
    --kf2-font: "Segoe UI", Arial, sans-serif;
    --kf2-hist: #cbd5e1;        /* claude 2026-11-08: wykresy zakresow w pasku */
    --kf2-brand-ink: #f2f6fa;
}
.kqs-filters.kf2-pasek {
    padding: 0; border: 1px solid var(--kf2-line); border-radius: 8px; background: var(--kf2-surface); color: var(--kf2-ink);
    font: 13px/1.4 var(--kf2-font); font-variant-numeric: tabular-nums;
}
.kqs-filters.kf2-pasek-js { border-radius: 8px 8px 0 0; }
.kqs-filters.kf2-pasek .kqs-filter-title {
    display: flex; align-items: center; gap: 8px; width: auto; height: auto; margin: 0; padding: 12px 14px; border-radius: 0;
    border-bottom: 1px solid var(--kf2-line); background: none; color: var(--kf2-ink); font: 600 17px/1.2 var(--kf2-font);
}
.kf2-pbadge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--kf2-accent-soft); color: var(--kf2-accent); font: 600 12px/20px var(--kf2-font); text-align: center; }
.kqs-filters.kf2-pasek a.kf2-pclear { margin-left: auto; color: var(--kf2-accent); font: 600 12px/1.2 var(--kf2-font); text-decoration: none; white-space: nowrap; }
.kqs-filters.kf2-pasek a.kf2-pclear:hover { text-decoration: underline; }
.kqs-filters.kf2-pasek .kqs-filter-groups { display: block; }
.kqs-filters.kf2-pasek .kqs-filter-group { display: block; margin: 0; padding: 0; border-bottom: 1px solid var(--kf2-line); }
.kqs-filters.kf2-pasek .kqs-filter-groups > .kqs-filter-group:last-child { border-bottom: 0; }
.kqs-filters.kf2-pasek .kqs-filter-option { margin: 0; padding: 10px 14px 4px; color: var(--kf2-ink); font: 600 14px/1.3 var(--kf2-font); }
.kqs-filters.kf2-pasek .kqs-filter-group > .kqs-filter-value, .kqs-filters.kf2-pasek .kqs-filter-group > .kqs-filter-range { margin-left: 14px; margin-right: 14px; }
.kqs-filters.kf2-pasek .kqs-filter-group > :last-child { margin-bottom: 10px; }
.kf2-dzial { padding: 14px 14px 6px; border-bottom: 1px solid var(--kf2-line); background: var(--kf2-surface-2); color: var(--kf2-ink-2); font: 600 11px/1.2 var(--kf2-font); text-transform: uppercase; letter-spacing: .06em; }

/* naglowek grupy jako przycisk zwijania (z JS) */
.kqs-filters.kf2-pasek .kf2-pg-head { padding: 0; }
.kqs-filters.kf2-pasek .kf2-pg-toggle {
    display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; margin: 0; padding: 8px 14px; border: 0; border-radius: 0;
    background: none; color: var(--kf2-ink); font: 600 14px/1.3 var(--kf2-font); text-align: left; cursor: pointer;
}
.kqs-filters.kf2-pasek .kf2-pg-toggle:hover { background: var(--kf2-surface-2); }
.kf2-pg-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kf2-pg-sum { flex: 0 1 auto; max-width: 48%; overflow: hidden; color: var(--kf2-accent); font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.kf2-pg-sum:empty { display: none; }
.kqs-filters.kf2-pasek .kf2-pg-toggle:after {
    content: ""; flex: none; width: 7px; height: 7px; margin: 3px 2px 0 4px; border-right: 2px solid var(--kf2-muted); border-bottom: 2px solid var(--kf2-muted); transform: rotate(-135deg);
}
.kqs-filters.kf2-pasek .kf2-pg-toggle[aria-expanded="false"]:after { margin-top: -4px; transform: rotate(45deg); }
.kf2-pg-body { padding: 0 14px 10px; }
.kf2-pg-body[hidden] { display: none; }
.kqs-filters.kf2-pasek .kf2-pg .kqs-filter-group > :last-child { margin-bottom: 0; }

/* wartosci: pole wyboru, nazwa, licznik wyrownany do prawej (P5) */
.kqs-filters.kf2-pasek .kqs-filter-value { display: flex; align-items: flex-start; gap: 8px; min-height: 30px; box-sizing: border-box; margin: 0; padding: 6px 4px 4px; border-radius: 4px; line-height: 1.35; }
.kqs-filters.kf2-pasek .kqs-filter-value:hover { background: var(--kf2-surface-2); }
.kqs-filters.kf2-pasek .kqs-filter-value > .subcheckbox { display: none !important; }
.kqs-filters.kf2-pasek .kqs-filter-value input[type=checkbox], .kqs-filters.kf2-pasek .kqs-filter-ready > input.kqs-filter-native[type=checkbox] {
    position: static; flex: none; width: 16px; height: 16px; min-height: 0; margin: 1px 0 0; padding: 0; opacity: 1; accent-color: var(--kf2-brand); cursor: pointer;
}
.kqs-filters.kf2-pasek .kqs-filter-value > span { flex: 1 1 auto; min-width: 0; }
.kf2-pv { display: flex; align-items: baseline; gap: 6px; }
.kqs-filters.kf2-pasek .kqs-filter-value a, .kqs-filters.kf2-pasek .kqs-filter-value a.kf2-pv-name { flex: 1 1 auto; min-width: 0; color: var(--kf2-ink); text-decoration: none; overflow-wrap: anywhere; }
.kqs-filters.kf2-pasek .kqs-filter-value a:hover { color: var(--kf2-accent); text-decoration: underline; }
.kf2-pcount { flex: none; margin-left: auto; color: var(--kf2-muted); font-size: 12px; }
.kqs-filters.kf2-pasek .kf2-pon a.kf2-pv-name { font-weight: 600; }
.kqs-filters.kf2-pasek .kf2-pzero, .kqs-filters.kf2-pasek .kf2-pzero a.kf2-pv-name { color: var(--kf2-muted); }
/* claude 2026-11-08: pasek na zywo, wartosc z zerem przy obecnych wyborach: nieaktywna */
.kqs-filters.kf2-pasek .kf2-plive-zero, .kqs-filters.kf2-pasek .kf2-plive-zero a, .kqs-filters.kf2-pasek .kf2-plive-zero input { cursor: not-allowed; opacity: .55; }
.kf2-pg-short .kf2-pextra { display: none !important; }
.kf2-psearching .kqs-filter-value:not(.kf2-phit) { display: none !important; }
.kf2-psearching .kf2-pextra.kf2-phit { display: flex !important; }
.kqs-filters.kf2-pasek .kf2-pmore {
    min-height: 30px; margin: 2px 0 0; padding: 4px; border: 0; background: none; color: var(--kf2-accent); font: 600 12px var(--kf2-font); cursor: pointer;
}
.kqs-filters.kf2-pasek .kf2-pmore:hover { text-decoration: underline; }
.kf2-psearch { display: block; margin: 0 0 6px; }
.kqs-filters.kf2-pasek .kf2-psearch input {
    width: 100%; min-height: 32px; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--kf2-line-2); border-radius: 6px;
    background: var(--kf2-surface-2); color: var(--kf2-ink); font: 13px var(--kf2-font);
}
.kf2-pnone { padding: 4px; color: var(--kf2-muted); font-size: 12px; }
.kf2-pasek .kf2-sr, .kf2-psearch .kf2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* pola "od-do" z jednostka; suwak tylko w oknie Filtry 2.0 (05, Nowy wyglad 6) */
.kqs-filters.kf2-pasek .kqs-filter-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 2px; }
.kqs-filters.kf2-pasek .kqs-filter-range label { position: relative; display: block; min-width: 0; color: var(--kf2-muted); font: 12px/1.6 var(--kf2-font); }
.kqs-filters.kf2-pasek .kqs-filter-range input[type=text] {
    display: block; width: 100%; min-height: 34px; box-sizing: border-box; margin: 2px 0 0; padding: 6px 7px; border: 1px solid var(--kf2-line-2); border-radius: 6px;
    background: var(--kf2-surface); color: var(--kf2-ink); font: 14px var(--kf2-font); font-variant-numeric: tabular-nums;
}
.kf2-unit { color: var(--kf2-muted); }
.kqs-filters.kf2-pasek-js .kqs-filter-range input[type=submit] { display: none; }
.kqs-filters.kf2-pasek .kqs-filter-range input.finra { display: none; }
.kqs-front .kqs-filters.kf2-pasek .kqs-filter-range input[type=submit] {
    grid-column: 1 / -1; height: auto; min-height: 32px; padding: 4px 8px; border: 1px solid var(--kf2-line-2); border-radius: 6px;
    background: var(--kf2-surface-2); color: var(--kf2-ink-2); font: 600 12px var(--kf2-font);
}
.kqs-filters.kf2-pasek .kqs-filter-range input[type=submit] {
    grid-column: 1 / -1; min-height: 32px; border: 1px solid var(--kf2-line-2); border-radius: 6px; background: var(--kf2-surface-2); color: var(--kf2-ink-2); font: 600 12px var(--kf2-font);
}

/* claude 2026-11-08: wykresy pol "od-do" (wyglad jak suwak w oknie: slupki, dwa uchwyty, progi ceny); pola "od-do" pod spodem */
.kqs-filters.kf2-pasek .kf2-pw, .kqs-filters.kf2-pasek .kf2-pquick { grid-column: 1 / -1; flex-basis: 100%; min-width: 0; }
.kqs-filters.kf2-pasek .kf2-phist { height: 40px; margin: 4px 2px 0; gap: 1px; }
.kqs-filters.kf2-pasek .kf2-phist .kf2-bar { min-width: 1px; transition: height .12s; }
.kqs-filters.kf2-pasek .kf2-pw-czeka .kf2-phist { background: linear-gradient(var(--kf2-surface-2), var(--kf2-surface-2)) bottom / 100% 2px no-repeat; }
.kqs-filters.kf2-pasek .kf2-pw-brak .kf2-phist { display: none; }
.kqs-filters.kf2-pasek .kf2-range-inputs { height: 30px; margin: 0 2px; }
.kqs-filters.kf2-pasek .kf2-range-inputs input { top: 5px; }
.kqs-filters.kf2-pasek .kf2-pquick { margin: 2px 0 0; gap: 5px; }
.kqs-filters.kf2-pasek .kf2-pquick .kf2-qbtn { min-height: 30px; padding: 4px 8px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .kqs-filters.kf2-pasek .kf2-phist .kf2-bar { transition: none; } }

/* zetony aktywnych filtrow (05, Nowy wyglad 2); takze po przeniesieniu nad liste na telefonie */
.kf2-pasek .kqs-selected-filters { padding: 10px 14px; border-bottom: 1px solid var(--kf2-line); }
.kqs-selected-filters.kf2-pasek-chips { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--kf2-font); }
.kf2-pasek-chips .kqs-selected-filter-group { display: contents; }
.kf2-pasek-chips .kqs-selected-filter-group > .fop { display: none; }
.kf2-pasek-chips .kqs-selected-filter { display: block; margin: 0; padding: 0; }
.kf2-pasek-chips a.kf2-pchip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; box-sizing: border-box; padding: 3px 8px 3px 10px;
    border: 1px solid #c9d8ea; border-radius: 14px; background: var(--kf2-accent-soft); color: var(--kf2-ink); font: 12px/1.3 var(--kf2-font); text-decoration: none;
}
.kf2-pasek-chips a.kf2-pchip:hover { border-color: var(--kf2-accent); }
.kf2-pchip-text { min-width: 0; overflow-wrap: anywhere; }
.kf2-pchip-x { flex: none; color: var(--kf2-ink-2); font-size: 15px; line-height: 1; }

/* przycisk "Filtruj" na dole paska; po zmianie wyboru przyklejony do dolu ekranu, zeby nie trzeba bylo go szukac */
.kqs-front form > .kf2-psubmit, .kf2-psubmit {
    position: relative; z-index: 2; margin: 0 !important; padding: 10px 14px; border: 1px solid var(--kf2-line); border-top: 0; border-radius: 0 0 8px 8px;
    background: rgba(255, 255, 255, .97);
}
.kqs-front form > .kf2-psubmit.kf2-pdirty, .kf2-psubmit.kf2-pdirty { position: sticky; bottom: 0; box-shadow: 0 -4px 10px rgba(19, 32, 47, .08); }
.kqs-front form > div.kf2-psubmit > input.przycisk[type=submit], .kf2-psubmit > input.przycisk[type=submit] {
    width: 100%; height: auto; min-height: 40px; padding: 8px; border: 1px solid var(--kf2-brand) !important; border-radius: 6px !important;
    background: var(--kf2-brand) !important; color: #fff !important; font: 600 14px var(--kf2-font) !important; cursor: pointer;
}
.kf2-psubmit > input.przycisk[type=submit]:hover { background: #24497a !important; }
.kqs-filters.kf2-pasek button:focus-visible, .kqs-filters.kf2-pasek a:focus-visible, .kqs-filters.kf2-pasek input:focus-visible, .kf2-pasek-chips a:focus-visible, .kf2-psubmit input:focus-visible {
    outline: 3px solid #f2b705; outline-offset: 1px;
}

/* ponizej 1024 px pasek jest w szufladzie "Filtry" responsywnego frontu: wieksze pola dotykowe; przycisk okna z paska
   ukryty (trafial do szuflady "Kategorie i producent" albo "Wiecej"), zostaje przycisk nad lista */
@media (max-width: 1023px) {
    .kf2-slot.kf2-slot-side { display: none !important; }
    .kqs-filters.kf2-pasek .kqs-filter-value, .kqs-filters.kf2-pasek .kf2-pg-toggle, .kqs-filters.kf2-pasek .kf2-pmore,
    .kqs-filters.kf2-pasek .kf2-psearch input, .kqs-filters.kf2-pasek .kqs-filter-range input[type=text], .kf2-pasek-chips a.kf2-pchip,
    .kqs-filters.kf2-pasek a.kf2-pclear { min-height: 44px; }
    .kqs-filters.kf2-pasek a.kf2-pclear { display: inline-flex; align-items: center; }
    .kqs-filters.kf2-pasek .kqs-filter-value input[type=checkbox], .kqs-filters.kf2-pasek .kqs-filter-ready > input.kqs-filter-native[type=checkbox] { width: 20px; height: 20px; }
    .kqs-filters.kf2-pasek .kqs-filter-range input[type=submit] { min-height: 44px; }
    /* claude 2026-11-08: suwak wykresu i progi ceny w szufladzie: pole dotyku 44 px */
    .kqs-filters.kf2-pasek .kf2-range-inputs { height: 44px; }
    .kqs-filters.kf2-pasek .kf2-range-inputs input { top: 0; height: 44px; }
    .kqs-filters.kf2-pasek .kf2-range-inputs input::-webkit-slider-thumb { width: 28px; height: 28px; }
    .kqs-filters.kf2-pasek .kf2-range-inputs input::-moz-range-thumb { width: 24px; height: 24px; }
    .kqs-filters.kf2-pasek .kf2-pquick .kf2-qbtn { min-height: 44px; padding: 6px 12px; font-size: 13px; }
    .kf2-psubmit > input.przycisk[type=submit] { min-height: 44px; }
}
/* claude 2026-11-08: pusty wynik przy nowym pasku: zetony "usun" jak "Wybrane filtry" (style.css), pole klikniecia min. 44 px */
.kf2-pusty .kf2-pusty-lista { margin: 10px 0; }
.kf2-pusty .category_filter { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px 0 40px; margin: 0 6px 8px 0; box-sizing: border-box; line-height: 1.3; }
.kf2-pusty .category_filter span { display: flex; align-items: center; justify-content: center; top: 50%; left: 8px; width: 26px; height: 26px; transform: translateY(-50%); }
.kf2-pusty .category_filter span i { margin-top: 0; }
.kf2-pusty .kf2-pusty-wszystkie { background: #fff; border: 1px solid #dcdcdc; }

/* claude 2026-11-10: uwagi Darka z dev: na komputerze (od 1024 px) "Filtry 2.0" i "Pokaz X produktow" przyklejone u gory prawej kolumny */
.kf2-ptop { display: none; }
@media (min-width: 1024px) {   /* claude 2026-11-10: ta sama granica co szuflada frontu (max-width 1023px) */
    .kf2-ptop-sticky { position: sticky; top: 0; z-index: 3; padding: 6px 0; background: rgba(255, 255, 255, .97); }
    .kf2-ptop-dirty .kf2-ptop {
        display: block; width: 100%; min-height: 40px; margin: 6px 0 0; padding: 8px; border: 1px solid #1b3a5c; border-radius: 6px;
        background: #1b3a5c; color: #fff; font: 600 14px/1.2 "Segoe UI", Arial, sans-serif; cursor: pointer;
    }
    .kf2-ptop-dirty .kf2-ptop:hover { background: #24497a; }
    .kf2-ptop:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
}