@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;800;900&display=swap');

/*
 * Locomoto Mega Menu Skin
 * Loads after megamenu.css — visual overrides only.
 * Base layout/positioning is handled by megamenu.css.
 *
 * Real ETS class names confirmed from templates:
 *   nav item      → li.mm_menus_li
 *   nav link      → span.mm_menu_name > span.mm_menu_content_title
 *   dropdown      → ul.mm_columns_ul
 *   column        → li.mm_columns_li
 *   block         → div.ets_mm_block
 *   block heading → div.ets_mm_block > span.h4
 *   block content → div.ets_mm_block_content
 *   brand list    → ul.mm_mnu_display_img
 *   brand item    → li.item_has_img
 *   brand logo    → .ets_item_img img
 *   mobile toggle → .ybc-menu-toggle
 */

/* ─── TOKENS ──────────────────────────────────────────────────────────── */
.ets_mm_megamenu {
  --lm-navy:       #0a1622;
  --lm-navy-mid:   #0d1e30;
  --lm-orange:        var(--ac, #7a8fa8);
  --lm-orange-glow:   color-mix(in srgb, var(--lm-orange)  7%, transparent);
  --lm-orange-dim:    color-mix(in srgb, var(--lm-orange) 12%, transparent);
  --lm-orange-hi:     color-mix(in srgb, var(--lm-orange) 22%, transparent);
  --lm-orange-border: color-mix(in srgb, var(--lm-orange) 35%, transparent);
  --lm-orange-dark:   color-mix(in srgb, var(--lm-orange) 80%, black);
  --lm-white:      #ffffff;
  --lm-off:        #dde4ed;
  --lm-muted:      #7a8fa8;
  --lm-border:     rgba(255,255,255,0.08);
  --lm-blur:       blur(22px) saturate(140%);
  --lm-shadow:     0 4px 16px rgba(0,0,0,0.4), 0 12px 40px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.3);
  --lm-t:          0.18s ease;
}

/* ─── NAV BAR ─────────────────────────────────────────────────────────── */
.ets_mm_megamenu,
.ets_mm_megamenu_content {
  background: var(--lm-navy) !important;
  border: none !important;
  box-shadow: none !important;
}

/* the ul that holds the menu items has its own background — override it */
.ets_mm_megamenu ul.mm_menus_ul {
  background: var(--lm-navy) !important;
}

/* bottom accent line on the nav bar */
.ets_mm_megamenu_content {
  border-bottom: 2px solid var(--lm-orange) !important;
}

/* ─── TOP-LEVEL LINKS ─────────────────────────────────────────────────── */
/* actual DOM: li.mm_menus_li > a.ets_mm_url > span.mm_menu_content_title  */
.ets_mm_megamenu li.mm_menus_li > a.ets_mm_url {
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  background: transparent !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 15px !important;
  border-radius: 0 !important;
  transition: color var(--lm-t), border-color var(--lm-t) !important;
}

.ets_mm_megamenu li.mm_menus_li > a.ets_mm_url .mm_menu_content_title {
  color: var(--lm-off) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  line-height: 1 !important;
  transition: color var(--lm-t) !important;
}

/* ─── NAV ARROW — replace ETS CSS border-triangle with a chevron ─────── */
/* Outer span.arrow is the mobile accordion toggle — hidden on desktop */
.ets_mm_megamenu li.mm_menus_li > span.arrow {
  display: none !important;
}
/* Kill the border-triangle, draw a thin ›-style chevron instead */
.ets_mm_megamenu .mm_has_sub > a .mm_arrow::after {
  border-top: none !important;
  border-left: none !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  width: 6px !important;
  height: 6px !important;
  font-size: unset !important;
  transform: rotate(45deg) translateY(-3px) !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  opacity: 0.45 !important;
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}
.ets_mm_megamenu li.mm_menus_li:hover > a .mm_arrow::after {
  transform: rotate(-135deg) translateY(1px) !important;
  opacity: 0.8 !important;
}

/* hover/active: underline per item, no background fill */
.ets_mm_megamenu li.mm_menus_li:hover > a.ets_mm_url,
.ets_mm_megamenu li.mm_menus_li.active > a.ets_mm_url {
  background: transparent !important;
  border-bottom-color: var(--lm-orange) !important;
}

.ets_mm_megamenu li.mm_menus_li:hover > a.ets_mm_url .mm_menu_content_title,
.ets_mm_megamenu li.mm_menus_li.active > a.ets_mm_url .mm_menu_content_title {
  color: var(--lm-orange) !important;
}

/* ─── BUBBLE / BADGE ──────────────────────────────────────────────────── */
.ets_mm_megamenu .mm_bubble_text {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 1px 5px !important;
  border-radius: var(--r-pill) !important;
  background: var(--lm-orange) !important;
  color: var(--lm-white) !important;
  line-height: 1.4 !important;
  margin-left: 4px !important;
}

/* ─── RALLY ITEM — persistent orange tint ────────────────────────────── */
.ets_mm_megamenu li.mm_menus_li.loco-rally > a.ets_mm_url .mm_menu_content_title {
  color: var(--lm-orange) !important;
}
.ets_mm_megamenu li.mm_menus_li.loco-rally:hover > a.ets_mm_url {
  background: var(--lm-orange) !important;
}
.ets_mm_megamenu li.mm_menus_li.loco-rally:hover > a.ets_mm_url .mm_menu_content_title {
  color: var(--lm-white) !important;
}

/* ─── DROPDOWN CONTAINER ──────────────────────────────────────────────── */
.ets_mm_megamenu ul.mm_columns_ul {
  background-color: rgba(10,22,34,0.97) !important;
  background-image: linear-gradient(180deg, var(--lm-orange-glow) 0%, transparent 40%) !important;
  backdrop-filter: var(--lm-blur) !important;
  -webkit-backdrop-filter: var(--lm-blur) !important;
  border: 1px solid var(--lm-orange-hi) !important;
  border-top: 2px solid var(--lm-orange) !important;
  border-radius: 0 0 var(--r-lg, 18px) var(--r-lg, 18px) !important;
  overflow: hidden !important;
  box-shadow: var(--lm-shadow) !important;
  padding: 6px 0 0 !important;
  margin-top: 0 !important;
}

/* ─── COLUMNS ─────────────────────────────────────────────────────────── */
.ets_mm_megamenu li.mm_columns_li {
  padding: 10px 16px !important;
  border-right: 1px solid var(--lm-border) !important;
  background: transparent !important;
}
.ets_mm_megamenu li.mm_columns_li:last-child {
  border-right: none !important;
}

/* ─── MEGA HEAD (category title + view-all link above columns) ────────── */
.ets_mm_megamenu li.lm-mega-head-li {
  width: 100% !important;
  flex-basis: 100% !important;
  float: none !important;
  clear: both !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px 10px !important;
  border-bottom: 1px solid var(--lm-border) !important;
  border-right: none !important;
  background: transparent !important;
  min-height: unset !important;
}
.ets_mm_megamenu .lm-mega-head-title {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--lm-muted) !important;
}
.ets_mm_megamenu .lm-mega-head-link {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--lm-orange) !important;
  text-decoration: none !important;
  padding: 0 !important;
  background: transparent !important;
  display: inline !important;
  white-space: nowrap !important;
}
.ets_mm_megamenu .lm-mega-head-link::before { display: none !important; }
.ets_mm_megamenu .lm-mega-head-link:hover {
  color: var(--lm-orange) !important;
  background: transparent !important;
  padding-left: 0 !important;
  opacity: 0.75 !important;
}

/* ─── MEGA FOOTER (fitment finder strip below columns) ────────────────── */
.ets_mm_megamenu li.lm-mega-footer-li {
  width: 100% !important;
  flex-basis: 100% !important;
  float: none !important;
  clear: both !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  background: var(--lm-orange-glow) !important;
  border-top: 1px solid var(--lm-border) !important;
  border-right: none !important;
  border-radius: 0 0 var(--r-lg, 18px) var(--r-lg, 18px) !important;
  font-size: 11.5px !important;
  color: var(--lm-muted) !important;
  min-height: unset !important;
}
.ets_mm_megamenu .lm-mf-icon {
  flex-shrink: 0 !important;
  color: var(--lm-orange) !important;
  opacity: 0.8 !important;
}
.ets_mm_megamenu li.lm-mega-footer-li a {
  color: var(--lm-orange) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  padding: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  display: inline !important;
  white-space: nowrap !important;
}
.ets_mm_megamenu li.lm-mega-footer-li a::before { display: none !important; }
.ets_mm_megamenu li.lm-mega-footer-li a:hover {
  color: var(--lm-orange) !important;
  background: transparent !important;
  padding-left: 0 !important;
  opacity: 0.75 !important;
}

/* ─── COLUMN HEADING ICON BOX (injected by lm-icons.js) ──────────────── */
.ets_mm_megamenu .mct-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  border-radius: 7px !important;
  background: var(--lm-orange-dim) !important;
  color: var(--lm-orange) !important;
  border: none !important;
}
.ets_mm_megamenu .mct-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* ─── BLOCK HEADING (span.h4) ─────────────────────────────────────────── */
.ets_mm_megamenu .ets_mm_block > span.h4,
.ets_mm_megamenu .ets_mm_block > span.h4 a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  color: var(--lm-orange) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  padding-bottom: 7px !important;
  border-bottom: 1px solid var(--lm-border) !important;
  text-decoration: none !important;
  background: transparent !important;
}
/* No ::before bar — JS injects mct-icon instead */

/* ─── BLOCK CONTENT — generic text ───────────────────────────────────── */
.ets_mm_megamenu .ets_mm_block_content {
  color: var(--lm-off) !important;
  font-size: 12.5px !important;
  line-height: 2 !important;
}

/* Links inside HTML blocks */
.ets_mm_megamenu .ets_mm_block_content a {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--lm-off) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 4px 4px !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  transition: color var(--lm-t), background var(--lm-t), padding-left var(--lm-t) !important;
  white-space: nowrap !important;
}

/* › prefix */
.ets_mm_megamenu .ets_mm_block_content a::before {
  content: '›' !important;
  margin-right: 5px !important;
  opacity: 0.3 !important;
  color: var(--lm-orange) !important;
  transition: opacity var(--lm-t) !important;
}

.ets_mm_megamenu .ets_mm_block_content a:hover {
  color: var(--lm-orange) !important;
  background: var(--lm-orange-dim) !important;
  padding-left: 10px !important;
}
.ets_mm_megamenu .ets_mm_block_content a:hover::before {
  opacity: 1 !important;
}

/* Category tree links */
.ets_mm_megamenu .ets_mm_categories a.ets_mm_url {
  color: var(--lm-off) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 3px 6px !important;
  border-radius: 5px !important;
  text-decoration: none !important;
  display: block !important;
  transition: color var(--lm-t), background var(--lm-t) !important;
}
.ets_mm_megamenu .ets_mm_categories a.ets_mm_url:hover {
  color: var(--lm-orange) !important;
  background: var(--lm-orange-dim) !important;
}

/* ─── MNFT BRAND LOGO GRID ────────────────────────────────────────────── */
/*
 * ETS base CSS has: .mm_mnu_display_img a { display:block; overflow:hidden }
 * and .item_has_img .ets_item_img { border: 1px solid #e7e7e7 }
 * We override all of it here.
 */

/* List — flex wrap, 4 per row */
.ets_mm_megamenu ul.mm_mnu_display_img {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 6px 0 4px !important;
  list-style: none !important;
  margin: 0 !important;
}

/* Each tile — fixed landscape height so portrait uploads can't distort it */
.ets_mm_megamenu ul.mm_mnu_display_img li.item_has_img {
  flex: 1 0 calc(25% - 5px) !important;
  max-width: calc(25% - 5px) !important;
  float: none !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--lm-border) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transition: background var(--lm-t), border-color var(--lm-t), transform var(--lm-t) !important;
}
.ets_mm_megamenu ul.mm_mnu_display_img li.item_has_img:hover {
  background: var(--lm-orange-dim) !important;
  border-color: var(--lm-orange-border) !important;
  transform: translateY(-1px) !important;
}

/* Link — fill the tile; override ETS overflow:hidden that clips images */
.ets_mm_megamenu ul.mm_mnu_display_img li.item_has_img > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 8px 10px !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
}
.ets_mm_megamenu ul.mm_mnu_display_img li.item_has_img a::before {
  display: none !important;
}

/* ets_item_img span — centered flex container; kill ETS border */
.ets_mm_megamenu ul.mm_mnu_display_img li.item_has_img .ets_item_img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 34px !important;
  border: none !important;
}

/* Logo image — contain within the fixed height, never clip */
.ets_mm_megamenu .ets_item_img img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 30px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.72 !important;
  transition: opacity var(--lm-t) !important;
  display: block !important;
}
.ets_mm_megamenu ul.mm_mnu_display_img li.item_has_img:hover .ets_item_img img {
  opacity: 1 !important;
}

/* ─── DROPDOWN ENTRY ANIMATION ───────────────────────────────────────── */
/* ETS shows the dropdown by un-hiding ul.mm_columns_ul on li hover.
   We apply a CSS transition so it fades in. Only works if ETS uses
   visibility/opacity rather than display:none — safe fallback if not. */
.ets_mm_megamenu ul.mm_columns_ul {
  transition: opacity 0.18s ease, transform 0.22s ease !important;
}

/* ─── PROMO SIDEBAR COLUMN ────────────────────────────────────────────── */
/*
 * Usage: in ETS admin, set the last column's "Custom CSS class" to "loco-promo-col".
 * Add a TEXT/HTML block with content wrapped in <div class="loco-promo-card">…</div>
 * for the orange gradient card. Mark the CTA link with class="loco-promo-cta".
 */

/* Orange gradient promo card — wrap your HTML block content in this div */
.ets_mm_megamenu .loco-promo-card {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, var(--lm-orange) 0%, #ff8a3d 100%) !important;
  color: #fff !important;
  padding: 14px !important;
  border-radius: var(--r-md, 14px) !important;
  margin-bottom: 10px !important;
  text-decoration: none !important;
  transition: transform var(--lm-t), box-shadow var(--lm-t) !important;
}
.ets_mm_megamenu .loco-promo-card::after {
  content: '' !important;
  position: absolute !important;
  right: -20px !important;
  top: -20px !important;
  width: 80px !important;
  height: 80px !important;
  background: rgba(255,255,255,0.12) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.ets_mm_megamenu .loco-promo-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px var(--lm-orange-hi) !important;
}
.ets_mm_megamenu .loco-promo-card h5 {
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 3px !important;
  position: relative !important;
  color: #fff !important;
}
.ets_mm_megamenu .loco-promo-card p {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  opacity: 0.92 !important;
  margin-bottom: 9px !important;
  position: relative !important;
  color: #fff !important;
}
.ets_mm_megamenu .loco-promo-card .loco-promo-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #fff !important;
  color: var(--lm-orange) !important;
  padding: 5px 10px !important;
  border-radius: var(--r-md, 14px) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  position: relative !important;
  text-decoration: none !important;
}
.ets_mm_megamenu .loco-promo-card .loco-promo-cta::before,
.ets_mm_megamenu .loco-promo-card .loco-promo-cta::after {
  content: none !important;
  display: none !important;
}
/* Hover: keep the white pill visible — general a:hover would replace #fff with orange-dim, making it invisible on the orange card */
.ets_mm_megamenu .loco-promo-card .loco-promo-cta:hover {
  background: rgba(255,255,255,0.88) !important;
  color: var(--lm-orange) !important;
  padding-left: 10px !important;
  transform: none !important;
}

/* "Popular Brands" label above compact brand strip */
.ets_mm_megamenu li.mm_columns_li.loco-promo-col .ets_mm_block > span.h4.mbs-label,
.ets_mm_megamenu li.mm_columns_li.loco-promo-col .ets_mm_block > span.h4 {
  font-size: 9.5px !important;
  letter-spacing: 0.14em !important;
  border-bottom: 1px solid var(--lm-border) !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  opacity: 0.7 !important;
}
.ets_mm_megamenu li.mm_columns_li.loco-promo-col {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, var(--lm-orange-dim) 0%, rgba(10,22,34,0) 100%) !important;
  border-right: none !important;
  border-left: 1px solid var(--lm-border) !important;
  padding: 20px 20px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Radial orange glow at top of promo panel */
.ets_mm_megamenu li.mm_columns_li.loco-promo-col::before {
  content: '' !important;
  position: absolute !important;
  top: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 160px !important;
  height: 160px !important;
  background: radial-gradient(circle, var(--lm-orange-hi) 0%, transparent 70%) !important;
  filter: blur(24px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.ets_mm_megamenu li.mm_columns_li.loco-promo-col > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Promo block heading — smaller, label style */
.ets_mm_megamenu li.mm_columns_li.loco-promo-col .ets_mm_block > span.h4,
.ets_mm_megamenu li.mm_columns_li.loco-promo-col .ets_mm_block > span.h4 a {
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  border-bottom: none !important;
  margin-bottom: 12px !important;
  opacity: 0.7 !important;
}

/* Promo image block */
.ets_mm_megamenu li.mm_columns_li.loco-promo-col .mm_img_content {
  display: block !important;
  margin-bottom: 14px !important;
}
.ets_mm_megamenu li.mm_columns_li.loco-promo-col .mm_img_content img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: none !important;
  border-radius: 10px !important;
  filter: none !important;
  opacity: 1 !important;
  object-fit: cover !important;
}

/* Promo text content */
.ets_mm_megamenu li.mm_columns_li.loco-promo-col .ets_mm_block_content {
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* Suppress › prefix on promo links */
.ets_mm_megamenu li.mm_columns_li.loco-promo-col .ets_mm_block_content a::before {
  display: none !important;
}

/* CTA button — add class="loco-promo-cta" to the link in ETS HTML block */
.ets_mm_megamenu li.mm_columns_li.loco-promo-col .ets_mm_block_content a.loco-promo-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  background: var(--lm-orange) !important;
  color: var(--lm-white) !important;
  padding: 8px 18px !important;
  border-radius: var(--r-md, 14px) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: background var(--lm-t), transform var(--lm-t) !important;
}
.ets_mm_megamenu li.mm_columns_li.loco-promo-col .ets_mm_block_content a.loco-promo-cta:hover {
  background: var(--lm-orange-dark) !important;
  color: var(--lm-white) !important;
  padding-left: 18px !important;
  transform: translateY(-1px) !important;
}

/* ─── PRODUCT MINI-CARDS (Products block type) ───────────────────────── */

/* Section label above product cards (block display_title) */
.ets_mm_megamenu .ets_mm_block.mm_block_type_product > span.h4,
.ets_mm_megamenu .ets_mm_block.mm_block_type_product > span.h4 a {
  color: var(--lm-muted) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--lm-border) !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  opacity: 1 !important;
}

/* Each product card — compact horizontal row */
.ets_mm_megamenu article.product-miniature {
  display: flex !important;
  align-items: center !important;
  clear: none !important;
  float: none !important;
  padding: 5px 6px !important;
  border-radius: 8px !important;
  border: 1px solid var(--lm-border) !important;
  background: rgba(255,255,255,0.03) !important;
  margin-bottom: 3px !important;
  transition: background var(--lm-t), border-color var(--lm-t) !important;
}
.ets_mm_megamenu article.product-miniature:last-child {
  margin-bottom: 0 !important;
}
.ets_mm_megamenu article.product-miniature:hover {
  background: var(--lm-orange-dim) !important;
  border-color: var(--lm-orange-border) !important;
}

/* thumbnail-container — flex row */
.ets_mm_megamenu article.product-miniature .thumbnail-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  background: transparent !important;
}

/* Product image — white background, compact square */
.ets_mm_megamenu article.product-miniature a.product-thumbnail {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  float: none !important;
  margin: 0 !important;
  padding: 2px !important;
}
.ets_mm_megamenu article.product-miniature a.product-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  max-height: none !important;
  max-width: none !important;
  opacity: 1 !important;
  position: relative !important;
}

/* Product text block */
.ets_mm_megamenu article.product-miniature .mm-product-description {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* Product name */
.ets_mm_megamenu article.product-miniature .product-title {
  width: 100% !important;
}
.ets_mm_megamenu article.product-miniature .product-title a {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--lm-white) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
  text-align: left !important;
  margin-bottom: 0 !important;
  transition: color var(--lm-t) !important;
}
/* No hover effect on product title — block_content a:hover would otherwise shift padding and add background */
.ets_mm_megamenu article.product-miniature .product-title a:hover {
  color: var(--lm-white) !important;
  background: transparent !important;
  padding-left: 0 !important;
  transform: none !important;
}
/* Kill theme ::before / ::after arrows */
.ets_mm_megamenu article.product-miniature .product-title a::before,
.ets_mm_megamenu article.product-miniature .product-title a::after,
.ets_mm_megamenu article.product-miniature .product-title::before,
.ets_mm_megamenu article.product-miniature .product-title::after,
.ets_mm_megamenu article.product-miniature a::before,
.ets_mm_megamenu article.product-miniature a::after {
  content: none !important;
  display: none !important;
}

/* Price */
.ets_mm_megamenu article.product-miniature .product-price-and-shipping {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  float: none !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}
.ets_mm_megamenu article.product-miniature span.price {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--lm-orange) !important;
}
.ets_mm_megamenu article.product-miniature span.regular-price {
  font-size: 10px !important;
  color: var(--lm-muted) !important;
  text-decoration: line-through !important;
}
.ets_mm_megamenu article.product-miniature span.discount-percentage {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--lm-orange) !important;
  background: var(--lm-orange-dim) !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

/* Flags — pill badges */
.ets_mm_megamenu article.product-miniature ul.product-flags {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  width: auto !important;
  float: none !important;
}
.ets_mm_megamenu article.product-miniature ul.product-flags:empty {
  display: none !important;
}
.ets_mm_megamenu article.product-miniature ul.product-flags li {
  font-size: 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 1px 5px !important;
  border-radius: var(--r-pill) !important;
  background: var(--lm-orange-dim) !important;
  color: var(--lm-orange) !important;
  border: 1px solid var(--lm-orange-border) !important;
  white-space: nowrap !important;
}
.ets_mm_megamenu article.product-miniature ul.product-flags li.new {
  background: rgba(34,197,94,0.15) !important;
  color: #4ade80 !important;
  border-color: rgba(34,197,94,0.3) !important;
}

/* Hide quick-view, variant links, combination label — not usable in menu */
.ets_mm_megamenu article.product-miniature .highlighted-informations,
.ets_mm_megamenu article.product-miniature .product_combination {
  display: none !important;
}

/* No-products fallback */
.ets_mm_megamenu .mm_block_type_product span.mm_alert {
  font-size: 11px !important;
  color: var(--lm-muted) !important;
  display: block !important;
  padding: 6px 0 !important;
}

/* ─── MOBILE TOGGLE BUTTON (desktop: hidden by ETS; mobile: hamburger icon) ── */
/* Base rule — will be overridden in the mobile media query below */
.ets_mm_megamenu .ybc-menu-toggle {
  background: transparent !important;
  color: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.ets_mm_megamenu .ybc-menu-toggle .icon-bar {
  background: var(--lm-off) !important;
}

/* ─── DUPLICATE ELEMENTOR WIDGET: two instances of the ETS Mega Menu are
   rendered in the same Elementor widget-wrap (both share class
   elementor-element-37df6d6). Only the first is managed by our JS.
   Hide every second-or-later sibling instance so only one toggle and
   one drawer exist in the DOM. ── */
.elementor-element-37df6d6 ~ .elementor-element-37df6d6 {
  display: none !important;
}

/* ─── DRAWER-ONLY ELEMENTS — hidden on desktop, shown in mobile @media ── */
.ets_mm_megamenu .lhc-drawer-header,
.ets_mm_megamenu .lhc-drawer-garage,
.ets_mm_megamenu .lhc-drawer-quick,
.ets_mm_megamenu .lhc-drawer-signout,
.ets_mm_megamenu .lhc-drawer-wa,
.ets_mm_megamenu .lhc-drawer-close-footer,
.ets_mm_megamenu .lhc-drawer-icon {
  display: none !important;
}

/* ─── MOBILE MENU (floating drawer) ──────────────────────────────────── */
@media (max-width: 1023px) {

  /* ── Nav wrapper: transparent on mobile — only the toggle button is visible.
     The desktop rule sets background:var(--lm-navy) on .ets_mm_megamenu /
     .ets_mm_megamenu_content which creates the "blue MENU bar". Remove it. ── */
  .ets_mm_megamenu,
  .ets_mm_megamenu_content {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
  }

  /* ── Fix: .ets_mm_megamenu has z-index:2 from ETS's own CSS, which creates
     a stacking context below header widgets like lhs-search-box (z:600).
     Even though the drawer inside it has z:99999, the whole context loses to
     z:600 in the parent. Raising to 700 ensures the drawer paints above all
     page-header widgets on mobile. ── */
  .ets_mm_megamenu {
    z-index: 700 !important;
  }

  /* ── Collapse the Elementor widget row that wraps the ets_mm_megamenu.
     Without this it renders as a visible strip below the logo/controls row.
     :has() is supported Chrome 105+ / Safari 15.4+. ── */
  .elementor-widget:has(.ets_mm_megamenu),
  .elementor-widget:has(.ets_mm_megamenu) .elementor-widget-container {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ── Hamburger button — fixed to top-right of viewport, level with logo row ── */
  .ets_mm_megamenu .ybc-menu-toggle {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 99999 !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, opacity 0.08s ease !important;
  }
  .ets_mm_megamenu .ybc-menu-toggle:hover,
  .ets_mm_megamenu .ybc-menu-toggle:active {
    background: rgba(255,255,255,0.09) !important;
  }
  /* .ybc-menu-button-toggle_icon is the direct parent of .icon-bar.
     Gap must be here — not on .ybc-menu-toggle — to space the three bars. */
  .ets_mm_megamenu .ybc-menu-toggle .ybc-menu-button-toggle_icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  .ets_mm_megamenu .ybc-menu-toggle .icon-bar {
    width: 22px !important;
    height: 2px !important;
    background: var(--lm-off) !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    border-radius: 2px !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
  }

  /* ── Drawer panel (slides in from right) ── */
  .ets_mm_megamenu ul.mm_menus_ul {
    background: var(--lm-navy) !important;
    /* No border-left — active/hover items use box-shadow: inset 4px 0 0 as the left accent.
       Having both creates two adjacent orange lines ("doubled" effect). */
    box-shadow: -4px 0 32px rgba(0,0,0,0.6) !important;
  }

  /* Mobile nav links — icon box + label layout */
  .ets_mm_megamenu li.mm_menus_li > a.ets_mm_url {
    height: auto !important;
    min-height: 56px !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    padding: 10px 54px 10px 18px !important;
    gap: 12px !important;
  }
  .ets_mm_megamenu li.mm_menus_li > a.ets_mm_url .mm_menu_content_title {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    line-height: 1.3 !important;
  }

  /* ── Fix: nav li items are direct flex children of a fixed-height drawer.
     flex-shrink:0 — prevents the flex algorithm from crushing the li when a
     submenu opens (was clipping the submenu to ~0 height).
     overflow:visible — removes the scroll container that overflow:auto created.
     A scroll container inside a transform-animated ancestor (the drawer uses
     translateX) causes a GPU compositing bug on mobile WebKit/Chrome where
     child content is not painted until a scroll event triggers a repaint.
     float:none on mm_columns_ul (below) prevents the submenu from escaping the
     li's layout box, so visible overflow doesn't cause visual bleed. ── */
  .ets_mm_megamenu li.mm_menus_li,
  .ets_mm_megamenu li.mm_menus_li:last-child {
    flex-shrink: 0 !important;
    overflow: visible !important;
    /* z-index:0 creates a stacking context that sits below the sticky
       header (z-50) and garage (z-40), preventing content scrolling
       over the pinned header/user rows */
    z-index: 0 !important;
    /* Kill ETS base CSS border-box on every drawer item
       (megamenu.css: .changestatus .mm_menus_li sets border: 1px solid #ddd) */
    border: none !important;
  }

  /* Mobile dropdown */
  .ets_mm_megamenu ul.mm_columns_ul {
    background: rgba(0,0,0,0.28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    /* No border-left here — the drawer panel (.mm_menus_ul) already has a 2px orange
       left border. Adding one here creates a visually doubled line. */
    border-left: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px 0 10px !important;
    float: none !important;
    /* megamenu.css sets position:relative; top:100% which pushes the submenu
       one full li-height below the viewport. Reset to top:0 so it renders
       immediately below the link row in normal document flow. */
    top: 0 !important;
  }

  /* Mobile column — stack vertically */
  .ets_mm_megamenu li.mm_columns_li {
    padding: 4px 12px !important;
    border-right: none !important;
    border-bottom: none !important;
    width: 100% !important;
  }

  /* Hide the repeated menu title at the top of each mobile submenu */
  .ets_mm_megamenu .mm_columns_ul .lm-mega-head-li {
    display: none !important;
  }

  /* Mobile block heading (category label e.g. "COMFORT SEATS") */
  .ets_mm_megamenu .ets_mm_block > span.h4 {
    font-size: 15px !important;
    letter-spacing: 0.10em !important;
    padding: 18px 8px 6px !important;
    margin-bottom: 2px !important;
    border-bottom: none !important;
  }

  /* Mobile block content — plain-text nodes + general font size */
  .ets_mm_megamenu .ets_mm_block_content {
    font-size: 18px !important;
    line-height: 2.6 !important;
    padding: 4px 8px 8px !important;
  }

  /* Mobile links — large, finger-friendly */
  .ets_mm_megamenu .ets_mm_block_content a {
    padding: 10px 10px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  /* Brand logos — smaller on mobile */
  .ets_mm_megamenu .ets_item_img img {
    max-height: 22px !important;
    max-width: 56px !important;
  }

  /* Promo sidebar — hidden on mobile (doesn't work in accordion layout) */
  .ets_mm_megamenu li.mm_columns_li.loco-promo-col {
    display: none !important;
  }

  /* Product mini-cards — hidden on mobile (too complex for accordion) */
  .ets_mm_megamenu .mm_block_type_product {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════
     MOBILE DRAWER — ANIMATIONS, OVERLAY, INTERACTIONS
     ═══════════════════════════════════════════════════════ */

  /* ── Drawer: slides in from RIGHT, flex column ── */
  .ets_mm_megamenu ul.mm_menus_ul {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 340px !important;
    max-width: 92vw !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    /* opacity:1 here overrides ETS base rule (.changestatus.transition_default .mm_menus_ul { opacity:0 })
       which would instantly hide the panel the moment .active is removed, killing the slide-out animation. */
    opacity: 1 !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
                visibility 0.28s !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .ets_mm_megamenu ul.mm_menus_ul.active {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* ── Hide ETS's built-in close button (we use the hamburger toggle instead) ── */
  .ets_mm_megamenu .close_menu {
    display: none !important;
  }

  /* ── Hamburger becomes an X when the drawer is open ── */
  .ets_mm_megamenu .ybc-menu-toggle.opened .icon-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .ets_mm_megamenu .ybc-menu-toggle.opened .icon-bar:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .ets_mm_megamenu .ybc-menu-toggle.opened .icon-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* ── Drawer header: logo row — sticky, flex so logo sits left ── */
  .ets_mm_megamenu .lhc-drawer-header {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: var(--lm-navy) !important;
    padding: 22px 20px !important;
    border-bottom: 1px solid var(--lm-border) !important;
  }
  /* Crop logo image — hide the tagline.
     The logo is 686×135 natural px; at 44px rendered height:
     - Wordmark ends at natural y≈105 → rendered 34.2px
     - Divider line at y≈108–111 → rendered 35–36px
     - Tagline starts at y≈114 → rendered 37.2px
     35px shows the full wordmark and cuts at the separator line. */
  .ets_mm_megamenu .lhc-drawer-logo {
    display: block !important;
    line-height: 0 !important;
    overflow: hidden !important;
    height: 35px !important;
  }
  .ets_mm_megamenu .lhc-drawer-logo img {
    height: 44px !important;
    width: auto !important;
    display: block !important;
    max-height: none !important;
  }
  .ets_mm_megamenu .lhc-drawer-logo-text {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: var(--lm-white) !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  /* ── Garage / user profile — sticky below header so it never scrolls away ── */
  .ets_mm_megamenu .lhc-drawer-garage {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--lm-border) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    position: sticky !important;
    /* header = 22px pad + 35px logo + 22px pad + 1px border = 80px */
    top: 80px !important;
    z-index: 40 !important;
    background: var(--lm-navy) !important;
  }
  .ets_mm_megamenu a.lhc-drawer-garage:hover {
    background: rgba(255,255,255,0.04) !important;
  }
  .ets_mm_megamenu .lhc-drawer-avatar {
    width: 38px !important;
    height: 38px !important;
    background: var(--lm-orange) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #fff !important;
    flex-shrink: 0 !important;
  }
  .ets_mm_megamenu .lhc-drawer-username {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--lm-white) !important;
  }
  .ets_mm_megamenu .lhc-drawer-bike {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11.5px !important;
    color: var(--lm-muted) !important;
    margin-top: 2px !important;
  }
  .ets_mm_megamenu .lhc-drawer-bike-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--lm-orange) !important;
    flex-shrink: 0 !important;
  }

  /* ── Scrollable nav area ── */
  .ets_mm_megamenu .lhc-drawer-nav {
    flex: 1 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--lm-orange-border) transparent !important;
  }
  .ets_mm_megamenu .lhc-drawer-nav::-webkit-scrollbar { width: 4px !important; }
  .ets_mm_megamenu .lhc-drawer-nav::-webkit-scrollbar-track { background: transparent !important; }
  .ets_mm_megamenu .lhc-drawer-nav::-webkit-scrollbar-thumb {
    background: var(--lm-orange-border) !important;
    border-radius: 99px !important;
  }

  /* ── Nav item icon box ── */
  .ets_mm_megamenu .lhc-drawer-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--lm-muted) !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
  }
  .ets_mm_megamenu li.mm_menus_li:hover .lhc-drawer-icon,
  .ets_mm_megamenu li.mm_menus_li.hover .lhc-drawer-icon,
  .ets_mm_megamenu li.mm_menus_li.sfHover .lhc-drawer-icon {
    background: var(--lm-orange-dim) !important;
    border-color: var(--lm-orange-border) !important;
    color: var(--lm-orange) !important;
  }

  /* ── Rally nav item ── */
  .ets_mm_megamenu li.mm_menus_li.lhc-drawer-rally > a.ets_mm_url {
    color: var(--lm-orange) !important;
  }
  .ets_mm_megamenu li.mm_menus_li.lhc-drawer-rally > a.ets_mm_url .mm_menu_content_title {
    color: var(--lm-orange) !important;
  }
  .ets_mm_megamenu li.mm_menus_li.lhc-drawer-rally .lhc-drawer-icon {
    background: var(--lm-orange-dim) !important;
    border-color: var(--lm-orange-border) !important;
    color: var(--lm-orange) !important;
  }

  /* ── Quick links: Cart / Wishlist / My Orders ── */
  .ets_mm_megamenu .lhc-drawer-quick {
    display: block !important;
    padding: 6px 8px !important;
    border-bottom: 1px solid var(--lm-border) !important;
  }
  .ets_mm_megamenu .lhc-drawer-qlink {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--lm-off) !important;
    border-radius: 8px !important;
    min-height: 48px !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s !important;
  }
  .ets_mm_megamenu .lhc-drawer-qlink svg {
    color: var(--lm-muted) !important;
    flex-shrink: 0 !important;
  }
  /* Per-link icon box accent colours — same 36×36 box as nav icons (.lhc-drawer-icon),
     each with its own tinted background / border / icon colour. */
  .ets_mm_megamenu .lhc-drawer-qlink-cart .lhc-drawer-icon {
    background: var(--lm-orange-dim) !important;
    border-color: var(--lm-orange-border) !important;
    color: var(--lm-orange) !important;
  }
  .ets_mm_megamenu .lhc-drawer-qlink-wish .lhc-drawer-icon {
    background: rgba(244,63,94,0.12) !important;
    border-color: rgba(244,63,94,0.30) !important;
    color: #f43f5e !important;
  }
  .ets_mm_megamenu .lhc-drawer-qlink-orders .lhc-drawer-icon {
    background: rgba(96,165,250,0.12) !important;
    border-color: rgba(96,165,250,0.30) !important;
    color: #60a5fa !important;
  }
  .ets_mm_megamenu .lhc-drawer-qlink:hover {
    background: rgba(255,255,255,0.05) !important;
    color: var(--lm-orange) !important;
  }

  /* ── Sign Out ── */
  .ets_mm_megamenu .lhc-drawer-signout {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    /* 18px left matches nav items (18px) and qlinks (8px container + 10px link = 18px).
       Without this the icon sits 8px to the left of everything else. */
    padding: 13px 10px 13px 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--lm-muted) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.2s, background 0.2s !important;
    min-height: 48px !important;
    border-radius: 8px !important;
  }
  .ets_mm_megamenu .lhc-drawer-signout:hover {
    color: #ef4444 !important;
    background: rgba(239,68,68,0.06) !important;
  }
  /* Red icon box — matches the danger/destructive action semantics */
  .ets_mm_megamenu .lhc-drawer-signout .lhc-drawer-icon {
    background: rgba(239,68,68,0.10) !important;
    border-color: rgba(239,68,68,0.25) !important;
    color: #ef4444 !important;
  }

  /* ── WhatsApp link ── */
  .ets_mm_megamenu .lhc-drawer-wa {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-top: 1px solid rgba(37,211,102,0.15) !important;
    background: rgba(37,211,102,0.05) !important;
    text-decoration: none !important;
    color: #25d366 !important;
    transition: background 0.2s !important;
  }
  .ets_mm_megamenu .lhc-drawer-wa:hover { background: rgba(37,211,102,0.12) !important; }
  .ets_mm_megamenu .lhc-drawer-wa-icon {
    width: 38px !important;
    height: 38px !important;
    background: #25d366 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .ets_mm_megamenu .lhc-drawer-wa-label {
    display: block !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(37,211,102,0.6) !important;
    line-height: 1 !important;
  }
  .ets_mm_megamenu .lhc-drawer-wa-val {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-top: 2px !important;
  }

  /* ── Backdrop overlay: hidden.
     The ::before is inside the toggle's stacking context (z:100000 — above
     the drawer at z:99999). Any background on it covers the drawer itself,
     not just the page. Hiding it keeps the drawer clear. ── */
  .ets_mm_megamenu .ybc-menu-toggle.opened::before {
    display: none !important;
  }

  /* ── Hamburger → ✕ animation when menu opens.
     z-index:100000 beats mm_menus_ul (z:99999) which comes LATER in the DOM —
     without this the drawer header background covers the toggle completely. ── */
  .ets_mm_megamenu .ybc-menu-toggle.opened {
    z-index: 100000 !important;
    border-color: var(--lm-orange) !important;
    background: var(--lm-orange-dim) !important;
  }
  .ets_mm_megamenu .ybc-menu-toggle.opened .ybc-menu-button-toggle_icon .icon-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .ets_mm_megamenu .ybc-menu-toggle.opened .ybc-menu-button-toggle_icon .icon-bar:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .ets_mm_megamenu .ybc-menu-toggle.opened .ybc-menu-button-toggle_icon .icon-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* ── Accordion arrow: show chevron on items with sub-menus ── */
  .ets_mm_megamenu li.mm_menus_li { position: relative !important; }

  .ets_mm_megamenu li.mm_menus_li.mm_has_sub > span.arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    width: 54px !important;
    height: 56px !important;
    cursor: pointer !important;
    z-index: 2 !important;
    color: var(--lm-muted) !important;
    font-size: 0 !important;
    background: transparent !important;
    border: none !important;
    transition: color 0.2s ease, background 0.2s ease !important;
  }
  /* Chevron drawn via ::before — kill ETS border-top/border-left bleed */
  .ets_mm_megamenu li.mm_menus_li.mm_has_sub > span.arrow::before {
    content: '' !important;
    display: block !important;
    position: static !important;
    width: 7px !important;
    height: 7px !important;
    border-top: none !important;
    border-left: none !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(-45deg) translateY(2px) !important;
    transition: transform 0.2s ease !important;
    margin: 0 !important;
  }
  /* Kill ETS "+" vertical bar — not needed, we use our own chevron */
  .ets_mm_megamenu li.mm_menus_li.mm_has_sub > span.arrow::after {
    display: none !important;
    border: none !important;
  }
  /* Open state: chevron points down, arrow bg tints orange */
  .ets_mm_megamenu li.mm_menus_li.hover > span.arrow,
  .ets_mm_megamenu li.mm_menus_li.sfHover > span.arrow {
    color: var(--lm-orange) !important;
    background: var(--lm-orange-dim) !important;
    border-left-color: var(--lm-orange-border) !important;
  }
  .ets_mm_megamenu li.mm_menus_li.hover > span.arrow::before,
  .ets_mm_megamenu li.mm_menus_li.sfHover > span.arrow::before {
    transform: rotate(45deg) translateY(-2px) !important;
  }

  /* ── Open nav item: inset left accent bar + tint ── */
  .ets_mm_megamenu li.mm_menus_li.hover > a.ets_mm_url,
  .ets_mm_megamenu li.mm_menus_li.sfHover > a.ets_mm_url {
    color: var(--lm-orange) !important;
    background: var(--lm-orange-dim) !important;
    box-shadow: inset 4px 0 0 var(--lm-orange) !important;
  }

  /* ── Active page item: orange left bar + tinted row ── */
  .ets_mm_megamenu li.mm_menus_li.active > a.ets_mm_url {
    box-shadow: inset 4px 0 0 var(--lm-orange) !important;
    background: var(--lm-orange-dim) !important;
  }
  .ets_mm_megamenu li.mm_menus_li.active > a.ets_mm_url .mm_menu_content_title {
    color: var(--lm-orange) !important;
  }
  .ets_mm_megamenu li.mm_menus_li.active .lhc-drawer-icon {
    background: var(--lm-orange-dim) !important;
    border-color: var(--lm-orange-border) !important;
    color: var(--lm-orange) !important;
  }
}

/* ─── HIDE ADMIN EDIT BUTTONS ON FRONT-END ────────────────────────────── */
.ets_mm_megamenu .mm_buttons,
.ets_mm_megamenu .button_add_tab,
.ets_mm_megamenu .mm_add_column,
.ets_mm_megamenu .mm_add_tab {
  display: none !important;
}

/* ─── CLEARFIX ────────────────────────────────────────────────────────── */
.ets_mm_megamenu .clearfix {
  display: none !important;
}