:root {
    /*! put your custom css here */
}

/* ------------------------------------------------------------------
   BugHerd 332 — header nav dropdowns ("Join Us") render as a compact
   box under the nav item instead of the full-width mega panel.
   Scoped to the DESKTOP nav bar only (.exp-mega-menu__nav-bar);
   the mobile drill-in drawer is untouched.
   Design reference: https://mockups.lctg.dev/b2b/#/shop
   ------------------------------------------------------------------ */

.exp-mega-menu__nav-bar > li {
    position: relative;
}

/* The dropdown panel: compact card centered under the trigger.
   !important needed to beat the component's inline `top` and its
   slds-is-fixed positioning. */
.exp-mega-menu__nav-bar > li > .exp-mega-menu__nav-content-container {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: max-content;
    min-width: 220px;
    max-width: 320px;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 12px;
    /* no margin — a real gap here is a hover dead zone that closes the menu
       when the pointer crosses it slowly; visual spacing comes from the
       invisible bridge below instead */
    margin-top: 0;
}

/* Invisible hover bridge: spans the space between the trigger text and the
   card so the pointer never leaves the menu's hover area on the way down. */
.exp-mega-menu__nav-bar > li > .exp-mega-menu__nav-content-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 24px;
}

/* Neutralize the inner full-width/backdrop/grid wrappers (the backdrop
   is a fixed full-screen overlay by default — force it back into flow). */
.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content-backdrop,
.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content-fs {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Children stack vertically as plain menu items. */
.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content__category {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content__category-header {
    padding: 0;
    margin: 0;
}

.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content__category-header a {
    display: block;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 400;
    border-radius: 6px;
    white-space: nowrap;
    text-decoration: none;
}

.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content__category-header a:hover,
.exp-mega-menu__nav-bar > li .exp-mega-menu__nav-content__category-header a:focus {
    background: #f2f5f7;
    text-decoration: none;
}