Free Shipping on orders over $150

:root {
    /* WIDTH AND SPACINGS */
    --sidebar-width: min(90vw, 300px);
    --pad-s: 0.75rem;
    --pad-xs: 0.5rem;
    --dropdown-links-indent: 10px;

    /* vertical & horizontal header padding */
    --header-pad-y: clamp(1rem, 0.716rem + 1.211vw, 1.75rem);
    --header-pad-x: var(--pad-m);

    /* links vertical & horizontal padding */
    --link-pad-y: var(--space-xs); /* 0.9 rem*/
    --link-pad-x: 0.5rem;

    /* panel top & bottom padding */
    --panel-block-pad: clamp(0.5rem, -1.375rem + 5vh, 2rem);

    /* GAPS */
    --link-gap: var(--space-xs); /*2.2125rem*/
    --list-gap: var(--space-xxs); /*none sets vertical gap on menu items*/

    /* BACKGROUND COLORS */
    --nav-bg: var(--bg-ultra-light);
    --cta-bg: var(--action);
    --link-bg: transparent;
    --header-bg: var(--bg-ultra-light);
    --dropdown-content-bg: var(--bg-light);
    --dropdown-links-bg: transparent;
    --skip-link-background: black;

    /* HOVER BACKGROUND */
    --cta-hover-bg: var(--action-light);
    --link-hover-bg: none; /*rgb(0 0 0 / 5%)*/
    --dropdown-links-hover-bg: rgb(0 0 0 / 8%);

    /* TEXT COLORS */
    --panel-title-color: var(--primary-dark);
    --panel-link-color: var(--primary-dark);
    --cta-color: white;
    --dropdown-links-color: var(--primary-dark);
    --label-color: orangered;
    --skip-link-color: white;
    --social-color: var(--primary-dark);

    /* HOVER TEXT COLORS */
    --cta-hover-color: white;
    --link-hover-color: var(--action);
    --dropdown-links-hover-color: var(--action);
    --social-hover-color: var(--action);

    /* ICON COLORS */
    --panel-icon-color: var(--primary-dark);
    --social-icon-color: var(--social-color);
    --chevron-icon-color: var(--panel-icon-color);
    --mobile-menu-trigger-color: var(--primary);

    /* HOVER ICON COLORS */
    --social-icon-hover-color: var(--social-hover-color);
    --link-icon-hover-color: var(--action);

    /* FONT SIZES */
    --panel-title-size: var(--h3); /* org was 1.125rem*/
    --panel-back-size: var(--text-xs); /* default 0.6 rem */
    --link-txt-size: var(--text-m); /* org value 0.875 rem */
    --nav-icon-size: var(--text-m); /* org value 1.2 rem*/
    --social-icon-size: var(--nav-icon-size);
    --chevron-size: var(--text-l); /* org value 1 rem */

    /* CSS TRANSITIONS */
    --sidebar-transition: 500ms;
    --sidebar-ttf: cubic-bezier(1, 0, 0.25, 1);
    --opacity-transition: 500ms 200ms;
    --sidebar-link-transition: 500ms;

    /* BORDER */
    --link-border-radius: 0;
    --horizontal-line: 1px solid rgb(0 0 0 / 10%);
    --link-underline: var(--horizontal-line);
    --dropdown-links-underline: none;
    --sidebar-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.2);

    /* OVERLAY */
    --overlay-bg: black;
    --overlay-opacity: 0.5;

    /* FOCUS STYLES */
    --focus-outline-color: black;
    --focus-outline-offset: 4px;
    --focus-outline-width: 2px;

    /* EXTRAS */
    --current-link-bg: none;
    --current-link-underline: none; /* underlines the active link */

    /* DROPDOWN LEVELS */

    /* Indents */
    --lvl-2-indent: var(--dropdown-links-indent);
    --lvl-3-indent: var(--dropdown-links-indent);

    /* Dropdown toggle background colors for expanded state */
    --lvl-2-toggle-bg-active: var(--link-hover-bg);
    --lvl-3-toggle-bg-active: var(--link-hover-bg);

    /* Dropdown content background */
    --lvl-2-content-bg: var(--dropdown-content-bg);
    --lvl-3-content-bg: var(--dropdown-content-bg);

    /* Text colors for expanded state */
    --lvl-1-toggle-color-active: var(--panel-link-color);
    --lvl-2-toggle-color-active: var(--panel-link-color);
    --lvl-3-toggle-color-active: var(--panel-link-color);

    /* Icon colors (normal) */
    --lvl-1-icon-color: var(--chevron-icon-color);
    --lvl-2-icon-color: var(--chevron-icon-color);
    --lvl-3-icon-color: var(--chevron-icon-color);

    /* Icon colors (hover) */
    --lvl-1-icon-hover-color: var(--link-icon-hover-color);
    --lvl-2-icon-hover-color: var(--link-icon-hover-color);
    --lvl-3-icon-hover-color: var(--link-icon-hover-color);
}



/* INSIDE BRICKS */
/* hide header/nav when not in main template */
[data-builder-mode].brx-header-left #brx-header:not(.postid-878 *),
[data-builder-mode].brx-header-right #brx-header:not(.postid-878 *) {
    display: none;
}

/* site normal width when not in main template */
[data-builder-mode].brx-header-left #brx-content:not(.postid-878 *),
[data-builder-mode].brx-header-right #brx-content:not(.postid-878 *),
[data-builder-mode].brx-header-left #brx-footer:not(.postid-878 *),
[data-builder-mode].brx-header-right #brx-footer:not(.postid-878 *) {
    margin: 0 !important;
}

// Feature Toggles (1 = enabled, 0 = disabled)

// Automatically rename the text on the back button to show the panel name
// e.g., 'Back to Reviews' instead of the default 'Back'
const updateBackText = 1;

// Calculate header height for mobile menu top offset
const calcHeaderHeight = 1;

// Automatically open the current menu item's panel
const autoCurrentPosition = 1;

// Enable/disable the top bar and off-canvas menu
const enableTopBar = 0;
const enableOffCanvas = 1;

// Mobile and off-canvas breakpoints
const mq = window.matchMedia("(max-width: 1024px)");
const offCanvasBreakpoint = window.matchMedia("(max-width:10024px)");

// Off-canvas options
const offCanvasPushContent = 0; // Enable off-canvas content push (requires off-canvas to be enabled)
const fixedNavTrigger = 1; // Fix the toggle button when pushing content

// Dropdown behavior options
const openFirstDropDown = 0; // Open the first dropdown content on page load
const autoCloseDropdown = 1; // Automatically close the dropdown when it loses focus

// Sidebar and layout options
const overlaySidebar = 0; // Overlay the sidebar on a fullwidth page (requires off-canvas to be disabled)
const overlayTopBar = 0; // Overlay the top bar when using off-canvas

// RTL (Right-to-Left) layout support
const enableRTL = 0;

// Scrolling header reveal/hide effect
const enableHeadroom = 1; 
/*
  NOTES:
  - Off-canvas or top bar must be enabled for headroom to work
  - If you don't want off-canvas on desktop but want the headroom effect on mobile,
    enable off-canvas and set the off-canvas breakpoint to match `mq` (e.g., 1024px)
*/

// Padding and offset options
const calcTopPadding = 1; // Adjust top padding of the first container when headroom is enabled
const offsetHashLinkScroll = 0; // Add offset when scrolling to hash links (useful for sticky headers)

// Offcanvas/Mobile menu behavior
const mobileMenuAboveHeader = 1; // Offcanvas/Mobile menu will overlap the top bar instead of displaying underneath
/* OVERLAY SIDEBAR */


  /*main and footer*/
  .dwc-overlay-sidebar.brx-header-left #brx-content,
  .dwc-overlay-sidebar.brx-header-left #brx-footer,
  .dwc-overlay-sidebar.brx-header-right #brx-content,
  .dwc-overlay-sidebar.brx-header-right #brx-footer,
  .dwc-offcanvas.brx-header-left #brx-content,
  .dwc-offcanvas.brx-header-left #brx-footer,
  .dwc-offcanvas.brx-header-right #brx-content,
  .dwc-offcanvas.brx-header-right #brx-footer {
      margin-inline-start: 0;
  }

  .dwc-overlay-sidebar:not(.dwc-mobile) {
      --header-bg: transparent;
      --nav-bg: transparent;
  }

  .dwc-overlay-topbar {
      --header-bg: transparent;
  }

  .dwc-overlay-topbar #dwc_header.dwc-sidebar {
      background: var(--header-bg);
      margin-block-end: calc(var(--dwc-header-height) * -1);
  }

  .brx-header-left.dwc-overlay-sidebar:not(.dwc-mobile) .swiper-slide {
      padding-inline-start: var(--sidebar-width);
  }

  .brx-header-right.dwc-overlay-sidebar:not(.dwc-mobile) .swiper-slide {
      padding-inline-end: var(--sidebar-width);
  }

 .dwc-mobile-menu-over.dwc-offcanvas .dwc-sidebar__nav, 
    .dwc-mobile-menu-over.dwc-topbar-enabled .dwc-sidebar__nav,
.dwc-mobile-menu-over.dwc-mobile .dwc-sidebar__nav{
      z-index: 999;
    }

    .dwc-mobile-menu-over.dwc-mobile .dwc-sidebar__nav__panel {
        padding-block-start: 0 !important;
    }

    .dwc-offcanvas .dwc-sidebar__nav__panel:not(.dwc-mobile-menu-over *) {
        padding-block-start: var(--dwc-header-height);
        z-index: 0;
    }
    
    .dwc-offcanvas .dwc-header-inner-wrap:not(.dwc-mobile-menu-over *) {
        z-index:99999; 
    }



  /* OFFCANVAS */

  .dwc-offcanvas.brx-header-left #brx-header {
      bottom: auto;
      inline-size: 100%;
  }

  .dwc-offcanvas.brx-header-left #brx-header:not(.dwc-headroom *) {
      position: relative;
  }


  .dwc-push-content.dwc-slide-nav-open.dwc-nav-trigger-is-fixed .dwc-nav-trigger {
      transform: translateX(calc(var(--sidebar-width) * -1));
  }

  .dwc-rtl.dwc-push-content.dwc-slide-nav-open.dwc-nav-trigger-is-fixed .dwc-nav-trigger {
      transform: translateX(calc(var(--sidebar-width) * 1));
  }

  .dwc-nav-trigger {
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }

  .dwc-offcanvas .dwc-sidebar__nav {
      transform: translateX(-100%);
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }

  .dwc-offcanvas .dwc-sidebar__nav,
  .dwc-topbar-enabled .dwc-sidebar__nav {
      background: var(--nav-bg);
      inline-size: var(--sidebar-width);
      position: fixed !important;
      bottom: 0;
      inset-inline-start: 0;
      inset-block-start: 0;
      block-size: 100dvb;
      overflow: hidden;
      box-shadow: var(--sidebar-shadow);

  }

  .dwc-offcanvas.dwc-slide-nav-open .dwc-mobile-menu-overlay {
      pointer-events: auto;
      opacity: var(--overlay-opacity);
  }

  .dwc-offcanvas .dwc-mobile-menu-overlay {
      background: var(--overlay-bg);
      position: fixed !important;
      inset-block-start: 0;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      pointer-events: none;
      opacity: 0;
      transition: 0.4s 0.2s;
      block-size: 100vh;
  }

  .dwc-slide-nav-open .dwc-sidebar__nav:not(.dwc-push-content *) {
      transform: translateX(0) !important;
  }


  .dwc-push-content .dwc-sidebar__nav__panel {
      padding-block: var(--panel-block-pad) !important;
  }



  .dwc-offcanvas .dwc-sidebar__nav:not(.dwc-mobile *),
  .dwc-topbar-enabled .dwc-sidebar__nav:not(.dwc-mobile *) {
      z-index: 1000;
  }


  .dwc-topbar-enabled .dwc-sidebar__nav__panel:not(.dwc-mobile *) {
      padding-block-start: calc(20px + var(--dwc-header-height));
  }

  /* body */

  body.dwc-no-scroll {
      overflow: hidden;
      block-size: 100vh;
  }


  body.dwc-offcanvas {
      --sidebar-transition: 700ms;
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }


  /* OFFCANVAS ENDS */

  /* push content */

  .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>header,
  .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>footer,
  .dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>main {
      transform: translateX(var(--sidebar-width));
  }




  .dwc-mobile.dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper {
      overflow: hidden;
      block-size: 100dvb;
  }

  .dwc-site-wrapper {
      block-size: 100%;
      display: flex;
      flex-direction: column;
  }

  header,
  footer,
  main {
      --sidebar-transition: 700ms;
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
  }

  /*RTL*/

  .dwc-rtl .dwc-sidebar__nav__panel {
      direction: rtl;
  }


  .dwc-rtl #brx-footer:not(.dwc-mobile *, .dwc-overlay-sidebar *, .dwc-offcanvas *),
  .dwc-rtl #brx-content:not(.dwc-offcanvas *, .dwc-mobile *, .dwc-overlay-sidebar *, .dwc-offcanvas *) {
      margin-inline-start: unset;
      margin-inline-end: var(--sidebar-width);

  }

  .dwc-rtl header.dwc-sidebar {
      inset-inline-end: 0;
  }

  .dwc-rtl.dwc-mobile .dwc-sidebar__nav,
  .dwc-rtl.dwc-offcanvas .dwc-sidebar__nav,
  .dwc-rtl.dwc-topbar-enabled .dwc-sidebar__nav,
  .dwc-rtl #brx-header {
      inset-inline-start: auto;
      inset-inline-end: 0;
  }


  .dwc-rtl.dwc-mobile .dwc-sidebar__nav,
  .dwc-rtl.dwc-offcanvas .dwc-sidebar__nav {
      transform: translateX(100%);
  }

  .dwc-rtl.dwc-push-content.dwc-slide-nav-open header,
  .dwc-rtl.dwc-push-content.dwc-slide-nav-open main,
  .dwc-rtl.dwc-push-content.dwc-slide-nav-open footer {
      --rtl-translate: calc(var(--sidebar-width) * -1);
      transform: translateX(var(--rtl-translate));
  }

  /* RTL + OVERLAY SIDEBAR */
  .dwc-rtl.dwc-overlay-sidebar .brxe-section:not(.dwc-mobile *),
  .dwc-rtl.dwc-overlay-sidebar #brx-footer .brxe-section:not(.dwc-mobile *) {
      padding-inline-end: calc(var(--sidebar-width) + 20px);
  }

  .dwc-overlay-sidebar .brxe-section:not(.dwc-rtl *, .dwc-mobile *),
  .dwc-overlay-sidebar #brx-footer .brxe-section:not(.dwc-rtl *, .dwc-mobile *) {
      padding-inline-start: calc(var(--sidebar-width) + 20px)
  }


  /* TOP BAR*/
  .dwc-topbar-enabled .dwc-header-inner-wrap,
  .dwc-offcanvas .dwc-header-inner-wrap {
      box-shadow: var(--sidebar-shadow);
  }

  .dwc-topbar-enabled .dwc-header-inner-wrap {
      z-index: 9999;
  }

  .dwc-topbar-enabled #brx-header {
      inline-size: 100%;
      block-size: var(--dwc-header-height);
      background: transparent !important;
      /* position: relative;*/
  }

  .dwc-topbar-enabled .dwc-sidebar:not(.dwc-mobile *) {
      position: fixed;
      inline-size: 100%;
      max-inline-size: 100%;
      background: var(--header-bg);
      box-shadow: none;
  }



  /* TOP BAR ENDS */


  .dwc-current-menu-item {
      background-color: var(--current-link-bg);
      border-bottom: var(--current-link-underline);
  }

  #brx-header {
      background-color: var(--header-bg);
  } 


  .dwc-mobile.brx-header-left #brx-header:not(.dwc-headroom *),
  .dwc-mobile.brx-header-right #brx-header:not(.dwc-headroom *) {
      position: relative;
      inline-size: 100%;
      block-size: auto;
  }

  /* MEDIA QUERY - DESKTOP */
  @media (min-width: 1025px) {

      .dwc-nav-trigger:not(.dwc-offcanvas *, .bricks-draggable-item),
      .dwc-mobile-menu-overlay:not(.dwc-offcanvas *),
      .mobile.dwc-nav__panel__header:not(.dwc-offcanvas *) {
          display: none !important;
      }
  }

  /* MEDIA QUERY - DESKTOP ENDS */
  html,
  body {
      block-size: 100%
  }

  main,
  footer {
      inline-size: 100%;
  }

  main {
      flex-grow: 1
  }

  .dwc-sidebar {
      box-shadow: var(--sidebar-shadow)
  }


  .dwc-sidebar__nav {
      block-size: 100%;
      z-index: 1;
      inline-size: var(--sidebar-width);
      position: relative;
      background-color: var(--nav-bg);
  }




  .dwc-sidebar__nav:not([data-builder-mode] *) {
      overflow: hidden;
  }

  .dwc-sidebar__nav__panel {
      background: var(--nav-bg);
      position: absolute;
      inline-size: 100%;
      block-size: 100%;
      display: flex;
      flex-direction: column;
      transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
      transform: translateX(0);
      box-shadow: -5px -5px 40px rgb(0 0 0/10%);
      z-index: 1000;
      padding-block: var(--panel-block-pad);
      padding-block-start: 0;
      flex-wrap: nowrap;
  }

  .dwc-mobile .dwc-sidebar__nav__panel {
      padding-block-start: var(--dwc-header-height);
  }

  .dwc-sidebar__nav__panel:not([data-builder-mode] *) {
      overflow: hidden;
  }

  @media (min-height:668px) {
    .dwc-sidebar__nav__panel:not([data-builder-mode] *)::after {
        content: '';
        position: absolute;
        bottom: 5px;
        inline-size: 100%;
        block-size: var(--panel-block-pad);
        background: var(--nav-bg);
        filter: blur(5px)
    }
  }
  .dwc-nav__panel__header {
      inline-size: 100%;
      padding: 0.32rem var(--pad-m);
      gap: var(--list-gap);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
      flex-wrap: nowrap;
  }

  .dwc-header-inner-wrap {
      inline-size: 100%;
      padding-block: var(--header-pad-y);
      padding-inline: var(--header-pad-x);
      gap: var(--list-gap);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
      flex-wrap: nowrap;
      background: var(--header-bg);
  }


  .dwc-nav__panel__inner {
      inline-size: 100%;
      flex-grow: 1;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      flex-wrap: nowrap;
      padding-inline: var(--pad-m);
  }

  .dwc-nav__panel__title-wrap {
      padding: var(--pad-s) var(--pad-xs);
      inline-size: 100%;
      box-shadow: 0 -6px 10px 15px var(--nav-bg);
      position: -webkit-sticky;
      position: sticky;
      inset-block-start: -3px;
      background-color: var(--nav-bg);
      z-index: 1;
  }

  .dwc-nav__panel__title {
      color: var(--panel-title-color);
      font-size: var(--panel-title-size);
      font-weight: 500;
      letter-spacing: 1px;
  }

  .dwc-sidebar__nav__ul {
      display: flex;
      flex-direction: column;
      inline-size: 100%;
      margin: 0;
      padding-inline-start: 0;
      /* padding-block: var(--pad-m); */
      gap: var(--list-gap);
      flex-grow: 1;
  }

  .dwc-sidebar__nav__ul:not(.dwc-sidebar__dropdown-content .dwc-sidebar__nav__ul) {    
    padding-block: var(--pad-m);
 
}

  .dwc-sidebar__nav__li {
      list-style: none;
      inline-size: 100%;
      position: relative;
      border-radius: var(--link-border-radius)
  }

  .dwc-sidebar__nav__btn,
  .dwc-sidebar__nav__link {
      inline-size: 100%;
      display: flex !important;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      align-items: center;
      padding: var(--link-pad-y) var(--link-pad-x);
      gap: var(--link-gap);
      color: var(--panel-link-color);
      text-align: left;
      line-height: 1.3;
      transition: var(--sidebar-link-transition), outline 0s;
      border-radius: var(--link-border-radius);
  }

  .dwc-nav__back-btn {
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 2px;
      font-size: var(--panel-back-size);
  }

  .dwc-nav__home-btn {
      inline-size: auto;
      padding: var(--pad-s);
      margin: auto;
      background: transparent;
      border: none;
      cursor: pointer;
      border-radius: var(--link-border-radius);
      position: relative;
  }

  .nav__home-btn__txt {
      position: absolute;
      clip: rect(0, 0, 0, 0);
      font-size: 12px;
  }

  .dwc-sidebar__nav__btn,
  .dwc-sidebar__dropdown-toggle button {
      outline-width: 0;
      outline: none;
      cursor: pointer;
      background: var(--link-bg);
      border: none;
  }

  /* mobile menu toggle button*/
  .dwc-nav-trigger {
      cursor: pointer;
      position: relative;
      min-inline-size: 26px !important;
      min-block-size: 0 !important;
  }

  .dwc-nav-trigger::before {
      inset-inline-start: 0;
      inset-inline-end: 0;
      transform: translateY(-5px);
  }

  .dwc-nav-trigger::after {
      inset-inline-start: 10px;
      inset-inline-end: 0;
      transform: translateY(5px);
  }

  .dwc-nav-trigger::before,
  .dwc-nav-trigger:after {
      content: '';
      position: absolute;
      transition: 0.4s 0.3s;
      block-size: 3px;
      background: var(--mobile-menu-trigger-color);
      inset-block-start: 50%;
      border-radius: 50vw
  }

  .dwc-slide-nav-open .dwc-nav-trigger::before {
      transform: translateY(0) rotate(45deg);
  }

  .dwc-slide-nav-open .dwc-nav-trigger::after {
      transform: translateY(0) rotate(-45deg);
      inset-inline-start: 0;
  }



  .dwc-sidebar__dropdown-toggle .dwc-nav__link__icon {
      transform: rotate(90deg);
      transition: 0.4s
  }

  .dwc-sidebar__dropdown-toggle [aria-expanded="true"] .dwc-nav__link__icon {
      transform: rotate(270deg)
  }

  .dwc-sidebar__dropdown-content {
      overflow: hidden;
      transition: var(--sidebar-transition) cubic-bezier(0.22, 0.61, 0.36, 1);
      padding-inline: var(--link-pad-x);
      padding-block: 0;
      background-color: var(--dropdown-content-bg)
  }


/*
  .dwc-sidebar__dropdown-content .dwc-sidebar__nav__ul {
      padding-block: calc(var(--link-pad-y) * 0.8);
  }
*/
  .dwc-sidebar__dropdown-content .dwc-sidebar__nav__li {
      border: var(--dropdown-links-underline);
  }


  .dwc-sidebar__dropdown-toggle {
      inline-size: 100%;
      display: flex !important;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--link-gap);
      text-align: left;
      line-height: 1.3;
      padding-inline-start: var(--link-pad-x);
      position: relative;
      transition: var(--sidebar-link-transition);
  }


  .dwc-sidebar__dropdown ul .dwc-nav__link__text,
  .dwc-sidebar__dropdown button {
      transition: var(--sidebar-link-transition), outline 0s;
      border-radius: var(--link-border-radius);
      inline-size: 100%;
  }

  .dwc-sidebar__dropdown button,
  .dwc-sidebar__dropdown-toggle .dwc-nav__link__text {
      padding: var(--link-pad-y) 0;
  }

  .dwc-sidebar__dropdown-content ul .dwc-nav__link__text {
      padding: var(--link-pad-y) var(--link-pad-x);
  }

  .dwc-sidebar__dropdown-content ul:not([class*="level-"]:not(.level-1)  ul){
    padding-inline-start: calc(var(--dropdown-links-indent) - var(--link-pad-x));
    padding-block: var(--link-pad-y);
}

  .dwc-sidebar__dropdown-toggle button {
      margin-inline-start: auto;
      flex-grow: 1;
      padding-inline-end: var(--link-pad-x);
      position: absolute;
      inset-block-start: 0;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
  }


/* LEVEL 1 STYLES */

/* Normal icon color for Level 1 */
.dwc-sidebar__dropdown-toggle .dwc-nav__link__icon {
    color: var(--lvl-1-icon-color);
}

/* LEVEL 2 STYLES */

/* Expanded background color for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2:has([aria-expanded='true']) {
    background-color: var(--lvl-2-toggle-bg-active);
}

/* Expanded text color for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2:has([aria-expanded='true']) .dwc-nav__link__text {
    color: var(--lvl-2-toggle-color-active);
}

/* Dropdown content background for Level 2 */
.dwc-sidebar__dropdown-content.level-2 {
    background-color: var(--lvl-2-content-bg);
    padding-inline-start: var(--lvl-2-indent);
}

/* Normal icon color for Level 2 when expanded */
.level-2:has([aria-expanded='true']) .dwc-nav__link__icon {
    color: var(--lvl-2-icon-color);
}

/* Hover icon color for Level 2 when expanded */
li>.level-2:has([aria-expanded='true']):hover .dwc-nav__link__icon {
    color: var(--lvl-2-icon-hover-color) !important;
}

/* LEVEL 3 STYLES */

/* Expanded background color for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3:has([aria-expanded='true']) {
    background-color: var(--lvl-3-toggle-bg-active);
}

/* Expanded text color for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3:has([aria-expanded='true']) .dwc-nav__link__text {
    color: var(--lvl-3-toggle-color-active);
}

/* Dropdown content background for Level 3 */
.dwc-sidebar__dropdown-content.level-3 {
    background-color: var(--lvl-3-content-bg);
    padding-inline-start: var(--lvl-3-indent);
}

/* Normal icon color for Level 3 when expanded */
.level-3:has([aria-expanded='true']) .dwc-nav__link__icon {
    color: var(--lvl-3-icon-color);
}

/* Hover icon color for Level 3 when expanded */
li>.level-3:has([aria-expanded='true']):hover .dwc-nav__link__icon {
    color: var(--lvl-3-icon-hover-color) !important;
}

  .dwc-sidebar__nav__li {
      border-bottom: var(--link-underline);
  }


  .dwc-sidebar__nav__link:hover,
  .dwc-nav__home-btn:hover,
  button.dwc-sidebar__nav__btn:hover,
  .dwc-sidebar__dropdown-toggle:hover {
      background: var(--link-hover-bg);
  }


  .dwc-sidebar__dropdown-content a {
      background: var(--dropdown-links-bg);
      color: var(--dropdown-links-color)
  }

  .dwc-sidebar__dropdown-content a:hover {
      background: var(--dropdown-links-hover-bg);
      color: var(--dropdown-links-hover-color)
  }

  button:hover .dwc-nav__link__text,
  .dwc-sidebar__dropdown-toggle:hover .dwc-nav__link__text,
  button:hover .dwc-nav__back__text,
  .dwc-sidebar__dropdown-toggle:hover .dwc-nav__link__text {
      color: var(--link-hover-color);
  }



  .dwc-nav__link__text {
      color: var(--panel-link-color);
      font-size: var(--link-txt-size);
  }

  .dwc-sidebar__nav__link::before {
      content: '';
      inset-block-start: 0;
      bottom: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      position: absolute;
  }

  /* button:hover .dwc-nav__link__icon,
  li:hover .dwc-nav__link__icon {
      color: var(--link-icon-hover-color) !important;
  } */

  button:hover .dwc-nav__link__icon:not(.level-2:has([aria-expanded='true']) *, .level-3 *), 
  li:hover > .dwc-sidebar__dropdown-toggle .dwc-nav__link__icon:not(.level-2:has([aria-expanded='true']) *, .level-3:has([aria-expanded='true']) *) {
    color: var(--link-icon-hover-color) !important;
}

  .dwc-nav__link__icon {
      font-size: var(--nav-icon-size);
      color: var(--panel-icon-color)
  }

  .dwc-nav__link__icon--chevron-right {
      margin-inline-start: auto;
  }

  
  .dwc-nav__link__icon--chevron-right,
  .dwc-nav__link__icon--chevron-left  {
    font-size: var(--chevron-size);
    color: var(--chevron-icon-color);
}

svg.dwc-nav__link__icon{
    width: var(--nav-icon-size);
    height: auto;
}


  .dwc-sidebar__nav__list-img {
      inline-size: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      object-position: top center;
      border-radius: var(--link-border-radius);
  }

  .dwc-sidebar__nav__panel-footer {
      inline-size: 100%;
      padding-block: var(--pad-m);
      gap: var(--link-gap);
      z-index: 5;
      padding-inline: var(--pad-m);
      border-top: var(--horizontal-line);
  }

  .dwc-sidebar__nav__panel-footer:not([data-builder-mode] *) {
      box-shadow: 0 6px 24px 32px var(--nav-bg);
  }

  .dwc-social-wrapper a {
      color: var(--social-color);
  }

  .dwc-social-wrapper a:hover {
      color: var(--social-hover-color)
  }

  .dwc-social-wrapper li {
      background: var(--social-bg);
      border-radius: var(--link-border-radius);
  }

  .dwc-social-wrapper li:hover {
      background: var(--social-hover-bg);

  }

  .dwc-social-wrapper i {
      color: var(--social-icon-color);
      font-size: var(--social-icon-size);
  }

  .dwc-social-wrapper li:hover i {
      color: var(--social-icon-hover-color)
  }

  .dwc-cta {
      justify-content: center;
      background: var(--cta-bg);
      inline-size: 100%;
      color: var(--cta-color);
      border-radius: var(--link-border-radius);
  }

  .dwc-cta:hover {
      background: var(--cta-hover-bg);
  }


  /*FOCUS STYLES*/

  .dwc-sidebar *:not(.dwc-sidebar .dwc-sidebar__nav__panel):focus-visible {
      outline: none !important;
      outline-offset: var(--focus-outline-offset);
      transition: 0s;
  }

  .dwc-sidebar li:not(.dwc-sidebar__dropdown):focus-within {
      outline: solid var(--focus-outline-width) var(--focus-outline-color) !important;
  }

  .dwc-sidebar li:focus-within:has(:focus:not(:focus-visible)),
  #brx-header .dwc-sidebar li a:not(.dwc-sidebar__dropdown-toggle *):focus-visible,
  #brx-header .dwc-sidebar__nav__btn:not(.dwc-nav__back-btn):focus-visible,
  .dwc-sidebar__nav__panel:focus,
  .dwc-sidebar__nav__panel:focus-visible,
  .dwc-sidebar *:focus:not(:focus-visible),
  header:focus-visible {
      outline: none !important;
  }

  /*FOCUS STYLES END*/


  .dwc-slide-left {
      transform: translateX(-100%);
      z-index: 0;
  }

  .dwc-slide-right {
      transform: translateX(75%);
      z-index: 0;
      opacity: 0;
  }

  /* mobile menu toggle */
  .dwc-nav-trigger {
      border: none;
      background: none;
      padding: var(--pad-m)
  }

  /*MEDIA QUERY - MOBILE*/
  @media (max-width:1024px) {

      /*header and menu on mobile*/
      .brx-header-left #brx-header:not([data-builder-mode] *, .dwc-headroom.dwc-mobile *),
      .brx-header-right #brx-header:not([data-builder-mode] *) {
          position: relative;
          inline-size: 100%;
          block-size: auto;
      }

      /*main and footer*/
      .brx-header-left #brx-content,
      .brx-header-left #brx-footer,
      .brx-header-right #brx-content,
      .brx-header-right #brx-footer {
          margin: 0 !important;
      }

      .dwc-sidebar__nav {
          background: var(--nav-bg);
          inline-size: var(--sidebar-width);
          position: fixed;
          bottom: 0;
          inset-inline-start: 0;
          inset-block-start: 0;
          transform: translateX(-100%);
          transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
          min-block-size: 100vh;
          min-block-size: 100dvb;
      }

      .dwc-sidebar__nav__panel:not([data-builder-mode] *) {
          background: white;
      }

      .dwc-sidebar__nav__panel>div {
          background: var(--nav-bg);
      }

      .dwc-slide-nav-open .dwc-sidebar__nav:not(.dwc-push-content *) {
          transform: translateX(0);
      }

      .dwc-nav__link__text {
          font-weight: 500;
      }

      .dwc-sidebar__logo-wrapper {
          inline-size: auto;
      }

      body.dwc-slide-nav-open {
          overflow: hidden;
          block-size: 100vh
      }

      .dwc-mobile-menu-overlay {
          background: var(--overlay-bg);
          position: fixed;
          inset-block-start: 0;
          bottom: 0;
          inset-inline-start: 0;
          inset-inline-end: 0;
          pointer-events: none;
          opacity: 0;
          transition: 0.4s 0.2s;
      }

      .dwc-slide-nav-open .dwc-mobile-menu-overlay {
          pointer-events: auto;
          opacity: var(--overlay-opacity);
      }

      /* RIGHT MENU ON MOBILE*/

      .brx-header-right .dwc-sidebar__nav {
          transform: translateX(100%);
          inset-inline-start: auto;
          inset-inline-end: 0;
      }

      .dwc-slide-nav-open.brx-header-right .dwc-sidebar__nav {
          transform: translateX(0%);
      }

      /* inside Bricks start*/
      [data-builder-mode] .dwc-sidebar__nav {
          inset-block-start: 120px;
          transform: translateX(0);
          border-top: dashed 1px gray;
          position: static;
          overflow: visible;
      }

      [data-builder-mode].brx-header-left #brx-header,
      [data-builder-mode].brx-header-right #brx-header {
          background: transparent;
      }

      /* inside Bricks end */




  }

  /*MEDIA QUERY - MOBILE ENDS */

  /* headroom*/

  .dwc-headroom.dwc-offcanvas .dwc-sidebar,
  .dwc-headroom.dwc-topbar-enabled .dwc-sidebar,
  .dwc-headroom.dwc-offcanvas .dwc-header-inner-wrap,
  .dwc-headroom.dwc-topbar-enabled .dwc-header-inner-wrap {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      inset-inline-end: 0;
      transition: transform 1s ease;
  }


  /*.dwc-headroom.scroll-down .dwc-sidebar:not(.dwc-topbar-enabled *),*/
  .dwc-headroom.dwc-offcanvas.scroll-down .dwc-header-inner-wrap,
  .dwc-headroom.dwc-topbar-enabled.scroll-down .dwc-header-inner-wrap {
      transform: translateY(-100%);
  }


  @media (max-height: 667px) {

      .dwc-sidebar__nav__panel:not(.ng-scope .dwc-sidebar__nav__panel) {
    overflow-y:scroll;
    overscroll-behavior: contain;
     /*  min-block-size: 100vh;
  min-block-size: 100dvb;*/
} 

      .dwc-nav__panel__inner {
          overflow: hidden;
          flex-shrink: 0;
      }


  }


  /* MEDIA QUERY - MOBILE ENDS */



  /*SCROLLBARS*/
  .dwc-nav__panel__inner::-webkit-scrollbar-track {
      border-radius: 5px;
      background-color: transparent;
  }

  .dwc-nav__panel__inner::-webkit-scrollbar {
      inline-size: 0;
      background-color: transparent;
  }

  .dwc-nav__panel__inner::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: var(--nav-bg);
  }

  /* SCROLLBARS END */

  /* FADE IN OFFCANVS */

  .dwc-offcanvas-header {
      animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;
  }

  body:has(.dwc-offcanvas-header) {
      animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;
  }
/*
  @keyframes dwc-header-fade-in {
      0% {
          opacity: 0;
      }

      100% {

          opacity: 1;
      }
  }
*/

  /* INSIDE BRICKS */
  [data-builder-mode] .dwc-sidebar__nav__panel,
  [data-builder-mode].brx-header-left #brx-header,
  [data-builder-mode].brx-header-right #brx-header {
      position: static !important;
      outline: gray dashed 3px;
      padding-block-end: 20px;
      min-block-size: min(100vh, 600px);
      block-size: unset;
  }

  #brx-header.bricks-area {
      inline-size: 100% !important;
      min-block-size: unset !important;
      padding-block-end: 0 !important;
  }

  .bricks-draggable-item.dwc-sidebar {
      position: relative
  }

  .bricks-draggable-item.dwc-sidebar__nav {
      position: absolute;
      inset-block-start: 100%;
      flex-wrap: nowrap;
  }


  [data-builder-mode] .dwc-slide-right {
      opacity: 1 !important;
      transform: translateX(0) !important;
  }

  [data-builder-mode] .dwc-sidebar__nav {
      overflow: visible !important;
  }

  [data-builder-mode] .dwc-sidebar__nav__panel:hover {
      outline: yellow solid 3px;
      z-index: 100000
  }

  [data-builder-mode] .dwc-slide-right {
      opacity: 1;
      transform: translateX(0);
  }

  [data-builder-mode] button.dwc-sidebar__nav__btn,
  [data-builder-mode] .dwc-sidebar__nav__link,
  [data-builder-mode] .dwc-sidebar__nav__panel {
      position: relative;
  }

  [data-builder-mode] button.dwc-sidebar__nav__btn::after {
      content: 'TO ' '"'attr(data-title)'"' ' PANEL';
      position: absolute;
      bottom: 1px;
      left: 40px;
      font-size: 8px;
      font-weight: bold;      
      color: var(--label-color);
      letter-spacing: 1px;
    font-family: poppins, Roboto;
  }

  [data-builder-mode] button.dwc-nav__back-btn::after {
      content: 'To previous panel';
      inset-inline-start: 32px;
  }

  [data-builder-mode] button.dwc-nav__home-btn::after {
      content: 'HOME';
      position: absolute;
      top: 80%;
      left: 48%;
      right: auto;
      transform: translateX(-50%);
      white-space: nowrap;
      opacity: 0.8;
      font-size: 8px;
      font-weight: bold;
      color: var(--label-color);
      letter-spacing: 1px;
    font-family: poppins, Roboto;
  }

  [data-builder-mode] .dwc-sidebar__nav__panel::after {
      content: '"'attr(data-title)'"' ' Panel';
      position: absolute;
      top: 0;
      left: 100%;
      font-size: 18px;
      font-weight: bold;
      color: black;
      background: white;
      padding-inline: 2rem;
      letter-spacing: 1px;
      white-space: nowrap;
      writing-mode: vertical-lr;
  }


[data-builder-mode] .dwc-sidebar__dropdown-toggle >  button::before
{
    position: absolute;
    right: 100%; 
    color: var(--label-color);
    background-color: #ebebeb;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    font-family: poppins, roboto;
    padding: 4px;
    border-radius: 5px;    
}

[data-builder-mode] .dwc-sidebar__dropdown-content{
  overflow: visible;
}

[data-builder-mode] .dwc-nav__panel__inner > ul > .dwc-sidebar__dropdown >  .dwc-sidebar__dropdown-toggle   >  button::before{
    content: 'L1';
}

[data-builder-mode] .dwc-sidebar__dropdown-toggle:not(.dwc-nav__panel__inner > ul > .dwc-sidebar__dropdown > *,.dwc-sidebar__dropdown .dwc-sidebar__dropdown .dwc-sidebar__dropdown > *)  >  button::before{
    content: 'L2';
}

[data-builder-mode] .dwc-sidebar__dropdown-toggle >  button::before{
    content: 'L3';
    } 


   


if (enableTopBar && !enableOffCanvas){   
    document.body.classList.add('dwc-topbar-enabled') 
   }
   
 
  if (enableRTL){   
    document.body.classList.add('dwc-rtl') 
   }
 
// we can remove !enableOffCanvas if on mobile only to have overlay on desktop + headroom on mobile.
  if (overlaySidebar && !enableOffCanvas){   
    document.body.classList.add('dwc-overlay-sidebar') 
   }
 
  if (overlayTopBar  && enableOffCanvas){   
    document.body.classList.add('dwc-overlay-topbar') 
   }

if (mobileMenuAboveHeader==1){
  document.body.classList.add('dwc-mobile-menu-over')
}



document.addEventListener('DOMContentLoaded', () => {
  
  document.body.classList.add('show-nav')
  
    const header = document.querySelector("header");
    const sidebar = document.querySelector('.dwc-sidebar');
    const navTrigger = document.querySelector(".dwc-nav-trigger");
    const closeBtn =  document.querySelector(".dwc-sidebar__nav-close-btn");
    const mobileMenuOverlay = document.querySelector(".dwc-mobile-menu-overlay");
    const body = document.body;
    const nav = document.querySelector('.dwc-sidebar__nav');
    const homePanel = document.querySelector('.dwc-sidebar__nav__panel--home');
    const sidebarNavPanels = document.querySelectorAll(".dwc-sidebar__nav__panel");
    const dropdownToggles = document.querySelectorAll('.dwc-sidebar__dropdown-toggle button');
    const dropdownContents = document.querySelectorAll('.dwc-sidebar__dropdown-content');
    const menuLinks = document.querySelectorAll('.dwc-sidebar__nav__li a');
    const offCanvasMobileOnly = offCanvasBreakpoint.matches;

    const select = selector => document.querySelectorAll(selector);

    const initInert = () => select('.dwc-sidebar__nav__panel').forEach(nPanel => {

        if (!nPanel.classList.contains('dwc-sidebar__nav__panel--home')) {
            nPanel.inert = true;
        }else if (enableOffCanvas && offCanvasMobileOnly ){
            nPanel.inert = true;
        }else {
            nPanel.inert = false;
        }
    });


  
  
  //OPEN FIRST DROP DOWN
if (openFirstDropDown){
    setTimeout(function () {   
            dropdownToggles[0].click(); 
}, 600);
}
  
// Get DROPWDOWN LEVELS
dropdownContents.forEach(function (element) {
    let level = 1;
    let parent = element.parentElement.closest('.dwc-sidebar__dropdown-content');

    // Calculate the level by checking the number of ancestors
    while (parent) {
        level++;
        parent = parent.parentElement.closest('.dwc-sidebar__dropdown-content');
    }

    // Assign the appropriate level class to the dropdown content
    element.classList.add(`level-${level}`);

    // Find the previous sibling with the class .dwc-sidebar__dropdown-toggle
    const previousToggle = element.previousElementSibling;

    // Check if the previous sibling is a dropdown toggle and assign the level class
    if (previousToggle && previousToggle.classList.contains('dwc-sidebar__dropdown-toggle')) {
        previousToggle.classList.add(`level-${level}`);
    }
});


  
    // CURRENT MENU ITEM ****************


   // Get the current page address without trailing slash
var currentPage = window.location.pathname.replace(/\/$/, '');

for (var i = 0; i < menuLinks.length; i++) {
    var link = menuLinks[i];

    // Extract the pathname from the link's href attribute without trailing slash
    var linkPathname = link.href.replace(window.location.origin, '').replace(/\/$/, ''); 

    // Check if the pathname matches the current page
    if (linkPathname === currentPage) {
        // Add the class 'dwc-current-menu-item' to the matching link
        link.classList.add("dwc-current-menu-item");
    
      // Break out of the loop since we found the matching link
        break;
    } else {
        // Skip to the next iteration if the link doesn't match
        continue;
    }
}

setTimeout(function () {
    const currentDropDownLink = document.querySelector('.dwc-current-menu-item.dwc-nav__link__text');
    if (currentDropDownLink) {
     const parent = currentDropDownLink.closest('.dwc-sidebar__dropdown-content');
        if (parent) {
          const toggle = parent.previousElementSibling.querySelector('button');
            if (toggle) {
                toggle.click();
            }
        }
        setTimeout(function () {
            currentDropDownLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            //console.log(currentDropDownLink);
        }, 500);
    }
}, 2000);


// CURRENT MENU ENDS **********

    // CURRENT MENU CHECK - we'll be using this to determine if to reset panels on navTrigger click or not
    var hasCurrentMenu = Array.from(document.querySelectorAll(".dwc-sidebar__nav__link.dwc-current-menu-item")).some(function (link) {
        var parentPanel = link.closest(".dwc-sidebar__nav__panel");
        return !parentPanel || !parentPanel.classList.contains("dwc-sidebar__nav__panel--home");
    });

    // CURRENT CHECK ENDS *********************
    

    const goHome = () => select('.dwc-sidebar__nav__panel').forEach(nPanel => {
        nPanel.classList.remove('dwc-slide-left');

        if (!nPanel.classList.contains('dwc-sidebar__nav__panel--home')) {
            nPanel.classList.add('dwc-slide-right');
            nPanel.inert = true;
        } else {
            nPanel.inert = false;
            if (header && !mq.matches) {
                header.setAttribute('tabindex', 0);
                header.focus()
            }
        }
        select('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)').forEach(sbtn => {
            sbtn.setAttribute('aria-expanded', 'false');
        })
        mobileMenuIsClosed()
        window.addEventListener("resize", mobileMenuIsClosed);
    });
    select('.dwc-nav__home-btn').forEach(hbtn => hbtn.addEventListener('click', goHome));


    nav.addEventListener('keydown', event => {
        if (nav.contains(event.target)) {
            if (event.key === 'Escape') {
                if (body.classList.contains('dwc-slide-nav-open')) {

                    if (navTrigger) {
                        navTrigger.click()
                        navTrigger.focus()
                    }
                    goHome();

                } else {
                    goHome();
                }
            }
        }
    });

    // for Bricks

    const offCanvasBackdrop = document.querySelector('.brx-offcanvas-backdrop');
    isBricks = body.classList.contains('bricks-is-frontend')

    if (isBricks) {

        if (offCanvasBackdrop) {
            offCanvasBackdrop.addEventListener('click', event => {
                if (body.classList.contains('dwc-slide-nav-open')) {
                    navTrigger.click()
                    goHome();
                    if (navTrigger) {
                        navTrigger.focus()
                    }
                } else {
                    goHome();
                }
            });
        }
    }

    //   bricks end


		console.log("??");
    select('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)').forEach(sbtn => {
        sbtn.setAttribute('aria-expanded', 'false');
        sbtn.addEventListener('click', function (e) {
            initCollapseContent();
            dropdownToggles.forEach((togglebtn) => {
                togglebtn.setAttribute('aria-expanded', 'false');
            });
            e.preventDefault();
            e.stopPropagation();
            const targetId = this.getAttribute('data-title');
            const targetElement = document.querySelector(`.dwc-sidebar__nav__panel[data-title="${targetId}"]`);
            const parentPanel = this.closest('.dwc-sidebar__nav__panel');
            targetElement.classList.remove('dwc-slide-right');
            targetElement.inert = false;
            targetElement.setAttribute('tabindex', 0);
            targetElement.focus();
            ariaExpanded = !targetElement.classList.contains('dwc-slide-right');
            sbtn.setAttribute('aria-expanded', ariaExpanded);
            select('.dwc-nav__back-btn').forEach(bbtn => {
                bbtn.addEventListener('click', function (e) {
                    ariaExpanded = !targetElement.classList.contains('dwc-slide-right');
                    sbtn.setAttribute('aria-expanded', ariaExpanded);
                })
            })
            if (!parentPanel.classList.contains('dwc-slide-right')) {
                parentPanel.classList.add('dwc-slide-left');
                parentPanel.inert = true;
            }

            //handle back button data-title and back to feature
            let bbtn = targetElement.querySelector('.dwc-nav__back-btn');
            bbtnTitle = parentPanel.getAttribute('data-title');
            bbtn.setAttribute('data-title', bbtnTitle);
            bbtn.setAttribute('aria-label', 'Go back to ' + bbtnTitle + ' menu');
            //console.log(bbtnTitle)

            if (updateBackText) {
                bbtn.querySelector('.dwc-nav__back__text').textContent = 'back to ' + bbtnTitle;
            }

        });
    })
    select('.dwc-nav__back-btn').forEach(bbtn => {
        const btnTitle = bbtn.getAttribute('data-title');
        bbtn.addEventListener('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            const returnBtnAttr = this.getAttribute('data-title');
            select('[data-title].dwc-sidebar__nav__panel').forEach(returnTarget => {
                if (returnTarget.getAttribute('data-title') === returnBtnAttr) {
                    returnTarget.classList.remove('dwc-slide-left');
                    returnTarget.inert = false;
                    if (returnTarget.classList.contains('dwc-sidebar__nav__panel--home')) {

                        if (header) {
                            header.setAttribute('tabindex', 0);
                            header.focus()
                        }
                    } else {
                        returnTarget.setAttribute('tabindex', 0);
                        returnTarget.focus();
                    }
                    if (returnTarget.classList.contains('dwc-slide-right')) {
                        returnTarget.classList.remove('dwc-slide-right');
                    }
                }
            });
            const parentPanel = this.closest('.dwc-sidebar__nav__panel');
            parentPanel.classList.add('dwc-slide-right');
            parentPanel.inert = true;
        });

    });
    select('.dwc-sidebar__nav__panel').forEach(panel => {
        const panelTitle = panel.getAttribute('data-title');
        panel.setAttribute('aria-label', panelTitle + ' menu');
    });

    // mobile trigger
    function mobileMenuIsClosed() {
        const offCanvasMobileOnly = offCanvasBreakpoint.matches;
        
        if (mq.matches || enableOffCanvas) {
            const isNavOpen = body.classList.contains("dwc-slide-nav-open");
            navTrigger.setAttribute("aria-expanded", isNavOpen);
            
          //  console.log(isNavOpen);
            
            if (isNavOpen) {
                if (!homePanel.classList.contains('dwc-slide-left')) {
                    homePanel.inert = false;
                }
            } else if (offCanvasMobileOnly && mq.matches) {                
                homePanel.inert = true;  // Direct assignment for closed state
            } else{
                homePanel.inert = false;
            }
        } else {
            homePanel.inert = false;
        }
    }
    


    function setNoScroll() {

        let noScrollTimeout;
        let clickCount = 1;
          let isNavOpen = body.classList.contains('dwc-slide-nav-open');
    
        // Check if 'dwc-slide-nav-open' class is applied
        if (isNavOpen) {
            body.classList.add('dwc-no-scroll');
            clickCount++;
        } else {
            clickCount = 0;
        }
       //console.log(clickCount)
    
    
        // Toggle 'dwc-no-scroll' class on the body if clickCount is odd
        if (clickCount == 0) {
    
            // Set a timer to remove 'dwc-no-scroll' class after 0.8 seconds
          
            noScrollTimeout = setTimeout(() => {   
          isNavOpen = body.classList.contains('dwc-slide-nav-open');
             // console.log(isNavOpen)
               if(!isNavOpen){
                body.classList.remove('dwc-no-scroll'); 
               }
            }, 900);
           
        } else {
            // If 'dwc-no-scroll' class is removed by clicking again, clear the timeout
            clearTimeout(noScrollTimeout);
        }
    }
    

  if (navTrigger) {
    navTrigger.addEventListener("click", function () {
        body.classList.toggle("dwc-slide-nav-open");
        setNoScroll()
        mobileMenuIsClosed()
        if (!hasCurrentMenu && !autoCurrentPosition) {
            initCollapseContent()
            goHome();// watch out for this, could be problematic  
        }
        dropdownToggles.forEach((togglebtn) => {
           // togglebtn.setAttribute('aria-expanded', 'false');
        });
    });
}
if (mobileMenuOverlay) {
    mobileMenuOverlay.addEventListener("click", function () {
        body.classList.remove("dwc-slide-nav-open");
        mobileMenuIsClosed()
        setNoScroll()
        if (!hasCurrentMenu && !autoCurrentPosition) {
            initCollapseContent()
            goHome()
        }
    });
}

if (closeBtn) {
    closeBtn.addEventListener("click", function () {
        body.classList.remove("dwc-slide-nav-open");
        mobileMenuIsClosed()
        setNoScroll()
      navTrigger.focus();
        if (!hasCurrentMenu && !autoCurrentPosition) {
            initCollapseContent()
            goHome()
        }
    });
}

    //focus on mobile trigger when menu loses focus
    mobileMenuOverlay.addEventListener('focusin', (event) => {
        if (event.relatedTarget !== navTrigger) {
            navTrigger.focus();
        }
    });

    

    function updateSidebarPadding() {
        if (!enableOffCanvas) {
           // const headerHeight = header.clientHeight + 20;
          setTimeout(() => {
      const headerHeight = document.querySelector('.dwc-header-inner-wrap').clientHeight + 20;
      // Your code to use headerHeight goes here
    
    
            sidebarNavPanels.forEach(function (sidebarNavPanel) {
                sidebarNavPanel.style.paddingTop = headerHeight + "px";
            });
            mobileMenuOverlay.style.marginTop = headerHeight - 20 + "px"; 
          }, 50);
        }
                    
    }

  function resetPadding() {
   setTimeout(() => {
    sidebarNavPanels.forEach(function (sidebarNavPanel) {
        sidebarNavPanel.style.paddingTop = null;
      mobileMenuOverlay.style.marginTop = null;
    });
      }, 50);
}

    function checkScreenSize() {
        if (mq.matches) {
          body.classList.add('dwc-mobile');
            updateSidebarPadding();
            //updateTopPadding()          
        } else {
          body.classList.remove('dwc-mobile');
            resetPadding();
           // resetTopPadding()
        }
    }

    updateTopPadding()  

    if (calcHeaderHeight) {
        checkScreenSize();
        window.addEventListener("resize", function() {
        resetTopPadding(); // Reset the top padding on resize
        updateTopPadding()
        checkScreenSize();
        mobileMenuIsClosed();
    });
    }


    initInert()



    //  *********  DROPDOWN TOGGLE FUNCNTIONALITY *******************


function eCollapseContent(el, btn) {

    // Find the closest common ancestor, such as the <li> element
    const btnParentLi = btn.closest('li');

    dropdownContents.forEach((content) => {
        // Find the closest <li> ancestor for the dropdown content
        const contentParentLi = content.closest('li');

        // Check if the content and the button are at the same level
        const isSameLevel = btnParentLi && contentParentLi && btnParentLi.parentElement === contentParentLi.parentElement;

        // Check if the content is an ancestor of the dropdown toggle being clicked
        const isAncestor = btn && content.contains(btn);

        // Collapse the dropdown if it's not an ancestor of the toggle and is on the same level
        if (!isAncestor && isSameLevel) {
            content.style.maxHeight = '0';
            content.setAttribute('inert', 'true');
          
             // Update the aria-expanded attribute of the corresponding toggle button
            const correspondingToggle = content.previousElementSibling.querySelector('button');
            
            if (correspondingToggle) {
                correspondingToggle.setAttribute('aria-expanded', 'false');
            }
          
        }
    });

}


function initCollapseContent(el, btn) {
    dropdownContents.forEach((content) => {
        content.style.maxHeight = '0';
        content.setAttribute('inert', 'true');     
      
    });

}



function collapseContent(el, btn) {    

    // Find the closest common ancestor, such as the <li> element
    const btnParentLi = btn.closest('li');

    dropdownContents.forEach((content) => {
        // Find the closest <li> ancestor for the dropdown content
        const contentParentLi = content.closest('li');

        // Check if the content and the button are at the same level
        const isSameLevel = btnParentLi && contentParentLi && btnParentLi.parentElement === contentParentLi.parentElement;

        // Check if the content is an ancestor of the dropdown toggle being clicked
        const isAncestor = btn && content.contains(btn);

        // Collapse the dropdown if it's not an ancestor of the toggle and is on the same level
        if (!isAncestor && isSameLevel) {
            content.style.maxHeight = '0';
            content.setAttribute('inert', 'true');
          
        }
    });
     
}


// Toggle the ARIA attributes for dropdown buttons
function toggleAriaExpanded(activeToggle) {
  
     // If activeToggle is null, reset all buttons to 'false'
    if (activeToggle === null) {
        dropdownToggles.forEach((toggle) => {
            toggle.setAttribute('aria-expanded', 'false');
        });
        return; // Exit the function early since there's nothing else to do
    }
  
    dropdownToggles.forEach((toggle) => {
        if (toggle === activeToggle) {
            // Toggle the aria-expanded attribute for the clicked button
            const isOpen = toggle.getAttribute('aria-expanded') === 'true';
            toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
        } else {
            // Check if the toggle's parent is a sibling to the activeToggle's parent
            const toggleParent = toggle.closest('li');
            const activeToggleParent = activeToggle.closest('li');
        //  console.log('toggle parent', toggleParent)
         // console.log('active toggle parent', activeToggleParent)

            if (toggleParent && activeToggleParent && toggleParent.parentElement === activeToggleParent.parentElement) {
                // Set all other buttons' aria-expanded to false if their parent is a sibling to the activeToggle's parent
                toggle.setAttribute('aria-expanded', 'false');
            }
        }
    });
}


// Function to adjust the max-height of parent dropdowns when a nested dropdown is opened
function adjustDropdownHeight(dropdownContent) {
    // Start with the nearest ancestor that is a dropdown content
    let parent = dropdownContent.closest('.dwc-sidebar__dropdown-content');
 

    while (parent) {
        // Calculate the cumulative height of all open children
        let totalHeight = Array.from(parent.children).reduce((total, child) => {
            // Add the child scrollHeight to the total if it's open
            total += child.scrollHeight;
            return total;         
        }, 0); 

        // Move to the next ancestor that is a dropdown content
        parent = parent.parentElement.closest('.dwc-sidebar__dropdown-content');
       if(parent){
          parentHeight = parent.scrollHeight;
                // Set the parent's max-height to the total calculated height
        parent.style.maxHeight = `${totalHeight + parentHeight}px`;
    //   console.log('child: ', dropdownContent)
    //   	console.log('parent: ', parent)
    //   console.log(`${totalHeight}px`)
         parent.inert = false;
         
         	// console.log('parent new: ', parent)
         
         const parentParent = parent.closest('li')
         const toggle = parentParent.querySelector('.dwc-sidebar__dropdown-toggle button')         
         toggle.setAttribute('aria-expanded', 'true');
       }
    }
}

// Initialize dropdowns
function initializeDropdowns() {
    initCollapseContent();

    dropdownToggles.forEach((toggle, index) => {
        toggle.setAttribute('aria-expanded', 'false');

        const dropdownContent = dropdownContents[index];
        const parentDropdown = toggle.closest('.dwc-sidebar__dropdown');
        const dropdownLink = parentDropdown.querySelector('.dwc-nav__link__text');

        toggle.setAttribute('aria-label', `Toggle ${dropdownLink.textContent} dropdown`);

        toggle.addEventListener('click', function () {
            const isOpen = dropdownContent.style.maxHeight !== '0px';

            collapseContent(dropdownContent, this);

            if (!isOpen) {
                dropdownContent.inert = false;
            }

            toggleAriaExpanded(this);

            if (parentDropdown.contains(this)) {
                dropdownContent.style.maxHeight = isOpen ? '0' : `${dropdownContent.scrollHeight}px`;

                // Only adjust if opening the dropdown
                if (!isOpen) {
                    adjustDropdownHeight(dropdownContent);
                  //console.log('other child', dropdownContent)
                }
            }
        });

        toggle.addEventListener('keydown', (event) => {
            closeDropdownOnEscape(event, toggle);
        });
    });
}


// Close dropdowns on Escape key press
function closeDropdownOnEscape(event, el) {
    if (event.key === 'Escape' && el.contains(event.target)) {
        event.stopPropagation();

        if (el.style.maxHeight !== '0px') {
            const button = el.previousElementSibling.querySelector('button');

            if (button) {
                el.style.maxHeight = '0';
                el.inert = true;
                button.focus();
            } else {
                initCollapseContent();
                el.focus();
            }

            toggleAriaExpanded(null); // Reset all buttons to 'false'
        }
    }
}

// Initialize dropdowns
initializeDropdowns();


dropdownContents.forEach((dropdownContent) => {
    // Add event listeners for closing dropdowns on Escape key press
    dropdownContent.addEventListener('keydown', (event) => {
        closeDropdownOnEscape(event, dropdownContent);
    });

// close dropdown on focus lost

    if(autoCloseDropdown){
    const links = dropdownContent.querySelectorAll('a.dwc-nav__link__text');

    links.forEach(link => {
        const linkParent = link.closest('.dwc-sidebar__dropdown-content');
        const dropDownButton = linkParent.previousElementSibling.querySelector('button')

        link.addEventListener('blur', () => {


            setTimeout(function () {
                if ([...links].every(link => !document.activeElement.isSameNode(link))) {

                    eCollapseContent(dropdownContent, dropDownButton)

                }
            }, 50);
        });
    });
}
});



    // AUTOMATIC MENU POSITION

    function autoMenuPosition() {
        // Select the current menu item
        const currentMenuItem = document.querySelector('.dwc-current-menu-item');

        // Select the parent panel of the current menu item
        if (currentMenuItem) {
            const parentPanel = currentMenuItem.closest('.dwc-sidebar__nav__panel');
            const parentIsHome = parentPanel.classList.contains('dwc-sidebar__nav__panel--home')

            // Check if the parent panel has the 'dwc-sidebar__nav__panel--home' class
            if (!parentIsHome) {
                // Select the back button in the current menu's parent panel
                const backButton = parentPanel.querySelector('.dwc-nav__back-btn');

                // Remove the class 'dwc-slide-right' from the current menu's parent panel
                parentPanel.classList.remove('dwc-slide-right');

                // Get the data-title attribute of the current menu's parent panel

                // Loop through all panels with class .dwc-sidebar__nav__panel
                const allPanels = document.querySelectorAll('.dwc-sidebar__nav__panel');

                // Select all slide buttons .dwc-sidebar__nav__btn of each panel
                const slideButtons = document.querySelectorAll('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)');

                slideButtons.forEach((slideButton) => {

                    allPanels.forEach((panel) => {

                        // Get the data-title attribute of the panel
                        const eachPanelTitle = panel.getAttribute('data-title');
                        // Get the back button in each of the panels
                        const panelBackButton = panel.querySelector('.dwc-nav__back-btn');

                        const slideTitle = slideButton.getAttribute('data-title')


                        if (slideTitle === eachPanelTitle) {
                            //get slide button parent
                            const slideParentPanel = slideButton.closest('.dwc-sidebar__nav__panel');
                            //get slide parent titlte attribute
                            const slideParentTitle = slideParentPanel.getAttribute('data-title')
                            // Set the back button data-title attribute to be equal to the data-title attribute of the slide parent panel
                            panelBackButton.setAttribute('data-title', slideParentTitle);
                            panelBackButton.querySelector('.dwc-nav__back__text').textContent = 'back to ' + slideParentTitle
                        }
                    });

                });

                homePanel.classList.add('dwc-slide-left');
            }
            if (!parentIsHome) {
                parentPanel.inert = false;
                homePanel.inert = true;
            }

            repositionReturnTargets()

        }
    }

    if (autoCurrentPosition) {
        setTimeout(function () {
          autoMenuPosition()
        }, 1000);
      }


    //function to reposition the hidden slides after automatically moving to current menu item panel
    // to put them in the right position to slide back to
    function repositionReturnTargets() {

        const panels = document.querySelectorAll('.dwc-sidebar__nav__panel:not(.dwc-sidebar__nav__panel--home)');
        let activePanel;

        // Find the first panel without 'dwc-slide-right' and 'dwc-slide-left' classes
        for (const panel of panels) {
            if (!panel.classList.contains('dwc-slide-right') && !panel.classList.contains('dwc-slide-left')) {
                activePanel = panel;
                break;
            }
        }

        let returnTarget;

        while (activePanel) {
            //  Get the data-title attribute of each panel
            const panelTitles = Array.from(panels).map(panel => panel.getAttribute('data-title'));

            //  Select the active back button in the active panel
            const activeBackButton = activePanel.querySelector('.dwc-nav__back-btn');

            // Find the returnTarget panel
            returnTarget = Array.from(panels).find(panel => panel.getAttribute('data-title') === activeBackButton.getAttribute('data-title'));

            // Remove and add classes to the returnTarget
            if (returnTarget) {
                returnTarget.classList.remove('dwc-slide-right');
                returnTarget.classList.add('dwc-slide-left');
            }

            // Update activePanel for the next iteration
            activePanel = returnTarget;
        }
    }

    // *********AUTOMATIC ENDS************





// **************OFFCANVAS *****************


if (offCanvasPushContent) {
             
    // Create a new div element with the class "site-wrapper"
         var siteWrapper = document.createElement('div');
         siteWrapper.className = 'dwc-site-wrapper';
         // Move everything within the body tag into the "site-wrapper" div
         while (document.body.firstChild) {
             siteWrapper.appendChild(document.body.firstChild);
         }
         // Add the "site-wrapper" div back to the body
         document.body.appendChild(siteWrapper);
 }

function offCanvasInit() {

if (enableOffCanvas && offCanvasBreakpoint.matches) {
 document.body.classList.add('dwc-offcanvas');

 if (offCanvasPushContent) {
     document.body.classList.add('dwc-push-content');
   if(fixedNavTrigger && !mq.matches){
         document.body.classList.add('dwc-nav-trigger-is-fixed');
       } else{
         document.body.classList.remove('dwc-nav-trigger-is-fixed');
       }

 }

 // Function to check if header element is focusable
 function isFocusable(element) {
     const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'AREA'];
     return (
         focusableTags.includes(element.tagName) ||
         element.hasAttribute('tabindex') ||
         element.hasAttribute('contenteditable')
     );
 }

 
// Function to set inert attribute for focusable elements
function setInertForFocusableElements(inertValue) {
 const allElements = document.querySelectorAll('.dwc-header-inner-wrap *');
 const focusableElements = Array.from(allElements).filter(element => {
     return isFocusable(element) && !element.classList.contains('dwc-nav-trigger');
 });

 focusableElements.forEach(element => {
     if (element) {
         element.inert = inertValue;
     }
 });
}

// Click event listener for the 'nav-trigger'

header.addEventListener('click', function () {
 const isNavOpen = document.body.classList.contains('dwc-slide-nav-open');

 // Check if the body contains the class 'dwc-slide-nav-open'
 if (isNavOpen) {
     // Condition is true, set inert=true
     setInertForFocusableElements(isNavOpen);
 } else {
     // Condition is false, set inert=false
     setInertForFocusableElements(isNavOpen);
 }
});

} else {
document.body.classList.remove('dwc-push-content');
document.body.classList.remove('dwc-offcanvas');
}

}
  offCanvasInit()
 window.addEventListener("resize", offCanvasInit);


//close offcanvas when haslink is clicked



if (enableOffCanvas) {
 const sidebarLinks = document.querySelectorAll('a.dwc-sidebar__nav__link');

 // Filter links with hash in the href attribute
 const hashLinks = Array.from(sidebarLinks).filter(link => link.getAttribute('href').includes('#'));

 // Add click event listener to each hash link
 hashLinks.forEach(link => {
     link.addEventListener('click', function(event) {
      //   event.preventDefault(); // Prevent the default behavior of the link (e.g., navigating to the hash)
         
         // Perform a click action on the navTrigger button
        
         if (navTrigger) {
           navTrigger.click();         
         }
     });
 });
}




    // headroom:
    if (enableHeadroom && (enableOffCanvas || enableTopBar)) {

        document.body.classList.add('dwc-headroom');
        const scrollUp = "scroll-up";
        const scrollDown = "scroll-down";
        let lastScroll = 0;

        // Check for scroll action
        window.addEventListener('scroll', () => {
            // Hide and reveal header
            const currentScroll = window.pageYOffset;
            if (currentScroll <= 200) {
                document.body.classList.remove(scrollUp);
                return;
            }

            if (currentScroll > lastScroll && !document.body.classList.contains(scrollDown)) {
                // Down
                document.body.classList.remove(scrollUp);
                document.body.classList.add(scrollDown);
            } else if (currentScroll < lastScroll && document.body.classList.contains(scrollDown)) {
                // Up
                document.body.classList.remove(scrollDown);
                document.body.classList.add(scrollUp);
            }
            lastScroll = currentScroll;
        });

    }
    // End scroll action


    //top Padding on first containers

      function updateTopPadding() {

   // Run the function if offCanvas is enabled or both topBar and headroom are enabled
    if (!enableOffCanvas && !(enableTopBar && enableHeadroom)) {
        return; // Exit early if neither condition is met
    }
    
    // Check if the media query strings for mq and offCanvasBreakpoint are the same
    if (mq.media === offCanvasBreakpoint.media) {
        // If the breakpoints are the same, run the function only if we're within the breakpoint
        if (mq.matches) {
            // Ensure the feature should run based on the configuration flags
            if (calcTopPadding && (enableHeadroom || enableTopBar)) {
                // Check if the sidebar exists
                if (sidebar) {
                    const header = document.querySelector('.dwc-header-inner-wrap');
                    if (header) {
                        const offsetPadding = header.clientHeight;

                        // Update padding for each sidebar panel
                        sidebarNavPanels.forEach(function (sidebarNavPanel) {
                            sidebarNavPanel.style.paddingTop = offsetPadding + "px";
                        });

                        // Adjust the top padding for the first child of the main container
                        const mainFirstChild = document.querySelector('main')?.firstElementChild;
                        if (mainFirstChild) {
                            const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom) || 0;
                            mainFirstChild.style.paddingTop = (offsetPadding + initialPadding) + 'px';
                        }
                    } else {
                        console.warn('.dwc-header-inner-wrap not found.');
                    }
                } else {
                    console.warn('Sidebar not found.');
                }
            }
        }
    } else {
        // If the breakpoints are different, run the function as originally intended
        if (calcTopPadding && (enableHeadroom || enableTopBar)) {
            // Check if the sidebar exists
            if (sidebar) {
                const header = document.querySelector('.dwc-header-inner-wrap');
                if (header) {
                    const offsetPadding = header.clientHeight;

                    // Update padding for each sidebar panel
                    sidebarNavPanels.forEach(function (sidebarNavPanel) {
                        sidebarNavPanel.style.paddingTop = offsetPadding + "px";
                    });

                    // Adjust the top padding for the first child of the main container
                    const mainFirstChild = document.querySelector('main')?.firstElementChild;
                    if (mainFirstChild) {
                        const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom) || 0;
                        mainFirstChild.style.paddingTop = (offsetPadding + initialPadding) + 'px';
                    }
                } else {
                    console.warn('.dwc-header-inner-wrap not found.');
                }
            } else {
                console.warn('Sidebar not found.');
            }
        }
    }
}



  
  function resetTopPadding() {
    if (calcTopPadding && enableHeadroom) {
        sidebarNavPanels.forEach(function (sidebarNavPanel) {
            sidebarNavPanel.style.paddingTop = null;
        });

        const mainFirstChild = document.querySelector('main').firstElementChild;
        if (mainFirstChild) {
            mainFirstChild.style.paddingTop = null;
            // Reset the paddingTop using the stored initialPadding
            const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom);
        
            mainFirstChild.style.paddingTop = null; 
        }
    }
}

    //---top padding end



    //Document loaded end


});
  
  
  // --- ADD HEADER HEIGHT VARIABLE TO BODY ----

function debounce(func, delay) {
 let timeoutId;

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

// Your existing code for adding the 'hasHeaderHeight' class
function addHeaderHeightClass() {


 if (!document.body) {
     // Body doesn't exist, keep checking 
     setTimeout(addHeaderHeightClass, 0);
     return;
 }

 let hasHeaderHeight = document.body.classList.contains('hasHeaderHeight');
 let header = document.querySelector('header');

 if (!hasHeaderHeight && header) {
     // Header exists, add the 'hasHeaderHeight' class
     document.body.classList.add('hasHeaderHeight');

     // Get the initial header height
     updateHeaderHeight();
 } else if (!hasHeaderHeight && !header) {
     // Header doesn't exist, keep checking 
     setTimeout(addHeaderHeightClass, 0);
 }
}

// Function to update header height and set the CSS variable
function updateHeaderHeight() {
 let sidebar = document.querySelector('.dwc-header-inner-wrap');


 if (document.body) {
     let headerHeight = sidebar.offsetHeight;
     document.body.style.setProperty('--dwc-header-height', `${headerHeight}px`);
 }
}

// Add the 'hasHeaderHeight' class and set initial header height
addHeaderHeightClass();

// Attach the debounced update function to the window resize event
const debouncedUpdateHeaderHeight = debounce(updateHeaderHeight, 50);
window.addEventListener('resize', debouncedUpdateHeaderHeight);
window.addEventListener('DOMContentLoaded', updateHeaderHeight);


// -------HEADER HEIGHT ENDS -------------

// Smooth scroll to hashlink with an offset
function smoothScroll(target, offset) {
    const targetElement = document.querySelector(target);
    if (targetElement) {
       
        const targetPosition = targetElement.getBoundingClientRect().top -
      document.body.getBoundingClientRect().top -
      offset;
        window.scrollTo({
            top: targetPosition,
            behavior: 'smooth'
        });

          }
}

// Listen for hash link clicks
if(offsetHashLinkScroll){
document.querySelectorAll('a[href^="#"]').forEach(anchor => {   
    anchor.addEventListener('click', function (e) {
var headerElement =  document.querySelector('.dwc-header-inner-wrap');
var offset = headerElement.offsetHeight;
        e.preventDefault();
           event.stopPropagation();
        const href = this.getAttribute('href');
        smoothScroll(href, offset); 
    });
});
}

  

Frequently Asked Questions

Find quick answers to common questions about our seeds, ordering process, and growing advice. We’re here to make growing your garden easy, enjoyable, and successful from the very first sprout.

Our seeds are stored in a climate-controlled environment and undergo regular germination testing to maintain high-quality standards.

Yes! We carry a selection of organic seeds that meet rigorous quality standards for natural and sustainable gardening.

We offer a variety of soil amendments, including compost-based and organic fertilizers, tailored to different soil needs.

Absolutely! Our team is happy to provide guidance on seed selection, soil health, and gardening best practices.

Open-pollinated seeds come from plants that are naturally pollinated by wind, insects, birds, or other natural mechanisms, without deliberate human control over the process. Because the pollination occurs within the same variety, the seeds produced will generally grow into plants that closely resemble their parents in both appearance and performance. This means gardeners can save seeds from open-pollinated plants year after year and expect consistent results, making them ideal for seed saving. While all heirloom seeds are open-pollinated, not all open-pollinated seeds are heirlooms, as some are more recent varieties that haven’t been around long enough to be considered heirlooms.

How experts define heirlooms can vary, but they are generally at least 40-50 years old. Most heirlooms come from seed that has been handed down for generations in a particular region or area, hand-selected by gardeners for a special trait. Others may have been developed by a university a long time ago in the early days of commercial breeding. All heirloom vegetables are open-pollinated, which means they are pollinated by insects or wind without human intervention. In addition, they tend to remain stable in their characteristics from one year to the next. Many gardeners agree that most heirloom varieties boast greater flavor than that found in hybrids, especially among tomatoes.

A hybrid vegetable is created when plant breeders intentionally cross-pollinate two different varieties of a plant, aiming to produce an offspring or hybrid, that contains the best traits of each of the parent plants. Cross-pollination is a natural process that occurs with members of the same plant species. In hybridization, pollination is carefully controlled to ensure that the right plants are crossed to achieve the desired combination of characteristics such as: Dependability, less required care, early maturity, higher yields, improved flavor, specific plant size, and better disease resistance. The offspring of a hybridized seed will not produce genetically identical seeds to their parents and are not recommended for seed saving. It is important to note that hybrids are not genetically modified organisms (GMOs) and do not present any environmental or health risks.

A genetically engineered plant is a plant that has had its DNA altered in a lab to produce a specific outcome. New DNA from an unrelated organism is inserted into plant cells using biotechnology techniques. These plants are also know as genetically modified organisms (GMOs).

Treated seed has undergone a process, either chemical, biological, or physical, to protect it from seed or soil borne pathogens and improve crop establishment. Treatments may include fungicides, pesticides, or methods like hot water to defend against pests and diseases during early growth. This is not the same as seed coating, which often refers to physical layers added for handling or spacing. The goal of seed treatment is to give young seedlings the best possible start by minimizing threats before and during germination.

Emerge+ Seed Treatment is all-natural and works as an immune system booster, which helps the seedling emerge stronger, and fight off disease and decay. Emerge+ seed treatment contains non-food grade ingredients and seed should not be used for food, feed or oil. Emerge+ does not effect the color of your seed. We recommend planting after the soil temperature has reached 65°F.

The white pelleting material has no adverse effect on seed or soil. Just plant them shallow in the spacing you desire and keep them moist for good germination.

Weight points are a weight score assigned to heavier or bulkier items. The higher the weight point value, the heavier or more oversized the product. Light items—such as seed packets—usually have no weight points listed. Weight points are used only on products where the size or weight is significant enough to require special handling.

Berlin Seeds does not ship seeds internationally. Due to federal and international agricultural regulations, including export permitting and inspection requirements, seed orders are limited to shipment within the United States. Please contact us if you would like to make a special request.

When you receive your plants, immediately take them out of the box and spread them out in a cool, dry area. DO NOT PUT THEM IN WATER OR SOIL while waiting to plant. The plants are in a dormant state, and should be planted as soon as possible. Onions tolerate cool soil well and should be planted as soon as soil can be worked. The roots and tops may begin to dry out, but don’t be alarmed, the onion can live for three weeks off of the bulb. Plant with the roots just deep enough to keep the plant upright. Eliminate weeds rigorously as onions do not tolerate weed pressure.

Check the package when it arrives. If they appear dry, moisten roots slightly and store in refrigerator in the plastic bag in which they were shipped. Prune off any broken and damaged roots and shorten excessively long roots for convenience when planting. Excessive pruning of the root system is not advised. However, it is better to prune a few roots than stuff the roots into a small planting hole. We recommend soaking the plants in water for several hours prior to planting. Dig a shallow trench, spread the roots out and cover with topsoil. Do not dig a deep hole and plant roots deep into subsoil. Trim to 2 buds after planting.

When strawberry plants arrive, check the bundles. If they appear dry, moisten roots slightly and store in refrigerator in the plastic bag in which they were shipped. Do not put in a container of water. If storage conditions are not available or if you need to hold them longer than 10 days, the plants should be heeled in. This can be done in a container or the garden. Make a shallow trench, spread the bundles out in a single layer, with only the crown exposed and cover with damp potting soil, peat moss, or sawdust. Generally plants can be kept this way 14-16 days if roots remain moist.

Store bundles in refrigerator or cool dry location up to 2 weeks. Any surface mold will disappear when planted. Plant 14”-18” apart in rows 4’ apart. Purple varieties can be spaced closer. Plant in a trench with crown 3” to 4” below ground level. Lime, bone meal, and super phosphate help maintain proper soil fertility levels. Soil Ph of 7.0-7.2 is best with good phosphorus levels. Remove perennial weeds as much as possible prior to planting. We do not recommend using salt as a weed killer. It does not harm the asparagus but inhibits water penetration and is harmful to microbes in the soil.

Keep plants cold and dormant until planting time. Easily stored up to 2 weeks. If the soil is not well drained create raised planting beds 12”-16” wide. Separate Red/Yellow raspberry plants from blackberry/black raspberry by 200 feet to avoid virus problems. Blackberry/Red raspberry-dig a trench deep enough to cover the roots and shallow enough to allow the suckers to easily come up through the covering soil. Take special care during planting to protect blackberry roots from bright sunlight. Roots will often suffer high transplant loss if planted on a bright sunny day. Keep roots in the dark as much as possible. Trim plants back to 2”- 3” after planting.

Plant crowns as soon as possible. Crowns are fresh cut and do not store well. Rhubarb roots should be planted in early spring before soil heats. Ideally your soil should have high organic matter but low in manure based compost. Good drainage is absolutely essential order to avoid rot. Set 3 feet apart within the row. Do not bury the entire “plant” deeply under the soil. This means that the bud itself is at or slightly below the soil line. It is better to plant too shallow than too deep. You should see new green growth in about 2 weeks. If you plant late after soil warms cover the crown bud with 1/4” to 1/2” loose soil. Do not harvest the first year. Mulch after plants are growing well.

Bare-root plants such as blackberries, blueberries, currants, elderberries, gooseberries, raspberries, strawberries, grapes, and asparagus can be planted in early spring (late March to early April), as soon as the soil is thawed, workable, and not too wet. Because these plants are dormant, they tolerate freezing temperatures, making it safe to plant several weeks before your last frost date. Early planting takes advantage of natural spring moisture and encourages strong root establishment.

Tip: Avoid planting in cold, waterlogged soils—especially for blueberries and asparagus, which prefer well-drained conditions.

All stock is guaranteed to grow and be true to name. Any stock that fails to show growth will be replaced free of charge or refunded if reported before July 15.

If your plant starts to leaf out but doesn’t survive its first growing season, you may contact us anytime during that season to receive a gift card refund for up to 50% of the purchase price. All claims for replacement of refund must be made within the same growing season as the purchase.

Planting as early as the weather permits is one key to success. Proper plant protection and regular watering must be done, especially during stress periods of the first growing year. We aim to provide you with premium quality stock, but we are working with nature and humanity and realize perfection is not always attained.

We guarantee perfect imperfections. Our careful selection and your love and care will produce happy plants. We want you to be successful and completely satisfied. Happy growing!