• Polish
  • English
  • German
  • French
  • Czech
  • Hungarian
  • Italian
/* ========================================
MOBILE ONLY STYLES
add and modify varibales for mobile breakpoint
========================================= */
html.dwc-mobile {
  --mobile-menu-width: min(450px, 100%);
  --menu-item-font-size: 18px;
  --dropdown-item-font-size: var(--menu-item-font-size);
  --back-text-font-size: 16px;
  --menu-item-hover-border-bg: initial;
  --slide-out-speed: 1.3;
}

/* ======================================= 
  GENERAL NAV STYLES 
========================================= */
:root {
  /* ========================
 GENERAL COLORS/BACKGROUND
  ======================== */
  --primary-clr: orangered;
  --header-bg: white;
  --dropdown-content-bg: white;
  --mobile-menu-bg: white;
  --mobile-menu-topbar-bg: white;


  /* ===============================
 GENERAL WIDTH | HEIGHT | SPACINGS
  ================================== */
  --mobile-menu-width: min(300px, 100%); /* mobile & offcanvas */
  --multilevel-dropdown-width: 200px;  
  --dropdown-content-gap: 1px; /* header -> dropdown gap, add unit (e.g. 0px) */
  --header-min-height: 60px;
  --fullscreen-mobile-menu-top-height: 60px;  
  --top-offset: 40px; /* when nav is below header */ 
  --dropdown-content-default-width: 1080px;  /* preview width & default width for dropdown content */
    --header-inline-padding: clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem);


  /* ===========================================
   GENERAL BORDERS | SHADOWS | OVERLAY BACKDROP
  ============================================== */
  --dropdown-content-border-radius: 0px;
  --dropdown-content-shadow: 0px 5px 15px -10px rgb(0 0 0 / 0%);  
  --dropdown-content-border-size: 1px; /* at least 1px */
  --dropdown-content-border-color: var(--dropdown-content-bg); 

  /* overlay backdrop background & blur */
  --nav-overlay-backdrop-blur: 0px;
  --nav-overlay-backdrop-clr: rgba(0, 0, 0, 0.2);
  
    /* radius for special mobile style on overlay header*/
  --mobile-menu-radius: var(--overlay-header-radius);
  
    /* 	mobile  */
  --slide-out-speed: 1.3;


  /* ================================
  MENU TOGGLE - Hamburger 
  (additional settings at line 195)
  ================================= */
  --menu-toggle-clr: var(--menu-item-clr);
  --menu-toggle-hover-clr: var(--menu-item-hover-clr);
  --menu-close-toggle-clr: var(--menu-item-clr);
  --open-icon-size: 40px; /*menu toggle size*/


  /* ========================
  MENU ITEMS
  ======================== */
  /* DEFAULT STATE */
  --menu-item-clr: #000;
  --menu-item-font-size: 14px;
  --menu-item-font-weight: 500;
  --menu-item-bg: initial;

  /* HOVER STATE */
  --menu-item-hover-clr: var(--primary-clr);
  --menu-item-hover-bg: initial;
  --menu-item-hover-border-bg: var(--menu-item-active-border-bg);
  --menu-item-hover-border-height: var(--menu-item-active-border-height);

  /* ACTIVE STATE */
  /*  (to exclude a link from this style, 
  add .dwc-exclude to its container)*/
  --menu-item-active-clr: var(--menu-item-hover-clr);
  --menu-item-active-bg: initial;
  --menu-item-active-border-height: 2px;
  --menu-item-active-border-bg: var(--primary-clr);

  /* PADDING | GAP */
  --menu-item-inline-padding: 1.1rem;
  --menu-item-block-padding: 1rem;
  --menu-items-gap: 0;

  /* BORDERS | RADIUS */
  --menu-item-border: 1px solid rgba(0, 0, 0, 0.1);
  --menu-item-radius: 0;
  
  /* CHEVRON (dropdown arrow) */
  --chevron-size: 14px;
  --chevron-clr: var(--menu-item-clr);
  --chevron-hover-clr: var(--menu-item-hover-clr);


  /* ========================
  DROPDOWN LINKS
  ======================== */
  /* DEFAULT STATE */
  --dropdown-item-clr: var(--menu-item-clr);
  --dropdown-item-font-size: var(--menu-item-font-size);
  --dropdown-item-bg: initial;
  --dropdown-indent-bg: rgb(0 0 0 / 5%);

  /* HOVER STATE */
  --dropdown-item-hover-clr: var(--menu-item-hover-clr);
  --dropdown-item-hover-bg: white;

  /* EXPANDED STATE (PARENT) - mobile */
  /* when [data-submenu-reveal="expand"] */
  --dropdown-expanded-clr: white;
  --dropdown-expanded-bg: black;

  /* PADDING | GAP | INDENT */
  --dropdown-item-inline-padding: var(--menu-item-inline-padding);
  --dropdown-item-block-padding: var(--menu-item-block-padding);
  --dropdown-indent: 0.6rem;
  --dropdown-indent-item-pad-offset: 0.5;
  --dropdown-indent-line: solid 1px rgb(0 0 0 / 25%);
  
  /* RADIUS */
  --dropdown-item-radius: var(--dropdown-content-border-radius);

  /* OTHERS */
  --dropdown-inactive-overlay: rgb(0 0 0 / 10%);


  /* ========================
  MENU CTA BUTTON (ALL BUTTONS)
  ======================== */
  /* all cta buttons max width on mobile */
  --cta-width: 100%;

  /* gap offset between 2 or 3 cta buttons on mobile/offcanvas/sidebar*/
  --cta-gap-offset: 0;

  /* gap between breakout cta and menu toggle on mobile */
  --cta-breakout-gap: 20px;


  /* ========================
  MENU CTA BUTTON (LAST BUTTON)
  ======================== */
  /* DEFAULT STATE */
  --menu-cta-clr: white;
  --menu-cta-bg: black;
  --menu-cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3);
  --menu-cta-block-padding: var(--menu-item-block-padding);
  --menu-cta-border: none;
  --menu-cta-radius: 0em;

  /* HOVER STATE */
  --menu-cta-hover-clr: white;
  --menu-cta-hover-bg: var(--primary-clr);


  /* ========================
  MENU CTA BUTTON (SECOND BUTTON)
  ======================== */
  /* DEFAULT STATE */
  --menu-cta-2-clr: white;
  --menu-cta-2-bg: black;
  --menu-cta-2-inline-padding: var(--menu-cta-inline-padding);
  --menu-cta-2-block-padding: var(--menu-cta-block-padding);
  --menu-cta-2-border: var(--menu-cta-border);
  --menu-cta-2-radius: var(--menu-cta-radius);

  /* HOVER STATE */
  --menu-cta-2-hover-clr: white;
  --menu-cta-2-hover-bg: var(--primary-clr);


  /* ========================
  MENU CTA BUTTON (THIRD BUTTON)
  ======================== */
  /* DEFAULT STATE */
  --menu-cta-3-clr: white;
  --menu-cta-3-bg: black;
  --menu-cta-3-inline-padding: var(--menu-cta-inline-padding);
  --menu-cta-3-block-padding: var(--menu-cta-block-padding);
  --menu-cta-3-border: var(--menu-cta-border);
  --menu-cta-3-radius: var(--menu-cta-radius);

  /* HOVER STATE */
  --menu-cta-3-hover-clr: white;
  --menu-cta-3-hover-bg: var(--primary-clr);


  /* ========================
  MENU TOGGLE - Hamburger additional settings
  ======================== */  
  --open-icon-align: 0;  /* 0 = right | auto = left */
  --open-icon-horizontal-offset: 0px; /* nudge icon left or right from edge of screen*/
  --open-icon-close-offset: 1.2; /* nudge icon left or right when close icon is active */


  /* ========================
  TRANSITIONS
  ======================== */
  /* Transition timing function */
  --mobile-menu-ttf: cubic-bezier(0.8, 0.07, 0.2, 0.95);


  /* =================
  OVERLAY HEADER
  ================== */
  --overlay-header-width: 1400px;
  --overlay-header-inset: 1rem;
  --overlay-header-bg: rgb(255 255 255 / 100%);
  --overlay-header-bg-active: rgb(255 255 255 / 100%);
  --overlay-header-blur: 10px;
  --overlay-header-radius: 1rem;
  --overlay-header-shadow: 0px 2px 20px rgb(0 0 0 / 20%);
  --overlay-offset-padding: clamp(5rem, 1.875rem + 12.5vw, 11.25rem);


  /* ========================
  BACK TEXT
  ======================== */
  --back-text-clr: var(--menu-item-clr);
  --back-text-font-size: 12px;
  --back-text-font-weight: 600;
  --back-text-transform: uppercase;
  --back-text-bg: var(--mobile-menu-topbar-bg);


  /* ======== DO NOT EDIT THIS VARIABLES! ======== */
  --open-icon-line-height: calc(var(--open-icon-size) * 0.1);
  --icon-line-gap: calc(var(--open-icon-size) * 0.25);
  --open-icon-line-variance: calc(var(--open-icon-size) * 0.25);
  --iw: calc(var(--open-icon-size) - var(--open-icon-line-variance));
  --aw: calc(var(--iw) - var(--open-icon-line-variance));
  --caret-size: calc(var(--dropdown-content-gap) + var(--dropdown-content-border-size));
  --dropdown-content-border: solid var(--dropdown-content-border-color) var(--dropdown-content-border-size); 
}


/* ========================
DROPDOWN ITEM IS BUTTON OR ICON 
======================== */

[data-is-button]>.brx-submenu-toggle {
  --menu-item-bg: black;
  --menu-item-clr: white;
  --menu-item-hover-clr: white;
  --menu-item-hover-bg: black;
  --menu-item-radius: 50vw;
  --menu-item-hover-border-height: 0;
  --chevron-size: 0;
  --chevron-color: white;
  --menu-item-inline-padding: 1.5rem;
  --menu-item-block-padding: 1rem;
  /* mobile only*/
  --menu-item-width: 200px;
  --menu-item-border: solid 1px transparent;
  --menu-item-hover-border: solid 1px transparent;

}

[data-is-icon]>.brx-submenu-toggle {
  --menu-item-bg: black;
  --menu-item-clr: white;
  --menu-item-hover-clr: white;
  --menu-item-hover-bg: black;
  --icon-clr: white;
  --icon-hover-clr: white;
  --icon-size: 14px;
  --menu-item-inline-padding: 1.1rem;
  --button-max-diameter: 45px;
  --menu-item-radius: 50vw;
  --menu-item-border: solid 1px transparent;
  --menu-item-hover-border: solid 1px transparent;
}

/* ========== NAV STYLES END ============== */



/* ======= STICKY HEADER WITH OVERLAY SPECIAL STYLES ===== */
/*===== this styles only apply when the header div attribute [data-sticky-overlay-special-style] 
attribute is set to true, and sticky header is enabled =====*/

/* SVG STYLES BEFORE SCROLLING - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open, .brx-nav-nested-items > li:hover)) :is(path, .cls-1):not(:is(.brx-submenu-toggle path)) {
  fill: white;
}

/* BRICKS SEARCH ICON STYLES BEFORE SCROLLING - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) 
.dwc-nest-header:not(:has(.brxe-dropdown.open, .brx-nav-nested-items > li:hover)) :is(.brxe-search path,.brxe-search circle) {
  stroke: white;
}


/* STYLES BEFORE SCROLLING  - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open, .brx-nav-nested-items > li:hover)) {
  --menu-item-clr: white;
  --chevron-clr: white;
  --menu-item-hover-clr: white;
  --menu-item-hover-border-bg: white;
  --overlay-header-bg: transparent;
  --header-bg: transparent;
  --overlay-header-shadow: none;
}

/* STYLES BEFORE SCROLLING */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) {
  --link-transition: 0s;
  --transition: 0.2s;
}


/* STYLES WHEN SCROLLING */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky.scrolling {
  --overlay-header-bg: white;
  --header-bg: white;
}

/* STYLES WHEN SCROLLING :HOVER*/
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky.scrolling .dwc-nest-header:has(.brxe-dropdown.open) {
  /* add and update variable here */

}

/* DEFAULT STYLES FOR OVERLAY HEADER  */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky {
  --menu-item-hover-bg: initial;
  --menu-item-bg: initial;
  --overlay-header-inset: 0;
  --overlay-header-width: 100%;
  --overlay-header-radius: 0;
}

/* RESET STICKY HEADER TRANSITION*/
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend #brx-header.brx-sticky .dwc-nest-header {
  transition: var(--transition);
}
const MegaMenuCONFIG = {
  // Minimum width threshold for desktop,
  // should be 1px larger than mobile (max-width) breakpoint in the "MEDIA QUERY" CSS code block
  minWidth: 1201, //IMPORTANT: Also change min-width in the "MEGA MENU Codes" CSS code block to match this value

  headerSelector: '#brx-header',
  nestMenuSelector: '.dwc-nest-menu',

  closeNavOnClick: 1,
  closeOnHashClickOnly: 0,
  closeOnMobileOnly: 0,  // Set to false to enable close on both mobile and desktop
    // Selectors (e.g. .class-name, #id_name, tag-name, .complex > selectors etc.) that should NOT close the navigation when clicked
  // Separate multiple selectors with a comma e.g. '.class-one, #id_one, tag'
  closeNavOnClickExclude: '.js-wpml-ls-item-toggle',
  
   breakinToNavList: 1, /*mobile only - places the breakin container as an li isnide the nav list (see docs for more info) */


  // Properties for dropdown positioning
  shiftFactor: 1,  // Factor to shift overflow
  minOverflow: 10,  // Minimum overflow threshold
  reinitializeOnURLchange: true, //useful when using page transition API
  
  //move backdrop overlay element Inside header
  //placing it inside header will allow backdrop overlay/blur to affect header, but won't work when data-overlay-header is enabled. 
  overlayInsideHeader:0
};

// Centered Logo Configuration
const CenteredLogoCONFIG = {
  enable: 0,
  centerGuide: 1,
  forceCenteredLogo: 1,
  // move the navigation left 
  // or right using negative or positive value
  centerNudge: 0,
  // allow centered logo when no. of 
  // menu items are odd e.g. 5 or 7
  allowOddItems: 1,
  // place logo 'before' or 'after' the odd menu item
  roundOffFactor: 'before'
};
/*MOBILE MENU BREAKPOINT */


@media only screen and (max-width: 1200px) {
  
  .bricks-is-frontend .dwc-nav-wrapper:not(.show-nav .dwc-nav-wrapper){
  display: none;
}

[data-breakinto].dwc-tabbed-nav-container:not(.brxe-dropdown .dwc-tabbed-nav-container){
    display: none;
  }


    .desktop-centered header:has([data-fix-centered-logo-fouc="true"]) {
        opacity: 0;
    }

    .dwc-nest-menu__logo[data-breakout-link] {
        margin-inline-end: auto
    }

    /*mobile logo*/
    .dwc-nest-menu__mobile-logo> :is(svg, img) {
        block-size: 100%;
        inline-size: auto;
    }

    .dwc-nest-menu__mobile-logo:not([data-show-mobile-logo="true"] .dwc-nest-menu__mobile-logo) {
        display: none;
    }


    [data-sidebar-back-text-on-logo="true"] .dwc-nest-menu__mobile-logo {
        --dwc-nest-header-height: var(--mobile-menu-top-height);
    }


    /*special mobile menu styles for overlay header UPDATED */

    .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
        transform: translateY(-100%);
    }


    .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .brx-nav-nested-items {
        transform: translateY(0%);
    }

    .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
        transition: 0.45s;
        transition-timing-function: var(--mobile-menu-ttf);
        inset-block-start: calc(var(--dwc-nest-header-height) * -1);
    }

/* 
    .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-submenu-reveal="expand"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
        inset-block-start: calc(var(--dwc-nest-header-height) / -2);
        inset-block-start: -40px;
    } */


    .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
        --mobile-menu-width: 100% !important;
        inline-size: var(--mobile-menu-width);
        border-bottom-left-radius: min(var(--mobile-menu-radius), 2em);
        border-bottom-right-radius: min(var(--mobile-menu-radius), 2em);
        padding-block-start: calc(var(--dwc-nest-header-height) + 0px);
        overflow-x: hidden;

    }

    .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]:not([data-submenu-reveal="expand"]) .brx-nav-nested-items {
        overflow-y: hidden;
    }

    .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="expand"] .brx-nav-nested-items {
        max-block-size: fit-content;
    }

    .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
        transform: translateY(0%);
        border-radius: min(var(--overlay-header-radius), 2em);
        overflow: hidden !important;
        inset-block-start: var(--overlay-header-inset);

    }

    .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .dwc-nav-wrapper {
        transform: translateY(0%);
    }

    .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper) {
        --mobile-menu-width: min(calc(100% - (var(--overlay-header-inset) * 2)), 100%) !important;
        inline-size: var(--mobile-menu-width) !important;
        inset-inline-end: var(--overlay-header-inset) !important;
        block-size: calc(100dvb - (var(--overlay-header-inset) * 2));
    }

    .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu.brxe-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
        min-block-size: 0;
    }


    .dwc-mobile [data-overlay-header-mobile="true"].dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]) {
        padding-inline: initial
    }


    .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
        border-block-end: initial;
        min-block-size: var(--dwc-header-div-height);
    }


      .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul, :has(.dwc-tabbed-nav-list__li.active)) {
      inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
    padding-block-start: 50px;
}

    .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)) {
    inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
    padding-block-start: 50px;
}

    /* .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)) {
        inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
        padding-block-start: 50px;
    } */


       .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button), .bricks-is-frontend [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
                            inset-block-start: calc(max(var(--dwc-nest-header-height) - var(--dwc-header-div-height), var(--dwc-header-div-height)));
                            
                        }

    .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle>button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) {
        z-index: 9999;
        min-inline-size: 100%;
        min-block-size: 50px;
        inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
    }

    .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle>button:not([data-submenu-reveal="expand"] button) {
    inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
}


    .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
        min-block-size: 100%;
    }

    .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
        min-inline-size: 0px !important;
    }



    .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content)>li {
        padding-block-end: 40px;
    }

    .dwc-mobile .dwc-nest-header[data-overlay-header-mobile="true"]>div {
        padding-inline: var(--menu-item-inline-padding);
        border-radius: var(--overlay-header-radius);
    }

    /* special style UPDATED ends*/


    .dwc-nest-menu .brx-nav-nested-items {
        gap: 0;
    }

    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
        display: flex;
        visibility: hidden;
        min-inline-size: 0 !important;
    }

    .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown>.brx-dropdown-content {
        overflow-y: auto;
    }

    .dwc-nest-menu .brx-nav-nested-items {
        flex-direction: column !important;
        flex-wrap: nowrap;

    }

    .dwc-nest-toggle--open.brxe-toggle {
        display: flex !important;
        place-items: center;
    }

    .dwc-nest-menu .brx-nav-nested-items {
        position: relative !Important;
        background: var(--mobile-menu-bg) !important;
        align-items: stretch;
    }

    .dwc-nest-header:not([data-overlay-header-mobile="true"]:has([data-slide-in-direction="top"])) .dwc-nest-menu .brx-nav-nested-items {
        flex-grow: 1;
    }

    [data-overlay-header-mobile="true"] .dwc-nest-menu.dwc-nest-menu[data-submenu-reveal="slide"] .brx-nav-nested-items:has(li.open.active) {
        flex-grow: 1;
    }



    .dwc-nest-menu .brx-nav-nested-items:not(.brx-open .brx-nav-nested-items) {
        transform: unset
    }

    .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content {
        transform: unset;
    }

    .dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items {
        opacity: unset !important;
        visibility: unset !important;
    }

    .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
        overflow-y: auto;
        scrollbar-width: none;
        justify-content: flex-start !important;
    }


    /* set new values  */

    .dwc-nav-wrapper {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        transform: translateX(100%);
        background-color: var(--mobile-menu-bg);
        transition: 0.45s;
        transition-timing-function: var(--mobile-menu-ttf);
        z-index: 1;
        flex-wrap: nowrap;
        inline-size: var(--mobile-menu-width);
        visibility: hidden;
    }

    /* RTL */
    [dir="rtl"] .dwc-nav-wrapper {
        inset-inline-end: initial;
        inset-inline-start: 0;
    }

    .brx-open .dwc-nav-wrapper {
        transform: translateX(0%);
        visibility: visible;
    }



    .dwc-nest-menu-top {
        background-color: var(--mobile-menu-topbar-bg);
        border-block-end: var(--menu-item-border);
        min-block-size: var(--dwc-nest-header-height);
        display: flex;
        flex-direction: row;
        align-items: center;
    }



    .dwc-nest-menu .brx-has-megamenu,
    .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content>.menu-item>a,
    .dwc-nest-menu .menu-item>a {
        border-block-end: var(--menu-item-border);
    }

    .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu):not(.open, :has(.open)),
    .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content>.brxe-dropdown:not(.open, :has(.open)) {
        border-block-end: var(--menu-item-border);
    }



    /* MENU CTA (LAST BUTTON */

    :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type,
    :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2),
    [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) {
        padding-inline: var(--menu-item-inline-padding) !important;
        padding-block: var(--menu-item-block-padding) !important;
        inline-size: 100%;
        margin-inline: auto;
        max-inline-size: var(--cta-width);
    }

    [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2)+li {
        padding-block-start: var(--cta-gap-offset) !important
    }

    [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3)+li {
        padding-block-start: var(--cta-gap-offset) !important
    }

    :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type a,
    :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2) a,
    [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) a {
        justify-content: center;
    }



    /* MOBILE MENU SLIDE IN DIRECTION */
    .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper {
        transform: translateX(-100%);
        inset-inline-start: 0;
        overflow: hidden;
    }

    /* RTL */
    [dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper {
        inset-inline-start: initial;
        inset-inline-end: 0;
    }



    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction="left"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button),

    [dir="rtl"] .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left"] [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
        inset-inline-start: initial;
        inset-inline-end: 0;
        justify-content: flex-end;
    }



    .bricks-is-frontend [data-slide-in-direction="left"].brx-open .dwc-nav-wrapper {
        transform: translateX(0);
    }

    /* SLIDE IN TOP */
    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"].brx-open .dwc-nav-wrapper,
    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"].brx-open .dwc-nav-wrapper {
        transform: translateY(0%);
    }

    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"] .dwc-nav-wrapper,
    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"] .dwc-nav-wrapper {
        transform: translateY(-100%);
    }

    /* SLIDE IN BOTTOM */

    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"].brx-open .dwc-nav-wrapper,
    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"].brx-open .dwc-nav-wrapper {
        transform: translateY(0%);
    }

    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"] .dwc-nav-wrapper,
    .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"] .dwc-nav-wrapper {
        transform: translateY(100%);
    }

    .bricks-is-frontend [data-slide-in-direction="left bottom"] .dwc-nav-wrapper,
    .bricks-is-frontend [data-slide-in-direction="left top"] .dwc-nav-wrapper {
        inset-inline-start: 0;
        overflow: hidden;
    }


    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-track,
    .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-track {
        border-radius: 50vw;
        background-color: transparent;
    }

    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar,
    .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar {
        inline-size: 0px;
        background-color: transparent;
    }

    .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-thumb,
    .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-thumb {
        border-radius: 50vw;
        background-color: #55565d;
    }

    /* SCROLLBARS END */



    /*  SLIDE IN DIRECTION - DROPDOWN ITEMS*/
    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content {
        max-block-size: unset;
        position: absolute !important;
        opacity: 1;
        /* transition-duration: 0.45s !important; */
        transition-timing-function: var(--mobile-menu-ttf);
        padding-block-end: 80px;
    }

    .bricks-is-frontend .dwc-nest-menu [data-submenu-reveal="expand"].brx-has-megamenu>ul {
        position: static !important;
        padding-block-end: 0 !important;
        transition: 0.3s ease-in-out !important;
    }



    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
        inset: 0 !important;
        transform: translateX(100%);
        transition-property: opacity, transform, visibility;
        min-block-size: calc(100dvb - var(--dwc-nest-header-height));
        position: fixed !important;
    }

    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
        inset-block-start: var(--dwc-nest-header-height) !important;
    }

    .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
        transform: translateX(-100%);
    }

    .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu.brx-open .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
        transform: translateX(0) !important;
    }



    /*  SLIDE IN  - mult-level DROPDOWN ITEMS*/
    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
        inset-block: 0 !important;
        inline-size: 100%;
        transition-property: inset-inline-start, visibility, opacity;
        inset-inline-start: 100% !important;
        min-block-size: 100dvb;
        position: fixed !important;
    }

    .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content),
    .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content) {
        inset-inline-start: -100% !important;
    }

    /* RTL */

    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content,
    [dir="rtl"] .bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content {
        inset-inline-start: -100% !important;
    }



    .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
        inset-block-start: var(--dwc-nest-header-height) !important;
    }

    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
    .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
    .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
        inset-inline-start: 0 !important;
    }


    .bricks-is-frontend .dwc-nest-menu .brxe-dropdown {
        position: static;
    }


    .bricks-is-frontend [data-submenu-reveal="slide"] .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) {
        transform: rotate(270deg)
    }

    /*  EXPAND  - mult-level DROPDOWN ITEMS*/
    .bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>li,
    .bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>.brxe-dropdown .brx-dropdown-content>li,
    .bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content>.menu-item:not([data-submenu-reveal="slide"] li) {
        transform: translateY(-100px);
        opacity: 0;
        transition: transform 0s, opacity 0s
    }

    .bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>li,
    .bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>.brxe-dropdown.open .brx-dropdown-content>li,
    .bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu).open>.brx-dropdown-content>.menu-item {
        transform: translateY(0);
        opacity: 1 !important;
        transition: transform 0.4s, opacity 0.4s
    }

    /* MOBILE LOGO */
    .dwc-nest-menu:not([data-submenu-reveal="expand"]):has(.brxe-dropdown.open) .dwc-nest-menu__mobile-logo {
        opacity: 0;
        transition: 0s;
    }

    .dwc-nest-menu__mobile-logo {
        opacity: 1;
        transition: opacity 0.45s 0.15s var(--mobile-menu-ttf);
    }

    .dwc-nest-menu__mobile-logo {
        block-size: var(--dwc-nest-header-height);
        max-block-size: var(--dwc-header-div-height);
    }


    /* DROPDOWN INDENT */


    .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] .brx-dropdown-content),
    .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) .brx-dropdown-content {
        padding-inline-start: var(--dropdown-indent) !important;
        padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
        border-left: var(--dropdown-indent-line);
        background-color: var(--dropdown-indent-bg);
        min-inline-size: 0px !important;
    }


    .dwc-nest-menu[data-submenu-reveal="expand"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] .brx-dropdown-content),
    .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) .brx-dropdown-content {
        min-inline-size: unset !important;
    }


    .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *)>*> :is(a, .brx-submenu-toggle),
    .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>*> :is(a, .brx-submenu-toggle) {
        padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
    }


    .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle,
    .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle {
        background-color: var(--dropdown-expanded-bg) !important;
        color: var(--dropdown-expanded-clr) !important;
    }

    .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle svg,
    .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle svg {
        color: var(--dropdown-expanded-clr) !important;
    }



    /* BACK BUTTON POSITIONING */
    .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button),
    .bricks-is-frontend [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
        min-inline-size: 100%;
        position: fixed;
        inset-block-start: calc(var(--dwc-nest-header-height) - var(--dwc-header-div-height));
        transform: translateY(0%) !important;
        inset-inline-start: 0;
        padding-inline-start: var(--menu-item-inline-padding);
        color: var(--back-text-clr);
        text-transform: var(--back-text-transform);
        letter-spacing: 1px;
        z-index: 1000;
        font-size: var(--back-text-font-size);
        font-weight: var(--back-text-font-weight);
        background-color: var(--back-text-bg);
        ;
        min-block-size: calc(var(--dwc-header-div-height) - 2px);
        -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
        animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
    }




    /* BACK BUTTON TEXT, (ATTR SET BY JS) */
    .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button[data-back-text="auto"]:not([data-submenu-reveal="expand"] button, [data-hide-close-bar="true"] button):after,
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button[data-back-text="auto"]:not([data-hide-close-bar="true"] button):after {
        content: attr(data-text);
        line-height: 1;
    }

    /* FORCE TO USE 'BACK' AS BACK BUTTON TEXT */
    .bricks-is-frontend .dwc-nest-menu:not([data-submenu-reveal="expand"]) .brxe-dropdown.open:not([data-submenu-reveal="expand"])>.brx-submenu-toggle button:not([data-back-text="auto"])::after {
        content: attr(data-back-text) !important;
    }

    .dwc-nest-menu:not([data-submenu-reveal="expand"]) .brxe-dropdown:not([data-submenu-reveal="expand"]) .brx-submenu-toggle button[aria-expanded] {
        transition: unset !important;
    }

    /* BACK BUTTON CHEVRON ARROW direction */
    .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open>.brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button svg {
        transform: rotate(90deg);
        margin-inline-end: 0.5em;
        inline-size: 10px;
    }

    /* RTL */
    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"])>.brx-submenu-toggle button svg,
    [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button svg {
        order: 2;
        margin-inline-end: initial;
        margin-inline-start: 0.5em;
    }





    /* overlay back button on logo*/
    body:has(.brx-open .open.active:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"]:not([data-submenu-reveal="expand"], [data-below-header="true"]) .dwc-nest-menu-top {
        background-color: var(--mobile-menu-topbar-bg) !important;
        -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
        animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
    }

    body:has([data-submenu-reveal="slide"].brxe-dropdown.open, [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
        background-color: var(--mobile-menu-topbar-bg) !important;
    }

    .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nav-wrapper:not([data-below-header="true"] .dwc-nav-wrapper, [data-show-mobile-logo="true"] .dwc-nav-wrapper, [data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper) {
        background-color: transparent !important;
    }


     .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *, [data-show-mobile-logo="true"] *, [data-allow-overlay-mobile-opacity="true"][data-overlay-header-mobile="true"] [data-submenu-reveal="expand"][data-slide-in-direction="top"] *) {
     background-color: transparent !important; 
}

.dwc-mobile [data-allow-overlay-mobile-opacity="true"][data-overlay-header-mobile="true"] [data-submenu-reveal="expand"][data-slide-in-direction="top"] .dwc-nest-menu-top {
    z-index: 9999;
    border-radius: var(--overlay-header-radius);
    --mobile-menu-topbar-bg: var(--overlay-header-bg);
    backdrop-filter: blur(var(--overlay-header-blur));

}




    /* MENU BELOW HEADER */
    .bricks-is-frontend [data-below-header="true"].dwc-nest-menu .dwc-nav-wrapper {
        inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px));
    }

    [data-below-header="true"] .dwc-nest-menu-top {
        min-block-size: var(--top-offset);
    }
    
    .bricks-is-frontend [data-below-header="true"] .brxe-dropdown.open>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
        min-block-size: calc(var(--top-offset) - 1px);
        padding-block: 0 !important;
        inset-block-start: 0;
    }


    .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
        inset-block-start: calc(var(--top-offset) + 1px) !important;
    }

    .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
        inset-block-start: calc(var(--top-offset) + 1px) !important;
    }

    .dwc-nest-menu[data-below-header="true"] .dwc-nest-menu__mobile-logo {
        display: none;
    }



    /* tooltip */

    .dwc-nest-tooltip:not(.open.active ~ .dwc-nest-tooltip) {
        opacity: 0 !important;
    }


    @keyframes slideIn {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }

        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        0% {
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            transform: translateX(150%);
            opacity: 0;
        }
    }

    .dwc-nest-tooltip {
        animation: slideIn 0.4s ease-in-out both, fadeOut 0.4s ease-in-out 2s both;
    }



    /* EXPAND DROP DOWN */
    /* EXPAND MEGA MENU DROP DOWN */

    [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content {
        display: grid !important;
        grid-template-rows: 0fr;
        grid-template-columns: 1fr;
        transition: 0.3s ease-in-out;
        overflow: hidden;
        position: static;
        visibility: visible;
        opacity: 1;
    }

    [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;

    }

    [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content>.dwc-nest-nav-list__inner-wrap,
    [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content> :is(div, li) {
        padding-block: 0 !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content :is(div, li):not([data-submenu-reveal="slide"] *) {
        flex-wrap: nowrap !important;
        min-block-size: 0 !important;
    }

    [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content>.dwc-nest-nav-list__inner-wrap,
    [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) {
        opacity: 1;
        transition: opacity 0.25s 0.25s ease;
    }

    /* EXPAND MEGA MENU DROP DOWN -- MODULAR*/

    [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content {
        display: grid !important;
        grid-template-rows: 0fr;
        grid-template-columns: 1fr;
        transition: 0.3s ease-in-out;
        overflow: hidden;
        position: static;
        visibility: visible;
        opacity: 1;
    }

    [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
    }

    [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content>.dwc-nest-nav-list__inner-wrap,
    [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content> :is(div, li) {
        padding-block: 0 !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content :is(div, li) {
        flex-wrap: nowrap !important;
        min-block-size: 0 !important;
    }

    [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content>.dwc-nest-nav-list__inner-wrap,
    [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) {
        opacity: 1;
        transition: opacity 0.8s 0.25s ease;
    }

    /* HIDE TOP CLOSE BAR */
    [data-hide-close-bar='true'] .dwc-nest-menu-top {
        display: none;
    }



    /* hide close button, bring main hamburger to front */

    .dwc-nest-menu .brxe-toggle {
        position: relative;
    }

    [data-mobile-top-transparent="true"]:not(:has(.brxe-dropdown.open)) .brxe-toggle[aria-label="Open Menu"] {
        z-index: 9999;
    }

    [data-show-toggle-always="true"] .brxe-toggle[aria-label="Open Menu"] {
        z-index: 9999;
    }

    /* .dwc-nest-menu:not([data-mobile-top-transparent="true"], [data-below-header="true"]) .brxe-toggle[aria-label="Close Menu"] {
        display: grid;
        place-items: center;
        height: 100%;
    } */

    .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown>.brx-dropdown-content {
        transform: unset;
    }

    .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.open>.brx-dropdown-content {
        transform: unset;
    }

    .dwc-stripe-style .dwc-nest-header::after,
    .dwc-stripe-style .dwc-nest-header::before {
        display: none !important;
    }


    /* builder */
    [data-builder-mode] .dwc-nest-menu-top {
        min-block-size: 80px !important;
    }

    [data-builder-mode] .dwc-nest-nav-items {
        overflow-y: scroll;
    }

    /* in builder ends*/


    /*==========RTL=============*/

    [dir=rtl] .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="right"]) .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
        transform: translateX(-100%);
    }

    [dir=rtl] nav:not(.brx-open, [data-slide-in-direction="right"]) .dwc-nav-wrapper {
        transform: translateX(-100%);
    }

    [dir=rtl] .bricks-is-frontend [data-submenu-reveal="slide"] .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) {
        transform: rotate(-270deg);
    }


    /* ================== BRICKS RESET LAYER ========================== */

    @layer bricks.reset {

        /* multilevel dropdown slide in */
        .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
        .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
            inset-inline-start: 100% !important;
        }

        [dir=rtl] .bricks-is-frontend [data-slide-in-direction="right"][data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu), .open) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
        [dir=rtl] .bricks-is-frontend [data-slide-in-direction="right"][data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content {
            inset-inline-start: -100% !important;
        }

        .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction="left"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
        .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
            inset-inline-start: -100% !important;
        }

        .bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
        .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
        .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
            inset-inline-start: 0 !important;
        }

        .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction="left"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
        .bricks-is-frontend [data-slide-in-direction="left"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
        .bricks-is-frontend [data-slide-in-direction="left"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
            inset-inline-start: 0 !important;
        }

        .brx-closing.brxe-nav-nested .brx-nav-nested-items {
            opacity: 1 !important;
        }

        .dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items {
            opacity: unset !important;
            visibility: unset !important;
        }

    }

    /* ================== END BRICKS RESET LAYER ========================== */

}


/* END MEDIA QUERY*/



@media (min-width: 640px) and (max-width: 1200px) {

    /* ================== BRICKS RESET LAYER ========================== */

    @layer bricks.reset {

        /*special mobile style on tablet */

        .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
        .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {

            inset-inline-start: auto !important;
            inset-inline-end: -100% !important;
        }

        .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
        .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
        .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
            inset-inline-end: 0% !important;
            inset-inline-start: auto !important;
        }



    }

 /* in builder ends*/
    
/* ================== BRICKS RESET LAYER ========================== */

      @layer bricks.reset {

/* multilevel dropdown slide in */

        
        .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .brx-header-left *, .brx-header-right  *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) {
    inset-inline-start: 100% !important;
}
        
                .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction^="left"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .brx-header-left *, .brx-header-right  *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) {
    inset-inline-start: -100% !important;
}
        /*sidebar*/
                .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu, .open)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .-brx-header-left *, .-brx-header-right  *), 
        .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) {
    inset-inline-start: 100% !important;
}
   


 

    .bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) > .brx-dropdown-content,
  .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open > .brx-dropdown-content,
  .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open > .brx-dropdown-content .open > .brx-dropdown-content {
    inset-inline-start: 0 !important;
  }
        
        
            .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction^="left"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) > .brx-dropdown-content,
  .bricks-is-frontend [data-slide-in-direction^="left"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open > .brx-dropdown-content,
  .bricks-is-frontend [data-slide-in-direction^="left"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open > .brx-dropdown-content .open > .brx-dropdown-content {
    inset-inline-start: 0 !important;
  }
        /*sidebar*/
            .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-nav-nested .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) > .brx-dropdown-content,
  .bricks-is-frontend:is(.brx-header-right, brx-header-left)  [data-submenu-reveal="slide"].brxe-dropdown.open > .brx-dropdown-content,
  .bricks-is-frontend:is(.brx-header-right, brx-header-left)  [data-submenu-reveal="slide"].brxe-dropdown.open > .brx-dropdown-content .open > .brx-dropdown-content {
    inset-inline-start: 0 !important;
  }

 .brx-closing.brxe-nav-nested .brx-nav-nested-items {
    opacity: 1 !important;
}
        

 .dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items {
          opacity: unset !important;
          visibility: unset !important;
      }

}

 /* ================== END BRICKS RESET LAYER ========================== */  

}


/* END MEDIA QUERY*/



@media (min-width: 640px) and (max-width: 1200px) {
  
   /* ================== BRICKS RESET LAYER ========================== */  
  
   @layer bricks.reset {
     
     /*special mobile style on tablet */
        
       .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *), .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {

    inset-inline-start: auto !important;
    inset-inline-end: -100% !important;
}
        
        .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content, .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content, .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
    inset-inline-end: 0% !important;
    inset-inline-start: auto !important;
}
        


}
   /* ================== END BRICKS RESET LAYER ========================== */  
} /* END MEDIA QUERY*/
@media (min-width: 1201px) {
  .dwc-mobile header {
    display: none;
  }

  @layer bricks.reset {
    .brx-dropdown-content:not(.brx-submenu-positioned) {
      display: flex !important;
    }
  }

  /*sidebar nav fouc fix*/
  .dwc-mobile .dwc-header-inner-wrap {
    max-height: 70px !important;

  }

  .dwc-mobile .dwc-header-inner-wrap .dwc-nest-menu {
    display: none !important;
  }

  /* CENTERED LOGO*/

  /*force center align for centered logo menu */

  .dwc-nest-header__container.dwc-logo-is-centered {
    justify-content: center;
  }

  .dwc-logo-is-centered .dwc-nest-menu .brx-nav-nested-items {
    justify-content: center;
  }


  /*remvoe bricks default margin left*/
  #brx-header .dwc-logo-is-centered .dwc-nest-menu li:not(.brx-dropdown-content *) {

    margin-inline: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* prevent logo from shrinking on sceen resize*/
  #brx-header .dwc-logo-is-centered .dwc-header-logo-item {
    flex-shrink: 0;
  }

  .dwc-center-guide {
    background-color: rgba(132, 255, 0, 0.32);
    position: fixed;
    top: 0;
    bottom: 0;
    align-self: center;
    height: 100dvb;
    z-index: 9999;
    pointer-events: none;
  }

  body:not(:has([data-fix-centered-logo-fouc="true"])) .dwc-center-guide::before {
    content: 'To fix FOUC on the header, Go to Header Pro div > Attribute > data-fix-centered-logo-fouc, set the value to "true"';
    position: absolute;
    top: 30vh;
    padding: 1rem;
    background-color: white;

  }

  .dwc-logo-is-centered .dwc-menu-wrap {
    inline-size: 100%
  }



  .dwc-nest-header .brx-nav-nested-items {
    transition-property: opacity, transform;
  }

  body.show-content:has([data-fix-centered-logo-fouc="true"]):not(:has(.dwc-logo-is-centered))::before {
    content: 'Go to the Header Pro section > Attribute > data-fix-centered-logo-fouc, remove the value "true" OR enable Centered Logo';
  }

}

/*=======================================  MIN WIDTH MEDIA QUERY ENDS  ==============================================================*/

body:has([data-overlay-header="true"]) .dwc-nest-menu-overlay {
  inset-block-start: 0;
}


/*fix centered logo fouc*/
html:not(.dwc-mobile) .bricks-is-frontend header:has([data-fix-centered-logo-fouc="true"]):not(.desktop-centered header) {
  opacity: 0;
}

/*end fix fouc*/

html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content, .brx-has-megamenu .brx-dropdown-content) {
  inset-inline-start: 0 !important;
}


html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content .brx-dropdown-content:not(.brx-sub-submenu-overflow-right, .brx-submenu-overflow-right) {
  inset-inline-start: 100% !important;
}


html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
  min-inline-size: var(--multilevel-dropdown-width) !important;
}

html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content {
  box-shadow: var(--dropdown-content-shadow);
}

html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content>* {
  max-block-size: calc(95dvb - calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin !important;
}

.dwc-nest-menu[data-submenu-reveal="expand"] .brx-nav-nested-items>.brxe-dropdown:not([data-submenu-reveal="slide"], .brx-has-megamenu)>.brx-submenu-toggle {
  transform: translateY(0);
  z-index: 9999;
}


.dwc-nest-toggle--open.brxe-toggle .brxa-inner:before {
  block-size: var(--open-icon-line-height);
  inset-inline-end: var(--open-icon-align);
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:before {
  inline-size: var(--open-icon-size);
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):before {
  inset-block-start: calc(var(--icon-line-gap) * -1);
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):after {
  inset-block-end: calc(var(--icon-line-gap) * -1);
}

.dwc-nest-toggle--open.brxe-toggle .brxa-inner {
  block-size: var(--open-icon-line-height);
  inset-inline-end: var(--open-icon-horizontal-offset);
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner {
  inline-size: var(--iw);
}



.dwc-nest-toggle--open.brxe-toggle .brxa-inner:after {
  block-size: var(--open-icon-line-height);
  inset-inline-end: var(--open-icon-align);
}

.dwc-nest-toggle--open.brxa--vortex .brxa-inner:after {
  inline-size: var(--aw);
}


.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:after,
.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner {
  inline-size: calc(var(--iw) * var(--open-icon-close-offset));
}


.dwc-nest-toggle--open.brxa--vortex .brxa-wrap {
  inline-size: var(--open-icon-size)
}

.dwc-nest-toggle--open .brxa-inner,
.dwc-nest-toggle--open .brxa-inner:after,
.dwc-nest-toggle--open .brxa-inner:before {
  background-color: var(--menu-toggle-clr)
}

.dwc-nest-menu.brxe-nav-nested .brxe-toggle[aria-label="Close Menu"] i {
  color: var(--menu-close-toggle-clr)
}

.dwc-nest-toggle--open .brxa-wrap:hover .brxa-inner,
.dwc-nest-toggle--open .brxa-wrap:hover .brxa-inner:after,
.dwc-nest-toggle--open .brxa-wrap:hover .brxa-inner:before {
  background-color: var(--menu-toggle-hover-clr) !important
}

/* icon animation */

.dwc-nest-toggle--open.brxa--vortex .brxa-inner {
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner {
  transform: rotate(225deg);
  transition-timing-function: ease-in-out;
}

.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:before {
  opacity: 0;
  inset-block-start: calc(var(--icon-line-gap) * -1);
  inline-size: 0px !important;
}

.dwc-nest-toggle--open .brxa-inner:before {
  transition-duration: 0.25s;
  transition-property: inline-size, tansform !important;

}



/* MENU ITEMS SPACING AND COLOR*/
/* Shared styles for both menu types */
.dwc-nest-menu .brx-nav-nested-items>li>a,
.dwc-nest-menu .brx-nav-nested-items>li .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content>.menu-item>a {
  font-weight: var(--menu-item-font-weight);
  font-size: var(--menu-item-font-size);
  color: var(--menu-item-clr);
  background-color: var(--menu-item-bg);
  inline-size: 100%;
}

.dwc-nest-menu .brx-dropdown-content>.brxe-dropdown>.brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content>.menu-item>a {
  --menu-item-font-size: var(--dropdown-item-font-size)
}

/* Specific padding for nested menu items */
.dwc-nest-menu .brx-nav-nested-items>li>a,
.dwc-nest-menu .brx-nav-nested-items>li.brx-has-megamenu .brx-submenu-toggle {
  padding-block: var(--menu-item-block-padding);
  padding-inline: var(--menu-item-inline-padding) !important;
}

/* Specific padding for dropdown items */

.dwc-nest-menu .brx-dropdown-content>.menu-item>a {
  padding-block: var(--dropdown-item-block-padding);
  padding-inline: var(--dropdown-item-inline-padding) !important;
}

.dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle {
  padding-block: var(--dropdown-item-block-padding);
  padding-inline: var(--dropdown-item-inline-padding) !important;
}

.dwc-nest-menu .brx-nav-nested-items>li:not(.brx-has-megamenu) .brx-submenu-toggle:not(.brxe-dropdown li .brx-submenu-toggle) {
  padding-block: var(--menu-item-block-padding);
  padding-inline: var(--menu-item-inline-padding) !important;

}


.dwc-nest-menu .brx-dropdown-content>.menu-item>a:not([aria-current="page"], li:hover > *),
li:not(.brx-has-megamenu) .brx-submenu-toggle:not(.brx-nav-nested-items > li > *, li:hover > *) {
  color: var(--dropdown-item-clr) !important;
}

.dwc-nest-nav-dropdown-link {
  color: var(--menu-item-clr);
}


/* DROPDOWN MENU ITEMS BG COLOR */
.dwc-nest-menu .brx-dropdown-content>.menu-item>a:not(.brx-has-megamenu a),
li:not(.brx-has-megamenu) .brx-submenu-toggle:not(.brx-nav-nested-items > li > *) {
  background-color: var(--dropdown-item-bg)
}

/* DROPDOWN BG COLOR */
.dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
  background-color: var(--dropdown-content-bg);
}

/* DROPDOWN BORDER RADIUS */
.dwc-nest-menu .brx-nav-nested-items  .brxe-dropdown:not(.brx-has-megamenu) li :is(.brx-submenu-toggle, .brxe-text-link){
border-radius: var(--dropdown-item-radius)

}


/* HOVER STYLES */
.dwc-nest-menu .brx-nav-nested-items>li:hover>a,
.dwc-nest-menu .brx-nav-nested-items>li:hover>.brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content>li:hover>.brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content>.menu-item:hover>a {
  color: var(--menu-item-hover-clr);
  background-color: var(--menu-item-hover-bg)
}

.dwc-nest-nav-dropdown-link:hover {
  color: var(--menu-item-hover-clr);
}

.dwc-nest-menu .brx-nav-nested-items>li>a:not(.dwc-nest-menu__logo, [data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a):hover::before,
.dwc-nest-menu .brx-nav-nested-items>li>a:not(.dwc-nest-menu__logo, [data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a):focus-visible::before,
.dwc-nest-menu .brx-nav-nested-items>li:hover>.brx-submenu-toggle::before,
.dwc-nest-menu .brx-nav-nested-items>li:focus-within>.brx-submenu-toggle::before {
  content: '';
  background-color: var(--menu-item-hover-border-bg);
  inline-size: 100%;
  block-size: var(--menu-item-hover-border-height);
  position: absolute;
  inset-block-start: calc(100% - var(--menu-item-hover-border-height));
  inset-inline-start: 0;
}

.dwc-nest-menu .brx-nav-nested-items>li.menu-item:has(> a),
.dwc-nest-menu .brx-nav-nested-items>li.menu-item:has(> .brx-submenu-toggle) {
  position: relative;
}

/* ACTIVE STYLES */
/* links and dropdwon active styles */
.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, li:hover > a, a:hover, [data-last-item-is-button="true"] .menu-item:last-of-type a,
  [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a),
.dwc-nest-menu .brx-nav-nested-items>li:has([aria-current="page"]:not(.dwc-exclude)):not(li:hover)>.brx-submenu-toggle {
  color: var(--menu-item-active-clr);
  background-color: var(--menu-item-active-bg);
}

.dwc-nest-menu .brx-nav-nested-items .brx-submenu-toggle>a[aria-current="page"] {
  background-color: initial !important;
}

.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brx-submenu-toggle a, .brxe-button, .dwc-exclude, .dwc-exclude a, [data-last-item-is-button="true"] .menu-item:last-of-type a,
  [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a,
  [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo),
html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items>li .brx-submenu-toggle {
  position: relative;
  height: 100%;
}


.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, [data-last-item-is-button="true"] .menu-item:last-of-type a,
  [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a,
  [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo, .brx-submenu-toggle > a)::before,
.dwc-nest-menu .brx-nav-nested-items>li:has([aria-current="page"]:not(.dwc-exclude))>.brx-submenu-toggle::before {
  content: '';
  background-color: var(--menu-item-active-border-bg);
  inline-size: 100%;
  block-size: var(--menu-item-active-border-height);
  position: absolute;
  inset-block-start: calc(100% - var(--menu-item-active-border-height));
  inset-inline-start: 0;
}

.dwc-nest-menu .brx-nav-nested-items>li:has([aria-current="page"]:not(.dwc-exclude))>.brx-submenu-toggle> :is(a, svg, button, span) {
  color: var(--menu-item-active-clr);
}


/* DROPDOWN HOVER BG */
.dwc-nest-menu .brx-dropdown-content>li:hover>.brx-submenu-toggle:not(.brx-has-megamenu *, .dwc-mobile .open.active > *),
.dwc-nest-menu .brx-dropdown-content>.menu-item:hover>a:not(.brx-has-megamenu a) {
  background-color: var(--dropdown-item-hover-bg);
  color: var(--dropdown-item-hover-clr);
}


.dwc-nest-menu.brxe-nav-nested .brx-submenu-toggle {
  justify-content: space-between;
}



/* MENU ITEMS COLOR */
.dwc-nest-menu .brx-nav-nested-items>li .brx-submenu-toggle :where(span, a, svg) {
  color: inherit;
  font-weight: inherit;
}

/* CHEVRON */
.dwc-nest-menu .brx-nav-nested-items>li:not(li:has([aria-current="page"]:not(.dwc-exclude)), li:hover) .brx-submenu-toggle svg {
  color: var(--chevron-clr);
}

.dwc-nest-menu .brx-nav-nested-items>li .brx-submenu-toggle svg {
  font-size: var(--chevron-size);
  color: var(--chevron-clr);
}

.dwc-nest-menu .brx-nav-nested-items>li:has([aria-current="page"]:not(.dwc-exclude))>.brx-submenu-toggle svg,
.dwc-nest-menu .brx-nav-nested-items li:hover>.brx-submenu-toggle svg {
  color: var(--chevron-hover-clr);
}

[data-align-dropdown-top="true"] .brx-dropdown-content .brxe-dropdown {
  position: static;
}

.brx-dropdown-content:not(.brx-has-megamenu .brx-dropdown-content) {
  padding-inline-end: 0 !important;
}



/*OVERLAY*/
body:has([data-hide-overlay="true"]) .dwc-nest-menu-overlay {
  display: none;
}


/* ===========DESKTOP ONLY ============== */

:is(html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"]) [data-mobile-top-transparent="true"]) :is(.dwc-nest-menu-top:not([data-below-header="true"] *, :has(.open.active)),
  .dwc-nav-wrapper:not([data-below-header="true"] *, :has(.open.active))) {
  background-color: transparent !important;
}



html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"])[data-last-item-is-button="true"]) :is(.dwc-menu-wrap, .dwc-nest-menu) {
  inline-size: 100%;
}

html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items>li:is(:last-of-type, :first-of-type) {
  margin-inline-start: auto;
}

html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items>li:is(:last-of-type) {
  margin-inline-start: auto;
}

html:not(.dwc-mobile) .dwc-nest-tooltip {
  display: none;
}


html:not(.dwc-mobile) .open:has(.open) .open:has(.brxe-dropdown:hover) .brx-dropdown-content {
  box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 30%);
}

/* EXTEND DROPDWON BUTTON TO AVOID LOSING FOCUS/CLOSING ON DROPDOWN CONTENT */

html:not(.dwc-mobile) .dwc-nest-menu .open .brx-dropdown-content .brxe-dropdown:has(> .brx-sub-submenu-overflow-right):hover::after {
  inset-inline-end: 100%;
  transform: translateX(0%);
}

html:not(.dwc-mobile) .dwc-nest-menu .open .brx-dropdown-content .brxe-dropdown:not(.brxe-dropdown:has(> .brx-sub-submenu-overflow-right)):hover::after {
  inset-inline-start: 100%;
  transform: translateX(0%);
}


html:not(.dwc-mobile) .dwc-nest-menu .open .brx-dropdown-content .brxe-dropdown:hover::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  block-size: 100%;
  inline-size: 100%;
  z-index: -1;
}



/*DIM DROPDOWN PARENT WHOSE CHILD DROPDOWN CONTENT IS SHOWING  */
html:not(.dwc-mobile) .open:has(.open)>.brx-dropdown-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--dropdown-inactive-overlay);
  pointer-events: none;
  border-radius: var(--dropdown-content-border-radius);
  z-index: 1;
}

html:not(.dwc-mobile) .open:has(.open)>.brxe-dropdown:not(.open) {
  position: static;
}

html:not(.dwc-mobile) .open:has(.open)>.brxe-dropdown:not(.open)>ul {
  opacity: 0;
  transition: 0s
}

html:not(.dwc-mobile) .brxe-dropdown.open:not(.brx-has-megamenu) {
  z-index: 1;
}

/* LAST BUTTON LEFT PADDDING ON DESKTOP */
html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type {
  padding-inline-start: var(--menu-item-inline-padding);
}


html:not(.dwc-mobile) [data-show-mobile-logo="true"] .dwc-nav-wrapper {
  z-index: 9999
}



/* mobile logo */
html:not(.dwc-mobile) .dwc-nest-menu__mobile-logo {
  display: none;
}


.dwc-mobile [data-hide-close-bar='true'] .dwc-nav-wrapper {
  inset-block-start: var(--dwc-nest-header-height)
}


/* mobile menu from top behind header */

/* .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper {
  z-index: -1;
} */

.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper:not(:has(.brxe-dropdown.open)),
.dwc-mobile [data-overlay-header-mobile="true"] :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper{
    z-index: -1;
}

.dwc-mobile .bricks-is-frontend #brx-header > .dwc-nest-header[data-overlay-header-mobile="true"]:not(:has([data-offcanvas="true"]))::before {
    backdrop-filter: blur(var(--overlay-header-blur));
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--overlay-header-radius);
}


.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-match-overlay-header-width="true"], [data-submenu-reveal="expand"]) 
.dwc-nav-wrapper:has(.brxe-dropdown.open.active) {
    z-index: unset !important;
}

.dwc-mobile .dwc-nest-header:not([data-allow-overlay-mobile-opacity="true"]) .dwc-nest-header__container:has(:is([data-slide-in-direction="top"], [data-slide-in-direction="top left"])) {
  background-color: var(--header-bg)
}



html:not(.dwc-mobile) .dwc-nest-header {
  position: relative;
}


/****************
MENU OVERLAY
***************/

.dwc-nest-menu-overlay {
  position: fixed;
  inset-block-start: var(--dwc-nest-header-height);
  inline-size: 100%;
  block-size: 100%;
  background: var(--nav-overlay-backdrop-clr) !important;
  z-index: 2;
  opacity: 0;
  transition: 0.4s;
  backdrop-filter: blur(var(--nav-overlay-backdrop-blur));
}


.dwc-nest-header:has(.dwc-nest-menu-overlay) .brxe-nav-nested {
  z-index: 3
}


[data-overlay-header=true].dwc-nest-header .dwc-nest-menu-overlay {
  display: none;
}


.logged-in .dwc-nest-menu-overlay:not(:has(+ .x-header)) {

  inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height));

}



.dwc-nest-menu-overlay {
  pointer-events: none;
}


.no-scroll .dwc-nest-menu-overlay {
  opacity: 1;
}



/*fade in back button*/
@-webkit-keyframes dwc-nest-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* configurable menu and submenu slide out speed */
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper) {
  transition-duration: calc(0.5s / var(--slide-out-speed)) !important;
}

#brx-header {
  --content-gap: 0;
  --at-container-gap: 0;
}


/* overlay header */
html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header="true"]) {
  padding: var(--overlay-header-inset);
}


html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header="true"]):not(.brx-sticky) {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

html:not(.dwc-mobile) .bricks-is-frontend #brx-header>.dwc-nest-header[data-overlay-header="true"] {
  border-radius: var(--overlay-header-radius);
  background-color: var(--overlay-header-bg);
  box-shadow: var(--overlay-header-shadow);
  max-inline-size: var(--overlay-header-width);
}

html:not(.dwc-mobile) .bricks-is-frontend #brx-header>.dwc-nest-header[data-overlay-header="true"] {
  backdrop-filter: blur(var(--overlay-header-blur));
}


html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has(.open)>.dwc-nest-header[data-overlay-header="true"] {
  background-color: var(--overlay-header-bg-active) !important;
}

/* overlay on mobile */
.dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile="true"]) {
  padding: var(--overlay-header-inset);
}

.dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile="true"]):not(.brx-sticky) {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

.dwc-mobile .bricks-is-frontend #brx-header>.dwc-nest-header[data-overlay-header-mobile="true"] {
  border-radius: var(--overlay-header-radius);
  background-color: var(--overlay-header-bg);
  box-shadow: var(--overlay-header-shadow);
  max-inline-size: var(--overlay-header-width);
}

/*offset hero top padding when overlay header is active */
#brx-header:has([data-offset-section-padding="true"])+main> :is(section:first-child, div:first-child) {
  padding-block-start: var(--overlay-offset-padding);
}

html:not(.dwc-mobile) .bricks-is-frontend:has(.dwc-nest-menu .open) .dwc-nest-menu-overlay {
  opacity: 1;
}

/*menu items border radius desktop only*/
html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items>li>:is(a:not([data-last-item-is-button="true"] .menu-item:last-of-type a), .brx-submenu-toggle) {
  border-radius: var(--menu-item-radius);
}

html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items {
  gap: var(--menu-items-gap);
}

/* dynamic dropdown conten width and position */

html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) {
  min-inline-size: var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;
  inset-inline-start: var(--left-position) !important;
}

html:not(.dwc-mobile) .dwc-nest-menu .brx-dropdown-content {
  border-radius: var(--dropdown-content-border-radius);
}

.dwc-nest-header {
  position: relative;
  z-index: 9999;

}



html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown::after {
  border-top: var(--dropdown-content-border);
  border-left: var(--dropdown-content-border);
  z-index: 9999;
  inset-block-end: calc(var(--dropdown-content-gap) * -1.55);

}

html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown .brx-dropdown-content {
  outline: var(--dropdown-content-border);
}

/* optimize multi row header*/
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] {
  --dwc-nest-header-height: var(--dwc-header-div-height) !important
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
  background-color: var(--mobile-menu-topbar-bg) !important;
  align-items: center !important;
  animation: none !important;
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper {
  z-index: 99999
}

.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top .brxe-toggle {
  display: block;
}


.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]:not([data-hide-mobile-logo="true"]) .dwc-nest-menu__mobile-logo {
  display: flex;
}

/* overlay header on multirow*/
html:not(.dwc-mobile) .dwc-nest-header[data-fullscreen-mobile-menu="true"][data-overlay-header="true"]>div:first-child {
  border-top-left-radius: var(--overlay-header-radius);
  border-top-right-radius: var(--overlay-header-radius);
}

/* BricksExtras support*/

html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:has(.dwc-nest-header) {
  position: relative;
  z-index: 1;
}

html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:first-child {
  position: relative;
  z-index: 99991;
}


[data-x-overlay]:not([data-x-overlay="none"]) .dwc-nest-header {
  background: var(--x-overlay-header-background) !important;
}


.brx-nav-nested-items>li:has(.brxe-xheadersearch) {
  position: static !important;
}

.dwc-mobile .brx-nav-nested-items>li .brxe-xheadersearch {
  position: relative;
  width: 100%;
}



/* preview dropdown content width in builder*/

[data-builder-mode] .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content {
  min-inline-size: var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;
  transform: translatex(50px);
  border: dotted #00b0f4 2px
}

[data-builder-mode] .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not(.brx-open .brx-dropdown-content):not([data-hide-instruction="true"])::after {
  content: 'Set dropdown Content width value in dropdown Content ATTRIBUTES > data-content-width, do not add a unit e.g. px. Leave empty to use global content width, set in Nav Nestable ATTRIBUTES > data-global-content-width. | Set alignment in ATTRIBUTES > data-content-align, values: left, right, center. This aligns the dropdown content to the dropdown button, leave empty to align center to the header. aligments are applied on frontend only. | TIP: click here to select dropdown Content';
  position: absolute;
  inset-block-start: 102%;
  color: #e1e1e1;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.5;
  background: #2b2b2b;
  min-block-size: fit-content;
  padding: 1em;
}





.dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not(.show-content .brx-dropdown-content, [data-builder-mode] .brx-dropdown-content) {
  display: none;
}

/*fix overlay in boxed mode*/
.brx-boxed .dwc-nest-menu-overlay {
  inline-size: var(--boxed-width, 100%);
  inset-inline-start: 50%;
  transform: translateX(-50%);
}


/* LAST CTA BUTTONS */

/* Button styling for FRIST BUTTON*/
:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type a {
  color: var(--menu-cta-clr);
  background-color: var(--menu-cta-bg);
  border-radius: var(--menu-cta-radius) !important;
  padding-inline: var(--menu-cta-inline-padding) !important;
  padding-block: var(--menu-cta-block-padding) !important;
  border: var(--menu-cta-border);
}

:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(1) a:hover {
  color: var(--menu-cta-hover-clr);
  background-color: var(--menu-cta-hover-bg);
}

/* Button styling for second button*/
:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(2) a {
  color: var(--menu-cta-2-clr);
  background-color: var(--menu-cta-2-bg);
  border-radius: var(--menu-cta-2-radius) !important;
  padding-inline: var(--menu-cta-2-inline-padding) !important;
  padding-block: var(--menu-cta-2-block-padding) !important;
  border: var(--menu-cta-2-border);
}

:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(2) a:hover {
  color: var(--menu-cta-2-hover-clr);
  background-color: var(--menu-cta-2-hover-bg);
}

/* Button styling for third button */
[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(3) a {
  color: var(--menu-cta-3-clr);
  background-color: var(--menu-cta-3-bg);
  border-radius: var(--menu-cta-3-radius) !important;
  padding-inline: var(--menu-cta-3-inline-padding) !important;
  padding-block: var(--menu-cta-3-block-padding) !important;
  border: var(--menu-cta-3-border);
}

[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(3) a:hover {
  color: var(--menu-cta-3-hover-clr);
  background-color: var(--menu-cta-3-hover-bg);
}

/* Adjust padding for all variants in desktop mode */
html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type,
html:not(.dwc-mobile) [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2),
html:not(.dwc-mobile) [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) {
  padding-inline-start: var(--menu-item-inline-padding);
}

/* Center alignment for single button case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items>li:is(:last-of-type, :first-of-type) {
  margin-inline-start: auto;
}

/* Center alignment for two buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items>li:is(:nth-last-of-type(2), :first-of-type) {
  margin-inline-start: auto;
}

/* Center alignment for three buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items>li:is(:nth-last-of-type(3), :first-of-type) {
  margin-inline-start: auto;
}

/* Left alignment for single button case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items>li:last-of-type {
  margin-inline-start: auto;
}

/* Left alignment for two buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items>li:nth-last-of-type(2) {
  margin-inline-start: auto;
}

/* Left alignment for three buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items>li:nth-last-of-type(3) {
  margin-inline-start: auto;
}

/* General width rule for all button cases and alignments */
html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"]):is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"])) :is(.dwc-menu-wrap, .dwc-nest-menu) {
  inline-size: 100%;
}


/* align dropdown content to bottom */
html:not(.dwc-mobile) .dwc-nest-header__container:has([data-align-content-bottom="true"]) {
  align-items: stretch !important;
}

html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .dwc-nav-wrapper,
html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .brx-nav-nested-items,
html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .brx-nav-nested-items>.brxe-dropdown,
html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .brx-nav-nested-items>.brxe-dropdown>.brx-submenu-toggle,
html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .brx-nav-nested-items>li>a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo)

/* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a)*/
  {
  height: 100%;
}

html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .brx-nav-nested-items>li.menu-item {
  height: 100%;
  display: flex;
  align-items: center;
}

/* dropdown content gap */
html:not(.dwc-mobile) .dwc-nest-menu:not(.brx-open) .brxe-dropdown.open>.brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content) {
  transform: translateY(calc(var(--caret-size) - var(--dropdown-content-border-size))) scaleX(1) scaleY(1);
}

html:not(.dwc-mobile) .dwc-nest-menu .brxe-dropdown.open>.brx-dropdown-content .brx-dropdown-content {
  transform: translateY(0) scaleX(1) scaleY(1);
}

html:not(.dwc-mobile) .brx-dropdown-content:not(.open *){
    --dropdown-content-border: solid transparent var(--dropdown-content-border-size);
}

/* caret on dropdown (non stripe) */


html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"] .brx-nav-nested-items>.brxe-dropdown::after {
    content: '';
    position: absolute;
    background-color: var(--dropdown-content-bg);
    transform: rotate(45deg);
    inset-block-end: calc((-1 * var(--dropdown-content-gap) - (var(--dropdown-content-gap) * 1.414 / 2.0)) + var(--dropdown-content-border-size));
    inset-inline-start: calc(50% - var(
  --dropdown-content-gap));
    opacity: 0;
}

html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"] .brx-nav-nested-items>.brxe-dropdown.open::after {
 inline-size: calc((var(--dropdown-content-gap) * 1.414) - var(--dropdown-content-border-size));
    aspect-ratio: 1;
    opacity: 1;
    transition: opacity 0.2s 0.1s;
}

body:not(.show-content) .brxe-dropdown::after {
  display: none;
}

/* multi-level dropdwon arrow > */

html:not(.dwc-mobile) .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button svg {
  transform: rotate(270deg);
}



/* align dropwdown in builder */
[data-builder-mode] .brx-has-megamenu .brx-dropdown-content[data-content-align="left"][preview-alignment="true"] {
  left: 0 !important;
  right: auto !important;
}

[data-builder-mode] .brx-has-megamenu .brx-dropdown-content[data-content-align="right"][preview-alignment="true"] {
  left: auto !important;
  right: 0 !important;
}

[data-builder-mode] .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content[data-content-align="center"][preview-alignment="true"] {
  left: 50% !important;
  transform: translatex(-50%) !important;
}

/* BREAKOUT ITEM */

.dwc-nest-menu>[data-breakout-link]:not(.dwc-nest-menu__logo) {
  color: var(--menu-cta-clr);
  background-color: var(--menu-cta-bg);
  border-radius: var(--menu-cta-radius) !important;
  padding-inline: var(--menu-cta-inline-padding) !important;
  padding-block: var(--menu-cta-block-padding) !important;
  border: var(--menu-cta-border);
}

.dwc-nest-menu>[data-breakout-link="before"],
.dwc-nest-menu>[data-breakout-link]:not([data-breakout-link="after"], .dwc-nest-menu__logo) {
  margin-inline-end: var(--cta-breakout-gap);
  margin-inline-start: auto;
}

.dwc-nest-menu>[data-breakout-link="after"] {
  margin-inline-start: var(--cta-breakout-gap);
  order: 1;
}

.dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]),
.brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]) {
  inline-size: 100% !important;
}

.dwc-nest-header__container:has(.brx-nav-nested-items .dwc-nest-menu__logo[data-breakout-link]) {
  flex-direction: column !important;
  justify-content: center !important;
}

.dwc-nest-menu>[data-breakout-link="after"]+.brxe-toggle[aria-label="Open Menu"] {
  margin-inline-start: auto;
}


/* BREAKIN ITEM */

.dwc-mobile .dwc-nav-wrapper:has([data-breakin]) {
  background: linear-gradient(to top, var(--mobile-menu-bg) 0%, var(--mobile-menu-bg) calc(100% - var(--dwc-nest-header-height)), transparent calc(100% - var(--dwc-nest-header-height)), transparent 100%);
}


.dwc-mobile .dwc-nav-wrapper:has([data-breakin]) .breakin-container {
  inline-size: 100%;
}

.dwc-mobile .dwc-nav-wrapper:has([data-breakin="end"]) .breakin-container {
  margin-block-start: auto;
}

html:not(.dwc-mobile) .breakin-container {
   order: 0 !important;
  visibility: hidden !important;
}


/* ==== DYNAMIC NAV CUSTOM CSS ==== */

[data-builder-mode] .dwc-nest-menu .brx-nav-nested-items>a:not(.dwc-nest-menu__logo) {
  font-weight: var(--menu-item-font-weight);
  font-size: var(--menu-item-font-size);
  color: var(--menu-item-clr);
  background-color: var(--menu-item-bg);
  padding-block: var(--menu-item-block-padding);
  padding-inline: var(--menu-item-inline-padding) !important;

}


[data-builder-mode] .dwc-nest-menu .brx-dropdown-content>a:not(.brx-has-megamenu a) {
  background-color: var(--dropdown-item-bg);
  padding-block: var(--dropdown-item-block-padding);
  padding-inline: var(--dropdown-item-inline-padding) !important;
  font-weight: var(--menu-item-font-weight);
  font-size: var(--menu-item-font-size);
  color: var(--menu-item-clr);
  inline-size: 100%;
}

[data-builder-mode] .dwc-nest-menu .brx-dropdown-content>a:hover:not(.brx-has-megamenu a) {
  background-color: var(--dropdown-item-hover-bg);
  color: var(--dropdown-item-hover-clr);
}


body:not([data-builder-mode]) .dwc-nest-menu .brx-nav-nested-items>li:empty {
  visibility: hidden;
}


.dwc-nest-menu .brx-nav-nested-items > * > .brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle {
    padding-block: var(--dropdown-item-block-padding);
    padding-inline: var(--dropdown-item-inline-padding) !important;
}

/* ==== END DYNAMIC NAV CUSTOM CSS ==== */



/* CARET FIX FOR DYNAMIC MENU STRUCTURE*/


.dwc-nest-menu .brx-nav-nested-items>li>.brx-has-megamenu.open>.brx-dropdown-content {
  opacity: 1;
  visibility: visible;
}

html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items>li:has(.brx-has-megamenu.open):not(.dwc-stripe-style .brx-nav-nested-items > li)::after {
  inline-size: calc(var(--dropdown-content-gap) * 1.2);
  block-size: calc(var(--dropdown-content-gap) * 1.2);
  opacity: 1;
  transition: opacity 0.2s 0.1s;
}

html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items>li:has(.brx-has-megamenu):not(.dwc-stripe-style .brx-nav-nested-items > li)::after {
  content: '';
  position: absolute;
  background-color: var(--dropdown-content-bg);
  transform: rotate(45deg);
  inset-block-end: calc(var(--dropdown-content-gap) * -1.6);
  inset-inline-start: calc(50% - var(--dropdown-content-gap));
  opacity: 0;
}


html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items>li {
  height: 100%;
  display: flex;
  align-items: center;
}

html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items>li>.brxe-dropdown>.brx-submenu-toggle,
html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items>li>.brxe-dropdown {
  height: 100%
}

.brx-nav-nested-items>li:has(> a),
.brx-nav-nested-items>li:has(> .brx-submenu-toggle) {
  position: relative;
}

/* END CARET FIX FOR DYNAMIC MENU STRUCTURE*/


/* SPECIAL MOBILE STYLES TABLET ONLY */


@media (min-width: 640px) and (max-width: 1200px) {

  /* mega menu */
  .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .dwc-nav-wrapper {
    --mobile-menu-width: min(720px, 100%);
    align-items: flex-end;
  }

  .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
    inline-size: min(400px, 100%);
    box-shadow: 0px 0px 15px -10px #000000b3
  }

  .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    inset-block-start: 0 !important;
  }

  /*dropdown*/


  .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
  .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
    transition-property: inset-inline-start, inset-inline-end, visibility, opacity !important;
    inset-inline-start: auto !important;
    width: 400px;
    box-shadow: 0px 0px 15px -10px #000000b3;
    inset-block-start: 0 !important;
    inset-inline-end: -100% !important;
  }

  .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
  .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
  .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
    inset-inline-end: 0% !important;
    inset-inline-start: auto !important;
  }

  /*active styles*/
  .dwc-mobile [data-mobile-special-style="slide-split"] .brx-nav-nested-items>li>.brx-has-megamenu.open>.brx-submenu-toggle {
    background-color: var(--menu-item-active-bg);
  }

  .dwc-mobile [data-mobile-special-style="slide-split"] .brx-nav-nested-items>li.open>.brx-submenu-toggle {
    background-color: var(--menu-item-active-bg);
  }


}

/* END SPECIAL MOBILE STYLES TABLET ONLY */

/* OVERLAY HEADER NO TOP GAP */

    .bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
        inset-block-start: 0 !important;
        }
        
        /* .bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
             inset-block-start: calc((var(--dwc-nest-header-height) * 1.2) * -1) !important;
        } */
        
        .bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle > button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) {
          inset-block-start: calc(var(--dwc-nest-header-height) / 2);
           
        }
        
        .bricks-is-frontend #brx-header > 
        .dwc-nest-header[data-overlay-header-no-top-gap="true"] {
            border-top-left-radius: 0 !important;
            border-top-right-radius: 0 !important;
        }
        
         .bricks-is-frontend 
        #brx-header:has([data-overlay-header-no-top-gap="true"]) {
            padding-block-start: 0 !important;
        }

/* END OVERLAY HEADER NO TOP GAP */


/* DROPDOWN ITEM IS BUTTON OR ICON */

/* IS ICON */
.brxe-dropdown[data-is-icon] {
  padding-inline: var(--menu-item-inline-padding);
}

/* remove the underline */
.brxe-dropdown[data-is-icon]>.brx-submenu-toggle::before {
  display: none;
}

/* general styling */
.dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown[data-is-icon]>.brx-submenu-toggle {
  height: auto !important;
  width: auto;
  min-width: var(--button-max-diameter);
  aspect-ratio: 1;
  border-radius: var(--menu-item-radius) !important;
  padding: 0 !important;
  margin-inline-start: auto;
  margin-block: auto;
  transition: 0.4s;
  border: var(--menu-item-border)
}

.dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown[data-is-icon]:hover>.brx-submenu-toggle {
  border: var(--menu-item-hover-border)
}

.dwc-mobile .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown[data-is-icon]>.brx-submenu-toggle {
  max-width: var(--button-max-diameter);
}


/* centralize */
.brxe-dropdown[data-is-icon]>.brx-submenu-toggle>button {
  margin: auto;
  color: var(--icon-clr);
  font-size: var(--icon-size);
}

.brxe-dropdown[data-is-icon]:hover>.brx-submenu-toggle>button {
  color: var(--icon-hover-clr);
}

/* reset rotation on icon when hovered */
.brxe-dropdown[data-is-icon]>.brx-submenu-toggle button[aria-expanded="true"]>* {
  transform: rotateZ(0deg);
}

/* reset margin left on mobile*/
.dwc-mobile .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown[data-is-icon]>.brx-submenu-toggle {
  margin-inline-start: initial;
}

/* remove inner span from document flow and hide visually*/

.brxe-dropdown[data-is-icon]>.brx-submenu-toggle>span {
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal !important;
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  overflow-wrap: normal !important;
  padding: 0;
  position: absolute !important;
  width: 1px;
}

/* IS ICON ENDS */

/* IS BUTTON */

.brxe-dropdown[data-is-button]>.brx-submenu-toggle {
  height: auto !important;
  margin-block: auto;
  border-radius: var(--menu-item-radius) !important;
  max-width: var(--menu-item-width);
  border: var(--menu-item-border);
}

.brxe-dropdown[data-is-button]:hover>.brx-submenu-toggle {
  border: var(--menu-item-hover-border)
}

/* centralize text in span */

.brxe-dropdown[data-is-button]>.brx-submenu-toggle>span {
  margin-inline: auto;
}

/* remove button from document flow to allow text to centralize, but keep accessible*/
.brxe-dropdown[data-is-button="no-chevron"]>.brx-submenu-toggle>button {
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal !important;
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  overflow-wrap: normal !important;
  padding: 0;
  position: absolute !important;
  width: 1px;
}

/* block padding on mobile */
.dwc-mobile .brxe-dropdown:is([data-is-icon], [data-is-button]) {
  padding-block: var(--menu-item-block-padding);
  padding-inline: var(--menu-item-inline-padding);
}

/* IS BUTTON ENDS */

/* DROPDWON ITEM IS BUTTON OR ICON ENDS */

/* RTL */

html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) {
  inset-inline-end: var(--right-position) !important;
}


html:not(.dwc-mobile)[dir=rtl] .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button svg {
  transform: rotate(-270deg);
}

/*RTL ENDS */

/* FIXES */
.dwc-nest-nav-items>li {
  width: auto;
}

li {
  -webkit-tap-highlight-color: transparent;
}

html:not(.dwc-mobile) #brx-header>*:not(.dwc-nest-header, .dwc-sidebar, .dwc-nest-header + *) {
  z-index: 99999;
  position: relative;
}

/* dropdown within a dropdown color/chevron */
li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *, li:hover > *) {
color: var(--dropdown-item-clr);
}

.dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle svg{
    --chevron-clr: var(--dropdown-item-clr);
    --chevron-hover-clr: var(--dropdown-item-hover-clr);

}

/* account for admn bar on mobile menu */
.dwc-mobile .dwc-nav-wrapper {
  inset-block-start: var(--wp-admin--admin-bar--height, 0);
}

.dwc-mobile .brxe-nav-nested.brx-open .brx-nav-nested-items {
  top: 0;
}

/* fix safari issue on fixed element inside scrollable container */
.dwc-mobile .dwc-nest-menu.brxe-nav-nested:not([data-submenu-reveal="expand"]) .brx-nav-nested-items:has(.brxe-dropdown.open.active:not([data-submenu-reveal="expand"])) {
  overflow-y: hidden;
}


/* Only apply to browsers that support attr() with units  */
@supports (width: attr(data-format px)) {
  
[data-builder-mode] .dwc-nest-menu {
		--global-width: attr(builder-preview-content-width px);
	}
  
}


/* Only apply to browsers that DON'T support attr() with units (Firefox) */
@supports not (width: attr(data-format px)) {
  
	[data-builder-mode] .brx-dropdown-content {
		--dropdown-content-width: var(--dropdown-content-default-width) !important;
	}
  
}

body:has(.brx-sticky) [id] {
    scroll-margin-top: var(--dwc-nest-header-height);
}

/* phone landscape */
@media (height < 480px){
.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper) {
    block-size: 100dvb !important;
}

.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
    min-block-size: 100dvb !important;
  overflow-y: auto !important;
}
  
.dwc-mobile [data-overlay-header-mobile="true"] [data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
    z-index: 9999;
    border-radius: var(--overlay-header-radius);
    background-color: var(--overlay-header-bg) !important;
    backdrop-filter: blur(var(--overlay-header-blur));
}
  
  .dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu .brx-dropdown-content {
overscroll-behavior: contain;
}
}

/* match mega menu content width to tabbed nav width when tabbed hero is enabled*/
   
html:not(.dwc-mobile) 
.dwc-nest-menu
.brx-has-megamenu > .brx-dropdown-content:has([data-tabbed-hero="true"]):not(:has(.active:hover)) {
  clip-path: inset(0 calc(100% - var(--tab-list-width)) 0 0);
}

/* automatically remove padding from header div when a block is added to it*/
.dwc-nest-header:has(>.brxe-block){
  padding-inline: 0px;
}

/* add inline padding to a block when it is a direct child of the header div*/
.dwc-nest-header > .brxe-block{
padding-inline: var(--header-inline-padding)
}
/* if a block wraps the header container, inherit the header background color*/
.brxe-block:has(.dwc-nest-header__container){
  background-color:var(--header-bg)
}

/*fix for menu item text color with <font> tag */
.dwc-mobile .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle font, 
.dwc-mobile .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle font{
    color: var(--dropdown-expanded-clr) !important;
}


/* when using special mobile style, allow menu to close when clicking outside the menu*/
.dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper):not(:has(.brxe-dropdown.open)) {
    block-size: fit-content !important;
}
document.body.classList.add('show-content');
document.body.classList.add('show-nav');

function updateMobileClass(minWidth = MegaMenuCONFIG.minWidth) {
    const classList = document.documentElement.classList;
    const viewportWidth = document.documentElement.clientWidth;
    const isMobile = viewportWidth < minWidth;

    if (isMobile) {
        classList.add('dwc-mobile');
    } else {
        classList.remove('dwc-mobile');
    }
}
updateMobileClass();

// Centered Logo functionality
class CenteredLogoController {
    constructor(config = {}) {
        this.config = {
            enable: config.enable ?? CenteredLogoCONFIG.enable,
            allowOddItems: config.allowOddItems ?? CenteredLogoCONFIG.allowOddItems,
            forceCenteredLogo: config.forceCenteredLogo ?? CenteredLogoCONFIG.forceCenteredLogo,
            centerNudge: config.centerNudge ?? CenteredLogoCONFIG.centerNudge,
            roundOffFactor: config.roundOffFactor || CenteredLogoCONFIG.roundOffFactor,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector
        };

        this.logoListItem = null;
        this.listItems = [];
        this.resizedFinished = null;
        this.isInitialized = false;
    }

    // Method to check if DOM elements are ready
    checkDOMReady() {
        const headerLogo = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`);
        const headerInner = document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`);
        const menu = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`);
        const listParent = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`);

        return headerLogo && headerInner && menu && listParent;
    }

    // Early initialization attempt
    initializeEarly() {
        if (!this.config.enable || this.isInitialized) return;

        // Try immediate initialization if elements are ready
        if (this.checkDOMReady()) {
            document.body.classList.add('dom-ready')
            this.setupElements();
            this.initialize();
            return;
        }

        // If not ready, use polling with shorter intervals for faster response
        const pollForElements = () => {
            if (this.checkDOMReady()) {
                this.setupElements();
                this.initialize();
                return;
            }
            // Poll every 10ms for very fast response
            setTimeout(pollForElements, 10);
        };

        pollForElements();
    }

    setupElements() {
        this.elements = {
            headerLogo: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`),
            headerInner: document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`),
            menu: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`),
            listParent: document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`)
        };
    }

    initialize() {

        if (!this.config.enable || this.isInitialized) {
            return;
        }

        // Ensure elements are set up before proceeding
        if (!this.elements) {
            this.setupElements();
        }

        // Check if all required elements exist
        if (!this.elements.headerLogo || !this.elements.headerInner ||
            !this.elements.menu || !this.elements.listParent) {
            return;
        }

        this.isInitialized = true;

        // Create logo list item
        this.logoListItem = document.createElement('li');
        this.logoListItem.classList.add('dwc-header-logo-item');

        // Get list items excluding those with toggle divs, and exclude empty li
        this.listItems = Array.from(this.elements.listParent.children).filter(item => {
            const hasToggleDiv = item.querySelector('.brx-toggle-div');
            const isEmpty = item.matches('li:empty');
            const hasExclude = item.querySelector('.dwc-exclude')
            return !hasToggleDiv && !isEmpty && !hasExclude;
        });

        // Calculate position
        const halfIndex = this.listItems.length / 2;
        const logoOrder = this.roundHalfIndex(halfIndex, this.config.roundOffFactor);
        this.logoListItem.style.order = logoOrder;

        //this.elements.headerInner.classList.add('dwc-logo-is-centered');

        // Apply centering immediately
        this.centerLogo(logoOrder);


        // Add resize listener
        window.addEventListener('resize', this.centerLogo.bind(this, logoOrder));
    }

    roundHalfIndex(halfIndex, roundOffFactor) {
        if (roundOffFactor === 'before') {
            return Math.floor(halfIndex + 1);
        } else {
            return Math.ceil(halfIndex + 1);
        }
    }

    centerLogo(logoOrder) {
        if (!this.config.allowOddItems && this.listItems.length % 2 !== 0) {
            return;
        }

        clearTimeout(this.resizedFinished);



        this.resizedFinished = setTimeout(() => {
            const isDesktop = window.innerWidth >= MegaMenuCONFIG.minWidth;

            if (isDesktop) {
                document.body.classList.add('desktop-centered')
                let listID = 1;

                // Set order for list items
                this.listItems.forEach(listItem => {
                    if (!listItem.dataset.id) {
                        listItem.dataset.id = listID++;
                    }
                    this.logoListItem.style.order = logoOrder;
                    listItem.style.order = listItem.getAttribute('data-id');
                });

                if (!this.elements.listParent.contains(this.logoListItem) ||
                    !this.elements.listParent.contains(this.elements.headerLogo)) {

                    this.elements.listParent.prepend(this.logoListItem);
                    this.logoListItem.append(this.elements.headerLogo);
                    this.elements.headerInner.classList.add('dwc-logo-is-centered');

                    const logoBounds = this.elements.headerLogo.getBoundingClientRect();
                    const viewportWidth = document.documentElement.clientWidth;
                    const logoWidth = this.elements.headerLogo.offsetWidth;
                    const distanceRight = logoBounds.x;


                    // Force center if needed
                    if (this.config.forceCenteredLogo) {
                        const rightOffset = ((distanceRight + (logoWidth / 2)) + this.config.centerNudge) - (viewportWidth / 2);
                        const offsetMargin = rightOffset * 2;
                        this.elements.menu.style.marginRight = offsetMargin + 'px';
                    }

                    if (CenteredLogoCONFIG.centerGuide) {
                        if (document.body.classList.contains('logged-in')) {
                            // Check if the indicator already exists
                            if (!document.querySelector('.dwc-center-guide')) {
                                const indicatorEl = document.createElement('div')
                                indicatorEl.classList.add('dwc-center-guide')
                                indicatorEl.style.width = this.elements.headerLogo.offsetWidth + 'px';
                                document.body.appendChild(indicatorEl)
                            }
                        }
                    }

                }

            } else {
                document.body.classList.remove('desktop-centered');
                this.elements.headerInner.classList.add('dwc-logo-is-centered');
                this.elements.menu.style.marginRight = null;
                this.elements.headerInner.prepend(this.elements.headerLogo);
                this.logoListItem.style.order = null;
                this.listItems.forEach(listItem => {
                    listItem.style.order = null;
                });
            }
        }, 500);
    }
}

class MenuAnimationController {
    constructor(config = {}) {
        this.config = {
            minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
            megaMenuLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .brx-has-megamenu`,
            shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor,  // Added shiftFactor
            minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow   // Added minOverflow
        };

        this.megaMenuLinks = document.querySelectorAll(this.config.megaMenuLinksSelector);
        this.header = document.querySelector(this.config.headerSelector);
        this.headerDiv = document.querySelector('.dwc-nest-header');

        this.headerTimeoutId = null;
        this.mobileMenuTimeoutId = null;

    }

    setBackText() {
        let menuElement = document.querySelector('.dwc-nest-menu');
        let forcedBackText = menuElement.getAttribute('data-back-text')
        document.querySelectorAll('.brx-submenu-toggle').forEach(submenu => {
            const textContent = submenu.textContent.trim();
            const button = submenu.querySelector('.brx-submenu-toggle > button');
            if (button) {
                button.setAttribute('data-text', textContent);
                button.setAttribute('data-back-text', forcedBackText);
            }
        });
    }


    getViewportWidth() {
        // Check if window exists (for SSR/Node environments)
        if (typeof window === 'undefined') return 0;

        return window.innerWidth ||
            document.documentElement?.clientWidth ||
            document.body?.clientWidth ||
            0;
    }

    isAboveMinWidth() {
        return this.getViewportWidth() >= this.config.minWidthThreshold;
    }

    /**
     * Detect if the document is using RTL (Right-to-Left) layout
     */
    isRTL() {
        const htmlDir = document.documentElement.dir?.toLowerCase();
        if (htmlDir) return htmlDir === 'rtl';
        
        const computedDirection = getComputedStyle(document.documentElement).direction;
        return computedDirection === 'rtl';
    }

    // experimental for smoother expand to open sub menu, not yet implemented 
    updateMobileDropdownHeights() {
        // Only run on mobile (below minimum width)
        if (this.isAboveMinWidth() || !this.header) return;

        this.megaMenuLinks.forEach(link => {
            const dropdownMenu = link.querySelector('.brx-dropdown-content');
            if (dropdownMenu) {
                if (link.classList.contains('open')) {
                    // Get the actual height of the dropdown content when open
                    const menuHeight = dropdownMenu.offsetHeight;
                    // Apply the height directly to the dropdown element
                    dropdownMenu.style.height = `${menuHeight}px`;
                } else {
                    // Set height to 0 when not open
                    dropdownMenu.style.height = '0px';
                }
            }
        });
    }

    updateDropdownPositions() {
        const viewportWidth = document.documentElement.clientWidth;
        if (viewportWidth < this.config.minWidthThreshold) return; // Run only on desktop

        const dropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content`);
        const defaultElement = document.querySelector('#brx-header');
        const defaultRect = defaultElement ? defaultElement.getBoundingClientRect() : null;
        const isRTL = this.isRTL();

        requestAnimationFrame(() => {
            // Handle vertical positioning (global top positioning)
            this.handleVerticalPositioning();

            // Handle width and horizontal alignment positioning
            dropdowns.forEach((dropdown) => {
                this.setDropdownWidth(dropdown);
                this.positionDropdownHorizontally(dropdown, defaultRect, viewportWidth, isRTL);
            });
        });
    }

    /**
     * Handle vertical positioning for dropdowns (global top positioning)
     */
    handleVerticalPositioning() {
        const nestMenu = document.querySelector('.dwc-nest-menu');
        const globalTopSelector = nestMenu ? nestMenu.getAttribute('data-global-content-vertical') : null;

        if (globalTopSelector) {
            this.positionDropdownsRelativeToElement(globalTopSelector, 'global top element');
        }
    }

    /**
     * Position dropdowns relative to a specified element
     */
    positionDropdownsRelativeToElement(selector, description) {
        const targetElement = document.querySelector(selector);
        if (!targetElement) return;

        const positioningDropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content)`);
        const targetRect = targetElement.getBoundingClientRect();

        positioningDropdowns.forEach(dropdown => {
            const menuItem = dropdown.closest('.menu-item') || dropdown.parentElement;
            const menuItemRect = menuItem.getBoundingClientRect();
            
            const topPosition = menuItemRect.height + targetRect.bottom - menuItemRect.bottom;
            dropdown.style.top = `${topPosition}px`;
        });

        // console.log(`Positioned dropdowns relative to ${description}`);
    }

    /**
     * Set dropdown width based on data attributes or global settings
     */
    setDropdownWidth(dropdown) {
        // Check for individual data-content-width attribute first
        const localSelector = dropdown.getAttribute('data-content-width');
        
        if (localSelector) {
            this.applyWidthFromSelector(dropdown, localSelector);
            return;
        }

        // Fall back to global data-global-content-width setting
        const nestMenu = document.querySelector('.dwc-nest-menu');
        const globalSelector = nestMenu ? nestMenu.getAttribute('data-global-content-width') : null;
        
        if (globalSelector) {
            this.applyWidthFromSelector(dropdown, globalSelector);
        }
    }

    /**
     * Apply width to dropdown based on selector (number, CSS value, CSS variable, or element selector)
     */
    applyWidthFromSelector(dropdown, selector) {
        // Check if it's a number or value with CSS units
        if (/^\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)?$/i.test(selector)) {
            const hasUnit = /\d+(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)$/i.test(selector);
            const widthValue = hasUnit ? selector : `${selector}px`;
            dropdown.style.setProperty('--dropdown-content-width', widthValue);
        }
        // Check if it's a CSS variable (starts with var( and ends with ))
        else if (/^var\(--[\w-]+\)$/.test(selector)) {
            this.applyWidthFromCSSVariable(dropdown, selector);
        }
        // Treat as element selector
        else {
            this.applyWidthFromElement(dropdown, selector);
        }
    }

    /**
     * Apply width from CSS variable
     */
    applyWidthFromCSSVariable(dropdown, variableSelector) {
        const variableName = variableSelector.match(/^var\((--[\w-]+)\)$/)[1];
        const computedValue = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();

        if (computedValue) {
            const hasUnit = /\d+(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)$/i.test(computedValue);
            const widthValue = hasUnit ? computedValue : `${computedValue}px`;
            dropdown.style.setProperty('--dropdown-content-width', widthValue);
        }
    }

    /**
     * Apply width from target element
     */
    applyWidthFromElement(dropdown, selector) {
        const targetElement = document.querySelector(selector);
        if (targetElement) {
            const targetWidth = targetElement.getBoundingClientRect().width;
            dropdown.style.setProperty('--dropdown-content-width', `${targetWidth}px`);
        }
    }

    /**
     * Handle horizontal positioning of dropdown with RTL support and overflow management
     */
    positionDropdownHorizontally(dropdown, defaultRect, viewportWidth, isRTL) {
        const parentLi = dropdown.closest('.brx-has-megamenu.brxe-dropdown');
        if (!parentLi) return;

        const contentAlign = dropdown.getAttribute('data-content-align');
        let actualDropdownWidth = this.getActualDropdownWidth(dropdown);
        const liRect = parentLi.getBoundingClientRect();

        // Constrain width to viewport if dropdown is wider
        if (actualDropdownWidth > viewportWidth) {
            dropdown.style.setProperty('--dropdown-content-width', `${viewportWidth}px`);
            actualDropdownWidth = viewportWidth;
        }

        // Calculate initial position based on alignment and RTL
        let position = this.calculateInitialPosition(dropdown, parentLi, contentAlign, actualDropdownWidth, defaultRect, isRTL);

        // Apply overflow corrections with proper RTL support
        position = this.handleOverflowAdjustments(position, liRect, actualDropdownWidth, viewportWidth, isRTL);

        // Set final position using appropriate CSS property
        if (isRTL) {
            // In RTL, we need to calculate right-based positioning
            const rightPosition = liRect.width - position - actualDropdownWidth;
            dropdown.style.setProperty('--right-position', `${rightPosition}px`);
            dropdown.style.removeProperty('--left-position');
        } else {
            // LTR uses left-based positioning (existing behavior)
            dropdown.style.setProperty('--left-position', `${position}px`);
            dropdown.style.removeProperty('--right-position');
            
            // Fallback for existing CSS that expects --left-position
            if (!dropdown.style.getPropertyValue('--left-position')) {
                dropdown.style.setProperty('--left-position', '0px');
            }
        }
    }

    /**
     * Get actual dropdown width accounting for CSS transforms
     */
    getActualDropdownWidth(dropdown) {
        const computedStyle = getComputedStyle(dropdown);
        const dropdownRect = dropdown.getBoundingClientRect();

        // Extract scale factor from transform
        const transform = computedStyle.transform || computedStyle.webkitTransform;
        let scaleX = 1;

        if (transform && transform !== 'none') {
            const matrix = transform.match(/^matrix\((.+)\)$/);
            if (matrix) {
                const values = matrix[1].split(', ');
                scaleX = parseFloat(values[0]);
            }
        }

        return dropdownRect.width / scaleX;
    }

    /**
     * Calculate initial dropdown position based on alignment and RTL settings
     */
    calculateInitialPosition(dropdown, parentLi, contentAlign, actualDropdownWidth, defaultRect, isRTL) {
        const validAlignments = ['left', 'center', 'right'];
        const hasValidAlignment = contentAlign && validAlignments.includes(contentAlign);
        const liRect = parentLi.getBoundingClientRect();

        if (!hasValidAlignment) {
            // Default centering behavior
            return this.calculateCenteredPosition(actualDropdownWidth, defaultRect, liRect, isRTL);
        }

        // Apply RTL-aware alignment mapping
        const effectiveAlignment = this.getEffectiveAlignment(contentAlign, isRTL);
        
        // Calculate position relative to parent element
        switch (effectiveAlignment) {
            case 'left':
                return 0;
            case 'right':
                return liRect.width - actualDropdownWidth;
            case 'center':
                return (liRect.width - actualDropdownWidth) / 2;
            default:
                return 0;
        }
    }

    /**
     * Map alignment values for RTL layouts
     */
    getEffectiveAlignment(contentAlign, isRTL) {
        if (!isRTL) return contentAlign;
        
        // RTL alignment mapping
        switch (contentAlign) {
            case 'left': return 'right';
            case 'right': return 'left';
            case 'center': return 'center';
            default: return contentAlign;
        }
    }

    /**
     * Calculate centered position for default alignment
     */
    calculateCenteredPosition(actualDropdownWidth, defaultRect, liRect, isRTL) {
        if (!defaultRect) return isRTL ? liRect.width / 2 : 0;

        const defaultElement = document.querySelector('#brx-header');
        const headerRect = defaultElement ? defaultElement.getBoundingClientRect() : null;

        if (headerRect) {
            const centerOffset = (defaultRect.width - actualDropdownWidth) / 2;
            
            if (isRTL) {
                // RTL: Calculate position relative to parent's right edge
                const headerRightOffset = headerRect.right;
                const liRightOffset = liRect.right;
                return centerOffset - (headerRightOffset - liRightOffset);
            } else {
                // LTR: Calculate position relative to parent's left edge (existing logic)
                const headerLeftOffset = headerRect.left + window.scrollX;
                return centerOffset - (liRect.left - headerLeftOffset);
            }
        }

        return isRTL ? liRect.width / 2 : 0;
    }

    /**
     * Handle viewport overflow adjustments with proper RTL support
     */
    handleOverflowAdjustments(position, liRect, actualDropdownWidth, viewportWidth, isRTL) {
        // Calculate edges based on layout direction
        let leftEdge, rightEdge;
        
        if (isRTL) {
            // RTL: position is relative to parent's right edge, calculate absolute edges
            const parentRight = liRect.right;
            rightEdge = parentRight - position;
            leftEdge = rightEdge - actualDropdownWidth;
        } else {
            // LTR: position is relative to parent's left edge (existing logic)
            leftEdge = liRect.left + position;
            rightEdge = leftEdge + actualDropdownWidth;
        }

        let adjustedPosition = position;
        const isViewportConstrained = actualDropdownWidth >= viewportWidth;

        // Check for left viewport overflow
        if (leftEdge < 0) {
            const leftOverflow = Math.abs(leftEdge);
            
            if (isViewportConstrained) {
                // For viewport-constrained dropdowns, use exact positioning
                if (isRTL) {
                    // RTL: adjust position to align left edge with viewport
                    adjustedPosition = position - leftOverflow;
                } else {
                    // LTR: adjust position to align left edge with viewport
                    adjustedPosition += leftOverflow;
                }
            } else {
                // For normal dropdowns, use configured shift behavior
                const adjustedOverflow = leftOverflow < this.config.minOverflow ? this.config.minOverflow : leftOverflow;
                if (isRTL) {
                    adjustedPosition -= adjustedOverflow * this.config.shiftFactor;
                } else {
                    adjustedPosition += adjustedOverflow * this.config.shiftFactor;
                }
            }
        }

        // Recalculate right edge after left adjustments
        let adjustedRightEdge;
        if (isRTL) {
            const parentRight = liRect.right;
            adjustedRightEdge = parentRight - adjustedPosition;
        } else {
            adjustedRightEdge = liRect.left + adjustedPosition + actualDropdownWidth;
        }
        
        // Check for right viewport overflow
        if (adjustedRightEdge > viewportWidth) {
            const rightOverflow = adjustedRightEdge - viewportWidth;
            
            if (isViewportConstrained) {
                // For viewport-constrained dropdowns, position exactly at viewport edge
                if (isRTL) {
                    // RTL: adjust position to align right edge with viewport
                    adjustedPosition += rightOverflow;
                } else {
                    // LTR: adjust position to align right edge with viewport
                    adjustedPosition -= rightOverflow;
                }
                
                // Double-check: if this causes opposite overflow, prioritize based on RTL
                let finalLeftEdge, finalRightEdge;
                if (isRTL) {
                    const parentRight = liRect.right;
                    finalRightEdge = parentRight - adjustedPosition;
                    finalLeftEdge = finalRightEdge - actualDropdownWidth;
                } else {
                    finalLeftEdge = liRect.left + adjustedPosition;
                    finalRightEdge = finalLeftEdge + actualDropdownWidth;
                }
                
                if (finalLeftEdge < 0) {
                    if (isRTL) {
                        // In RTL, prioritize right edge - align dropdown to right edge of viewport
                        adjustedPosition = liRect.right - viewportWidth;
                    } else {
                        // In LTR, prioritize left edge - align dropdown to left edge of viewport
                        adjustedPosition = -liRect.left;
                    }
                }
            } else {
                // For normal dropdowns, use configured shift behavior
                const adjustedOverflow = rightOverflow < this.config.minOverflow ? this.config.minOverflow : rightOverflow;
                if (isRTL) {
                    adjustedPosition += adjustedOverflow * this.config.shiftFactor;
                } else {
                    adjustedPosition -= adjustedOverflow * this.config.shiftFactor;
                }
            }
        }

        return adjustedPosition;
    }

    updateHeaderHeight() {
        if (this.headerTimeoutId) {
            clearTimeout(this.headerTimeoutId);
        }

        requestAnimationFrame(() => {
            if (this.header) {
                this.headerTimeoutId = setTimeout(() => {
                       let headerHeight = this.header.offsetHeight;
                    let headerDivHeight = this.headerDiv.offsetHeight;
                    document.body.style.setProperty('--dwc-nest-header-height', `${headerHeight}px`);
                     document.body.style.setProperty('--dwc-header-div-height', `${headerDivHeight}px`);
                }, 300);
            }
        });
    }

    setMobileMenuTopHeight() {
        if (this.mobileMenuTimeoutId) {
            clearTimeout(this.mobileMenuTimeoutId);
        }

        let mobileMenuTop = document.querySelector('.dwc-nest-menu-top');
        if (!mobileMenuTop) {
            console.error('Mobile menu top element not found');
            return;
        }

        this.mobileMenuTimeoutId = setTimeout(() => {
            let menuTopHeight = mobileMenuTop.offsetHeight;
            document.body.style.setProperty('--mobile-menu-top-height', `${menuTopHeight}px`);
        }, 300);
    }


    updateMobileLogo() {
        let mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo');
        let desktopLogo = document.querySelector('.dwc-nest-menu__logo');

        if (!mobileLogo) {
            console.error('Mobile logo container not found');
            return;
        }

        if (!desktopLogo) {
            console.error('Desktop logo container not found');
            return;
        }

        // Updated to check for either img or svg in desktop logo
        let desktopLogoElement = desktopLogo.querySelector('img, svg');
        if (!desktopLogoElement) return;

        // Check if mobile logo has an image or SVG
        const currentMobileLogo = mobileLogo.querySelector('img, svg');

        // Store original logo data if not already stored
        if (!mobileLogo.hasAttribute('data-original-logo-type') && currentMobileLogo) {
            // Get logo type (img or svg)
            const logoType = currentMobileLogo.tagName.toLowerCase();
            mobileLogo.setAttribute('data-original-logo-type', logoType);

            if (logoType === 'img') {
                mobileLogo.setAttribute('data-original-logo-src', currentMobileLogo.src);
                mobileLogo.setAttribute('data-original-logo-alt', currentMobileLogo.alt || '');
                mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.className || '');
            } else if (logoType === 'svg') {
                // Store SVG content as a string
                mobileLogo.setAttribute('data-original-logo-content', currentMobileLogo.outerHTML);
                mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.getAttribute('class') || '');
            }
        }

        if (this.isAboveMinWidth()) {
            if (currentMobileLogo) {
                mobileLogo.removeChild(currentMobileLogo);
            }

            // Clone desktop logo (either img or svg)
            let newLogo = desktopLogoElement.cloneNode(true);
            newLogo.removeAttribute('id');
            // mobileLogo.appendChild(newLogo);
        } else {
            // For mobile view
            const originalLogoType = mobileLogo.getAttribute('data-original-logo-type');

            if (!currentMobileLogo) {
                // If no current logo, clone desktop logo
                let mobileLogoElement = desktopLogoElement.cloneNode(true);
                mobileLogoElement.removeAttribute('id');
                mobileLogo.appendChild(mobileLogoElement);
            } else if (originalLogoType) {
                mobileLogo.removeChild(currentMobileLogo);

                if (originalLogoType === 'img') {
                    // Restore original img
                    let mobileLogoImage = document.createElement('img');
                    mobileLogoImage.src = mobileLogo.getAttribute('data-original-logo-src');
                    mobileLogoImage.alt = mobileLogo.getAttribute('data-original-logo-alt') || '';
                    mobileLogoImage.className = mobileLogo.getAttribute('data-original-logo-class') || '';
                    mobileLogo.appendChild(mobileLogoImage);
                } else if (originalLogoType === 'svg') {
                    // Restore original SVG
                    const svgContent = mobileLogo.getAttribute('data-original-logo-content');
                    if (svgContent) {
                        const tempContainer = document.createElement('div');
                        tempContainer.innerHTML = svgContent;
                        const svgElement = tempContainer.querySelector('svg');
                        if (svgElement) {
                            mobileLogo.appendChild(svgElement.cloneNode(true));
                        }
                    }
                }
            }
        }
    }


    initDesktopNav() {
        if (!this.header) return;

        let menuElement = this.header.querySelector('.dwc-nest-menu');
        if (menuElement) {
            menuElement.classList.remove('brx-open');
            menuElement.querySelectorAll('.brxe-dropdown').forEach(dropdown => {
                dropdown.classList.remove('active', 'open');
            });
        }
    }

    setBoxedWidthVariable() {
        // Check if body has the brx-boxed class
        if (document.body.classList.contains('brx-boxed')) {
            // Get computed style for the body
            const computedStyle = window.getComputedStyle(document.body);

            // Get the max-width value
            const maxWidth = computedStyle.getPropertyValue('max-width');

            // Set the max-width as a CSS variable on the body
            document.body.style.setProperty('--boxed-width', maxWidth);

            return maxWidth;
        } else {
            return null;
        }
    }

closeDesktopMenu(link) {
    // Start from the link itself to find parent li.brxe-dropdown elements
    let currentElement = link;
    
    while (currentElement) {
        // Find the closest parent li.brxe-dropdown from current position
        const parentLi = currentElement.closest('li.brxe-dropdown');
        
        if (!parentLi) break; // No more parent li.brxe-dropdown elements
        
        // Check if this li has open or active class
        if (parentLi.classList.contains('open') || parentLi.classList.contains('active')) {
            // Remove open and active classes
            parentLi.classList.remove('open', 'active');
            
            // Find the toggle button to update aria-expanded
            const toggleButton = parentLi.querySelector(':scope > .brx-submenu-toggle > button');
            
            if (toggleButton) {
                // Set aria-expanded to false
                toggleButton.setAttribute('aria-expanded', 'false');
            }
        }
        
        // Move up: go to parent li's parent element to continue traversing upward only
        currentElement = parentLi.parentElement;
    }
}


    closeNavOnClick() {
    if (MegaMenuCONFIG.closeNavOnClick) {

        const allLinks = document.querySelectorAll('.dwc-nest-menu a');
        const menuContainer = document.querySelector('.dwc-nest-menu');
        const menuItemLinks = Array.from(allLinks).filter(link => {
            return link.parentElement !== menuContainer;
        });

        const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle');

        // Always remove existing event listeners first
        menuItemLinks.forEach(link => {
            const storedHandler = link._clickHandler;
            if (storedHandler) {
                link.removeEventListener('click', storedHandler);
                delete link._clickHandler;
            }
        });

        // Check if we should skip desktop behavior
        const isMobile = !this.isAboveMinWidth();
        const shouldSkipDesktop = MegaMenuCONFIG.closeOnMobileOnly && !isMobile;
        
        if (shouldSkipDesktop) return;

        // Helper function to check if element has excluded selector
        const hasExcludedSelector = (element) => {
            if (!MegaMenuCONFIG.closeNavOnClickExclude) return false;

            const excludedSelectors = MegaMenuCONFIG.closeNavOnClickExclude
                .split(',')
                .map(selector => selector.trim());

            return excludedSelectors.some(selector => {
                try {
                    return element.matches(selector);
                } catch (error) {
                    // Fallback for invalid selectors - log warning and skip
                    console.warn(`Invalid selector: "${selector}"`, error);
                    return false;
                }
            });
        };

        // Helper function to check if link has a hash
        const hasHashLink = (link) => {
            const href = link.getAttribute('href');
            return href && href.includes('#');
        };

        // Add event listeners based on mobile/desktop context
        menuItemLinks.forEach(link => {
            // Skip this link if it has any excluded classes
            if (hasExcludedSelector(link)) return;

            // If closeOnHashClickOnly is true, skip links without hash
            if (MegaMenuCONFIG.closeOnHashClickOnly && !hasHashLink(link)) return;

            const clickHandler = () => {
                if (isMobile) {
                    // Mobile: close entire menu via toggle
                    if (menuToggle) {
                        menuToggle.click();
                    }
                } else {
                    // Desktop: close parent dropdowns
                    this.closeDesktopMenu(link);
                }
            };

            link._clickHandler = clickHandler;
            link.addEventListener('click', clickHandler);
        });
    }
}


}

// Add this new class to your existing code

class MobileMenuScrollReset {
    constructor(config = {}) {
        this.config = {
            minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
            scrollResetDelay: config.scrollResetDelay || 300
        };

        this.menuElement = null;
        this.nestedItemsElement = null;
        this.scrollResetTimeout = null;
        this.isInitialized = false;
    }

    initialize() {
        if (this.isInitialized) return;

        this.menuElement = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`);
        this.nestedItemsElement = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`);

        if (!this.menuElement || !this.nestedItemsElement) {
            console.warn('Mobile menu scroll reset: Required elements not found');
            return;
        }

        this.setupMutationObserver();
        this.isInitialized = true;
    }

    setupMutationObserver() {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    this.handleMenuClassChange();
                }
            });
        });

        observer.observe(this.menuElement, {
            attributes: true,
            attributeFilter: ['class']
        });
    }

    handleMenuClassChange() {
        // Only run on mobile
        if (!this.isMobile()) return;

        const isMenuOpen = this.menuElement.classList.contains('brx-open');

        // If menu is now closed, set timeout to reset scroll
        if (!isMenuOpen) {
            this.scheduleScrollReset();
        } else {
            // If menu is opened, cancel any pending scroll reset
            this.cancelScrollReset();
        }
    }

    scheduleScrollReset() {
        // Clear any existing timeout
        this.cancelScrollReset();

        // Set new timeout
        this.scrollResetTimeout = setTimeout(() => {
            this.resetScroll();
        }, this.config.scrollResetDelay);
    }

    cancelScrollReset() {
        if (this.scrollResetTimeout) {
            clearTimeout(this.scrollResetTimeout);
            this.scrollResetTimeout = null;
        }
    }

    resetScroll() {
        if (this.nestedItemsElement && this.isMobile()) {
            this.nestedItemsElement.scrollTop = 0;
        }
    }

    isMobile() {
        return window.innerWidth < this.config.minWidthThreshold;
    }

    // Method to reinitialize (useful for your reinitialize functionality)
    reinitialize() {
        this.cancelScrollReset();
        this.isInitialized = false;
        this.initialize();
    }
}




class MenuSystem {
    constructor(config = {}) {
        this.config = {
            minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
            headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
            megaMenuLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .brx-has-megamenu`,
            shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor,  // Added shiftFactor
            minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow  // Added minOverflow
        };

        this.animationController = new MenuAnimationController(this.config);
        this.centeredLogoController = new CenteredLogoController(this.config);
        this.mobileScrollReset = new MobileMenuScrollReset(this.config);

        // Flag to track if updateDropdownPositions has been called via user interaction
        this.hasUpdatedDropdowns = false;

        // Start early initialization for centered logo
        this.centeredLogoController.initializeEarly();

    }

    // New method to handle the DOMContentLoaded logic, replaces former menuSystem.initialize()
    setupMenu() {
       let overlay = document.querySelector('.dwc-nest-menu-overlay');
        if (!overlay) {
            overlay = document.createElement('nav-overlay');
            overlay.className = 'dwc-nest-menu-overlay';
            const overlayParent = document.querySelector('.dwc-nest-header__container');
            const header = document.querySelector('#brx-header');
            if (overlayParent && MegaMenuCONFIG.overlayInsideHeader) {
                overlayParent.parentNode.prepend(overlay, overlayParent);
            } else if (header) {
                header.parentNode.insertBefore(overlay, header);
            }
        }

        this.animationController.updateHeaderHeight();
        this.animationController.setMobileMenuTopHeight();
        this.animationController.updateMobileLogo();
        this.animationController.setBackText();
        // this.animationController.updateMobileDropdownHeights(); 
        this.animationController.closeNavOnClick();
        this.centeredLogoController.initialize()
        this.mobileScrollReset.initialize();

        if (this.animationController.isAboveMinWidth()) {
            this.setupDesktopBehavior();
        }

        this.setupEventListeners();



        setTimeout(() => {
            document.body.classList.add('show-nav');
            this.animationController.updateHeaderHeight();
        }, 0);

        setTimeout(() => {
            if (this.animationController.isAboveMinWidth()) {
                // console.log('Calling updateDropdownPositions on page load');              
                this.animationController.updateDropdownPositions(); // Initial desktop positioning
                this.animationController.setBoxedWidthVariable()
            }

            document.body.classList.add('show-content');
        }, 500);
    }

    // Original initialize method (unchanged) now calls the setupMenu()
    initialize() {
        updateMobileClass(this.config.minWidthThreshold);
        document.addEventListener('DOMContentLoaded', () => {
            this.setupMenu();
        });
        return this;
    }

    // Updated reinitialize method - to call: mainMenu.reinitialize();
    reinitialize() {
        // Reset critical states
        this.centeredLogoController.isInitialized = false;

           // Clear breakinto states ← ADD THIS
    const breakintoElements = document.querySelectorAll('[data-breakinto]');
    breakintoElements.forEach(element => {
        breakintoOriginalParents.delete(element);
        breakintoOriginalIndexes.delete(element);
        breakintoItemStates.delete(element);
        element.removeAttribute('data-breakinto-moved');
    });

        // Clear existing timeouts
        if (this.animationController.headerTimeoutId) {
            clearTimeout(this.animationController.headerTimeoutId);
        }
        if (this.animationController.mobileMenuTimeoutId) {
            clearTimeout(this.animationController.mobileMenuTimeoutId);
        }
        if (this.centeredLogoController.resizedFinished) {
            clearTimeout(this.centeredLogoController.resizedFinished);
        }

        // Remove added DOM elements and classes
        const overlay = document.querySelector('.dwc-nest-menu-overlay');
        if (overlay) overlay.remove();
        document.body.classList.remove('show-nav', 'adaptive-height-active', 'desktop-centered', 'dom-ready');


        // Reset mobile logo
        const mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo');
        if (mobileLogo) {
            const currentMobileLogo = mobileLogo.querySelector('img, svg');
            if (currentMobileLogo) currentMobileLogo.remove();
        }

        // Re-run setup
        updateMobileClass(this.config.minWidthThreshold);
        this.setupMenu();
        this.mobileScrollReset.reinitialize();
        // console.log('Mega Menu Pro reinitialized...')
    }

    setupDesktopBehavior() {
        this.animationController.megaMenuLinks.forEach(link => {
            link.removeEventListener('mouseenter', this.handleMouseEnter);
            link.addEventListener('mouseenter', this.handleMouseEnter);
        });
    }

    handleMouseEnter = (event) => {
        // Call updateDropdownPositions on mouseenter if not already called via interaction
        if (this.animationController.isAboveMinWidth() && !this.hasUpdatedDropdowns) {
            // console.log('Calling updateDropdownPositions on user interaction');
            this.animationController.updateDropdownPositions();
            this.hasUpdatedDropdowns = true;
        }
    };





    setupEventListeners() {


        document.addEventListener('click', event => {
            let submenuToggle = event.target.closest('.brx-submenu-toggle');
            if (submenuToggle) {
                setTimeout(() => {
                    // Update mobile dropdown heights after menu state changes
                    // this.animationController.updateMobileDropdownHeights();

                }, 50);
            }
        });



        window.addEventListener('resize', this.debounce(() => {
            updateMobileClass(this.config.minWidthThreshold);
            this.animationController.updateHeaderHeight();
            this.animationController.setMobileMenuTopHeight();
            this.animationController.updateMobileLogo();
            // this.animationController.updateMobileDropdownHeights(); 
            this.animationController.closeNavOnClick();

            if (this.animationController.isAboveMinWidth()) {
                this.animationController.initDesktopNav();
                this.setupDesktopBehavior();
                // Reset flag on resize to desktop and call updateDropdownPositions
                // console.log('Resize to desktop, resetting hasUpdatedDropdowns and calling updateDropdownPositions');
                this.hasUpdatedDropdowns = false;
                this.animationController.updateDropdownPositions(); // Update on resize                
            } else {
                // console.log('Resize to mobile, resetting hasUpdatedDropdowns');
                this.hasUpdatedDropdowns = false;
            }
        }, 300));
    }

    debounce(func, delay) {
        let timeoutId;
        return function (...args) {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, args), delay);
        };
    }
}

// Usage with multiple instances
const mainMenu = new MenuSystem().initialize();


// RECALCULATE DROPDOWN POSITION ON LAYOUT SHIFTS

const debouncedUpdate = mainMenu.debounce(() => {
    mainMenu.animationController.updateDropdownPositions();
}, 300);



if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', debouncedUpdate);
}



/* BREAKOUT LINK & BREAKIN FUNCTIONALITY */

// WeakMaps for breakinto feature state management
const breakintoOriginalParents = new WeakMap(); // Track original parents for breakinto items
const breakintoOriginalIndexes = new WeakMap(); // Track original child indexes for breakinto items  
const breakintoItemStates = new WeakMap(); // Track individual breakinto item states

// Use WeakMap for better garbage collection
const originalParents = new WeakMap();
const itemStates = new WeakMap(); // Track individual item states
const breakinOriginalParents = new WeakMap(); // Track original parents for breakin items
const breakinOriginalIndexes = new WeakMap(); // Track original child indexes for breakin items
const breakinItemStates = new WeakMap(); // Track individual breakin item states
let isMobileView = null;
let resizeTimer;
let breakinContainer = null;

function ensureBreakInContainer() {
    // Check if any breakin elements exist in the header first
    const hasBreakInElements = document.querySelector('#brx-header [data-breakin]');
    if (!hasBreakInElements) return null;

    // Select nav wrapper based on config
    const navWrapperSelector = MegaMenuCONFIG.breakinToNavList
        ? '.dwc-nest-menu .brx-nav-nested-items'
        : '.dwc-nav-wrapper';

    const navWrapper = document.querySelector(navWrapperSelector);
    if (!navWrapper) return null;

    if (!breakinContainer) {
        breakinContainer = navWrapper.querySelector('.breakin-container');
        if (!breakinContainer) {
            // Create element based on config
            breakinContainer = MegaMenuCONFIG.breakinToNavList
                ? document.createElement('li')
                : document.createElement('div');

            breakinContainer.className = 'breakin-container';
            
            // Prepend to nav list, append elsewhere
            if (MegaMenuCONFIG.breakinToNavList) {
                navWrapper.prepend(breakinContainer);
                breakinContainer.style.order = '100';
            } else {
                navWrapper.appendChild(breakinContainer);
            }
        }
    }

    return breakinContainer;
}

function handleBreakInItems() {
    const currentWidth = window.innerWidth;
    const container = ensureBreakInContainer();
    if (!container) return;

    // Get all breakin items from both original locations and breakin container
    const breakinItemsInOriginal = document.querySelectorAll('#brx-header [data-breakin]:not(.breakin-container [data-breakin])');
    const breakinItemsInContainer = container.querySelectorAll('[data-breakin]');

    // Combine both nodelets into a single array
    const breakinItems = [...breakinItemsInOriginal, ...breakinItemsInContainer];

    breakinItems.forEach(item => {
        const breakpointAttr = item.getAttribute('data-breakin');

        // Set default breakpoint if not defined or invalid
        let breakpoint;
        if (!breakpointAttr || breakpointAttr.trim() === '') {
            breakpoint = MegaMenuCONFIG.minWidth - 1;
        } else {
            breakpoint = parseInt(breakpointAttr, 10);
            if (isNaN(breakpoint)) {
                breakpoint = MegaMenuCONFIG.minWidth - 1;
            }
        }

        // Continue with your logic using the breakpoint value...

        // Determine if item should be in mobile state (moved into container)
        const shouldBeInContainer = currentWidth <= breakpoint;

        // Get current state of this breakin item
        const currentItemState = breakinItemStates.get(item);

        // Only process if this item's state changed
        if (currentItemState !== shouldBeInContainer) {
            breakinItemStates.set(item, shouldBeInContainer);

            if (shouldBeInContainer) {
                // Move to breakin container

                // Store original parent and index if not already stored
                if (!breakinOriginalParents.has(item)) {
                    const originalParent = item.parentElement;
                    const originalIndex = Array.from(originalParent.children).indexOf(item);
                    breakinOriginalParents.set(item, originalParent);
                    breakinOriginalIndexes.set(item, originalIndex);
                }

                // Move item to breakin container
                container.appendChild(item);

            } else {
                // Move back to original parent at original position
                const originalParent = breakinOriginalParents.get(item);
                const originalIndex = breakinOriginalIndexes.get(item);

                if (originalParent && originalIndex !== undefined) {
                    const children = originalParent.children;

                    if (originalIndex >= children.length) {
                        // Insert at the end if original index is beyond current children
                        originalParent.appendChild(item);
                    } else {
                        // Insert at the original position
                        originalParent.insertBefore(item, children[originalIndex]);
                    }
                }
            }
        }
    });
}

function handleBreakIntoItems() {
    const currentWidth = window.innerWidth;
    
    // Get all breakinto items from both original locations and target containers
    const breakintoItemsInOriginal = document.querySelectorAll('[data-breakinto]:not([data-breakinto=""])');
    const breakintoItemsInContainers = document.querySelectorAll('[data-breakinto-moved="true"]');
    
    // Combine both nodelets into a single array
    const breakintoItems = [...breakintoItemsInOriginal, ...breakintoItemsInContainers];
    
    breakintoItems.forEach(item => {
        const breakintoAttr = item.getAttribute('data-breakinto');
        
        // Skip if no breakinto attribute or empty value
        if (!breakintoAttr || breakintoAttr.trim() === '') {
            return;
        }
        
        // Parse the attribute value for container selector and optional breakpoint
        let containerSelector, customBreakpoint;
        
        if (breakintoAttr.includes('|')) {
            // Format: '.class | 767' or '#id | 1024'
            const parts = breakintoAttr.split('|').map(part => part.trim());
            containerSelector = parts[0];
            customBreakpoint = parseInt(parts[1], 10);
            
            // Validate custom breakpoint
            if (isNaN(customBreakpoint)) {
                console.warn(`Invalid breakpoint in data-breakinto="${breakintoAttr}". Using global breakpoint.`);
                customBreakpoint = null;
            }
        } else {
            // Format: '.class' or '#id'
            containerSelector = breakintoAttr.trim();
            customBreakpoint = null;
        }
        
        // Find the target container
        let targetContainer;
        try {
            targetContainer = document.querySelector(containerSelector);
        } catch (error) {
            console.error(`Invalid selector in data-breakinto="${breakintoAttr}":`, error);
            return;
        }
        
        if (!targetContainer) {
            console.warn(`Target container "${containerSelector}" not found for data-breakinto element.`);
            return;
        }
        
        // Determine breakpoint to use (custom or global)
        const breakpoint = customBreakpoint !== null ? customBreakpoint : MegaMenuCONFIG.minWidth;
        
        // Determine if item should be in target container (moved state)
        const shouldBeInContainer = currentWidth <= breakpoint;
        
        // Get current state of this breakinto item
        const currentItemState = breakintoItemStates.get(item);
        
        // Only process if this item's state changed
        if (currentItemState !== shouldBeInContainer) {
            breakintoItemStates.set(item, shouldBeInContainer);
            
            if (shouldBeInContainer) {
                // Move to target container
                
                // Store original parent and index if not already stored
                if (!breakintoOriginalParents.has(item)) {
                    const originalParent = item.parentElement;
                    const originalIndex = Array.from(originalParent.children).indexOf(item);
                    breakintoOriginalParents.set(item, originalParent);
                    breakintoOriginalIndexes.set(item, originalIndex);
                }
                
                // Mark item as moved and move to target container
                item.setAttribute('data-breakinto-moved', 'true');
                targetContainer.appendChild(item);
                
            } else {
                // Move back to original parent at original position
                const originalParent = breakintoOriginalParents.get(item);
                const originalIndex = breakintoOriginalIndexes.get(item);
                
                if (originalParent && originalIndex !== undefined) {
                    const children = originalParent.children;
                    
                    // Remove the moved marker
                    item.removeAttribute('data-breakinto-moved');
                    
                    if (originalIndex >= children.length) {
                        // Insert at the end if original index is beyond current children
                        originalParent.appendChild(item);
                    } else {
                        // Insert at the original position
                        originalParent.insertBefore(item, children[originalIndex]);
                    }
                }
            }
        }
    });
}

function handleResponsiveMenu() {
    const currentIsMobile = window.innerWidth < MegaMenuCONFIG.minWidth;
    const currentWidth = window.innerWidth;

    const nestMenu = document.querySelector('.dwc-nest-menu');
    if (!nestMenu) return;

    // Get all target items from both original locations and nest menu
    const targetItemsInOriginal = document.querySelectorAll('.brx-nav-nested-items > .menu-item > [data-breakout-link]');
    const targetItemsInNest = nestMenu.querySelectorAll('[data-breakout-link]');

    // Combine both nodelets into a single array
    const targetItems = [...targetItemsInOriginal, ...targetItemsInNest];
    let hasStateChange = false;

    targetItems.forEach(item => {

        if (item.closest('.dwc-header-logo-item')) return; // don't interfere with centerd logo item

        const parent = item.parentElement;
        const breakpointAttr = item.getAttribute('data-breakout-link');

        // Determine if item should be in mobile state
        let shouldBeMobile;

        if (!breakpointAttr || breakpointAttr.trim() === '') {
            // No custom breakpoint - use global mobile view logic
            shouldBeMobile = currentIsMobile;
        } else {
            // Custom breakpoint - check if within range
            const customBreakpoint = parseInt(breakpointAttr, 10);
            if (isNaN(customBreakpoint)) {
                // Invalid breakpoint value - fallback to global logic
                shouldBeMobile = currentIsMobile;
            } else {
                // Within custom range: between customBreakpoint and MegaMenuCONFIG.minWidth (exclusive)
                shouldBeMobile = currentWidth >= customBreakpoint && currentWidth < MegaMenuCONFIG.minWidth;
            }
        }

        // Get current state of this item
        const currentItemState = itemStates.get(item);

        // Only process if this item's state changed
        if (currentItemState !== shouldBeMobile) {
            hasStateChange = true;
            itemStates.set(item, shouldBeMobile);

            if (shouldBeMobile) {
                // Move to mobile state
                parent.classList.add('has-breakout-link');

                // Store original parent if not already stored
                if (!originalParents.has(item)) {
                    originalParents.set(item, parent);
                }

                // Move item to nest menu
                nestMenu.insertBefore(item, nestMenu.firstChild);

                // Hide the original parent
                parent.style.display = 'none';
            } else {
                // Move to desktop state - restore to original parent
                const originalParent = originalParents.get(item);
                if (originalParent) {
                    originalParent.appendChild(item);
                    originalParent.style.display = '';
                    originalParent.classList.remove('has-breakout-link');
                }
            }
        }
    });

    // Update global mobile view state only if there was a global state change
    if (isMobileView !== currentIsMobile) {
        isMobileView = currentIsMobile;
    }

    // Optional: You can add logic here if you need to do something when any state changes
    if (hasStateChange) {
        // Any additional logic when items change state
    }
}

function handleAllResponsiveElements() {
    handleResponsiveMenu(); // Handle breakout functionality
    handleBreakInItems();   // Handle breakin functionality
    handleBreakIntoItems(); // Handle breakinto functionality ← ADD THIS LINE
}
// Run on page load
handleAllResponsiveElements();

// Debounce resize events
window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(handleAllResponsiveElements, 150);
});

// Optional: Add for better initial load behavior
document.addEventListener('DOMContentLoaded', handleAllResponsiveElements);

// REINITIALIZE ON URL CHANGE
if (MegaMenuCONFIG.reinitializeOnURLchange) {
    // console.log('🚀 MegaMenu: URL change reinitialization active');
    
    let lastPath = normalizePathForComparison(window.location.pathname);
    let reinitTimer = null;
    let lastReinit = 0;
    const REINIT_COOLDOWN = 1000;
    let isInitialized = false;
    let detectionMethod = null;
    let forceReinitFromSwup = false;
    
    function normalizePathForComparison(path) {
        return path.replace(/\/$/, '') || '/';
    }
    
    function setAriaCurrentPage() {
        // console.log('📍 Setting aria-current="page" for current URL');
        
        // First, clear any existing aria-current attributes in the menu
        document.querySelectorAll('.dwc-nest-menu [aria-current="page"]').forEach(element => {
            element.removeAttribute('aria-current');
        });
        
        const currentPath = window.location.pathname;
        const navLinks = document.querySelectorAll('.dwc-nest-menu a[href]');
        let foundMatch = false;
        
        navLinks.forEach(link => {
            const href = link.getAttribute('href');
            if (!href) return;
            
            try {
                // Handle relative URLs
                let linkPath = href;
                if (!href.startsWith('http')) {
                    // Create absolute URL from relative path
                    const url = new URL(href, window.location.origin);
                    linkPath = url.pathname;
                } else {
                    // For absolute URLs, extract just the path
                    const url = new URL(href);
                    linkPath = url.pathname;
                }
                
                // Normalize paths for comparison
                const normalizedLinkPath = normalizePathForComparison(linkPath);
                const normalizedCurrentPath = normalizePathForComparison(currentPath);
                
                // Check for match
                if (normalizedLinkPath === normalizedCurrentPath) {
                    link.setAttribute('aria-current', 'page');
                    // console.log(`✅ Set aria-current="page" on:`, link);
                    foundMatch = true;
                }
            } catch (e) {
                // Fallback: simple string comparison
                const normalizedHref = normalizePathForComparison(href);
                const normalizedCurrent = normalizePathForComparison(currentPath);
                
                if (normalizedHref === normalizedCurrent || 
                    (normalizedCurrent === '/' && normalizedHref === '') ||
                    normalizedHref.endsWith(normalizedCurrent)) {
                    link.setAttribute('aria-current', 'page');
                    // console.log(`✅ Set aria-current="page" on (fallback):`, link);
                    foundMatch = true;
                }
            }
        });
        
        if (!foundMatch) {
            // console.log('⚠️ No matching link found for current page:', currentPath);
        }
    }
    
    function performReinit() {
        const menuElement = document.querySelector(MegaMenuCONFIG.nestMenuSelector);
        if (!menuElement) {
            console.warn('⚠️ MegaMenu: Menu element not found after navigation. Skipping reinit.');
            return;
        }
        
        try {
            // console.log('🔄 MegaMenu: Performing reinitialization...');
            
            // First, set aria-current="page" on the current page link
            setAriaCurrentPage();
            
            // Then reinitialize the menu
            mainMenu.reinitialize();
            
            // console.log('✅ MegaMenu reinitialized via', detectionMethod);
            lastReinit = Date.now();
            forceReinitFromSwup = false;
        } catch (error) {
            console.error('❌ MegaMenu reinit failed:', error);
            forceReinitFromSwup = false;
        }
    }
    
    function shouldReinitialize(force = false) {
        const now = Date.now();
        
        // Cooldown check
        if (now - lastReinit < REINIT_COOLDOWN) {
            // console.log('⏱️ MegaMenu: Reinit cooldown active');
            return false;
        }
        
        // If forced by Swup, skip path comparison
        if (force || forceReinitFromSwup) {
            // console.log('🎯 MegaMenu: Forced reinit requested (Swup event)');
            forceReinitFromSwup = false;
            return true;
        }
        
        const newPath = normalizePathForComparison(window.location.pathname);
        
        // Path comparison
        if (newPath === lastPath) {
            // console.log('⏭️ MegaMenu: Path unchanged, skipping');
            return false;
        }
        
        // console.log('🔄 MegaMenu: Path changed:', lastPath, '->', newPath);
        lastPath = newPath;
        return true;
    }
    
    // ============================================================================
    // SWUP INTEGRATION - PRIMARY METHOD
    // ============================================================================
    
    function setupSwupIntegration() {
        // console.log('🎯 MegaMenu: Setting up Swup integration');
        
        // Method 1: Direct Swup instance hooks (if available)
        if (window.swup) {
            // console.log('✅ MegaMenu: Found Swup instance, using direct hooks');
            
            // Hook into Swup's events
            swup.hooks.on('content:replace', () => {
                // console.log('📍 MegaMenu: Swup content replaced');
                forceReinitFromSwup = true;
                handleSwupNavigation();
            });
            
            swup.hooks.on('page:view', () => {
                // console.log('📍 MegaMenu: Swup page viewed');
                forceReinitFromSwup = true;
                handleSwupNavigation();
            });
            
            detectionMethod = 'Swup instance hooks';
            return true;
        }
        
        // Method 2: Swup custom events (works without instance access)
        const swupEvents = [
            'swup:content:replace',
            'swup:page:view',
            'swup:visit:end'
        ];
        
        let hasSwupEvents = false;
        
        swupEvents.forEach(eventName => {
            document.addEventListener(eventName, (event) => {
                // console.log(`📡 MegaMenu: Swup event fired: ${eventName}`);
                forceReinitFromSwup = true;
                handleSwupNavigation();
            }, { once: false });
            hasSwupEvents = true;
        });
        
        if (hasSwupEvents) {
            detectionMethod = 'Swup events';
            // console.log('✅ MegaMenu: Swup event listeners attached');
            return true;
        }
        
        return false;
    }
    
    function handleSwupNavigation() {
        // Clear any existing timer
        clearTimeout(reinitTimer);
        
        // Wait a bit to ensure DOM is fully updated
        reinitTimer = setTimeout(() => {
            // Pass true to force reinit for Swup events
            if (shouldReinitialize(true)) {
                performReinit();
            }
        }, 300);
    }
    
    // ============================================================================
    // FALLBACK: HISTORY API (For non-Swup navigations)
    // ============================================================================
    
    function setupHistoryAPIFallback() {
        // console.log('🔧 MegaMenu: Setting up History API fallback');
        
        function handleHistoryNavigation() {
            // Clear any existing timer
            clearTimeout(reinitTimer);
            
            // Wait longer for History API (might be a full page load)
            reinitTimer = setTimeout(() => {
                // Don't force for History API, only check path changes
                if (shouldReinitialize()) {
                    // console.log('📍 MegaMenu: History API navigation detected');
                    performReinit();
                }
            }, 1000);
        }
        
        // Override history methods
        const originalPushState = history.pushState;
        const originalReplaceState = history.replaceState;
        
        history.pushState = function() {
            const result = originalPushState.apply(history, arguments);
            // console.log('📍 MegaMenu: pushState called');
            handleHistoryNavigation();
            return result;
        };
        
        history.replaceState = function() {
            const result = originalReplaceState.apply(history, arguments);
            // console.log('📍 MegaMenu: replaceState called');
            handleHistoryNavigation();
            return result;
        };
        
        // Listen for back/forward navigation
        window.addEventListener('popstate', () => {
            // console.log('📍 MegaMenu: popstate event');
            handleHistoryNavigation();
        });
        
        return true;
    }
    
    // ============================================================================
    // WATCH FOR SWUP LOAD (For late loading)
    // ============================================================================
    
    function watchForSwupLoad(timeout = 5000) {
        // console.log('👀 MegaMenu: Watching for Swup to load...');
        
        // If Swup is already loaded, set it up immediately
        if (window.swup || typeof window.Swup === 'function') {
            // console.log('✅ MegaMenu: Swup already loaded');
            setupSwupIntegration();
            return;
        }
        
        const startTime = Date.now();
        let checkCount = 0;
        
        const checkInterval = setInterval(() => {
            checkCount++;
            
            // Check for Swup
            if (window.swup || typeof window.Swup === 'function') {
                clearInterval(checkInterval);
                // console.log(`✅ MegaMenu: Swup detected after ${checkCount} checks (${Date.now() - startTime}ms)`);
                setupSwupIntegration();
                return;
            }
            
            // Timeout check
            if (Date.now() - startTime > timeout) {
                clearInterval(checkInterval);
                // console.log(`⏰ MegaMenu: Swup watch timeout after ${timeout}ms`);
                if (!detectionMethod) {
                    detectionMethod = 'History API fallback';
                    // console.log('⚠️ MegaMenu: Swup not found, using History API only');
                }
            }
        }, 100);
    }
    
    // ============================================================================
    // INITIALIZATION
    // ============================================================================
    
    function initialize() {
        if (isInitialized) {
            // console.log('⚠️ MegaMenu: Already initialized');
            return;
        }
        
        // console.log('🚀 MegaMenu: Initializing reinit detection...');
        
        // Try to set up Swup integration first
        if (setupSwupIntegration()) {
            // console.log(`✅ MegaMenu: Using ${detectionMethod} for reinit detection`);
            isInitialized = true;
            return;
        }
        
        // Swup not loaded yet, set up fallback and watch for Swup
        setupHistoryAPIFallback();
        watchForSwupLoad();
        
        isInitialized = true;
        // console.log('✅ MegaMenu: Reinit detection initialized');
    }
    
    // Run initialization
    initialize();
    
    // ============================================================================
    // DIAGNOSTIC INFO
    // ============================================================================
    // console.log('%c📊 MegaMenu Reinit Diagnostic', 'color: #2196F3; font-weight: bold');
    // console.log('Initial path:', lastPath);
    // console.log('Detection method:', detectionMethod || 'Waiting for Swup...');
    // console.log('Reinit cooldown:', REINIT_COOLDOWN + 'ms');
    // console.log('Swup forced reinit:', 'Enabled');
    // console.log('Aria-current setting:', 'Enabled in reinit only');
}

 console.log('%c<Mega Menu Pro v1.4.4 Lite>', 'color: #b388eb');

Realizacje

Poniżej prezentujemy wybrane realizacje związane z modelami, formami i oprzyrządowaniem. To przykłady projektów, w których liczyła się przewidywalność efektu, terminowość i gotowość narzędzia do pracy w produkcji.

Każdy projekt ma inne ograniczenia: gabaryt, geometria, powierzchnia czy docelowy proces. Dlatego pokazujemy przekrój zastosowań — od elementów pojedynczych po rozwiązania przygotowane pod serie.

  • Modele do wykonania form oraz narzędzia pod produkcję
  • Formy kompozytowe i elementy oprzyrządowania
  • Duże gabaryty i segmentacja
  • Różne branże i zastosowania
  • Realizacje od prototypów po serie

Co pokazują przykłady

Realizacje ilustrują sposób, w jaki podchodzimy do projektów: najpierw cel produkcyjny, potem dobór rozwiązania. Dzięki temu narzędzia trafiają do pracy bez niepotrzebnych przestojów.

Jeśli masz podobny temat, najszybciej pomoże nam krótki opis zastosowania, wymiary oraz pliki 3D — wtedy możemy zaproponować właściwą ścieżkę realizacji.

Typowe scenariusze

W praktyce realizujemy zarówno pojedyncze narzędzia, jak i przygotowanie powtarzalnych elementów do serii. Najczęściej wspieramy projekty, w których czas wdrożenia i przewidywalność efektu są kluczowe.

Poniższe przykłady mają pokazać zakres — nie katalog. Jeśli czegoś nie widzisz, warto zapytać, bo wiele projektów jest nietypowych.

  • Modele do wykonania form z laminatu/kompozytów
  • Kopyta do termoformowania pod produkcję
  • Formy kompozytowe i oprzyrządowanie
  • Duże elementy dzielone na segmenty

Materiały spotykane w realizacjach

W realizacjach pojawiają się materiały dobierane do celu: trwałości, jakości powierzchni i procesu produkcyjnego. Warto pamiętać, że EPS/XPS to rozwiązania do brył, rdzeni i makiet — nie do właściwych narzędzi termoformujących.

Jeśli nie masz pewności co do materiału, wystarczy opisać zastosowanie i przewidywaną eksploatację — dobierzemy wariant adekwatny do potrzeb.

  • Płyty narzędziowe
  • MDF techniczny
  • PU/modelarskie
  • EPS/XPS — bryły i rdzenie (zastosowania pomocnicze)

Co jest istotne dla klienta

Najważniejsze są: termin, przewidywalność i to, czy narzędzie „zadziała” w produkcji. Dlatego przykładamy wagę do tego, aby założenia były jasne, a efekt końcowy odpowiadał docelowemu procesowi.

Jeżeli projekt wymaga kompromisu między czasem a poziomem wykończenia, ustalamy go na początku — tak, aby decyzja była świadoma i bez niespodzianek.

  • Narzędzie gotowe do pracy w produkcji
  • Powtarzalność i możliwość wznowienia
  • Jasne ustalenia co do powierzchni i podziału
  • Realne terminy i sprawna komunikacja

Wykończenie w zależności od zastosowania

Zakres wykończenia zależy od procesu i tego, co ma powstać na gotowym wyrobie. Nie każdy projekt wymaga tego samego poziomu przygotowania — dobieramy go do potrzeb.

Dzięki temu budżet jest wykorzystywany tam, gdzie ma realny wpływ na efekt.

  • Przygotowanie powierzchni pod proces
  • Dopasowanie elementów przy realizacjach segmentowanych
  • Zabezpieczenie na transport i montaż

Od pomysłu do realizacji

Większość projektów startuje od plików 3D i krótkiego opisu zastosowania. Na tej podstawie ustalamy zakres, termin i sposób realizacji.

Jeśli chcesz, możemy zaproponować warianty: szybciej/ekonomiczniej lub w standardzie pod dłuższą eksploatację.

Wybrane realizacje z obszaru modeli, form i narzędzi produkcyjnych.

Co zawierają opisy realizacji

  • Cel i zastosowanie narzędzia
  • Zakres i kluczowe wymagania
  • Efekt końcowy i forma dostawy
  • Wnioski, które warto uwzględnić w podobnych projektach

Masz podobny projekt?

Jeśli planujesz podobną realizację, prześlij krótki opis zastosowania oraz wymiary. Najlepiej dołączyć pliki 3D lub rysunek poglądowy.Odpowiemy z propozycją rozwiązania oraz wyceną dostosowaną do zakresu i terminu.

Poproś o wycenę