/* ==========================================================================
   LEMO × CSB — custom-menu.css
   Mega menu (desktop) + Mobile off-canvas drawer
   ========================================================================== */

/* ==========================================================================
   Dropdown / Mega menu — đồng bộ style sạch
   Cover các class Minimog thường dùng
   ========================================================================== */
body.lemo-csb-mode .mnmg-main-menu .sub-menu,
body.lemo-csb-mode .mnmg-main-menu .mega-menu,
body.lemo-csb-mode .main-navigation .sub-menu,
body.lemo-csb-mode ul.sub-menu {
  background: var(--lemo-white) !important;
  border: none !important;
  border-top: 1px solid var(--lemo-gray-200) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.08) !important;
  border-radius: 0 0 var(--lemo-r-md) var(--lemo-r-md) !important;
  padding: 20px !important;
  transition: opacity var(--lemo-ease), transform var(--lemo-ease), visibility var(--lemo-ease) !important;
}

/* Simple dropdown list (không phải mega) */
body.lemo-csb-mode .mnmg-main-menu .sub-menu:not(.mega-menu),
body.lemo-csb-mode .main-navigation ul.sub-menu {
  min-width: 220px;
  padding: 8px !important;
}
body.lemo-csb-mode .mnmg-main-menu .sub-menu a,
body.lemo-csb-mode .main-navigation .sub-menu a {
  display: block;
  padding: 10px 14px !important;
  font-size: .82rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--lemo-gray-700) !important;
  border-radius: var(--lemo-r-xs) !important;
  transition: all var(--lemo-ease) !important;
}
body.lemo-csb-mode .mnmg-main-menu .sub-menu a:hover,
body.lemo-csb-mode .main-navigation .sub-menu a:hover {
  background: var(--lemo-gray-50) !important;
  color: var(--lemo-black) !important;
  padding-left: 18px !important;
}

/* ==========================================================================
   MEGA MENU — 4 cột, full-width bleed
   ========================================================================== */
body.lemo-csb-mode .mega-menu,
body.lemo-csb-mode .mnmg-mega-menu {
  padding: 32px 40px !important;
  min-width: 720px !important;
  max-width: 1200px !important;
}

/* Mega menu columns grid */
body.lemo-csb-mode .mega-menu > .menu-items,
body.lemo-csb-mode .mega-menu .row,
body.lemo-csb-mode .mnmg-mega-menu .mega-menu-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 28px !important;
  margin: 0 !important;
}

/* Column title */
body.lemo-csb-mode .mega-menu .menu-item-heading > a,
body.lemo-csb-mode .mega-menu h4,
body.lemo-csb-mode .mega-menu .mega-heading,
body.lemo-csb-mode .mnmg-mega-menu .column-title {
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--lemo-gray-500) !important;
  padding: 0 0 10px 0 !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid var(--lemo-gray-200) !important;
  display: block !important;
  pointer-events: none;
}

/* Column links */
body.lemo-csb-mode .mega-menu .menu-item > a,
body.lemo-csb-mode .mega-menu ul li a,
body.lemo-csb-mode .mnmg-mega-menu .mega-menu-column a {
  padding: 8px 0 !important;
  font-size: .85rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--lemo-gray-700) !important;
  display: block !important;
  transition: all var(--lemo-ease) !important;
  background: transparent !important;
}
body.lemo-csb-mode .mega-menu .menu-item > a:hover,
body.lemo-csb-mode .mega-menu ul li a:hover,
body.lemo-csb-mode .mnmg-mega-menu .mega-menu-column a:hover {
  color: var(--lemo-black) !important;
  padding-left: 4px !important;
  background: transparent !important;
}

/* Image card inside mega menu */
body.lemo-csb-mode .mega-menu img,
body.lemo-csb-mode .mnmg-mega-menu .mega-image {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  border-radius: var(--lemo-r-sm) !important;
  transition: transform .5s ease !important;
}
body.lemo-csb-mode .mega-menu img:hover {
  transform: scale(1.03);
}

/* "View All" style link */
body.lemo-csb-mode .mega-menu a.view-all,
body.lemo-csb-mode .mega-menu a[href*="shop"] {
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Dropdown arrow icon */
body.lemo-csb-mode .mnmg-main-menu > li.menu-item-has-children > a::before,
body.lemo-csb-mode .mnmg-main-menu > li.menu-item-has-children > a svg.dropdown-arrow {
  transition: transform var(--lemo-ease) !important;
}

/* ==========================================================================
   Mobile Off-canvas Menu — LE MO GYM style
   Cover các class Minimog mobile drawer
   ========================================================================== */
body.lemo-csb-mode .mobile-panel,
body.lemo-csb-mode .mnmg-mobile-panel,
body.lemo-csb-mode .mobile-menu-panel,
body.lemo-csb-mode .off-canvas-menu {
  background: var(--lemo-white) !important;
  color: var(--lemo-black) !important;
  width: min(340px, 90vw) !important;
}

/* Header inside drawer */
body.lemo-csb-mode .mobile-panel .panel-head,
body.lemo-csb-mode .mobile-menu-panel .mobile-head,
body.lemo-csb-mode .mnmg-mobile-panel__head {
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--lemo-gray-150) !important;
}

/* Mobile nav items */
body.lemo-csb-mode .mobile-panel .menu li a,
body.lemo-csb-mode .mobile-menu-panel .menu li a,
body.lemo-csb-mode .mnmg-mobile-panel .menu li a,
body.lemo-csb-mode .off-canvas-menu .menu li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 15px 22px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--lemo-black) !important;
  border-bottom: 1px solid var(--lemo-gray-100) !important;
  background: transparent !important;
  transition: padding-left var(--lemo-ease), background var(--lemo-ease) !important;
}
body.lemo-csb-mode .mobile-panel .menu li a:hover,
body.lemo-csb-mode .mobile-menu-panel .menu li a:hover,
body.lemo-csb-mode .off-canvas-menu .menu li a:hover {
  background: var(--lemo-gray-50) !important;
  padding-left: 28px !important;
}

/* Sub-menu toggle arrow */
body.lemo-csb-mode .mobile-panel .sub-menu-toggle,
body.lemo-csb-mode .mnmg-mobile-panel .sub-menu-toggle {
  width: 30px !important;
  height: 30px !important;
  color: var(--lemo-gray-500) !important;
}

/* Nested sub-menu inside mobile drawer */
body.lemo-csb-mode .mobile-panel .sub-menu,
body.lemo-csb-mode .mnmg-mobile-panel .sub-menu {
  background: var(--lemo-gray-50) !important;
  border-bottom: 1px solid var(--lemo-gray-100);
}
body.lemo-csb-mode .mobile-panel .sub-menu li a,
body.lemo-csb-mode .mnmg-mobile-panel .sub-menu li a {
  padding: 12px 22px 12px 38px !important;
  font-size: .76rem !important;
  color: var(--lemo-gray-700) !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
}

/* Mobile footer block (social, login) */
body.lemo-csb-mode .mobile-panel .panel-foot,
body.lemo-csb-mode .mnmg-mobile-panel__foot {
  padding: 20px 22px !important;
  border-top: 1px solid var(--lemo-gray-150) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Overlay */
body.lemo-csb-mode .mnmg-canvas-overlay,
body.lemo-csb-mode .off-canvas-overlay {
  background: rgba(0,0,0,.5) !important;
}

/* ==========================================================================
   Account Dropdown (nếu Minimog có)
   ========================================================================== */
body.lemo-csb-mode .header-account .sub-menu,
body.lemo-csb-mode .account-dropdown {
  padding: 14px !important;
  min-width: 220px !important;
  border-radius: var(--lemo-r-md) !important;
}
body.lemo-csb-mode .header-account .sub-menu a {
  font-size: .82rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--lemo-gray-700) !important;
}
body.lemo-csb-mode .header-account .sub-menu a:hover {
  color: var(--lemo-black) !important;
}