/* ==========================================================================
   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.
   Rollback: Zeile im head/includes entfernen (var/aln_design/backup_head.json).
   ========================================================================== */
.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'><circle cx='12' cy='12' r='8.6'/><path d='M12 7.6v8.8M7.6 12h8.8'/></svg>");
}

/* ---------- 1. Aeusseren Rahmen aufloesen: die Karten sind die Facetten --- */
.columns .sidebar .block.filter{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.columns .sidebar .block.filter .block-content.filter-content{padding:0;background:none}
.columns .sidebar .block.filter .filter-options{margin:0;padding:0;border:0}

/* ---------- 2. Facettenkarte ---------------------------------------------- */
.block.filter .filter-options-item{
  position:relative;overflow:hidden;margin:0 0 11px;padding:0;background:#fff;
  border:1px solid var(--b-line);border-radius:var(--b-r);
  box-shadow:0 1px 2px rgba(13,27,46,.05);
  transition:box-shadow .18s ease,border-color .18s ease}
.block.filter .filter-options-item:last-child{margin-bottom:0}
.block.filter .filter-options-item:hover{box-shadow:0 8px 22px -12px rgba(13,27,46,.28)}

/* aktive Facette: Kante links + Symbol in Akzentfarbe */
.block.filter .filter-options-item:has(.filter-options-item-state-reset-url.reset-show)::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:3;background:var(--b-accent)}
.block.filter .filter-options-item:has(.filter-options-item-state-reset-url.reset-show) .filter-options-title::before{
  background:var(--b-accent)}

/* ---------- 3. Kopf der Karte --------------------------------------------- */
.block.filter .filter-options-title{
  display:flex;align-items:center;gap:10px;position:relative;margin:0;
  padding:12px 40px 12px 14px;background:none;border:0;border-radius:0;
  font-family:var(--b-cond);font-size:13.5px;font-weight:700;letter-spacing:.07em;
  line-height:1.2;text-transform:uppercase;color:var(--b-navy);cursor:pointer}
.block.filter .filter-options-title:hover{background:none;color:var(--b-accent)}

/* Symbol - frei stehend, ohne Kachel; Maske wird je Facette getauscht */
.block.filter .filter-options-title::before{
  content:"";position:static;flex:0 0 19px;width:19px;height:19px;
  top:auto;right:auto;bottom:auto;left:auto;border-radius:0;
  background:var(--b-navy-700);
  -webkit-mask:var(--b-ico) center/contain no-repeat;
          mask:var(--b-ico) center/contain no-repeat}

/* Pfeil */
.block.filter .filter-options-title::after{
  content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;margin:0;padding:0;
  background:none;border:0;border-right:1.7px solid #93a2b5;border-bottom:1.7px solid #93a2b5;
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.block.filter .filter-options-item.active .filter-options-title::after{transform:translateY(-25%) rotate(-135deg)}

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

/* Symbole je Facette (Maske, damit die Farbe aus dem Zustand kommt) */
.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>")}
.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>")}
.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>")}
.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>")}
.block.filter .filter-options-item-color,
.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>")}
.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>")}
.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>")}
.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. Inhalt ------------------------------------------------------ */
.block.filter .filter-options-content{padding:0 9px 11px;margin:0;background:none;border:0}
.block.filter .filter-options-content .items,
.block.filter .filter-options-content ol.items{margin:0;padding:0;list-style:none}
.block.filter .filter-options-content li.item{
  position:relative;display:flex;align-items:center;margin:0;padding:0;
  min-height:36px;border-radius:var(--b-r-row);transition:background .12s ease}
.block.filter .filter-options-content li.item:hover{background:var(--b-surface-2)}

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

/* Wertzeile */
.block.filter a.swissup-aln-item{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;margin:0;padding:8px 9px;
  font-size:14.5px;line-height:1.3;color:var(--b-label);text-decoration:none;background:none}
.block.filter a.swissup-aln-item:hover{background:none;color:var(--b-navy)}
.block.filter li.item:has(input.swissup-layered-checkbox:checked) a.swissup-aln-item{
  color:var(--b-navy);font-weight:600}
.block.filter .swissup-option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block.filter .swissup-option-count,
.block.filter .swissup-option-count.swissup-count-green,
.block.filter .swissup-option-count.swissup-count-red,
.block.filter .count{
  margin-left:auto;padding-left:8px;font-size:12.5px;font-weight:400;color:var(--b-muted);
  font-variant-numeric:tabular-nums;background:none}

/* ---------- 5. Kategorie-Karte (blauer Verlauf bleibt) --------------------- */
.block.filter .filter-options-item-category{
  background:linear-gradient(180deg,#E9F1FB 0%,#F5F9FD 42%,#fff 100%);border-color:#D5E3F3}
.block.filter .filter-options-item-category .filter-options-title{color:var(--b-navy-700)}
.block.filter .filter-options-item-category li.parent{display:block;min-height:0;margin:0 0 2px;background:none}
.block.filter .filter-options-item-category li.parent:hover{background:none}
.block.filter .filter-options-item-category li.parent > a{
  display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;
  font-size:12.5px;line-height:1.2;color:var(--b-navy-700);text-decoration:none}
.block.filter .filter-options-item-category li.parent > a::before{content:"\2190";font-size:13px;line-height:1}
.block.filter .filter-options-item-category li.parent > a:hover{background:rgba(255,255,255,.8);color:var(--b-accent)}
.block.filter .filter-options-item-category li.current{
  display:block;min-height:0;margin:0;padding:2px 9px 9px;background:none;
  font-size:14.5px;font-weight:700;line-height:1.3;color:var(--b-navy)}
.block.filter .filter-options-item-category li.current:hover{background:none}
.block.filter .filter-options-item-category li.current > a,
.block.filter .filter-options-item-category li.current > a:hover{color:inherit;text-decoration:none;background:none}
.block.filter .filter-options-item-category ol.items ol.items.list{position:relative;margin:0;padding:0 0 0 10px}
.block.filter .filter-options-item-category ol.items ol.items.list::before{
  content:"";position:absolute;left:3px;top:6px;bottom:14px;width:1px;background:#CFDDEE}
.block.filter .filter-options-item-category li.item::after{
  content:"";position:absolute;left:-7px;top:50%;width:7px;height:1px;background:#CFDDEE}
.block.filter .filter-options-item-category li.item:hover{background:rgba(255,255,255,.92)}
.block.filter a.swissup-aln-category-link{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;padding:7px 9px;
  font-size:14.5px;line-height:1.3;color:var(--b-label);text-decoration:none}
.block.filter a.swissup-aln-category-link:hover{color:var(--b-navy)}

/* ---------- 6. Preis ------------------------------------------------------- */
.block.filter .swissup-price-range-slider-container{padding:6px 4px 2px;margin:0}
.block.filter .extra-controls{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.block.filter .extra-controls input{
  flex:1 1 auto;min-width:0;width:auto;height:auto;margin:0;padding:8px 10px;background:#fff;
  border:1px solid var(--b-line-2);border-radius:var(--b-r-row);
  font-size:13.5px;color:var(--b-label);font-variant-numeric:tabular-nums}
.block.filter .extra-controls input:focus{outline:0;border-color:#365a8c;box-shadow:0 0 0 3px rgba(30,60,100,.10)}
.block.filter .separator-dash{font-size:0;line-height:0;color:transparent}
.block.filter .separator-dash::after{content:"\2013";font-size:14px;color:var(--b-muted)}
/* Schieber (ion.rangeSlider), falls das Modul ihn aufbaut */
.block.filter .irs{margin:2px 4px 0}
.block.filter .irs--flat .irs-line,.block.filter .irs-line{background:#E2E8F0;border-radius:3px;height:4px;top:14px}
.block.filter .irs--flat .irs-bar,.block.filter .irs-bar{background:var(--b-navy-700);height:4px;top:14px}
.block.filter .irs--flat .irs-handle>i:first-child{display:none}
.block.filter .irs--flat .irs-handle,.block.filter .irs-slider{
  width:18px;height:18px;top:7px;background:#fff;border:2px solid var(--b-navy-700);border-radius:50%;
  box-shadow:0 1px 3px rgba(13,27,46,.25)}
.block.filter .irs-from,.block.filter .irs-to,.block.filter .irs-single{
  background:var(--b-navy);border-radius:5px;font-size:11.5px;padding:2px 6px}
.block.filter .irs-min,.block.filter .irs-max{display:none}

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

/* ---------- 8. Facetten mit genau einem Wert verstecken -------------------- */
.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}

/* ---------- 9. Telefon ----------------------------------------------------- */
@media (max-width:767px){
  .block.filter .filter-options-item{margin-bottom:9px;border-radius:12px}
  .block.filter .filter-options-title{padding:13px 40px 13px 13px}
  .block.filter .filter-options-content li.item{min-height:42px}
  .block.filter a.swissup-aln-item{padding:10px 9px;font-size:15px}
}