/* Vitamin Shop - archiwum.css
   Archiwum produktow: panel filtrow, pasek narzedzi, chipy aktywnych
   filtrow, arkusz filtrow od dolu, paginacja, tresc SEO kategorii.
   Warunek: is_shop() || is_product_category() || is_product_tag().
   Zrodlo: wizualizacja sklepu (assets/css/style.css). */

/* ---------- 29. ARCHIWUM: FILTRY ---------- */
/* Naglowek archiwum: tytul, opis kategorii i pas zaufania. Bez odstepu pod
   spodem opis kategorii przykleja sie do paska narzedzi. */
.arch__head{margin-bottom:var(--gap-head)}
.arch__head .h1{margin-bottom:var(--s3)}

.arch{display:grid;gap:var(--s6);align-items:start}
/* Dwie kolumny dopiero od 1200 px — nizej panel filtrow zabieral wynikom
   za duzo szerokosci. Prog musi byc ten sam co dla .filters i .fbtn. */
/* Modyfikator, nie sama .arch: kolumna filtrow powstaje tylko wtedy, gdy
   panel filtrow faktycznie sie renderuje. Inaczej jedyne dziecko siatki
   wladowaloby sie w kolumne 280 px. */
@media(min-width:1200px){.arch--filtry{grid-template-columns:280px minmax(0,1fr);gap:var(--s7)}}
/* min-width:0 na kolumnie wynikow - bez tego dlugie nazwy produktow
   rozpychaja sciezke siatki ponad zadeklarowana szerokosc. */
.arch__wyniki{min-width:0}
.filters{display:none}
@media(min-width:1200px){
  .filters{display:block;position:sticky;top:144px;   /* 128 naglowka + 16 */
    max-height:calc(100vh - 176px);overflow-y:auto;padding-right:6px}
}
.fgroup{border-bottom:1px solid var(--line);padding-block:16px}
.fgroup:first-child{padding-top:0}
.fgroup__h{display:flex;align-items:center;justify-content:space-between;width:100%;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.0625rem;
  text-transform:uppercase;letter-spacing:.04em;min-height:44px;text-align:left}
/* jedna konwencja z akordeonem: zamkniete = strzalka w dol, otwarte = w gore */
.fgroup[data-open="false"] .fgroup__h::after{transform:translateY(-2px) rotate(45deg)}
.fgroup[data-open="true"] .fgroup__h::after{transform:translateY(2px) rotate(225deg);
  border-color:var(--brand-ink)}
.fgroup__body{padding-top:8px;display:grid;gap:2px}
.fgroup[data-open="false"] .fgroup__body{display:none}
.fopt{display:flex;align-items:center;gap:var(--s3);padding:8px 6px;border-radius:var(--r-sm);
  cursor:pointer;min-height:44px;font-size:.9375rem;transition:background var(--dur-1)}
.fopt:hover{background:var(--surface)}
.fopt input{width:20px;height:20px;accent-color:var(--brand);flex:none;cursor:pointer}
.fopt .c{margin-left:auto;font-size:.75rem;color:var(--slate-2);
  font-variant-numeric:tabular-nums}
.fopt.is-off{opacity:.4}
/* jedyny wybieralny komponent bez jezyka stanu wybranego — reszta systemu
   (.quiz__opt.is-sel, .vopt[aria-pressed], .buyopt.is-sel) uzywa tej samej pary */
.fopt:has(input:checked){background:var(--brand-tint);color:var(--brand-ink)}
.fopt:has(input:checked) .c{color:var(--brand-ink)}

/* Formularz filtrow i jego przyciski awaryjne (widoczne, gdy skrypt filtrow
   nie wystartuje). Wtyczka przy aktywnym motywie nie laduje wlasnego szkieletu,
   wiec bez tych regul przyciski Filtruj i Wyczysc stoja jeden na drugim. */
.filters__form{display:block}
.filters__akcje{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.more-wrap{margin-top:var(--s6)}

.range{display:flex;align-items:center;gap:10px;margin-top:10px}
.range input[type=number]{width:100%;height:44px;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:0 11px;background:var(--bg);outline:none;font-size:16px}
.range input:focus{border-color:var(--brand)}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-block:12px;border-bottom:1px solid var(--line);margin-bottom:16px}
.toolbar__count{font-size:.875rem;color:var(--slate);margin-right:auto}
.toolbar__count b{color:var(--ink)}
.select{position:relative;display:inline-flex;align-items:center}
/* 16px, nie .875rem: iOS Safari przybliza cala strone przy fokusie na polu
   ponizej 16px, a pole sortowania stoi w toolbarze nad lista produktow -
   po zblizeniu klient traci z oczu wyniki, ktore wlasnie posortowal.
   Regula .vs-motyw select z baza.css tu nie pomagala: ma taka sama swoistosc
   (0,1,1), a arkusz archiwum laduje sie POZNIEJ i wygrywal kolejnoscia. */
.select select{appearance:none;height:44px;padding:0 38px 0 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg);font-size:16px;font-weight:600;
  cursor:pointer;outline:none}
.select select:focus{border-color:var(--brand)}
.select svg{position:absolute;right:12px;pointer-events:none;color:var(--slate)}
.viewtog{display:none;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
@media(min-width:768px){.viewtog{display:flex}}
.viewtog button{width:44px;height:44px;display:grid;place-items:center;color:var(--slate);
  transition:background var(--dur-1),color var(--dur-1)}
.viewtog button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.viewtog button:hover:not([aria-pressed="true"]){background:var(--surface);color:var(--ink)}
.viewtog button:active{transform:scale(.96)}
.fbtn{display:inline-flex;min-height:44px}
/* .btn--sm ma realne 40 px po naprawie line-height, a w toolbarze stoi
   obok selecta i przelacznika widoku (44 px) */
.toolbar .fbtn{min-height:44px}
/* licznik filtrow ma wlasne min-height:26px i rozpychal przycisk do 46 px */
.fbtn .badge{min-height:20px;font-size:.6875rem}
@media(min-width:1200px){.fbtn{display:none}}

.active-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.active-chips:empty{display:none}
.chip-x{display:inline-flex;align-items:center;gap:7px;padding:0 12px;
  background:var(--brand-tint);color:var(--brand-ink);border-radius:var(--r-full);
  font-size:.8125rem;font-weight:600;min-height:36px;line-height:1}
.chip-x svg{opacity:.7}
.chip-x:hover svg{opacity:1}

/* Blok SEO kategorii */
.seo-box{background:var(--surface);border-radius:var(--r-md);padding:var(--pad-panel-lg);
  font-size:.9375rem;color:var(--slate)}
.seo-box p,.seo-box li{max-width:var(--measure-lg)}
.seo-box h2,.seo-box h3{color:var(--ink);margin-bottom:8px}
.seo-box h3{font-size:1.125rem;margin-top:20px}
.seo-box p+p{margin-top:10px}
.seo-box ul{list-style:disc;padding-left:20px;margin-top:8px}
.seo-box li{padding:3px 0}
.seo-box strong{color:var(--ink)}
.seo-collapse{max-height:150px;overflow:hidden;position:relative;transition:max-height var(--dur-3)}
.seo-collapse::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;
  background:linear-gradient(transparent,var(--surface));pointer-events:none}
.seo-collapse.is-open{max-height:2500px}
.seo-collapse.is-open::after{display:none}

/* Paginacja stoi w baza.css, bo ten sam markup wypisuja lista wpisow, archiwum
   i wyniki wyszukiwania - a tam arkusz archiwum sklepu sie nie laduje. */