.oj-menu-trigger-slot {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 24px;
}

.oj-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #292720;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.oj-menu-trigger:hover,
.oj-menu-trigger:focus-visible { color: #a28c52; }
.oj-menu-trigger:focus-visible,
.oj-menu-drawer__close:focus-visible,
.oj-menu-drawer a:focus-visible,
.oj-menu-drawer button:focus-visible { outline: 2px solid #a28c52; outline-offset: 3px; }

.oj-menu-trigger__text { display: none; }
.oj-menu-trigger__icon { display: grid; gap: 5px; width: 20px; }
.oj-menu-trigger__icon span { display: block; width: 20px; height: 1px; background: currentColor; }

.oj-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100030;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}

.oj-menu-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100031;
  width: min(380px, 100vw);
  background: #fcfbf8;
  color: #292720;
  border-right: 1px solid #e8e4da;
  transform: translateX(-102%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility .28s ease;
  display: flex;
  flex-direction: column;
}

.oj-menu-backdrop[data-open="true"],
.oj-menu-drawer[data-open="true"] { visibility: visible; pointer-events: auto; }
.oj-menu-backdrop[data-open="true"] { opacity: 1; }
.oj-menu-drawer[data-open="true"] { transform: translateX(0); }
body.oj-menu-is-open { overflow: hidden; }

.oj-menu-drawer__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 108px;
  padding: 0 25px;
  border-bottom: 1px solid #e8e4da;
}

.oj-menu-drawer__logo { display: inline-flex; align-items: center; flex: 0 0 110px; width: 110px; height: 85px; }
.oj-menu-drawer__logo-image { display: block !important; width: 110px !important; height: 85px !important; max-width: 110px !important; max-height: 85px !important; object-fit: contain !important; }

.oj-menu-drawer__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #292720;
  cursor: pointer;
}

.oj-menu-drawer__close span { position: relative; display: block; width: 19px; height: 19px; }
.oj-menu-drawer__close span::before,
.oj-menu-drawer__close span::after {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 19px;
  height: 1px;
  background: currentColor;
}
.oj-menu-drawer__close span::before { transform: rotate(45deg); }
.oj-menu-drawer__close span::after { transform: rotate(-45deg); }

.oj-menu-drawer__content {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 27px 25px 36px;
}

/* Scope every Max Mega Menu override to the dedicated drawer location. */
.oj-menu-drawer #mega-menu-wrap-max_mega_menu_1,
.oj-menu-drawer #mega-menu-max_mega_menu_1 {
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
}

.oj-menu-drawer #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle { display: none !important; }
.oj-menu-drawer #mega-menu-max_mega_menu_1 { display: block !important; }

.oj-menu-drawer #mega-menu-max_mega_menu_1 > li.mega-menu-item,
.oj-menu-drawer #mega-menu-max_mega_menu_1 ul.mega-sub-menu > li.mega-menu-item {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.oj-menu-drawer #mega-menu-max_mega_menu_1 a.mega-menu-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  height: auto !important;
  min-height: 44px;
  padding: 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #292720 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .025em;
  line-height: 1.45 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

.oj-menu-drawer #mega-menu-max_mega_menu_1 a.mega-menu-link:hover,
.oj-menu-drawer #mega-menu-max_mega_menu_1 li.mega-current-menu-item > a.mega-menu-link { color: #a28c52 !important; }

.oj-menu-drawer #mega-menu-max_mega_menu_1 ul.mega-sub-menu {
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  transform: none !important;
}

.oj-menu-drawer #mega-menu-max_mega_menu_1 li.mega-toggle-on > ul.mega-sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  padding: 0 0 8px 18px !important;
}

.oj-menu-drawer #mega-menu-max_mega_menu_1 ul.mega-sub-menu a.mega-menu-link {
  min-height: 38px;
  padding: 7px 0 !important;
  color: #666157 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
  text-transform: none !important;
}

@media (max-width: 849px) {
  .oj-menu-trigger-slot { display: none; }
  .oj-menu-drawer { width: min(360px, 100vw); }
}

@media (prefers-reduced-motion: reduce) {
  .oj-menu-backdrop,
  .oj-menu-drawer { transition: none; }
}