/* katalog-edu.css - pasek filtrow listingu swiata (port silnika katalog.js z npz.pl, 2026-09-04).
   Karty = .kategoria-card z info.css (wyglad edumovly bez zmian). Tu TYLKO: pasek
   (szukaj / tylko nowosci / sort / licznik), badge na karcie, stan pusty.
   Celowo BEZ zaleznosci od tokenow npz.pl (--hair, --mono itd.) - edumovly ich nie ma. */

.katalog-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 auto 28px;max-width:1200px;padding:14px 18px;background:#fff;border:1px solid #e3ead9;border-radius:16px;box-shadow:0 2px 10px rgba(15,18,62,.06)}

.katalog-q{flex:1 1 260px;min-width:200px;padding:11px 14px 11px 42px;font:inherit;font-size:15px;color:#0f123e;background:#f6f9f3 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f123e' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat 14px center/18px 18px;border:1px solid #d8e2cc;border-radius:999px;outline:none;transition:border-color .15s,box-shadow .15s}
.katalog-q::placeholder{color:#8a93a0}
.katalog-q:focus{border-color:#68b42d;box-shadow:0 0 0 3px rgba(104,180,45,.18)}

.katalog-new,.katalog-sort{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0f123e;cursor:pointer;white-space:nowrap}
.katalog-new input{width:18px;height:18px;margin:0;accent-color:#68b42d;cursor:pointer}
.katalog-sort select{font:inherit;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:#0f123e;padding:8px 12px;border:1px solid #d8e2cc;border-radius:10px;background:#fff;cursor:pointer}
.katalog-sort select:focus{outline:none;border-color:#68b42d;box-shadow:0 0 0 3px rgba(104,180,45,.18)}

.katalog-count{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b7280;white-space:nowrap}

/* badge na karcie (Nowosc / N wariantow) - karta z info.css, tu tylko pozycja */
.kategoria-card-photo{position:relative}
.kat-badges{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:2;pointer-events:none}
.kat-badge{display:inline-block;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#68b42d;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.kat-badge--fam{background:#0f123e}

/* stan pusty + toggle widocznosci przez [hidden] (silnik ustawia .hidden na #grid/#empty) */
#grid[hidden],#empty[hidden]{display:none}
#empty{text-align:center;padding:40px 20px}
#empty p{margin:0 0 16px;color:#0f123e;font-size:17px}
#clearFilters{font:inherit;cursor:pointer}

/* uklad: lewy sidebar facetow (Kategoria) + siatka kart. Silnik generuje .facet/.facetopt (klasy z katalog.js). */
.katalog-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start;max-width:1200px;margin:0 auto}
.katalog-facets{position:sticky;top:16px;background:#fff;border:1px solid #e3ead9;border-radius:16px;padding:16px 18px;box-shadow:0 2px 10px rgba(15,18,62,.06)}
.facets__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.facets__title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b7280}
.facet{margin-top:12px}
.facet__h{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0f123e;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid #edf2e6}
.facet__list{display:flex;flex-direction:column;gap:2px}
.facetopt{position:relative;display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:8px;cursor:pointer;font-size:14px;color:#0f123e;line-height:1.3}
.facetopt:hover{background:#f6f9f3}
.facetopt__cb{position:absolute;opacity:0;width:0;height:0;margin:0}
.facetopt__box{flex:0 0 18px;width:18px;height:18px;border:2px solid #b9c7ab;border-radius:5px;background:#fff;position:relative;transition:background .12s,border-color .12s}
.facetopt.is-active .facetopt__box{background:#68b42d;border-color:#68b42d}
.facetopt.is-active .facetopt__box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.facetopt.is-active .facetopt__label{font-weight:700}
.facetopt__label{flex:1 1 auto}
.facetopt__n{font-size:12px;color:#8a93a0;font-variant-numeric:tabular-nums}
.facet__more{margin-top:6px;background:none;border:0;padding:4px 6px;font:inherit;font-size:13px;font-weight:700;color:#4f8a22;cursor:pointer}
.facet__more:hover{text-decoration:underline}

@media (max-width:900px){
  .katalog-layout{grid-template-columns:1fr;gap:18px}
  .katalog-facets{position:static}
}
@media (max-width:640px){
  .katalog-bar{padding:12px;gap:10px 12px}
  .katalog-count{margin-left:0;width:100%}
}