/* --- Archive filters: KUKO skin (unified) --- */
.filters-toggle{display:none}

/* Box */
.filters-sidebar{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:16px;
  padding:16px;
}
.filters-sidebar .filter-group{ margin:0 0 16px; }
.filters-sidebar .filter-title{ margin:0 0 10px; font-weight:700; }

/* Inputs (price etc.) */
.filters-sidebar input[type="text"],
.filters-sidebar input[type="number"]{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:var(--text);
  transition:border-color .12s,background .12s,color .12s,box-shadow .12s;
}
.filters-sidebar input[type="text"]::placeholder,
.filters-sidebar input[type="number"]::placeholder{ color:var(--muted) }
.filters-sidebar input[type="text"]:focus,
.filters-sidebar input[type="number"]:focus{ outline:2px solid var(--link); outline-offset:2px; box-shadow:0 0 0 4px var(--focus) }

/* Controls layout (убираем <br>, делаем колонку с зазором) */
.filters-sidebar .filter-controls br{ display:none; }
.filters-sidebar .filter-controls{ display:flex; flex-direction:column; gap:6px; }

/* ЕДИНЫЙ стиль для ВСЕХ чекбоксов в сайдбаре (и "Наличие", и атрибуты) */
.filters-sidebar label{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.filters-sidebar input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  inline-size:18px; block-size:18px;
  border:1px solid var(--border); background:var(--card);
  border-radius:6px; display:inline-grid; place-items:center;
  transition:background .15s,border-color .15s;
}
.filters-sidebar input[type="checkbox"]::after{
  content:""; inline-size:10px; block-size:10px;
  transform:scale(0); transition:transform .12s ease;
  background:var(--brand); border-radius:3px;
}
.filters-sidebar input[type="checkbox"]:checked{
  border-color:var(--brand);
  background:color-mix(in oklab, var(--brand) 10%, transparent);
}
.filters-sidebar input[type="checkbox"]:checked::after{ transform:scale(1); }
.filters-sidebar .term-label{ color:var(--text); }

/* Active chips (Attr: Value + Удалить) */
#active-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px;
}
#active-filters .filter-label{
  display:inline-flex; align-items:center; gap:8px;
  background:color-mix(in oklab, var(--green) 12%, transparent);
  color:var(--text);
  border:1px solid color-mix(in oklab, var(--green) 40%, transparent);
  padding:6px 10px; border-radius:999px; font-size:12px;
}
#active-filters .filter-label a{ color:inherit; text-decoration:none; font-weight:600; }


/* --- Archive filters: KUKO skin (unified) --- */
.filters-toggle{display:none}

/* Box */
.filters-sidebar{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:16px;
  padding:16px;
}
.filters-sidebar .filter-group{ margin:0 0 16px; }
.filters-sidebar .filter-title{ margin:0 0 10px; font-weight:700; }

/* Inputs (price etc.) */
.filters-sidebar input[type="text"],
.filters-sidebar input[type="number"]{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--card); color:var(--text);
  transition:border-color .12s,background .12s,color .12s,box-shadow .12s;
}
.filters-sidebar input[type="text"]::placeholder,
.filters-sidebar input[type="number"]::placeholder{ color:var(--muted) }
.filters-sidebar input[type="text"]:focus,
.filters-sidebar input[type="number"]:focus{ outline:2px solid var(--link); outline-offset:2px; box-shadow:0 0 0 4px var(--focus) }

/* Controls layout (убираем <br>, делаем колонку с зазором) */
.filters-sidebar .filter-controls br{ display:none; }
.filters-sidebar .filter-controls{ display:flex; flex-direction:column; gap:6px; }

/* ЕДИНЫЙ стиль для ВСЕХ чекбоксов в сайдбаре (и "Наличие", и атрибуты) */
.filters-sidebar label{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.filters-sidebar input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  inline-size:18px; block-size:18px;
  border:1px solid var(--border); background:var(--card);
  border-radius:6px; display:inline-grid; place-items:center;
  transition:background .15s,border-color .15s;
}
.filters-sidebar input[type="checkbox"]::after{
  content:""; inline-size:10px; block-size:10px;
  transform:scale(0); transition:transform .12s ease;
  background:var(--brand); border-radius:3px;
}
.filters-sidebar input[type="checkbox"]:checked{
  border-color:var(--brand);
  background:color-mix(in oklab, var(--brand) 10%, transparent);
}
.filters-sidebar input[type="checkbox"]:checked::after{ transform:scale(1); }
.filters-sidebar .term-label{ color:var(--text); }

/* Active chips (Attr: Value + Удалить) */
#active-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px;
}
#active-filters .filter-label{
  display:inline-flex; align-items:center; gap:8px;
  background:color-mix(in oklab, var(--green) 12%, transparent);
  color:var(--text);
  border:1px solid color-mix(in oklab, var(--green) 40%, transparent);
  padding:6px 10px; border-radius:999px; font-size:12px;
}
#active-filters .filter-label a{ color:inherit; text-decoration:none; font-weight:600; }

/* =========================
 *  MOBILE: фильтр под плашку
 * ======================= */
@media (max-width: 768px){
  #filters-container{
    position:relative;
  }

  /* Плашки */
  .filters-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    border-radius:999px;
    padding:10px 14px;
    border:1px solid var(--border);
    background:var(--card);
    color:var(--text);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    justify-content: center;
  }
  .filters-toggle__icon{
    width:18px;
    height:18px;
    flex:0 0 auto;
  }

  .filters-toggle--top{
    margin-bottom:10px;
  }

  .filters-toggle--bottom{
    margin-top:10px;
    position:sticky;
    bottom:0;
    box-shadow:0 -6px 18px rgba(0,0,0,.06);
    z-index:5;
  }

  /* Сам сайдбар по умолчанию скрыт */
  .filters-sidebar{
    display:none;
    margin-top:10px;
    max-height:70vh;
    overflow:auto;
  }

  /* Когда открыт (класс вешаем на контейнер) */
  #filters-container.is-open-mobile .filters-sidebar{
    display:block;
  }

  /* Верхняя плашка пропадает, когда фильтр открыт */
  #filters-container.is-open-mobile .filters-toggle--top{
    display:none;
  }

  /* Нижняя плашка только когда фильтр открыт */
  #filters-container:not(.is-open-mobile) .filters-toggle--bottom{
    display:none;
  }
}