/************************************************************/
/** 1) “Termékek” Mega Menu (#mega-menu-item-4290) **/
/************************************************************/

/*
  Final approach:
  - Keep the mega menu in the layout (display:flex)
  - Control open/close with opacity/visibility + pointer-events
  - Add a short close delay so the user can cross the hover gap
  - Disable any plugin slide/transform on desktop to prevent the 5px jump
*/

/* Ensure that the Termékek button remains above the mega menu */
#mega-menu-item-4290 {
  position: relative !important;
  z-index: 10000 !important;
}

/* Base state: keep layout active but hide visually */
#mega-menu-item-4290 > ul.mega-sub-menu {
  position: fixed !important;
  top: 100px !important; /* under your header */
  left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  background-color: #fff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
  z-index: 9999 !important;

  /* IMPORTANT: override any previous display:none */
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;

  /* Hidden, but still present for transition */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  /* Close delay (forgiving window) */
  transition:
    opacity 120ms ease 500ms,
    visibility 0s linear 620ms !important;
}

/* Hover state: show immediately */
#mega-menu-item-4290:hover > ul.mega-sub-menu,
#mega-menu-item-4290 > ul.mega-sub-menu:hover {
  display: flex !important; /* extra safety */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transition:
    opacity 120ms ease 0s,
    visibility 0s linear 0s !important;
}

/* The row container (like #mega-menu-4290-0) that holds columns */
#mega-menu-item-4290 ul.mega-sub-menu li.mega-menu-row > ul.mega-sub-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each column (#mega-menu-4290-0-0, #mega-menu-4290-0-1, etc.) */
#mega-menu-item-4290 ul.mega-sub-menu li.mega-menu-column {
  flex: 1 1 200px !important; 
  min-width: 150px !important;
  margin-right: 20px !important;
}
#mega-menu-item-4290 ul.mega-sub-menu li.mega-menu-column:last-child {
  margin-right: 0 !important;
}

/* Remove bullets from sub-lists */
#mega-menu-item-4290 .mega-menu-columns ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#mega-menu-item-4290 .mega-menu-columns ul li {
  margin-bottom: 5px !important;
}

/* Link styling inside columns */
#mega-menu-item-4290 .mega-menu-columns ul li a {
  text-decoration: none !important;
  color: #333 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
#mega-menu-item-4290 .mega-menu-columns ul li a:hover {
  color: #8b807a !important;
}

/* “Termékek” main link styling */
#mega-menu-item-4290 .main-menu-link {
  font-weight: 700 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  color: #4a4a4a !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 10px !important;
}
#mega-menu-item-4290 .main-menu-link:hover {
  color: #333 !important;
}

/* Image container (#mega-menu-image) */
#mega-menu-item-4290 #mega-menu-image {
  flex: 1 1 350px !important;
  max-width: 350px !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
#mega-menu-item-4290 #mega-menu-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Prevent the 5px jump on close (disable slide/transform effects on desktop) */
@media (min-width: 769px) {
  #mega-menu-item-4290 > ul.mega-sub-menu,
  #mega-menu-item-4290:hover > ul.mega-sub-menu,
  #mega-menu-item-4290 > ul.mega-sub-menu:hover {
    top: 100px !important;
    margin-top: 0 !important;
    animation: none !important;
    transform: translateY(0) !important;
    transition-property: opacity, visibility !important;
  }
}

/* =============== RESPONSIVE BREAKPOINTS FOR “Termékek” =============== */

/* Medium Screens (<= 1024px) */
@media (max-width: 1024px) {
  #mega-menu-item-4290 > ul.mega-sub-menu {
    padding: 15px 20px !important;
  }
  #mega-menu-item-4290 ul.mega-sub-menu li.mega-menu-column {
    margin-right: 15px !important;
  }
  #mega-menu-item-4290 .main-menu-link {
    font-size: 15px !important;
  }
  #mega-menu-item-4290 .mega-menu-columns ul li a {
    font-size: 13px !important;
  }
  #mega-menu-item-4290 #mega-menu-image {
    max-width: 300px !important;
  }
}

/* Small Screens (<= 768px) */
@media (max-width: 768px) {
  /* Keep your existing small-screen horizontal shift */
  #mega-menu-item-4290 > ul.mega-sub-menu {
    transform: translateX(-50%) !important;
  }

  /* When visible on small screens, stack columns */
  #mega-menu-item-4290:hover > ul.mega-sub-menu,
  #mega-menu-item-4290 > ul.mega-sub-menu:hover {
    flex-direction: column !important;
    align-items: center !important;
  }

  #mega-menu-item-4290 ul.mega-sub-menu li.mega-menu-row > ul.mega-sub-menu {
    flex-direction: column !important;
  }
  #mega-menu-item-4290 ul.mega-sub-menu li.mega-menu-column {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
  }
  #mega-menu-item-4290 #mega-menu-image {
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }
  #mega-menu-item-4290 .main-menu-link {
    font-size: 16px !important;
  }
  #mega-menu-item-4290 .mega-menu-columns ul li a {
    font-size: 14px !important;
  }
}

/* Extra Small Screens (<= 480px) */
@media (max-width: 480px) {
  #mega-menu-item-4290 > ul.mega-sub-menu {
    padding: 10px !important;
  }
  #mega-menu-item-4290 .main-menu-link {
    font-size: 14px !important;
  }
  #mega-menu-item-4290 .mega-menu-columns ul li a {
    font-size: 12px !important;
  }
  #mega-menu-item-4290 ul.mega-sub-menu li.mega-menu-column {
    margin-bottom: 15px !important;
  }
  #mega-menu-item-4290 #mega-menu-image {
    padding: 5px !important;
  }
}

/************************************************************/
/** 2) “Márkák” Dropdown (#mega-menu-item-5121) **/
/************************************************************/

#mega-menu-item-5121 {
  position: relative !important;
}

#mega-menu-item-5121 > ul.mega-sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 220px !important;
  background-color: #fff !important;
  padding: 5px 0 !important;
  margin: 0 !important;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.15) !important;
  z-index: 9999 !important;
  display: none !important;
  text-align: left !important;
}

/* Show on hover + remain open if hovering the submenu */
#mega-menu-item-5121:hover > ul.mega-sub-menu,
#mega-menu-item-5121 > ul.mega-sub-menu:hover {
  display: block !important;
}

/* Links in “Márkák” dropdown */
#mega-menu-item-5121 ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
  display: block !important;
  width: 100% !important;
  padding: 12px 15px !important;
  background-color: #f9f9f9 !important;
  color: #333 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}
#mega-menu-item-5121 ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover {
  background-color: #e1e1e1 !important;
}