/* ==========================================================
   Catalog Filters UI (advanced + mobile)
   - Naming neutro (ks-*)
   - Nessuna dipendenza dal nome template
   ========================================================== */

/* Price HTML helpers (UiPriceFormatter) */
.ks-price{ display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ks-price-now{ font-weight:700; }
.ks-price-old{ opacity:.6; text-decoration:line-through; font-weight:600; }
.ks-price-iva{ font-size:12px; opacity:.75; }
.ks-price-ask{ font-weight:700; opacity:.85; }

/* Filter box */
.ks-filter-box{
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
  margin-bottom:12px;
}
.ks-filter-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin:0 0 8px 0;
}
.ks-filter-search{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:8px 10px;
  font-size:14px;
  outline:none;
  margin:0 0 8px 0;
}
.ks-filter-scroll{
  max-height:260px;
  overflow:auto;
  padding-right:4px;
}
.ks-filter-checkbox{
  display:block;
  margin:2px 0;
}

/* Mobile filter trigger (floating) */
.ks-filter-fab{
  position:fixed;
  left:14px;
  bottom:14px;
  z-index:1050;
  display:none;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  padding:10px 14px;
  font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.ks-filter-fab:active{ transform:translateY(1px); }

@media (max-width: 991px){
  .ks-filter-fab{ display:inline-flex; align-items:center; gap:8px; }
}

/* Offcanvas */
.ks-filter-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1051;
  display:none;
}
.ks-filter-panel{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:min(92vw, 420px);
  background:#fff;
  z-index:1052;
  transform:translateX(-100%);
  transition:transform .18s ease-out;
  display:flex;
  flex-direction:column;
}
.ks-filter-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.10);
}
.ks-filter-panel-title{
  font-weight:900;
  letter-spacing:.02em;
}
.ks-filter-panel-close{
  border:1px solid rgba(0,0,0,.16);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  font-weight:800;
}
.ks-filter-panel-body{
  padding:12px 14px 90px 14px;
  overflow:auto;
}
.ks-filter-panel-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  border-top:1px solid rgba(0,0,0,.10);
  background:#fff;
  padding:10px 14px;
  display:flex;
  gap:10px;
}
.ks-filter-panel-btn{
  flex:1;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  font-weight:800;
}
.ks-filter-panel-btn-link{
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:inherit;
}
.ks-filter-panel-btn-primary{
  background:#111;
  color:#fff;
  border-color:#111;
}

body.ks-offcanvas-open{
  overflow:hidden;
}

body.ks-offcanvas-open .ks-filter-overlay{ display:block; }
body.ks-offcanvas-open .ks-filter-panel{ transform:translateX(0); }

/* Catalog toolbar helpers */
.ks-catalog-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0 16px 0;
}
.ks-catalog-toolbar .form-select{ min-width:220px; }

.ks-filter-inline-hint{
  font-size:12px;
  opacity:.75;
}

/* ==========================================================
   Active filters (chips)
   ========================================================== */
.ks-active-filters{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  margin:0 0 14px 0;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  background:#fff;
}
.ks-active-filters-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ks-chip{
  border:1px solid rgba(0,0,0,.16);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.ks-chip:active{ transform:translateY(1px); }
.ks-chip-x{
  font-size:14px;
  line-height:1;
  opacity:.75;
}
.ks-active-filters-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:140px;
}
.ks-filter-reset{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  text-decoration:none;
  font-weight:900;
  color:inherit;
  background:#fff;
  white-space:nowrap;
}
.ks-filter-reset:active{ transform:translateY(1px); }
.ks-active-filters-meta{
  font-size:12px;
  opacity:.75;
  text-align:right;
}

@media (max-width: 991px){
  .ks-active-filters{ flex-direction:column; align-items:stretch; }
  .ks-active-filters-actions{ flex-direction:row; align-items:center; justify-content:space-between; min-width:0; }
  .ks-active-filters-meta{ text-align:left; }
}