/* Top bar menu (rendered next to the language selector) */
.evlo-top-bar-menu,
.evlo-top-bar-menu__submenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.evlo-top-bar-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  font-size: 13px;
  line-height: 1.5;
}

.evlo-top-bar-menu__item {
  position: relative;
  margin: 0;
}

.evlo-top-bar-menu__link {
  display: block;
  padding: 0 12px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

a.evlo-top-bar-menu__link:hover,
a.evlo-top-bar-menu__link:focus-visible {
  color: var(--primary);
}

/* parent toggle mirrors the theme's select: same chevron, size and spacing as the language selector */
.evlo-top-bar-menu__toggle {
  display: block;
  padding: 0 36px 0 12px;
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  color: var(--bs-body-color);
  font: inherit;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.evlo-top-bar-menu__toggle:hover,
.evlo-top-bar-menu__toggle:focus-visible {
  color: var(--primary);
  outline: none;
}

/* the theme's top bar and sticky header share the same z-index, so lift the top bar while a dropdown is open
   to overlap the header; only while open, as the header holds the flyout cart offcanvas which must stay on top */
.master-wrapper-page .top-bar:has(.evlo-top-bar-menu__item.is-open),
.master-wrapper-page .top-bar:has(.evlo-top-bar-menu__item--parent:focus-within) {
  z-index: 16;
}

/* an open offcanvas (e.g. the flyout cart inside the header) must never be covered by the top bar */
body:has(.offcanvas.show, .offcanvas.showing) .master-wrapper-page .top-bar {
  z-index: 14;
}

/* dropdown panel, opened by click only */
.evlo-top-bar-menu__submenu {
  display: none;
}

.evlo-top-bar-menu__item.is-open > .evlo-top-bar-menu__submenu,
.evlo-top-bar-menu__item--parent:focus-within > .evlo-top-bar-menu__submenu {
  display: block;
}

.evlo-top-bar-menu__submenu--level-1 {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1030;
  min-width: 100%;
  padding: 6px 0;
  background: var(--white, #fff);
  border: 1px solid var(--border, #dee2e6);
  border-radius: var(--radius-base, 6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  text-align: start;
}

.evlo-top-bar-menu__submenu .evlo-top-bar-menu__link,
.evlo-top-bar-menu__submenu .evlo-top-bar-menu__toggle {
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* deeper levels expand inside the open panel */
.evlo-top-bar-menu__submenu .evlo-top-bar-menu__submenu {
  padding-inline-start: 12px;
}