/* =====================================================================
   Hochfilzer · Kategorie-Navigationswidget — Baum mit L-Verbindern
   ===================================================================== */

/* --- Container (= die Liste selbst) ---------------------------------- */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list {
  --hf-green: #4a8a35;
  --hf-green-hover: #3d7329;
  list-style: none; margin: 0; padding: 0;
  background: #fff;
  border: 1px solid #e8e9eb;
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* --- Listen ----------------------------------------------------------- */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-submenu {
  list-style: none; margin: 0; padding: 0; display: none;
}
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-item.expanded > .nav-submenu,
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-item.parent-expanded > .nav-submenu {
  display: block;
}
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list > li.level2 > .nav-submenu {
  display: block; padding: 6px;                 /* Wurzel immer offen */
}
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-item {
  position: relative;
}

/* --- Kopfzeile "Ersatzteile" ----------------------------------------- */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list > li.level2 > a {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #6b7178; text-decoration: none;
}
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list > li.level2 > a span {
  pointer-events: none;
}
/* Öffner/Ordner der Wurzel-Überschrift "Ersatzteile" ausblenden */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list > li.level2 > .opener {
  display: none !important;
}

/* --- Zeile (Text-Link) ----------------------------------------------- */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-item > a {
  position: relative; display: flex; align-items: center;
  min-height: 38px; padding: 6px 44px 6px 12px; margin: 1px 0;
  color: #2b2f35; text-decoration: none; border-radius: 7px;
  transition: background .12s, color .12s;
}
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-item > a:hover {
  background: #f0f2f4;
}
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-item.level3 > a {
  font-weight: 600;
}
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-item.current > a {
  color: var(--hf-green); font-weight: 700;
}

/* =====================================================================
   L-VERBINDER  (feine gepunktete Baumlinien)
   Einrückung über das padding-left der Unterliste; in dieser Lücke
   liegen die senkrechte Leitlinie und der waagerechte Ellbogen.
   ===================================================================== */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-submenu .nav-submenu {
  padding-left: 22px;                            /* nur ab Ebene 3 einrücken */
}
/* senkrechte Leitlinie der Ebene */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-submenu .nav-submenu > .nav-item::before {
  content: ""; position: absolute; left: -11px; top: 0; bottom: 0;
  border-left: 1px dotted #b6bcc2;               /* DURCHGEZOGEN: 1px solid #d0d4d8 */
}
/* waagerechter Ellbogen zum Eintrag → ergibt die L-Form */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-submenu .nav-submenu > .nav-item::after {
  content: ""; position: absolute; left: -11px; top: 20px; width: 11px;
  border-top: 1px dotted #b6bcc2;                /* DURCHGEZOGEN: 1px solid #d0d4d8 */
}
/* letztes Kind: Leitlinie nur bis zum Ellbogen (sauberes L statt T) */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-submenu .nav-submenu > .nav-item:last-child::before {
  bottom: auto; height: 20px;
}

/* =====================================================================
   ÖFFNER = Ordner-Icon rechts (der Aufklapp-Schalter)
   Überschreibt das native Theme-Symbol des leeren .opener-Buttons.
   An der ZEILENHÖHE verankert (top:0 / height:38px) — sonst rutscht der
   Ordner bei aufgeklappten Zweigen in die Mitte des gesamten Unterbaums.
   ===================================================================== */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .opener {
  position: absolute; top: 0; right: 7px;
  width: 30px; height: 38px;
  border: 0 !important;
  background: none !important;       /* entfernt natives „Fähnchen"-Sprite */
  box-shadow: none !important;
  font-size: 0 !important;           /* falls +/- als Text im Button steckt */
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  -webkit-appearance: none; appearance: none;
}

/* NUR Öffner INNERHALB der Unterlisten zeichnen den Ordner — der Wurzel- */
/* Header "Ersatzteile" liegt außerhalb jeder .nav-submenu.              */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-submenu .opener::after {
  content: "" !important; display: block !important;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  border-radius: 8px; background: transparent; z-index: -1;
  transition: background .14s;
}
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-submenu .opener:hover::after {
  background: #e3e9ee;
}

/* das Ordner-Glyph (geschlossen) */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-submenu .opener::before {
  content: "" !important; display: block !important;
  width: 20px !important; height: 20px !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background-color: var(--hf-green) !important;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M160-160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h240l80%2080h320q33%200%2056.5%2023.5T880-640v400q0%2033-23.5%2056.5T800-160H160Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M160-160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h240l80%2080h320q33%200%2056.5%2023.5T880-640v400q0%2033-23.5%2056.5T800-160H160Z'/%3E%3C/svg%3E");
  transition: background-color .14s;
}

/* aufgeklappt → offener Ordner */
body[class*="categorypath-b2b-ersatzteile"] #synoa-categories-list .nav-submenu .opener[aria-expanded="true"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M160-160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h240l80%2080h320q33%200%2056.5%2023.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8%2027-29.5%2042T760-160H160Zm84-80h516l72-240H316l-72%20240Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%20-960%20960%20960'%3E%3Cpath%20d='M160-160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h240l80%2080h320q33%200%2056.5%2023.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8%2027-29.5%2042T760-160H160Zm84-80h516l72-240H316l-72%20240Z'/%3E%3C/svg%3E");
}