/* ===== PM Super Filters – kwadratowo + idealne wyrównanie atrybutów ===== */

:root{
  --pmsf-pill-h: 34px;     /* wysokość tytułów i pillsów */
  --pmsf-pill-px: 10px;    /* poziomy padding pillsów */
}

/* Pasek nad listą */
.pmsf-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px; margin:8px 0 16px;
  border:1px solid #e5e7eb; border-radius:0; background:#fff;
}
.pmsf-toggle,.pmsf-reset{
  padding:10px 14px; border-radius:0; border:1px solid #e5e7eb; background:#fff; cursor:pointer;
  font-weight:600; text-transform:uppercase; font-size:12px; letter-spacing:.04em;
}
.pmsf-toggle:hover,.pmsf-reset:hover{ background:#111827; color:#fff; border-color:#111827; }
.pmsf-meta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.pmsf-livecount{ color:#6b7280; font-size:14px; }
.pmsf-spinner{ width:18px; height:18px; border:2px solid #e5e7eb; border-top-color:#111827; border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin{to{transform:rotate(360deg)}}

/* Panel z filtrami */
.pmsf-panel{
  padding:12px; border:1px dashed #e5e7eb; border-radius:0; margin-bottom:16px; background:#fafafa;
}

/* Rodzaje (chipsy) – kwadratowe */
.pmsf-group{ margin-bottom:10px; }
.pmsf-label{ font-weight:600; margin:0 10px 8px 0; }
.pmsf-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.pmsf-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border:1px solid #e5e7eb; border-radius:0; background:#fff;
  cursor:pointer; text-decoration:none; color:#111827; font-size:13px; line-height:1;
}
.pmsf-chip:hover{ background:#111827; color:#fff; border-color:#111827; }
.pmsf-chip.is-active{ background:#111827; color:#fff; border-color:#111827; }

/* ===== Atrybuty: jeden ciągły rząd, perfekcyjne wyrównanie ===== */
.pmsf-attrs{
  display:flex; flex-wrap:wrap; align-items: center;
  column-gap:16px; row-gap:10px;
}

/* Każdy blok (Rozmiar/Kolor) – wyrównany do góry, ale elementy w nim do środka */
.pmsf-attr{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:0; padding:0;
}

/* Tytuł atrybutu ma tę samą wysokość co pillsy */
.pmsf-attr-title{
  display:flex; align-items:center; justify-content:center;
  height:var(--pmsf-pill-h); line-height:1; white-space:nowrap;
  padding:0 var(--pmsf-pill-px); /* optycznie w linii z pillsem */
}

/* Lista wartości atrybutów – w linii, bez „opadania” */
.pmsf-attr-items{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:0; padding:0;
}

/* Pillsy – stała wysokość = jak tytuł; checkbox i tekst idealnie w pionie */
.pmsf-check{
  display:inline-flex; align-items:center; gap:6px;
  height:var(--pmsf-pill-h);
  padding:0 var(--pmsf-pill-px);
  border:1px solid #e5e7eb; border-radius:0; background:#fff;
  line-height:1; vertical-align:middle;
}
.pmsf-check input{
  accent-color:#111827; width:14px; height:14px; margin:0; transform:none;
}

/* Drobne stany (opcjonalnie przy ładowaniu) */
.products.pmsf-loading{ opacity:.5; transition:opacity .2s; }

/* --- Mobile dopieszczenie --- */
@media (max-width: 680px){
  :root{ --pmsf-pill-h: 32px; }
  .pmsf-toggle,.pmsf-reset{ padding:8px 10px; font-size:11px; }
  .pmsf-attrs{ column-gap:12px; row-gap:8px; }
}

/* === PERFECT ALIGN: własny checkbox rysowany CSS-em (bez natywnego inputu) === */

/* 1) kontener atrybutów trzymamy pośrodku */
.pmsf-attrs,
.pmsf-attr,
.pmsf-attr-items { align-items: center !important; }

/* 2) wygląd pilla (bez zmian w Twoim stylu) */
.pmsf-check{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: #fff !important;
  line-height: 1 !important;
}

/* 3) chowamy natywny checkbox – zero marginesów i przesunięć z motywu */
.pmsf-check input{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  inset: 0 auto auto 0 !important; /* żeby był w labelu (dla dostępności) */
}

/* 4) rysujemy kwadrat i „ptaszek” na tekście (100% wyrównania do środka) */
.pmsf-check span{
  position: relative !important;
  padding-left: 22px !important;   /* miejsce na kwadrat */
  line-height: 1 !important;
  display: inline-block !important;
}

/* ramka */
.pmsf-check span::before{
  content: "" !important;
  position: absolute !important;
  left: 0; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  border: 1px solid #111827;
  background: #fff;
  box-sizing: border-box;
}

/* wypełnienie po zaznaczeniu */
.pmsf-check input:checked + span::after{
  content: "" !important;
  position: absolute !important;
  left: 3px; top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%);
  background: #111827;
}

/* focus (klawiatura) – delikatna obwódka na całym pillu */
.pmsf-check:focus-within{
  outline: 2px solid #11182733;
  outline-offset: 2px;
}

.pmsf-attr-items {
  align-items: stretch !important; /* wszystkie takie same */
}

.pmsf-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* === TYPOGRAFIA – Pani Marynarka / Inter system === */

/* Cała sekcja filtrów korzysta z Inter 400 (bazowa), 15–16px */
.pmsf-panel,
.pmsf-bar,
.pmsf-chip,
.pmsf-check,
.pmsf-attr-title,
.pmsf-label {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: #111827;
}

/* Główne etykiety (Rodzaje, Rozmiar, Kolor) – zgodne z przyjętym stylem H6 / semibold */
.pmsf-label,
.pmsf-attr-title {
  font-weight: 600 !important;
  font-size: 16px !important; /* jak H6 */
  text-transform: none;
  line-height: 1.2;
  color: #111827;
}

/* Przyciski FILTER / Wyczyść – styl „Przycisków” z motywu */
.pmsf-toggle,
.pmsf-reset {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important; /* SemiBold, jak w motywie */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Chipsy (Rodzaje) i „pillsy” atrybutów – minimalnie mniejsze, 15px */
.pmsf-chip,
.pmsf-check {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em;
}

/* Hover i aktywne: niech kontrast trzyma się stylu motywu */
.pmsf-chip:hover,
.pmsf-chip.is-active,
.pmsf-toggle:hover,
.pmsf-reset:hover {
  background: #111827 !important;
  color: #fff !important;
  border-color: #111827 !important;
}

/* Licznik produktów – subtelny, drobniejszy tekst */
.pmsf-livecount {
  font-size: 14px !important;
  font-weight: 400;
  color: #6b7280;
}

/* === UKŁAD: Filter – centralnie / Wyczyść – po prawej === */

/* Pasek filtrów: jeden rząd, elementy rozstawione, ale Filter pośrodku */
.pmsf-bar{
  display: flex;
  align-items: center;
  justify-content: center; /* Filter pośrodku */
  position: relative;
  border: none;
  margin: 20px 0;
  background: transparent;
}

/* FILTER – główny przycisk */
.pmsf-toggle{
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 2px solid #111827;
  background: #fff;
  color: #111827;
  padding: 12px 34px;
  cursor: pointer;
  transition: all .25s ease;
}
.pmsf-toggle:hover{
  background: #111827;
  color: #fff;
}

/* Meta (licznik, spinner) – schowane, bo niepotrzebne w głównym pasku */
.pmsf-meta{
  display: none;
}

/* Reset w wierszu atrybutów (po prawej) */
.pmsf-bar .pmsf-reset{ display:none !important; }  /* ukryj stary */
.pmsf-attrs-row{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  justify-content:space-between; gap:12px; margin-top:10px;
}
.pmsf-attrs-row .pmsf-attrs{ flex:1 1 auto; }
.pmsf-attrs-row .pmsf-reset{
  flex:0 0 auto; margin-left:auto;
  border:none; background:transparent; color:#6b7280;
  font-size:14px; font-weight:500; cursor:pointer;
  transition:color .2s ease;
}
.pmsf-attrs-row .pmsf-reset:hover{ color:#111827; text-decoration:underline; }

/* === Poprawka: bez podkreślenia na hoverze dla "Wyczyść" === */
.pmsf-attrs-row .pmsf-reset:hover {
  color: #111827;
  text-decoration: none !important;
}

/* === FILTER / final soft UX — zero obramowań, neutralny wygląd === */
.pmsf-bar { border: 0; background: transparent; margin: 24px 0 28px; }

.pmsf-toggle,
.pmsf-toggle:hover,
.pmsf-toggle:focus,
.pmsf-toggle:active {
  all: unset !important;                 /* wyczyść WSZYSTKO z wcześniejszych reguł */
  display: inline-block !important;
  cursor: pointer !important;

  /* typografia */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  /* wygląd – delikatny, bez konturu */
  padding: 12px 32px !important;
  background: transparent !important;
  color: #111827 !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* subtelny hover (bez obramowania) */
.pmsf-toggle:hover { background: rgba(17, 24, 39, .05) !important; }

/* upewnij się, że pseudo-elementy nie rysują „ramki” */
.pmsf-toggle::before,
.pmsf-toggle::after { content: none !important; }

/* === Wyrównanie nagłówka "Rodzaje" z atrybutami === */

/* usuwamy wewnętrzne wcięcie sekcji "Rodzaje" */
.pmsf-group {
  margin-left: 2px !important;
  padding-left: 0 !important;
}

/* lub (jeśli wciąż jest różnica w Twoim motywie): */
.pmsf-label {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* dodatkowo zapewniamy, że cały blok filtrów ma równy start */
.pmsf-panel {
  padding-left: 12px !important;  /* dopasowane do reszty sekcji */
}