<style>
/* ===== Fix: UL এর ভেতরে DIV wrapper flatten করে দাও ===== */
@media (min-width: 992px) {
  .heder__category > div { 
    display: contents !important;   /* <div> থাকবে, কিন্তু layout-এ থাকবে না */
  }
}

/* ===== Anchor + Gap: dropdown সবসময় trigger এর নিচেই থাকবে ===== */
@media (min-width: 992px) {
  /* parent LI কে anchoring context */
  .heder__category > li.all__category__list {
    position: relative !important;
    overflow: visible !important;
  }

  /* dropdown container */
  .heder__category > li.all__category__list > .sidebar-menu.side__bar {
    position: absolute !important;
    top: 100% !important;            /* trigger শেষ হওয়ার সাথে সাথেই শুরু */
    left: 0 !important;
    margin-top: 14px !important;     /* <-- এখানে gap */
    z-index: 3000 !important;
  }

  /* parent গুলা যেন কেটে না দেয় */
  .menu-area, .catagory_menu, .heder__category {
    overflow: visible !important;
  }

  /* dropdown লম্বা হলে কাটা না পড়ে, স্ক্রল হয় */
  .heder__category > li.all__category__list > .sidebar-menu.side__bar .hideshow,
  .side__barsub, .side__barchild {
    max-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;
  }

  /* হোমপেজে যেই ফাঁকা <div></div> থাকে সেটা লেআউট থেকে বাদ */
  .all__category__list > div:empty {
    display: none !important;
  }
}

/* ===== Header overlap হলে (sticky/fixed) fallback: translateY দিয়ে নামিয়ে দাও ===== */
@media (min-width: 992px) {
  .heder__category > li.all__category__list > .sidebar-menu.side__bar {
    transform: translateY(0);        /* reset */
  }
  /* যদি এখনও header গায়ে লাগে, এইটা আনকমেন্ট করে দেন:
  .heder__category > li.all__category__list > .sidebar-menu.side__bar {
    transform: translateY(12px) !important;  // extra clearance
  } */
}
</style>
