/* ==========================================================================
   Layered Navigation - Variante B          esd.equipment          2026-08-22
   Segment-Karten je Facette, Kategorie oben, Symbol frei (ohne Kachel),
   Trefferzahl als reine Zahl, aktive Facette mit Kante links.

   Ziel:      Swissup_Ajaxlayerednavigation in der Sidebar der Kategorieseiten
   Eingebaut: design/head/includes, Stores 1 (de), 3 (en), 14 (fr)
   Vorgaenger: der Block ab Zeile 1308 in
              app/design/frontend/Local/ESD/web/css/source/_argento_custom.less
              (graue Balken). Er bleibt stehen und wird hier ueberschrieben -
              deshalb steht ueberall !important: die alten Regeln tragen es auch.
   Rollback:  <link> aus head/includes entfernen, Backup in
              var/aln_design/backup_head.json
   ========================================================================== */
.sidebar.sidebar-main .block.filter{
  --b-navy:#0D1B2E; --b-navy-700:#1E3C64; --b-label:#22303F;
  --b-muted:#64748B; --b-muted-2:#8494a8;
  --b-line:rgba(13,27,46,.09); --b-line-2:rgba(13,27,46,.16);
  --b-accent:#E85A00; --b-surface-2:#F4F7FB;
  --b-r:14px; --b-r-row:9px;
  --b-cond:"IBM Plex Sans Condensed","IBM Plex Sans","Arial Narrow",sans-serif;
  --b-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6.5h16M7 12h10M10 17.5h4'/></svg>");
}

/* ---------- 1. Aeusseren Rahmen aufloesen: die Karten sind die Facetten ----
   Nur ab 1024px. Darunter ist der Block das Panel hinter dem Filter-Schalter
   und braucht seinen weissen Grund (siehe _argento_custom.less, 2026-08-08). */
@media (min-width:1024px){
  .sidebar.sidebar-main .block.filter{
    background:none !important;border:0 !important;box-shadow:none !important;
    padding:0 !important;border-radius:0 !important;overflow:visible !important}
  .sidebar.sidebar-main .block.filter .block-content.filter-content{padding:0 !important;background:none !important}
  .sidebar.sidebar-main .block.filter .filter-options{margin:0 !important;padding:0 !important;border:0 !important}
}

/* ---------- 2. Facetten: rahmenlos, durch Haarlinien getrennt (Entwurf F1)
   Keine Karten mehr. Die Spalte gewinnt dadurch rund 130 px und stellt der
   Ware kein zweites Raster mehr entgegen. Getragen wird die Gliederung von
   Haarlinien und vom Rhythmus der Kopfzeilen. Die Kategorie bleibt die
   einzige Facette mit Akzentstrich und Navy-Kopf (Abschnitt 5). ------------ */
.sidebar.sidebar-main .block.filter .filter-options-item.filter-options-item{
  position:relative !important;overflow:visible !important;
  margin:0 !important;padding:0 !important;background:none !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important}
.sidebar.sidebar-main .block.filter .filter-options-item.filter-options-item:hover{box-shadow:none !important}
/* Haarlinie zwischen zwei Facetten */
.sidebar.sidebar-main .block.filter .filter-options-item + .filter-options-item{
  border-top:1px solid rgba(13,27,46,.07) !important}
/* Kraeftigere Linie dort, wo die Navigation endet und die Filter beginnen */
.sidebar.sidebar-main .block.filter .filter-options-item-category + .filter-options-item{
  border-top:1px solid rgba(13,27,46,.11) !important}

/* ---------- 3. Kopfzeile der Facette ---------------------------------------
   Groesser als die Werte darunter (14,5 px gegen 13,5 px) und in Navy - der
   Abschnittsname muss die Liste anfuehren, nicht in ihr verschwinden.
   Sobald ein Filter greift, wird der Kopf navy und das Symbol orange - das
   ersetzt die orangefarbene Kante, die frueher am Kartenrand sass. */
.sidebar.sidebar-main .block.filter .filter-options-title.filter-options-title{
  display:flex !important;align-items:center !important;gap:9px !important;
  position:relative !important;margin:0 !important;padding:15px 30px 10px 8px !important;
  background:none !important;border:0 !important;border-radius:0 !important;
  font-family:var(--b-cond) !important;font-size:14.5px !important;font-weight:700 !important;
  letter-spacing:.055em !important;line-height:1.2 !important;text-transform:uppercase !important;
  color:var(--b-navy) !important;cursor:pointer !important;overflow:visible !important;word-break:normal !important}
.sidebar.sidebar-main .block.filter .filter-options-title.filter-options-title:hover{
  background:none !important;color:var(--b-accent) !important}
.sidebar.sidebar-main .block.filter .filter-options-title.filter-options-title::before{
  content:'' !important;display:block !important;position:static !important;
  flex:0 0 18px !important;width:18px !important;height:18px !important;
  top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;
  border-radius:0 !important;background:var(--b-navy-700) !important;
  -webkit-mask:var(--b-ico) center/contain no-repeat;mask:var(--b-ico) center/contain no-repeat}
.sidebar.sidebar-main .block.filter .filter-options-title.filter-options-title:hover::before{
  background:var(--b-accent) !important}

/* Winkel */
.sidebar.sidebar-main .block.filter .filter-options-title.filter-options-title::after{
  content:'' !important;position:absolute !important;right:8px !important;top:50% !important;
  width:8px !important;height:8px !important;margin:0 !important;padding:0 !important;
  background:none !important;border:0 !important;
  border-right:2px solid #93a2b5 !important;border-bottom:2px solid #93a2b5 !important;
  border-radius:0 !important;filter:none !important;font-size:0 !important;
  transform:translateY(-75%) rotate(45deg) !important;transition:transform .2s ease !important}
.sidebar.sidebar-main .block.filter .filter-options-item.active > .filter-options-title.filter-options-title::after{
  transform:translateY(-25%) rotate(-135deg) !important}

/* Facette mit gesetztem Wert */
.sidebar.sidebar-main .block.filter .filter-options-item:has(.filter-options-item-state-reset-url.reset-show) > .filter-options-title.filter-options-title{
  color:var(--b-navy) !important}
.sidebar.sidebar-main .block.filter .filter-options-item:has(.filter-options-item-state-reset-url.reset-show) > .filter-options-title.filter-options-title::before{
  background:var(--b-accent) !important}

/* Zuruecksetzen je Facette */
.sidebar.sidebar-main .block.filter .filter-options-item-state-reset-url{
  position:absolute !important;right:26px !important;top:50% !important;transform:translateY(-50%) !important;
  width:20px !important;height:20px !important;display:none !important;align-items:center !important;
  justify-content:center !important;border-radius:50% !important;background:none !important;
  color:var(--b-muted-2) !important;text-decoration:none !important}
.sidebar.sidebar-main .block.filter .filter-options-item-state-reset-url.reset-show{display:flex !important}
.sidebar.sidebar-main .block.filter .filter-options-item-state-reset-url::before{
  content:'\00d7' !important;font-family:var(--b-cond) !important;font-size:16px !important;line-height:1 !important;font-weight:400 !important}
.sidebar.sidebar-main .block.filter .filter-options-item-state-reset-url:hover{
  background:var(--b-accent-soft,#FFF3EA) !important;color:var(--b-accent) !important}

/* Symbole je Facette */
.sidebar.sidebar-main .block.filter .filter-options-item-category{--b-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7.5h6l1.8 2H21v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/></svg>")}
.sidebar.sidebar-main .block.filter .filter-options-item-manufacturer{--b-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 20V10l5 3V10l5 3V9.5l7 4.5V20z'/></svg>")}
.sidebar.sidebar-main .block.filter .filter-options-item-price{--b-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20.5 12.5 12 21 3.5 12.5V4h8.5z'/><circle cx='8.6' cy='8.6' r='1.4'/></svg>")}
.sidebar.sidebar-main .block.filter .filter-options-item-zertifikat{--b-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='9' r='5.2'/><path d='M8.4 13.4 7 21.5l5-2.6 5 2.6-1.4-8.1'/></svg>")}
.sidebar.sidebar-main .block.filter .filter-options-item-color,
.sidebar.sidebar-main .block.filter .filter-options-item-color_temperature{--b-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><path d='M12 3.4a8.6 8.6 0 0 1 0 17.2'/></svg>")}
.sidebar.sidebar-main .block.filter .filter-options-item-size{--b-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2.8 9.2h18.4v5.6H2.8z'/><path d='M7 9.2v2.6M11 9.2v3.4M15 9.2v2.6M19 9.2v3.4'/></svg>")}
.sidebar.sidebar-main .block.filter .filter-options-item-esd{--b-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M13.5 2.5 5 13.5h6l-1 8 9-11.5h-6.2z'/></svg>")}
.sidebar.sidebar-main .block.filter .filter-options-item-serie{--b-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.2 21 8l-9 4.8L3 8z'/><path d='M3 12.4 12 17l9-4.6M3 16.6 12 21.2l9-4.6'/></svg>")}

/* ---------- 4. Werte -------------------------------------------------------
   Gleiche Schrift wie die Kategoriezweige und die Produktnamen im Raster:
   13,5px/600. Die Zeile traegt ihren Innenabstand selbst, der Block hat keinen. */
.sidebar.sidebar-main .block.filter .filter-options-content{
  padding:0 0 12px !important;margin:0 !important;background:none !important;border:0 !important}
/* Lange Listen laufen im Modul in einem eigenen Rollbereich (max-height 305px).
   Ohne Karte fehlt dafuer die sichtbare Kante - deshalb Schattenkanten, die nur
   auftauchen, solange in die Richtung noch etwas zu rollen ist. */
.sidebar.sidebar-main .block.filter .filter-options-item:not(.filter-options-item-category) > .filter-options-content{
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) center top / 100% 16px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 70%) center bottom / 100% 20px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(13,27,46,.13), rgba(13,27,46,0)) center top / 100% 7px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(13,27,46,.13), rgba(13,27,46,0)) center bottom / 100% 7px no-repeat scroll !important}

.sidebar.sidebar-main .block.filter .filter-options-content .items,
.sidebar.sidebar-main .block.filter .filter-options-content ol.items{margin:0 !important;padding:0 !important;list-style:none !important}
.sidebar.sidebar-main .block.filter .filter-options-content li.item{
  position:relative !important;display:flex !important;align-items:center !important;
  margin:0 !important;padding:0 !important;min-height:34px !important;
  border-radius:var(--b-r-row) !important;transition:background .12s ease !important}
.sidebar.sidebar-main .block.filter .filter-options-content li.item:hover{background:var(--b-surface-2) !important}

/* Kontrollkaestchen (das Modul zeichnet es in .swissup-aln-content) */
.sidebar.sidebar-main .block.filter .swissup-filter-item-checkbox{
  flex:0 0 auto !important;width:auto !important;height:auto !important;
  margin:0 !important;padding:0 0 0 8px !important;display:flex !important;align-items:center !important}
.sidebar.sidebar-main .block.filter input.swissup-layered-checkbox{display:none !important}
.sidebar.sidebar-main .block.filter .swissup-aln-content{
  position:relative !important;flex:0 0 18px !important;width:18px !important;height:18px !important;
  margin:0 !important;padding:0 !important;border:1.5px solid #aebccd !important;border-radius:5px !important;
  background:#fff !important;box-shadow:none !important;transition:.15s ease !important}
.sidebar.sidebar-main .block.filter .swissup-aln-content::before{display:none !important}
.sidebar.sidebar-main .block.filter .swissup-aln-content::after{display:none !important}
.sidebar.sidebar-main .block.filter li.item:hover .swissup-aln-content{border-color:#365a8c !important}
.sidebar.sidebar-main .block.filter li.item:has(input.swissup-layered-checkbox:checked) .swissup-aln-content{
  background:var(--b-navy) !important;border-color:var(--b-navy) !important}
.sidebar.sidebar-main .block.filter li.item:has(input.swissup-layered-checkbox:checked) .swissup-aln-content::after{
  display:block !important;content:'' !important;position:absolute !important;left:5px !important;top:1.5px !important;
  width:4px !important;height:9px !important;border:solid #fff !important;border-width:0 2px 2px 0 !important;
  border-radius:0 !important;background:none !important;transform:rotate(45deg) !important}

/* Wertzeile */
.sidebar.sidebar-main .block.filter .filter-options-content .items a.swissup-aln-item,
.sidebar.sidebar-main .block.filter a.swissup-aln-item{
  flex:1 1 auto !important;min-width:0 !important;display:flex !important;align-items:center !important;
  gap:10px !important;margin:0 !important;padding:8px !important;border-radius:var(--b-r-row) !important;
  font-size:13.5px !important;font-weight:600 !important;line-height:1.35 !important;
  color:var(--b-label) !important;text-decoration:none !important;background:none !important}
.sidebar.sidebar-main .block.filter .filter-options-content .items a.swissup-aln-item:hover,
.sidebar.sidebar-main .block.filter a.swissup-aln-item:hover{background:none !important;color:var(--b-navy) !important}
.sidebar.sidebar-main .block.filter li.item:has(input.swissup-layered-checkbox:checked) a.swissup-aln-item{
  color:var(--b-navy) !important}
.sidebar.sidebar-main .block.filter .swissup-option-label{
  min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
.sidebar.sidebar-main .block.filter .swissup-option-count,
.sidebar.sidebar-main .block.filter .swissup-option-count.swissup-count-green,
.sidebar.sidebar-main .block.filter .swissup-option-count.swissup-count-red,
.sidebar.sidebar-main .block.filter .filter-options-content .count{
  margin-left:auto !important;padding-left:8px !important;font-size:11.5px !important;font-weight:400 !important;
  color:var(--b-muted-2) !important;background:none !important;font-variant-numeric:tabular-nums}
.sidebar.sidebar-main .block.filter li.item:has(input.swissup-layered-checkbox:checked) .swissup-option-count{
  color:var(--b-accent) !important}

/* ---------- 5. Kategorieblock - rahmenlos (Entwurf A4) ---------------------
   Kein Verlauf, keine Karte: der Shop hat weissen Grund, und die Kategorie ist
   Navigation, kein Filter. Sie ist damit die einzige rahmenlose Flaeche der
   Spalte - alles darunter sind Karten. Anfang gibt die Kopfzeile mit dem
   orangefarbenen Strich. Zeile 13,5px/600 wie die Produktnamen im Raster.
   Abstand zur ersten Filterkarte 18px statt der 11px zwischen den Karten. */
.sidebar.sidebar-main .block.filter .filter-options-item.filter-options-item-category{
  background:none !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;overflow:visible !important;margin:0 0 18px !important}
.sidebar.sidebar-main .block.filter .filter-options-item.filter-options-item-category:hover{box-shadow:none !important}

/* Kopfzeile: Wort + Symbol in Navy, darunter der Akzentstrich.
   Der Winkel entfaellt - der Baum bleibt immer offen, deshalb nimmt die
   Kopfzeile auch keine Klicks mehr an. */
.sidebar.sidebar-main .block.filter .filter-options-item-category .filter-options-title.filter-options-title{
  position:relative !important;padding:14px 8px 10px !important;gap:9px !important;
  font-size:14.5px !important;letter-spacing:.055em !important;color:var(--b-navy) !important;
  cursor:default !important;pointer-events:none !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category .filter-options-title.filter-options-title::before{
  flex:0 0 18px !important;width:18px !important;height:18px !important;background:var(--b-navy-700) !important}
/* Zwei Regeln kaempfen um dieses ::after: das Theme-Editor-CSS blendet es fuer
   die Kategorie aus (display:none !important), und die Winkel-Regel weiter oben
   dreht es (die Kategorie traegt immer .active, deren Selektor ist staerker).
   Deshalb hier Klasse verdreifacht, display und transform ausdruecklich gesetzt. */
.sidebar.sidebar-main .block.filter .filter-options-item-category.filter-options-item-category.filter-options-item-category .filter-options-title.filter-options-title::after{
  content:'' !important;display:block !important;position:absolute !important;left:8px !important;right:auto !important;
  bottom:0 !important;top:auto !important;width:40px !important;height:2px !important;
  border:0 !important;border-radius:2px !important;background:var(--b-accent) !important;
  transform:none !important}

/* Inhalt traegt keinen eigenen Rand mehr, die Zeilen bringen ihn mit.
   Und: immer vollstaendig, ohne den 305px-Deckel des Moduls. */
.sidebar.sidebar-main .block.filter .filter-options-item-category .filter-options-content,
.sidebar.sidebar-main .block.filter .filter-options-item-category.active > .filter-options-content{
  max-height:none !important;overflow:visible !important;padding:11px 0 0 !important}

/* Rueckweg */
.sidebar.sidebar-main .block.filter .filter-options-item-category li.parent{
  display:block !important;min-height:0 !important;margin:0 !important;background:none !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category li.parent:hover{background:none !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category li.parent > a{
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  padding:6px 8px !important;border:0 !important;border-radius:6px !important;background:none !important;
  font-size:12.5px !important;font-weight:400 !important;line-height:1.2 !important;
  color:var(--b-navy-700) !important;text-decoration:none !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category li.parent > a::before{
  content:'\2190' !important;font-size:13px !important;line-height:1 !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category li.parent > a:hover{
  background:none !important;color:var(--b-accent) !important}

/* Aktuelle Kategorie */
.sidebar.sidebar-main .block.filter .filter-options-item-category li.current{
  display:block !important;min-height:0 !important;margin:0 !important;padding:2px 8px 10px !important;
  background:none !important;border:0 !important;
  font-size:15px !important;font-weight:700 !important;line-height:1.3 !important;color:var(--b-navy) !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category li.current::before,
.sidebar.sidebar-main .block.filter .filter-options-item-category li.current::after{
  display:none !important;content:none !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category li.current:hover{background:none !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category li.current > a,
.sidebar.sidebar-main .block.filter .filter-options-item-category li.current > a:hover{
  color:inherit !important;font-weight:700 !important;font-size:15px !important;
  padding:0 !important;background:none !important;text-decoration:none !important}

/* Unterkategorien: nur Text, keine Fuehrungslinie, kein Winkel */
.sidebar.sidebar-main .block.filter .filter-options-item-category ol.items ol.items.list{
  position:relative !important;margin:0 !important;padding:0 !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category ol.items ol.items.list::before{
  display:none !important;content:none !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category ol.items.list li.item{
  min-height:34px !important;margin:1px 0 !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category ol.items.list li.item::after{
  display:none !important;content:none !important}
.sidebar.sidebar-main .block.filter .filter-options-item-category li.item:hover{
  background:var(--b-surface-2) !important;box-shadow:none !important}
.sidebar.sidebar-main .block.filter .filter-options-content .items a.swissup-aln-category-link,
.sidebar.sidebar-main .block.filter a.swissup-aln-category-link{
  position:relative !important;flex:1 1 auto !important;min-width:0 !important;
  display:flex !important;align-items:center !important;gap:9px !important;margin:0 !important;
  padding:8px !important;border-radius:var(--b-r-row) !important;
  font-size:13.5px !important;font-weight:600 !important;line-height:1.35 !important;
  color:var(--b-label) !important;text-decoration:none !important;background:none !important}
.sidebar.sidebar-main .block.filter a.swissup-aln-category-link:hover{
  background:none !important;color:var(--b-navy) !important}
.sidebar.sidebar-main .block.filter a.swissup-aln-category-link::after{
  display:none !important;content:none !important}
.sidebar.sidebar-main .block.filter a.swissup-aln-category-link .swissup-option-count{
  margin-left:auto !important;padding-left:8px !important;font-size:11.5px !important;font-weight:400 !important;
  color:var(--b-muted-2) !important;font-variant-numeric:tabular-nums}
.sidebar.sidebar-main .block.filter li.item:hover > a.swissup-aln-category-link .swissup-option-count{
  color:var(--b-muted) !important}

/* Suchfeld im Kategorieblock bleibt, aber ohne Karten-Anmutung */
.sidebar.sidebar-main .block.filter .filter-options-item-category .filter-options-content > input.search{
  margin:0 8px 9px !important}

/* ---------- 6. Preis ------------------------------------------------------- */
.sidebar.sidebar-main .block.filter .swissup-price-range-slider-container{padding:2px 8px 4px !important;margin:0 !important}
.sidebar.sidebar-main .block.filter .extra-controls{display:flex !important;align-items:center !important;gap:8px !important;margin:0 0 4px !important}
.sidebar.sidebar-main .block.filter .extra-controls input{
  flex:1 1 auto !important;min-width:0 !important;width:auto !important;height:auto !important;margin:0 !important;
  padding:8px 10px !important;background:#fff !important;border:1px solid var(--b-line-2) !important;
  border-radius:var(--b-r-row) !important;font-size:13.5px !important;color:var(--b-label) !important;
  font-variant-numeric:tabular-nums}
.sidebar.sidebar-main .block.filter .extra-controls input:focus{
  outline:0 !important;border-color:#365a8c !important;box-shadow:0 0 0 3px rgba(30,60,100,.10) !important}
.sidebar.sidebar-main .block.filter .separator-dash{font-size:0 !important;line-height:0 !important;color:transparent !important}
.sidebar.sidebar-main .block.filter .separator-dash::after{content:'\2013' !important;font-size:14px !important;color:var(--b-muted) !important}
/* Schieber: das Modul liefert ein eigenes Element <range-slider>, das sich
   ausschliesslich ueber Custom Properties steuern laesst (siehe merged-CSS). */
.sidebar.sidebar-main .block.filter range-slider{
  --thumb-width:18px;
  --thumb-border:2px solid var(--b-navy-700);
  --thumb-bg:#ffffff;
  --thumb-border-radius:999px;
  --track-height:4px;
  --track-bg:#E2E8F0;
  width:100% !important;margin:11px 2px 3px !important}

/* ---------- 7. Mehr anzeigen / Suche in langen Listen ---------------------- */
.sidebar.sidebar-main .block.filter .swissup-show-more,
.sidebar.sidebar-main .block.filter .show-more,
.sidebar.sidebar-main .block.filter .filter-options-content .more{
  display:inline-block !important;margin:2px 0 0 !important;padding:7px 9px !important;background:none !important;
  border:0 !important;font-size:12.8px !important;font-weight:600 !important;color:var(--b-navy-700) !important;
  cursor:pointer !important;text-decoration:none !important}
.sidebar.sidebar-main .block.filter .swissup-show-more:hover,
.sidebar.sidebar-main .block.filter .show-more:hover{color:var(--b-accent) !important}
.sidebar.sidebar-main .block.filter .swissup-filter-search,
.sidebar.sidebar-main .block.filter .filter-search{margin:2px 5px 7px !important}
.sidebar.sidebar-main .block.filter .swissup-filter-search input,
.sidebar.sidebar-main .block.filter .filter-search input{
  width:100% !important;height:auto !important;padding:8px 11px !important;background:#fff !important;
  border:1px solid var(--b-line-2) !important;border-radius:var(--b-r-row) !important;font-size:13.5px !important}

/* Suchfeld, das ALN ab 10 Werten in die Facette haengt (input.search) */
.sidebar.sidebar-main .block.filter .filter-options-content > input.search{
  display:block !important;box-sizing:border-box !important;width:calc(100% - 16px) !important;height:auto !important;
  margin:0 8px 8px !important;padding:8px 11px 8px 31px !important;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a2b5' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.2-3.2'/></svg>") 9px 50%/14px 14px no-repeat !important;
  border:1px solid var(--b-line-2) !important;border-radius:var(--b-r-row) !important;
  font-size:13.5px !important;color:var(--b-label) !important;box-shadow:none !important}
.sidebar.sidebar-main .block.filter .filter-options-content > input.search:focus{
  outline:0 !important;border-color:#365a8c !important;box-shadow:0 0 0 3px rgba(30,60,100,.10) !important}
.sidebar.sidebar-main .block.filter .filter-options-content > input.search::placeholder{color:var(--b-muted-2) !important}

/* Lange Listen laufen im Modul auf max-height 305px - Rollbalken dezent halten */
.sidebar.sidebar-main .block.filter .filter-options-content{scrollbar-width:thin;scrollbar-color:#cfd9e5 transparent}
.sidebar.sidebar-main .block.filter .filter-options-content::-webkit-scrollbar{width:9px}
.sidebar.sidebar-main .block.filter .filter-options-content::-webkit-scrollbar-track{background:transparent}
.sidebar.sidebar-main .block.filter .filter-options-content::-webkit-scrollbar-thumb{
  background:#cfd9e5;border-radius:9px;border:3px solid #fff}
.sidebar.sidebar-main .block.filter .filter-options-item-category .filter-options-content::-webkit-scrollbar-thumb{
  border-color:#F2F7FC}

/* ---------- 7b. "Load Previous Page" ---------------------------------------
   Swissup haengt den Knopf ab Seite 2 ohne jede Konfigurationsabfrage in die
   obere Werkzeugleiste (add-load-previous-page-button.js prueft - anders als
   add-more-button.js - weder isInfiniteScrollUp noch isMoreProductsButton).
   Die Theme hat dafuer einen RequireJS-Mixin (js/aln-load-previous-guard.js),
   der greift aber nur, wenn Breeze den Mixin auch anwendet: der breezemap-
   Setter ueberspringt Mixins, sobald der Schluessel schon belegt ist
   (module-breeze/js/core/define.js). Deshalb hier zusaetzlich der Riegel im
   CSS - er kostet nichts und haelt unabhaengig von der Ladereihenfolge.
   Wird eines der beiden Features eingeschaltet, diese Regel wieder entfernen. */
.columns .main .toolbar.toolbar-products button.swissup-layered-load-previous-page,
.columns .main button.swissup-layered-load-previous-page{display:none !important}

/* ---------- 8. Facetten mit genau einem Wert verstecken -------------------- */
.sidebar.sidebar-main .block.filter .filter-options-item:not(.filter-options-item-category):not(.filter-options-item-price):has(ol.items.list > li.item:only-child){
  display:none !important}

/* ---------- 9. Telefon ----------------------------------------------------- */
/* Auf dem Telefon liegt die Spalte ueber der Ware, nicht daneben - dort tragen
   die Haarlinien die Trennung allein, deshalb bleiben sie in jedem Fall an. */
@media (max-width:1023px){
  .sidebar.sidebar-main .block.filter .filter-options-title.filter-options-title{padding:15px 30px 11px 8px !important}
  .sidebar.sidebar-main .block.filter .filter-options-content li.item{min-height:42px !important}
  .sidebar.sidebar-main .block.filter a.swissup-aln-item,
  .sidebar.sidebar-main .block.filter a.swissup-aln-category-link{padding:11px 8px !important;font-size:14px !important}
  .sidebar.sidebar-main .block.filter .filter-options-item + .filter-options-item{
    border-top:1px solid rgba(13,27,46,.09) !important}
}