/* ---------------- Left Category Menu ---------------- */
.LeftMenuCon{ margin-bottom: 24px; }

.LefMenu{
  list-style:none; margin:0; padding:0;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); overflow:hidden;
}

/* Top-level items */
.LefMenu > li{
  list-style:none; border-bottom:1px solid var(--line);
}
.LefMenu > li:last-child{ border-bottom:none; }

.LefMenu > li > .menutitle{
  padding: 14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-display); font-weight:600; font-size:.94rem; color: var(--ink);
  transition: all .3s var(--ease);
}
.LefMenu > li > .menutitle:hover{ background: var(--green-tint); color: var(--green-dark); }

/* Leaf top-level links (no children) */
.LefMenu > li > .menutitle > a{
  flex:1; text-decoration:none; color: inherit; font-family: inherit; font-weight:inherit;
}
.LefMenu > li > .menutitle > a[class='active']{
  color: var(--green-dark);
}

/* Chevron indicator — only categories with children render a bare <span>, so this
   only appears where it should. Rotates via :has() when the submenu is open
   (modern browsers; degrades gracefully to a static chevron on older ones). */
.menutitle > span{ display:flex; align-items:center; justify-content:space-between; flex:1; }
.menutitle > span::after{
  content:""; width:7px; height:7px; margin-left:10px; flex-shrink:0;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg); transition: transform .3s var(--ease); opacity:.6;
}
.menutitle:has(+ .submenun[style*="display:block"]) > span::after,
.menutitle:has(+ .submenun[style*="display: block"]) > span::after,
.menutitle:has(+ .usubmenu[style*="display:block"]) > span::after,
.menutitle:has(+ .usubmenu[style*="display: block"]) > span::after{
  transform: rotate(45deg); opacity:1;
}

/* Submenu panel */
.submenun, .usubmenu{
  background: var(--mist); display:block;
}
.submenun[style*="display:block"], .submenun[style*="display: block"],
.usubmenu[style*="display:block"], .usubmenu[style*="display: block"]{
  animation: mnuFade .25s var(--ease);
}
@keyframes mnuFade{ from{ opacity:0; } to{ opacity:1; } }

.submenun ul, .usubmenu ul{
  margin:0; padding: 4px 0; list-style:none;
}
.submenun ul li, .usubmenu ul li{
  list-style:none; border-bottom:1px solid var(--line);
}
.submenun ul li:last-child, .usubmenu ul li:last-child{ border-bottom:none; }

/* Nested category titles (for deeper recursion levels) */
.submenun ul > li > .menutitle{
  padding:0;
}
.submenun ul > li > .menutitle > span{
  padding: 10px 16px 10px 28px; font-size:.86rem; font-weight:600; color: var(--ink-soft);
  display:flex; align-items:center; justify-content:space-between;
}
.submenun ul > li > .menutitle:hover > span{ color: var(--green-dark); }

/* Leaf links inside submenu */
.submenun ul li a{
  text-decoration:none; color: var(--ink-soft); font-weight:500; font-size:.86rem;
  padding: 10px 16px 10px 28px; display:block; position:relative;
  transition: all .3s var(--ease);
}
.submenun ul li a::before{
  content:""; position:absolute; left:16px; top:50%; width:6px; height:1px; background: var(--line);
}
.submenun ul li a:hover{ background: var(--green-tint); color: var(--green-dark); padding-left:32px; }
.submenun ul li a.active{
  background: var(--green); color:#fff; font-weight:600;
}
.submenun ul li a.active::before{ background: rgba(255,255,255,.5); }
.submenun ul li a:focus{
  outline:none; background: var(--green-tint); color: var(--green-dark);
}