• 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');

Wzornictwo przemysłowe i obudowy

Wzornictwo przemysłowe wymaga szybkiego przejścia od projektu do fizycznego obiektu, który można ocenić wizualnie i użytkowo. Wykonujemy prototypy, modele oraz kopyta pod obudowy i osłony — tak, aby decyzje projektowe były oparte na realnym detalu, a nie tylko na wizualizacjach.

Wspieramy również etap wdrożenia: przygotowujemy odniesienia pod montaż, podziały, otwory i elementy łączeń. Dzięki temu prototyp może płynnie przejść w krótką serię lub w przygotowanie oprzyrządowania i produkcji.

  • Prototypy, które dobrze pokazują projekt i proporcje
  • Kopyta pod termoformowane osłony i obudowy
  • Spójna powierzchnia: prezentacja oraz przekazanie do wykończenia
  • Rozsądny podział przy większych gabarytach

Prototypy i narzędzia dla projektantów

Dla zespołów R&D, projektantów i producentów obudów ważne jest, aby prototyp dawał wiarygodny obraz finalnego produktu. Chodzi o proporcje, spasowanie, ergonomię i wygląd, ale też o to, czy detal da się później powtórzyć w produkcji.

Dlatego łączymy prototypowanie z przygotowaniem odniesień montażowych i logicznym podziałem. W efekcie model jest użyteczny nie tylko na etapie decyzji, ale także jako krok w stronę krótkiej serii lub oprzyrządowania.

Typowe zastosowania

Prototypy obudów urządzeń

Obudowy i osłony do oceny ergonomii, dostępu serwisowego i spasowania z podzespołami.Uzgadniamy podziały, otwory i odniesienia, aby prototyp był wiarygodny w montażu i w dalszej pracy.

Modele prezentacyjne i demonstratory

Modele do prezentacji produktu, targów lub wewnętrznych przeglądów projektu.Dobieramy standard wykończenia do celu — od modelu roboczego po prezentacyjny.

Kopyta do termoformowania osłon

Kopyta pod produkcję termoformowanych pokryw, osłon i elementów obudów.Kopyta przygotowujemy pod produkcję, z odniesieniami pod przycięcie i montaż elementów po termoformowaniu.

Panele, fronty i elementy wykończeniowe

Detale, które porządkują wygląd produktu i wymagają spójnej estetyki powierzchni.Zwracamy uwagę na detale, które wpływają na odbiór produktu: krawędzie, linie podziału i spójność powierzchni.

Szablony i przyrządy montażowe

Narzędzia pomagające utrzymać powtarzalny montaż i pozycjonowanie w krótkich seriach.Takie rozwiązania ograniczają błędy w montażu i skracają czas operacji przy powtarzanych zleceniach.

Na czym zależy klientom

  • Wiarygodny wygląd i proporcje prototypu
  • Spasowanie elementów i logika montażu
  • Przemyślane podziały i miejsca łączeń
  • Otwory i detale zgodne z założeniami projektu
  • Możliwość przejścia do krótkiej serii lub oprzyrządowania

Usługi najczęściej wybierane w tym obszarze

W projektach produktowych liczy się tempo, ale też to, aby prototyp nie kończył życia na półce. Dlatego często łączymy projektowanie 3D, obróbkę CNC i przygotowanie kopyt pod produkcję.

Dobór usługi zależy od celu: prototyp do oceny, element do krótkiej serii czy kopyto do termoformowania.

Projektowanie 3D i przygotowanie produkcyjne

Gdy potrzebne jest dopracowanie geometrii, przygotowanie podziału lub uporządkowanie danych.

Pomagamy przygotować element tak, aby późniejsze etapy były prostsze: montaż, powtórzenia, aktualizacje wersji.

Frezowanie CNC 3- i 5-osiowe

Gdy zależy na spójnej powierzchni i czystych przejściach w prototypie lub w detalu wdrożeniowym.

To daje prototyp, który dobrze wygląda i jednocześnie jest praktyczny do dalszego wdrożenia.

Kopyta do termoformowania

Gdy obudowy i osłony mają być wykonywane seryjnie w termoformowaniu.

Kopyta przygotowujemy pod produkcję, aby detal po termoformowaniu był powtarzalny i łatwy w montażu.

Materiały używane w prototypach i obudowach

W projektach produktowych dobór materiału zależy od tego, czy priorytetem jest wygląd prezentacyjny, funkcjonalność prototypu czy przygotowanie kopyta pod produkcję.

Proponujemy materiał adekwatny do celu, aby nie przepłacać, ale też nie tracić na jakości odbioru prototypu.

MDF

Popularny wybór do prototypów i modeli, szczególnie przy większych gabarytach i krótkich terminach.Po przygotowaniu powierzchni sprawdza się w modelach prezentacyjnych oraz w szablonach roboczych.

Płyty narzędziowe PU

Dobra baza do prototypów o wyższych wymaganiach i do kopyt/wzorców o lepszej powierzchni.Wybierane, gdy ważna jest stabilność i przewidywalność powierzchni na dalszych etapach.

EPS / XPS

Szybkie modele objętościowe do przymiarek i oceny gabarytu.To materiał pomocniczy; przy wymaganiach produkcyjnych wybieramy rozwiązania narzędziowe.

Pasta narzędziowa epoksydowa

Uzupełnienia i wzmocnienia w strefach, które muszą być trwalsze lub bardziej odporne.Stosowana do dopracowania krawędzi i stref roboczych, które są intensywnie używane w procesie.

Jak realizujemy projekty

Cel prototypu i wymagania

Ustalamy, czy prototyp ma być prezentacyjny, funkcjonalny czy ma prowadzić do produkcji.

To etap, który pozwala uniknąć rozjazdu między oczekiwaniami a realnym wyglądem i montażem produktu.

Geometria, podział i odniesienia

Uzgadniamy podziały, otwory i odniesienia montażowe, aby model był praktyczny w użyciu.

Dzięki temu prototyp daje wiarygodne wnioski i może być podstawą do dalszych decyzji.

Wykonanie prototypu / kopyta

Wykonujemy element w uzgodnionym standardzie powierzchni i detalu.

Zakres wykończenia dopasowujemy do celu, aby model dobrze reprezentował produkt i był użyteczny.

Przygotowanie do montażu lub produkcji

Przekazujemy element gotowy do montażu, termoformowania lub kolejnego etapu wdrożenia.

Dbamy o to, aby prototyp nie wymagał dodatkowego „ratowania” przed pokazem lub montażem.

Dostawa i kolejne wersje

Wspieramy kolejne iteracje, gdy projekt się rozwija i wymaga aktualizacji.

To szczególnie ważne w urządzeniach i obudowach, gdzie zmiany są naturalną częścią procesu rozwoju.

Typowe rezultaty

  • Prototypy obudów i osłon
  • Modele prezentacyjne
  • Kopyta do termoformowania pod produkcję
  • Panele i elementy wykończeniowe
  • Szablony i przyrządy montażowe

Wycena prototypu lub kopyta

Prześlij plik 3D lub rysunki, gabaryty oraz informację, do czego prototyp ma służyć (prezentacja, montaż, krótkoseryjne wdrożenie). Przygotujemy wycenę i propozycję realizacji.Jeśli projekt ma przejść do termoformowania lub do krótkiej serii, dopasujemy rozwiązanie tak, aby kolejne kroki były proste i przewidywalne.

Poproś o wycenę