/* global source hidden by default (moved into submenu when needed) */
.menu-panels { display: none; }

/* wrapper inside submenu */
.mmp-wrapper {
  align_content: left;
  display: flex;
  gap: 20px;
  min-width: 1200px;      /* adjust to taste */
  box-sizing: border-box;
  padding: 10px 12px;
}

/* left column: category list */
.mmp-left {
  flex: 0 0 160px;
}
.mmp-left ul { margin: 0; padding: 0; }
.mmp-left li { list-style: none; padding: 10px 6px; color: #333; }
.mmp-left li.mmp-active { background: #f5f5f5; font-weight: 600; }

/* right column: product panels container */
.mmp-right {
  flex: 1;
  min-height: 220px;   /* reserve space even if a panel is hidden */
}

/* cloned/moved panels inside submenu */
.mmp-right .menu-panels {
  display: block !important;
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* panel (per category) */
.menu-panels .panel {
  display: none;
}

/* product grid */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction :row;
  gap: 18px;
}

/* each product */
.product-item {
  width: 150px;
  text-align: center;
}
.product-item img { width: 220px; height: auto; display: block; margin: 0 auto; }
.product-item .product-title { display: block; margin-top: 8px; font-size: 13px; color: #222; text-decoration: none; }

/* link style */
.product-item a { color: inherit; text-decoration: none; }
.product-item a:hover .product-title { text-decoration: underline; }

/* Right side should expand fully */
.mmp-right {
  flex: 1;
  min-width: 800px; /* adjust as needed */
  padding: 10px;
  box-sizing: border-box;
}

/* Force 4 equal columns */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* Each product sits neatly in a grid cell */
.product-item {
  text-align: center;
}

.product-item img {
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
}

.product-item .product-title {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #333;
  line-height: 1.2em;
}


/* Right panel should always stretch */
.mmp-right {
  flex: 1;
  min-width: 600px; /* adjust if you want wider */
  padding: 10px;
  box-sizing: border-box;
}
/* Force clone container to stretch */
.mmp-right .menu-panels-clone {
  display: block !important;
  width: 100%;
  min-height: 300px; /* keeps height even when empty */
  box-sizing: border-box;
}

/* Ensure each panel fills available space */
.mmp-right .menu-panels-clone .panel {
  display: none;
  width: 100%;
}
.mmp-right .menu-panels-clone .panel.active {
  display: flex;
}

/* Fix cloned menu panel text to match Max Mega Menu
.menu-panels-clone a {
  font-family: Inter, sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 27.2px !important;
  height: 60.1875px; /* optional, usually handled by line-height */
  color: inherit !important;
  text-decoration: none;
  display: block;
  padding: 0 12px; /* adjust if submenu links use padding */
}

/* Make submenu expand to fit product grid */
.mmp-wrapper {
  display: flex;
  align-items: flex-start;
  min-height: 300px; /* adjust until all products fit nicely */
}

/* Left column (categories) */
.mmp-left {
  flex: 0 0 120px; /* fixed width for category list */
  padding: 10px 0;
}

/* Right column (product panels) */
.mmp-right {
  flex: 1;
  padding: 10px 20px;
  min-height: 300px; /* matches wrapper */
}

/* Ensure submenu itself expands*/
.mega-sub-menu {
  min-height: 320px !important; /* give breathing room */
}

/* Apply same font & spacing as Mega Menu */
.menu-panels-clone .product-item a {
  font-family: inherit;   /* inherit from the menu */
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;  /* remove extra box padding */
  margin: 0;
  text-align: center;
  display: block;
}

/* Fix product title separately */
.menu-panels-clone .product-item .product-title {
  font-size: 14px;  /* or inherit if you want same as menu */
  font-weight: 400;
  line-height: 1.3em;
  margin-top: 6px;
  color: #333;
}


/* Left column category chooser links */
.mega-sub-menu .mmp-left .mega-menu-item > a {
  font-family: Inter, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 27.2px !important;
  height : 27.2049px !important;
  text-transform: uppercase;
}
.mmp-left .mega-sub-menu .mega-menu-item > a {
  display: block;
  padding: 15px 15px 15px 15px !important;
}


.mega-menu-item .mega-menu-item-type-taxonomy > a{
 display: 15px 15px 15px 15px !important;
}
/* Fix spacing on left column items */
.mmp-left .mega-menu-item > a {
  padding: 15px 20px;  /* match the original submenu */
  display: block;      /* ensure clickable area */
}

/* Restore correct padding on cloned category items */
.mmp-wrapper .mmp-left .mega-menu-item {
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box;
}

/* Force cloned submenu links to match original padding */
.mmp-left .mega-menu-link {
    display: block;
    padding: 15px;
}

.menu-panels-clone .mega-menu-link {
    display: block;
    padding: 15px;
}
/* Remove padding from all menu links so originals and clones look the same */
.mega-sub-menu .mega-menu-link {
    padding: 0 !important;
}