/* --- Přehledný scroll + fade + tlačítko --- */
.filter-section h4 {margin:10px 0 8px;font-weight:600;display:flex;justify-content:space-between;align-items:center}

/* Zkrácené seznamy */
.filter-clip {position:relative;max-height:220px;overflow:auto;padding-right:6px;border:1px solid #eee;border-radius:8px}
.filter-clip::after{content:"";position:sticky;display:block;height:28px;margin-top:-28px;bottom:0;pointer-events:none;background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%)}

/* Otevřený stav bez omezení */
.filter-clip.is-open{max-height:none;overflow:visible}
.filter-clip.is-open::after{display:none}

/* Tlačítko */
.filter-toggle{margin:8px 0 14px;background:#f6f6f6;border:1px solid #e5e5e5;border-radius:8px;padding:8px 10px;font-size:13px;line-height:1;cursor:pointer;width:100%;text-align:center}
.filter-toggle:hover{background:#efefef}

/* Dlouhé popisky – zkrátit na řádku, plný text v title z JS */
.filter-label{display:inline-flex;align-items:center;gap:6px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Hezčí scrollbar (není povinné) */
.filter-clip::-webkit-scrollbar{width:8px}
.filter-clip::-webkit-scrollbar-thumb{background:#ddd;border-radius:8px}

/* Mobil: menší okénko */
@media (max-width:768px){
  .filter-clip{max-height:180px}
}

/* === MOBIL: zarovnání názvů filtrů v H4 doleva === */
@media (max-width: 768px) {
  /* wrapper s filtry */
  .filter-sections .filter-section h4,
  .filter-sections .param-filter-top h4,
  .filter-sections .slider-wrapper h4 {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important; /* ← vlevo */
    text-align: left !important;
  }

  /* samotný text v <span> – nechť se chová jako běžný text vlevo */
  .filter-sections .filter-section h4 > span {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  /* kdyby rodič měl pravé zarovnání */
  .filter-sections .param-filter-top,
  .filter-sections .filter-section {
    text-align: left !important;
  }
}

@media (min-width:768px){
  .filter--colors fieldset{ display:flex; flex-wrap:wrap; gap:10px; }
  .filter--colors fieldset > div{ width:auto !important; margin:0; }
}

/* ====== BARVA – swatche vedle sebe (bez JS) ====== */
@media (min-width: 768px) {

  /* mřížka čtverečků */
  .filter-section .advanced-filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* zruší šířku 100 % z template a nastaví pevný čtverec */
  .filter-section .advanced-filters-wrapper > div {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
  }

  /* klikací plocha = label s rámečkem */
  .filter-section .advanced-parameter {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
  }

  /* samotný barevný „swatch“ vyplní celý čtverec */
  .filter-section .advanced-parameter-inner {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* textové labely, které šablona generuje vedle swatche, schovej */
  .filter-section .advanced-filters-wrapper .filter-label {
    display: none !important;
  }

  /* stav hover/focus/checked – jemné zvýraznění */
  .filter-section .advanced-filters-wrapper input[type="checkbox"]:focus + .filter-label,
  .filter-section .advanced-filters-wrapper > div:hover .advanced-parameter {
    outline: 2px solid #cfe4ff;
    outline-offset: 2px;
  }
  .filter-section .advanced-filters-wrapper input[type="checkbox"]:checked ~ .advanced-parameter {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-color: #3b82f6;
  }
}

/* volitelně: na mobilu jen menší mezery */
@media (max-width: 767.98px) {
  .filter-section .advanced-filters-wrapper { gap: 8px; }
}