/* Make every first-level dropdown shrink-to-fit its contents */
#menu-main-menu > li > .wd-dropdown-menu {
  /* cancel the theme’s fixed width */
  width: auto !important;
  /* but enforce a sensible minimum */
  min-width: 250px !important;
  /* and a max so it never goes off-screen */
  max-width: 80vw !important;
}
/*#menu-main-menu > li > .wd-dropdown-menu > .wd-entry-content {*/
/*  max-height: 300px; */
/*  overflow: auto;*/
/*}*/
/*#menu-main-menu > li > .wd-dropdown-menu { width:auto !important; min-width:250px !important; max-width:80vw !important; }*/

/* 2-column style for long lists */
ul.dpcm-two-column {
  column-count: 4;
  column-gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 3px;
  overflow:visible;
  
}

/* make sure each <li> flows correctly into columns */
ul.dpcm-two-column > li {
  break-inside: avoid;
  padding: 0.25rem 0;
}

/* Center the first‐level dropdown panel under its parent <li> */
#menu-main-menu > li > .wd-dropdown-menu {
  /* cancel any right‐oriented positioning */
  right: auto         !important;
  /* move the left edge to 50% of the parent */
  left: 50%           !important;
  /* pull it back by half its own width */
  transform: translateX(-50%) !important;
}
/* When we’ve marked this item to flip… */
#menu-main-menu li.menu-item-has-children.dpcm-flip-left > .wd-dropdown-menu {
  left:  auto !important;   /* override the default 100% */
  right: 100% !important;   /* open to the left instead */
}

#menu-main-menu li.menu-item-has-children > .wd-dropdown-menu {
  left:  100% !important;
  right: auto   !important;
}

/* When on a flipped <li>, open to the left instead */
#menu-main-menu li.menu-item-has-children.dpcm-flip-left > .wd-dropdown-menu {
  left:  auto   !important;
  right: 100%   !important;
}

/* 1) Don’t clip nested panels inside the mega menu */
.wd-dropdown-menu,
.wd-dropdown-menu * {
  overflow: visible !important;   /* some skins set overflow:hidden */
}

/* First-level mega menu panel: let it grow naturally */
#menu-main-menu > li > .wd-dropdown-menu{
  height: auto !important;
  min-height: 0 !important;         /* cancel theme min-height */
  max-height: none !important;
  overflow: visible !important;     /* do not clip children */
  z-index: 10020 !important;
}

/* The wrapper rows inside the panel shouldn’t clip either */
#menu-main-menu > li > .wd-dropdown-menu > * {
  overflow: visible !important;
}



/*=====*/


#menu-main-menu > li > .wd-dropdown-menu { 
  width: max-content !important;      /* grow to fit columns */
  max-width: 95vw !important;
  overflow: visible !important;
}

#menu-main-menu .dpcm-two-column{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(200px, 1fr)); /* 4 solid columns */
  grid-auto-rows: auto;    
  gap: 12px 5px;         /* row / column gap */
  list-style: none;
  margin: 0;
  padding: 6px 8px;
}

#menu-main-menu .dpcm-two-column > li{
  break-inside: avoid;                 /* no broken items */
  -webkit-column-break-inside: avoid;  /* safety */
  page-break-inside: avoid;
}

/* Mega panel width rules (keeps things from stretching) */
#menu-main-menu > li > .wd-dropdown-menu{
  width: max-content !important;
  max-width: 92vw !important;
  overflow: visible !important;
}

/* ==== 4 fixed columns, small gaps ==== */
#menu-main-menu .dpcm-two-column{
  display: grid !important;
  grid-template-columns: repeat(3, 200px);   /* fixed column width */
  gap: 4px 14px;                              /* row gap / column gap (smaller) */
  list-style: none; margin: 0; padding: 6px 8px;
}

/* Remove extra spacing Woodmart puts on li/a */
#menu-main-menu .dpcm-two-column > li{ 
  margin: 0 !important; 
  padding: 0 !important; 
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Links: compact, wrap to 2 lines */
#menu-main-menu .dpcm-two-column > li > a{
  display: block;
  padding: 4px 0 !important;      /* tighter vertical padding */
  margin: 0 !important;
  line-height: 1.25 !important;   /* smaller row height */
  white-space: normal !important; /* allow wrapping */
  overflow: hidden;               
  text-overflow: ellipsis;        /* soft end if it tries to go 3+ lines */
  max-width: 200px;               /* match column width */
  word-break: break-word;         /* break long words if needed */
}

/* Optional: slightly smaller font if you still need more density */
#menu-main-menu .dpcm-two-column > li > a{
  font-size: 14px;                /* adjust to taste */
}

#menu-main-menu .dpcm-two-column > li.menu-item-has-children > a {
  padding-right: 12px !important;   /* space for arrow */
  position: relative;
}

/* Move the arrow a bit further to the right */
#menu-main-menu .dpcm-two-column > li.menu-item-has-children > a::after {
  margin-left: 6px !important;      /* space between text and arrow */
  right: 0;                         /* align at the edge */
  position: absolute;
}