/* ============================================================================
   KATEGORIE-DARSTELLUNG (rothler, 10.10.2026) – eine Kachel, drei Orte
   ----------------------------------------------------------------------------
   Anlass (Enes, Screenshots 10.10.): Menü hängt mobil in der 3. Ebene, Unterkategorien als nackte Linkliste,
   Sidebar mit doppeltem Pfeil. Ziel: dieselbe Kachel (kleines echtes Kategoriebild + Name) in
     1. der Kategorieseite (productlist/header.tpl, .rh-kat-hub),
     2. dem Desktop-Mega-Menü (snippets/categories_mega_recursive.tpl, .rh-menu-category),
     3. dem mobilen Menü (gleiche Vorlage, Ebenen von NOVA)
   und in der Sidebar (snippets/categories_recursive.tpl) ein Link + eine Pfeiltaste je Zeile.
   Bilder: nur echte Kategoriebilder (custom/components/rh_category_thumb.tpl), sonst neutrales Raster-Icon.
   Tokens wie im übrigen Shop: Blau #116bb0, Text #16181d/#183449, weich #6b7280, Fläche #f5f8fa, Rand #e1e9f0.
   Doppelter Pfeil: NOVAs clear.css malt auf JEDES [data-toggle="collapse"] ein Font-Awesome-::after – hier aus.
   ============================================================================ */

/* ---------- Kachel-Bild (überall gleich) ---------- */
.rh-cat-thumb { display:flex; align-items:center; justify-content:center; flex:0 0 56px; width:56px; height:56px; overflow:hidden; border-radius:10px; background:#f3f6f9; color:#8495a4; box-shadow:inset 0 0 0 1px #e6edf3; }
.rh-cat-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.rh-cat-thumb svg { flex:none; }

/* ---------- Kachel (Kategorieseite) ---------- */
.rh-kat-hub { display:grid; grid-template-columns:1fr; gap:10px; margin:14px 0 18px; }
.rh-kat-hub__gruppe { min-width:0; padding:0 !important; border:1px solid #e1e9f0; border-radius:12px; background:#fff; overflow:hidden; }
.rh-kat-hub__gruppe--kinder { grid-column:1 / -1; }
.rh-kat-kachel { display:flex; align-items:center; gap:12px; min-height:64px; padding:8px 10px; color:#183449 !important; text-decoration:none !important; transition:background-color 120ms ease, border-color 120ms ease; }
.rh-kat-kachel:hover, .rh-kat-kachel:focus-visible { background:#f3f8fc; color:#116bb0 !important; }
.rh-kat-kachel:focus-visible { outline:2px solid #116bb0; outline-offset:-2px; }
.rh-kat-kachel__text { display:flex; flex-direction:column; min-width:0; flex:1; gap:2px; }
.rh-kat-kachel__name { font-family:var(--font-display, "Manrope", sans-serif); font-size:14px; font-weight:700; line-height:1.3; overflow-wrap:break-word; hyphens:auto; }
.rh-kat-kachel__meta { font-size:12px; line-height:1.3; color:#6b7280; }
.rh-kat-kachel__pfeil { flex:none; color:#8aa0b3; transition:transform 120ms ease, color 120ms ease; }
.rh-kat-kachel:hover .rh-kat-kachel__pfeil { color:#116bb0; transform:translateX(2px); }
.rh-kat-kachel--kopf { min-height:72px; padding:10px 12px; }
.rh-kat-kachel--kopf .rh-cat-thumb { flex-basis:60px; width:60px; height:60px; }
.rh-kat-kachel--kopf .rh-kat-kachel__name { font-size:16px; }
.rh-kat-hub__kinder { display:grid; grid-template-columns:1fr; gap:8px; margin:0; padding:0 10px 10px; list-style:none; }
.rh-kat-hub__kinder > li { min-width:0; }
.rh-kat-kachel--kind { min-height:60px; padding:6px 8px; border:1px solid #e7edf2; border-radius:10px; background:#fbfcfd; }
.rh-kat-kachel--kind .rh-cat-thumb { flex-basis:46px; width:46px; height:46px; border-radius:8px; }
.rh-kat-kachel--kind .rh-kat-kachel__name { font-size:13.5px; font-weight:600; }
.rh-kat-kachel--kind:hover { border-color:#bcd7eb; background:#f3f8fc; }
@media(min-width:576px) {
  .rh-kat-hub { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rh-kat-hub__kinder { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(min-width:768px) {
  .rh-kat-hub { grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
  .rh-kat-hub__kinder { grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; padding:0 12px 12px; }
}
@media(min-width:1200px) {
  .rh-kat-hub__kinder { grid-template-columns:repeat(5, minmax(0,1fr)); }
  .rh-kat-hub__kinder:has(> li:nth-child(7)) { grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* ---------- Sidebar: Link + Pfeiltaste je Zeile ---------- */
html body .box-categories .rh-category-row { display:flex; align-items:center; gap:0; min-width:0; margin:2px 0; }
html body .box-categories a.rh-category-link { display:flex !important; align-items:center; flex:1; min-width:0; min-height:42px; margin:0 !important; padding:8px 10px !important; border-radius:8px !important; font-family:var(--font-display, "Manrope", sans-serif) !important; font-size:14px !important; font-weight:500 !important; line-height:1.35 !important; color:#42576a !important; background:transparent !important; white-space:normal !important; overflow-wrap:anywhere; text-decoration:none !important; }
html body .box-categories .rh-category-row[data-rh-level="0"] > a { font-size:15px !important; font-weight:700 !important; color:#183449 !important; }
html body .box-categories .rh-category-row[data-rh-level="1"],
html body .box-categories a.rh-category-link[data-rh-level="1"] { margin-left:12px !important; }
html body .box-categories .rh-category-row[data-rh-level="2"],
html body .box-categories a.rh-category-link[data-rh-level="2"] { margin-left:24px !important; }
html body .box-categories .rh-category-row[data-rh-level="1"] > a { font-weight:600 !important; }
html body .box-categories .nav-panel .snippets-categories-collapse > ul.nav { padding:0 0 4px !important; margin:0 !important; }
html body .box-categories a.rh-category-link:hover { background:#f5f8fa !important; color:#116bb0 !important; }
html body .box-categories a.rh-category-current { background:#eaf3fa !important; color:#116bb0 !important; font-weight:700 !important; box-shadow:inset 3px 0 #116bb0; }
html body .box-categories .rh-category-toggle { display:flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; color:#60778b; cursor:pointer; }
html body .box-categories .rh-category-toggle::after, html body .box-categories .rh-category-toggle::before { content:none !important; display:none !important; }
html body .box-categories .rh-category-toggle:hover { background:#f5f8fa; color:#116bb0; }
html body .box-categories .rh-category-toggle svg { display:block; transition:transform 140ms ease; }
html body .box-categories .rh-category-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
html body .box-categories .rh-category-toggle[aria-expanded="true"] { color:#116bb0; }
.rh-category-link:focus-visible, .rh-category-toggle:focus-visible { outline:2px solid #116bb0; outline-offset:2px; }

/* ---------- Desktop-Mega-Menü: Gruppen (Kopfkachel + Kinder) ---------- */
@media(min-width:992px) {
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-grouped .row.nav { grid-template-columns:repeat(3,minmax(0,1fr)) !important; align-items:start !important; gap:16px 24px !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-grouped .rh-menu-group { grid-column:span 2; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category { display:flex !important; align-items:center !important; gap:12px !important; justify-content:flex-start !important; white-space:normal !important; text-decoration:none !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category > .rh-cat-thumb { display:flex !important; flex:0 0 56px !important; width:56px !important; height:56px !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category .rh-cat-thumb img { width:100% !important; height:100% !important; margin:0 !important; object-fit:cover !important; border-radius:0 !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category__text { display:flex; flex-direction:column; gap:2px; min-width:0; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category__name { min-width:0; color:#183449; font-family:var(--font-display, "Manrope", sans-serif); font-size:14px; font-weight:600; line-height:1.35; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category__meta { font-size:12px; line-height:1.3; color:#6b7280; font-weight:500; }
  /* Kopfkacheln: in Gruppen-Panels alle Oberkategorien gleich (kein Kasten mehr, auch nicht für Kategorien ohne Kinder) */
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-grouped .subcategory-wrapper .nav-item-lg-m > a.rh-menu-category.d-block { border:0 !important; border-bottom:1px solid #e7edf2 !important; border-radius:0 !important; padding:2px 0 12px !important; background:transparent !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-grouped .subcategory-wrapper .nav-item-lg-m > a.rh-menu-category.d-block:hover .rh-menu-category__name { color:#116bb0; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-grouped .subcategory-wrapper .nav-item-lg-m > a.rh-menu-category.d-block .rh-menu-category__name { font-size:16px; font-weight:700; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-grouped .subcategory-wrapper .nav-item-lg-m > a.rh-menu-category.d-block::after { display:none !important; }
  /* Panels ohne Gruppen (nur eine Ebene, z. B. Heizungszubehör): Kachel mit Rand wie bisher, Bild quadratisch */
  html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.rh-menu-category.d-block .rh-menu-category__meta { display:none; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-grouped .subcategory-wrapper .nav-item-lg-m > a.rh-menu-category.d-block .rh-menu-category__meta { display:block; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children { display:block !important; position:static !important; float:none !important; min-width:0 !important; width:auto !important; margin:0 !important; padding:10px 0 0 !important; border:0 !important; box-shadow:none !important; background:transparent !important; transform:none !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children > ul.nav { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:4px 12px !important; margin:0 !important; padding:0 !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children > ul.nav > li { min-width:0; width:auto !important; margin:0 !important; padding:0 !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children > ul.nav > li.d-lg-none { display:none !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children a.rh-menu-category { min-height:60px !important; margin:0 !important; padding:6px 8px !important; border:1px solid transparent !important; border-radius:10px !important; background:transparent; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children a.rh-menu-category:hover { background:#f3f8fc !important; border-color:#bcd7eb !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children .rh-menu-category > .rh-cat-thumb { flex-basis:46px !important; width:46px !important; height:46px !important; border-radius:8px; }
}

/* ---------- Mobiles Menü: Ebenen 2 und 3 als Liste mit Foto ---------- */
@media(max-width:991.98px) {
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category { display:flex !important; align-items:center !important; gap:12px !important; min-height:60px !important; padding:8px 16px !important; white-space:normal !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category__text { display:flex; flex-direction:column; min-width:0; flex:1; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category__name { flex:1; min-width:0; font-family:var(--font-display, "Manrope", sans-serif); font-size:15px; font-weight:600; line-height:1.35; color:#183449; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category > .rh-cat-thumb { flex-basis:48px; width:48px; height:48px; border-radius:9px; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category.dropdown-toggle::after { flex:none; margin-left:auto !important; }
  /* Blätter ohne Unterkategorien: kein Pfeil (NOVA malt ihn sonst auf jede Toplevel-Zeile) */
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-category:not(.dropdown-toggle)::after { content:none !important; display:none !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children .nav-mobile-heading { white-space:normal !important; line-height:1.4; }
  /* Der Shop legt die Ebenen übereinander (nicht NOVAs verschobene Liste): gilt für JEDES verschachtelte Panel */
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.show { overflow:visible !important; }
  html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m.dropdown,
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children .nav-item.dropdown { position:static !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children.show { position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; min-height:100% !important; height:auto !important; margin:0 !important; padding:0 0 24px !important; border:0 !important; border-radius:0 !important; background:#fff !important; z-index:7 !important; transform:none !important; box-shadow:none !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children > .nav { display:flex; flex-direction:column; margin:0; padding:0; }
  /* „<Kategorie> anzeigen“ in Ebene 3 genau wie in Ebene 2 (blauer Link mit Pfeil, ohne farbige Fläche) */
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children > .nav > .d-lg-none { margin:0 !important; padding:0 !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children > .nav > .d-lg-none > a { display:flex !important; align-items:center; gap:10px; min-height:48px; padding:12px 16px !important; border-bottom:1px solid #e7edf2; background:transparent !important; color:#116bb0 !important; font-size:14px; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children > .nav > .d-lg-none > a strong { color:#116bb0 !important; font-size:14px; font-weight:600; text-transform:none !important; letter-spacing:0; }
  html body #jtl-nav-wrapper #mainNavigation .rh-menu-children > .nav > .d-lg-none > a strong::after { content:" →"; }
}
@media(prefers-reduced-motion:reduce) {
  .rh-category-toggle svg, .rh-kat-kachel, .rh-kat-kachel__pfeil { transition:none; }
}