/**
 * AleSmyk Smart Filters — assets/asf.css
 * Wersja: 1.0.23
 * Ostylowanie widgetu filtrów AJAX (kategorie, atrybuty, cena) w stylu Blocksy.
 */
.asf-filter {
  position: relative;
  font-size: var(--asf-font-size, 13px);
  line-height: var(--asf-line-height, 1.4);
  letter-spacing: var(--asf-letter-spacing, 0px);
}
.asf-section { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid rgba(0,0,0,.08); }
.asf-section:last-of-type { border-bottom: 0; }
.asf-section h4 {
  margin: 0 0 12px;
  font-size: calc(var(--asf-font-size, 13px) + 1px);
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
}
.asf-options { display: grid; gap: 2px; max-height: 340px; overflow: auto; padding-right: 4px; }
.asf-option {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: var(--asf-font-size, 13px);
  font-weight: var(--asf-font-weight, 400);
  line-height: var(--asf-line-height, 1.4);
  letter-spacing: var(--asf-letter-spacing, 0px);
  padding: 5px 4px;
  margin: 0 -4px;
  border-radius: 4px;
  transition: background-color .12s ease;
}
.asf-option:hover { background-color: rgba(0,0,0,.035); }
.asf-option:has(input:checked) { font-weight: 600; }
.asf-option input { margin: 0; }
.asf-count { opacity: .55; font-size: calc(var(--asf-font-size, 13px) - 1px); }

/* Kwadratowe checkboxy/radia w stylu Blocksy zamiast domyślnych przeglądarkowych */
.asf-option input[type="checkbox"],
.asf-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1.5px solid rgba(0,0,0,.28);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  margin: 0;
  transition: border-color .15s ease, background-color .15s ease;
}
.asf-option input[type="checkbox"]:checked,
.asf-option input[type="radio"]:checked {
  border-color: currentColor;
  background-color: currentColor;
}
.asf-option input[type="checkbox"]:checked::after,
.asf-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.asf-price-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.asf-price-fields label { display: grid; gap: 4px; font-size: 11px; opacity: .75; position: relative; }
.asf-price-fields input { width: 100%; min-width: 0; padding-right: 22px; box-sizing: border-box; }
.asf-price-fields i { position: absolute; right: 8px; bottom: 8px; font-style: normal; font-size: 12px; opacity: .55; pointer-events: none; }
.asf-actions { margin-top: 4px; }
.asf-reset { width: 100%; min-height: 40px; cursor: pointer; border: 1px solid rgba(0,0,0,.15); background: transparent; border-radius: 4px; font-size: var(--asf-font-size, 13px); transition: border-color .15s ease, background-color .15s ease; }
.asf-reset:hover { border-color: currentColor; background: rgba(0,0,0,.03); }
.asf-status { min-height: 18px; margin-top: 8px; font-size: 12px; opacity: .7; }

/* Suwak cenowy dwustronny */
.asf-price-slider { position: relative; height: 20px; margin: 6px 2px 0; }
.asf-price-track { position: absolute; top: 9px; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgba(0,0,0,.12); }
.asf-price-range { position: absolute; top: 0; height: 100%; left: 0; right: 0; border-radius: 3px; background: currentColor; }
.asf-price-handle {
  position: absolute;
  top: 2px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: currentColor;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  cursor: grab;
  touch-action: none;
}
.asf-price-handle:active { cursor: grabbing; }
.asf-filter.is-loading { pointer-events: none; opacity: .72; }
.asf-products-loading { opacity: .45; transition: opacity .15s ease; }
.asf-pagination-wrap { margin-top: 26px; }
.asf-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.asf-page {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.asf-page:hover { border-color: currentColor; }
.asf-page.is-active {
  font-weight: 700;
  border-color: rgba(0,0,0,.85);
  background: rgba(0,0,0,.85);
  color: #fff;
}
.asf-dots { padding: 0 4px; opacity: .6; }
.asf-empty { padding: 24px; text-align: center; border: 1px solid rgba(0,0,0,.08); border-radius: 6px; }
/* Zabezpieczenie: gdy JS oznaczy natywną paginację jako zastąpioną przez naszą AJAX-ową,
   wymuś jej ukrycie nawet gdyby coś inne (motyw, inny plugin) próbowało ją z powrotem pokazać. */
[data-asf-hidden="1"] { display: none !important; }
@media (max-width: 689px) {
  .asf-options { max-height: 260px; }
}

/* Hierarchiczne kategorie 1.0.2 */
.asf-category-section .asf-options { display:block; max-height:none; overflow:visible; padding-right:0; }
.asf-cat-node { display:block; }
.asf-cat-row { display:grid; grid-template-columns:minmax(0,1fr) 28px; align-items:center; padding-left:calc(var(--asf-depth, 0) * 18px); }
.asf-cat-row .asf-cat-option { grid-column:1; width:100%; }
.asf-cat-row:not(:has(.asf-cat-toggle)) .asf-cat-option { grid-column:1 / -1; }
.asf-cat-toggle { grid-column:2; width:28px; height:28px; padding:0; border:0; background:transparent; cursor:pointer; font:inherit; line-height:1; opacity:.85; }
.asf-cat-toggle span { display:inline-block; font-size:18px; transition:transform .18s ease; }
.asf-cat-node.is-open > .asf-cat-row .asf-cat-toggle span { transform:rotate(180deg); }
.asf-cat-children[hidden] { display:none !important; }
.asf-cat-option .asf-count { white-space:nowrap; }

/* Widok chmury tagów 1.0.5 */
.asf-options.asf-mode-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.asf-options.asf-mode-cloud .asf-cloud-item {
  display: inline-flex;
  width: auto;
  grid-template-columns: none;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  margin: 0;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  line-height: 1.15;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.asf-options.asf-mode-cloud .asf-cloud-item:hover {
  border-color: currentColor;
}
.asf-options.asf-mode-cloud .asf-cloud-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.asf-options.asf-mode-cloud .asf-cloud-item:has(input:checked) {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
  font-weight: 600;
}
.asf-options.asf-mode-cloud .asf-count {
  font-size: 11px;
  opacity: .58;
}
.asf-category-section.asf-display-cloud .asf-options {
  display: flex;
}


/* Kategorie — stabilny układ w stylu Blocksy 1.0.7 */
.asf-category-section .asf-cat-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  /* POPRAWKA 1.0.18: mój poprzedni min-height z calc() dalej miał sztywne
     "38px" jako dolny limit w max(), więc przy typowych wartościach (np.
     15px * 1.0 + 14 = 29px) i tak zawsze przegrywał z tym limitem - efekt
     "Odstępu wierszy" był praktycznie niewidoczny. Teraz NIE narzucamy żadnej
     sztywnej wysokości - wiersz przyjmuje naturalną wysokość podyktowaną przez
     tekst (font-size × line-height) ALBO przycisk rozwijania 30px, w zależności
     który jest wyższy - dokładnie tak działa flexbox z align-items:center bez
     dodatkowych "magicznych liczb". Mały padding pionowy dodaje tylko oddech.
   */
  padding: 0;
  padding-left: calc(var(--asf-depth, 0) * 18px);
  border-radius: 4px;
  transition: background-color .12s ease;
  box-sizing: border-box;
}
.asf-category-section .asf-cat-row:hover { background-color: rgba(0,0,0,.035); }
.asf-category-section .asf-cat-option:has(input:checked) .asf-name { font-weight: 600; }
.asf-category-section .asf-cat-option {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  gap: 0;
  margin: 0;
  cursor: pointer;
}
.asf-category-section .asf-cat-option input {
  flex: 0 0 auto;
  margin: 0 12px 0 0;
}
.asf-category-section .asf-cat-option .asf-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.asf-category-section .asf-cat-option .asf-count {
  flex: 0 0 auto;
  margin-left: 6px;
  white-space: nowrap;
  opacity: .58;
}
/* Przycisk rozwijania podkategorii - domyślnie mniejszy niż wcześniej (było
   sztywne 30x30px, teraz skaluje się z rozmiarem czcionki: font-size + 8px,
   z 18px jako dolnym limitem). Dzięki temu zwiększanie/zmniejszanie "Rozmiaru
   czcionki" w ustawieniach widgetu automatycznie skaluje też ten przycisk -
   nie trzeba osobnego pola, wystarczy istniejące ustawienie typografii. */
.asf-category-section .asf-cat-toggle,
.asf-category-section .asf-cat-toggle-placeholder {
  flex: 0 0 auto;
  width: max(18px, calc(var(--asf-font-size, 13px) + 8px));
  height: max(18px, calc(var(--asf-font-size, 13px) + 8px));
  margin-left: 4px;
  box-sizing: border-box;
}
.asf-category-section .asf-cat-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .9;
}
.asf-category-section .asf-cat-toggle-placeholder {
  display: block;
}
.asf-category-section .asf-cat-toggle span {
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .18s ease;
}
.asf-category-section .asf-cat-node.is-open > .asf-cat-row .asf-cat-toggle span {
  transform: rotate(225deg);
}

/* Panel wysuwany (off-canvas) na mobile/tablecie - patrz initOffCanvas() w asf.js.
   Przycisk "Filtry" pokazuje się TYLKO gdy JS faktycznie przeniósł widget do
   panelu (bo sidebar jest schowany przez motyw) - domyślnie ukryty, żeby nie
   migać na ekranach gdzie sidebar jest widoczny. */
/* Stylizacja dopasowana do natywnego przycisku "FILTR" z rozszerzenia Blocksy
   (.ct-toggle-filter-panel .ct-offcanvas-trigger) - te same zmienne CSS motywu
   (--theme-*), więc kolor obramowania/hover dopasowuje się automatycznie do
   Twojej palety, nawet jeśli ją kiedyś zmienisz w Customizerze. Ikona (3 kreski)
   skopiowana 1:1 z natywnego SVG Blocksy. */
.asf-offcanvas-trigger {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 18px;
  border: var(--theme-border-width, 1px) solid var(--theme-palette-color-5, rgba(0,0,0,.15));
  border-radius: var(--theme-button-border-radius, 6px);
  background: var(--theme-palette-color-8, #fff);
  color: var(--theme-palette-color-2, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.asf-offcanvas-trigger:hover,
.asf-offcanvas-trigger:focus-visible {
  border-color: var(--theme-palette-color-1, currentColor);
  color: var(--theme-palette-color-1, currentColor);
}
.asf-offcanvas-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.asf-offcanvas-trigger-icon svg { display: block; fill: currentColor; }
.asf-offcanvas {
  position: fixed;
  inset: 0;
  z-index: 100000;
  visibility: hidden;
  pointer-events: none;
}
.asf-offcanvas.is-open {
  visibility: visible;
  pointer-events: auto;
}
.asf-offcanvas-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .2s ease;
}
.asf-offcanvas.is-open .asf-offcanvas-backdrop { opacity: 1; }
.asf-offcanvas-panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: #fff;
  box-shadow: 2px 0 16px rgba(0,0,0,.15);
  transform: translateX(-100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.asf-offcanvas.is-open .asf-offcanvas-panel { transform: translateX(0); }
.asf-offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  flex: 0 0 auto;
}
.asf-offcanvas-head strong { font-size: 16px; }
.asf-offcanvas-close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.asf-offcanvas-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 24px;
}
/* Zablokuj przewijanie strony pod spodem gdy panel jest otwarty. */
body.asf-offcanvas-lock { overflow: hidden; }