/* =========================================================================
   Car Parts / Car Care — left-rail + mega-panel dropdown.
   Rail  = the category's direct children (level 1).
   Panel = the hovered rail item's sub-tree (level 2 = bold headers,
           level 3 = links), shown as a wide multi-column panel.
   Driven by clean nested <ul> in the item content (.cat-cascade).
   ========================================================================= */

.mm-car-parts-parent > .sm-megamenu-child,
.mm-car-care-parent  > .sm-megamenu-child {
    width: 1000px !important;
    max-width: 96vw !important;
    min-height: 470px;
    padding: 0 !important;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}
.mm-car-parts-parent .sm_megamenu_content,
.mm-car-care-parent  .sm_megamenu_content { padding: 0 !important; }
/* hide the stray "Car Parts" / "Car Care" title label inside the dropdown */
.mm-car-parts-parent > .sm-megamenu-child > .sm_megamenu_title,
.mm-car-care-parent  > .sm-megamenu-child > .sm_megamenu_title { display: none !important; }

.cat-cascade {
    position: relative;
    min-height: 470px;
    /* match the theme's vertical mega-menu font (Open Sans, already loaded by the theme) */
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cat-cascade a, .cat-cascade span { font-family: inherit; }
.cat-cascade ul { list-style: none; margin: 0; padding: 0; }
.cat-cascade a { display: block; text-decoration: none; }

/* ---- left rail (level 1) ---- */
.cat-cascade > ul {
    width: 250px;
    background: #f6f7f9;
    border-right: 1px solid #e9e9e9;
    min-height: 470px;
    padding: 6px 0;
}
.cat-cascade > ul > li > a {
    padding: 11px 32px 11px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #16203a;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-cascade > ul > li.has-sub > a::after {
    content: "\203A";
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    font-size: 18px; line-height: 1;
    color: #9aa4b5;
}
.cat-cascade > ul > li:hover > a { background: #fff; color: #0077C7; }
.cat-cascade > ul > li:hover > a::after { color: #0077C7; }

/* ---- mega panel (level 2 headers + level 3 links) ---- */
.cat-cascade > ul > li > ul {
    display: none;
    position: absolute;
    left: 250px; top: 0;
    width: 750px;
    min-height: 470px;
    padding: 24px 26px;
    background: #fff;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 18px 20px;
}
.cat-cascade > ul > li:hover > ul,
.cat-cascade > ul > li.has-sub:first-child > ul { display: flex; }            /* show first by default */
.cat-cascade > ul:hover > li.has-sub:first-child:not(:hover) > ul { display: none; }

/* inside the panel everything is laid out in flow (no further flyout) */
.cat-cascade > ul > li > ul ul { display: block; position: static; width: auto; }

/* level-2 = group header (exactly 3 columns per row) */
.cat-cascade > ul > li > ul > li {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
}
.cat-cascade > ul > li > ul > li > a {
    font-weight: 700;
    text-transform: uppercase;
    color: #14274e;
    font-size: 14.5px;
    letter-spacing: .3px;
    padding: 0 0 6px;
    margin-bottom: 4px;
    border-bottom: 2px solid #e7e9ee;
}
/* level-3 = links */
.cat-cascade > ul > li > ul > li ul > li > a {
    font-weight: 400;
    text-transform: none;
    color: #46505f;
    font-size: 14px;
    padding: 4px 0;
    border: 0;
}
.cat-cascade > ul > li > ul li > a:hover { color: #dc3545; }


/* =========================================================================
   TWO STANDALONE DROPDOWN TEMPLATES (do NOT inherit .cat-cascade rail/panel).
   Use custom_class on the megamenu item:
     mm-flat  -> simple single-column list, tight box (no gray side rail).
     mm-cols  -> subheading columns (bold uppercase header + list), no side rail.
   ========================================================================= */

/* ---- shared: tight auto-sized dropdown box, kill the theme's fixed width/pad ---- */
.mm-flat-parent > .sm-megamenu-child,
.mm-cols-parent > .sm-megamenu-child {
    width: auto !important;
    max-width: 96vw !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}
.mm-flat-parent .sm_megamenu_content,
.mm-cols-parent .sm_megamenu_content { padding: 0 !important; }
/* hide the stray title label the theme injects inside the dropdown */
.mm-flat-parent > .sm-megamenu-child > .sm_megamenu_title,
.mm-cols-parent > .sm-megamenu-child > .sm_megamenu_title { display: none !important; }

/* ---- TEMPLATE 1: mm-flat (just a dropdown) ---- */
.mm-flat {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 8px 0;
    min-width: 210px;
}
.mm-flat ul { list-style: none; margin: 0; padding: 0; }
.mm-flat a {
    display: block;
    text-decoration: none;
    padding: 9px 26px;
    font-size: 14px;
    font-weight: 600;
    color: #16203a;
    white-space: nowrap;
}
.mm-flat a:hover { background: #f6f7f9; color: #0077C7; }

/* ---- TEMPLATE 2: mm-cols (subheading columns, no side section) ---- */
.mm-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 0 44px;
    padding: 22px 26px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.mm-cols .mm-col { min-width: 170px; }
.mm-cols .mm-col-head {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    color: #14274e;
    font-size: 14.5px;
    letter-spacing: .3px;
    text-decoration: none;
    padding: 0 0 6px;
    margin-bottom: 8px;
    border-bottom: 2px solid #e7e9ee;
}
.mm-cols ul { list-style: none; margin: 0; padding: 0; }
.mm-cols a {
    display: block;
    text-decoration: none;
    color: #46505f;
    font-size: 14px;
    padding: 5px 0;
}
.mm-cols a.mm-col-head:hover { color: #dc3545; }
.mm-cols ul a:hover { color: #dc3545; }


/* top border on the navbar section, mirroring the existing 2px #0077C7 bottom border */
.header-bottom { border-top: 1px solid #0077C7; }

/* vertical divider between top-level navbar items */
.sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu > li.sm_megamenu_lv1:not(:last-child) {
    border-right: 1px solid #e0e0e0;
}

/* blue navbar section (button bar) with white text */
.header-bottom { background-color: #0077C7 !important; }
.header-bottom .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu > li > a,
.header-bottom .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu > li > a .sm_megamenu_title,
.header-bottom .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu > li.parent-item > a .sm_megamenu_title:after {
    color: #fff !important;
}
.header-bottom .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu > li.sm_megamenu_lv1:not(:last-child) {
    border-right-color: rgba(255, 255, 255, 0.28);
}
/* hover: white button, no rounded corners, blue text */
.header-bottom .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu > li.sm_megamenu_actived > a .sm_megamenu_title,
.header-bottom .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu > li:hover > a .sm_megamenu_title {
    background-color: #fff !important;
    color: #0077C7 !important;
    border-radius: 0 !important;
}
.header-bottom .sm_megamenu_wrapper_horizontal_menu .sm_megamenu_menu > li.parent-item:hover > a .sm_megamenu_title:after {
    color: #0077C7 !important;
}