.mwg-menu-root,
.mwg-menu-root * { box-sizing: border-box; }

.mwg-menu-root {
  position: relative;
  z-index: var(--mwg-z);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--mwg-group-gap);
  width: -webkit-max-content;
  width: max-content;
  max-width: calc(100vw - 2 * var(--mwg-left));
  color: var(--mwg-nav-text);
  isolation: isolate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mwg-menu-root.is-fixed,
.mwg-menu-root.is-overlay {
  position: fixed;
  top: var(--mwg-top);
  left: var(--mwg-left);
  right: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* A dedicated YOOtheme section used only as the menu host can be removed
   from page flow completely. JS adds this class only when No Layout Space
   is enabled on the element. */
.uk-section.mwg-menu-overlay-host,
section.mwg-menu-overlay-host {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  inset: 0 auto auto 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  z-index: 999999 !important;
  pointer-events: none !important;
}

.mwg-menu-overlay-host > * {
  pointer-events: none;
}

.mwg-menu-overlay-host .mwg-menu-root,
.mwg-menu-overlay-host .mwg-menu-root * {
  pointer-events: auto;
}

.mwg-menu-nav {
  display: flex;
  align-items: center;
  height: var(--mwg-nav-h);
  padding: 0 var(--mwg-nav-px);
  border-radius: var(--mwg-nav-r);
  background: var(--mwg-nav-bg);
  color: var(--mwg-nav-text);
  overflow: hidden;
  min-width: 0;
}
.mwg-menu-list {
  display: flex;
  align-items: center;
  width: -webkit-max-content;
  width: max-content;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.mwg-menu-item {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.mwg-menu-link,
.mwg-menu-logo-button {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none !important;
  outline: none;
}
.mwg-menu-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--mwg-nav-h);
  padding: 0 var(--mwg-item-px);
  color: var(--mwg-nav-text) !important;
  transition: color var(--mwg-color-transition) cubic-bezier(.16,1,.3,1);
}

.mwg-menu-roll-window {
  position: relative;
  display: block;
  height: var(--mwg-line);
  line-height: var(--mwg-line);
  overflow: hidden;
  white-space: nowrap;
}
.mwg-menu-roll-track {
  position: relative;
  display: block;
  height: var(--mwg-line);
  transform: translate3d(0,0,0);
  transition: transform var(--mwg-roll-dur) var(--mwg-roll-ease);
  will-change: transform;
}
.mwg-menu-roll-row {
  display: flex;
  align-items: center;
  gap: var(--mwg-badge-gap);
  height: var(--mwg-line);
  font-size: var(--mwg-font-size);
  font-weight: var(--mwg-weight);
  line-height: var(--mwg-line);
  letter-spacing: var(--mwg-letter);
  text-transform: var(--mwg-transform);
  white-space: nowrap;
}
.mwg-menu-roll-row--clone {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--mwg-line));
}
.mwg-menu-roll:hover .mwg-menu-roll-track,
.mwg-menu-roll:focus-visible .mwg-menu-roll-track,
.mwg-menu-roll.is-on .mwg-menu-roll-track {
  transform: translate3d(0,var(--mwg-line),0);
}

.mwg-menu-badge {
  display: inline-block;
  margin: 0;
  font-style: normal;
  font-size: var(--mwg-badge-size);
  line-height: 1;
  transform: translateY(var(--mwg-badge-y));
}

.mwg-menu-logo-button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--mwg-logo-button-w);
  height: var(--mwg-logo-button-h);
  border-radius: var(--mwg-logo-button-r);
  background: var(--mwg-logo-bg);
  overflow: hidden;
}
.mwg-menu-logo-image {
  display: block;
  width: var(--mwg-logo-w) !important;
  height: var(--mwg-logo-h) !important;
  max-width: calc(100% - 12px);
  max-height: calc(100% - 12px);
  object-fit: var(--mwg-logo-fit);
}
.mwg-menu-logo-placeholder {
  font-size: 11px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(10,10,11,.5);
}

.mwg-menu-link:hover,
.mwg-menu-link:focus-visible {
  color: var(--mwg-hover-color) !important;
  opacity: 1;
}

/* Active state is independent from hover so both color and weight can be
   controlled from the YOOtheme panel. */
.mwg-menu-item.is-active > .mwg-menu-link,
.mwg-menu-item.is-active > .mwg-menu-link:hover,
.mwg-menu-item.is-active > .mwg-menu-link:focus-visible {
  color: var(--mwg-active-color) !important;
  opacity: 1;
}

.mwg-menu-roll-row,
.mwg-menu-badge {
  color: inherit;
  transition:
    color var(--mwg-color-transition) cubic-bezier(.16,1,.3,1),
    font-weight var(--mwg-weight-transition) cubic-bezier(.16,1,.3,1);
}

.mwg-menu-item.is-active .mwg-menu-roll-row {
  font-weight: var(--mwg-active-weight) !important;
}
.mwg-menu-link:focus-visible,
.mwg-menu-logo-button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.mwg-menu-root.is-mobile {
  left: var(--mwg-mobile-side) !important;
  right: var(--mwg-mobile-side) !important;
  left: max(var(--mwg-mobile-side), env(safe-area-inset-left, 0px)) !important;
  right: max(var(--mwg-mobile-side), env(safe-area-inset-right, 0px)) !important;
  top: var(--mwg-mobile-top) !important;
  width: auto !important;
  max-width: none !important;
  gap: var(--mwg-mobile-gap) !important;
}

.mwg-menu-root.is-mobile .mwg-menu-logo-button {
  width: var(--mwg-mobile-logo-button-w);
  height: var(--mwg-mobile-logo-button-h);
  border-radius: calc(var(--mwg-mobile-logo-button-h) / 2);
}

.mwg-menu-root.is-mobile .mwg-menu-logo-image {
  width: var(--mwg-mobile-logo-w) !important;
  height: var(--mwg-mobile-logo-h) !important;
}

.mwg-menu-root.is-mobile .mwg-menu-nav {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: var(--mwg-mobile-nav-h);
  padding: 0 var(--mwg-mobile-nav-px);
  border-radius: calc(var(--mwg-mobile-nav-h) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.mwg-menu-root.is-mobile .mwg-menu-nav::-webkit-scrollbar { display: none; }

.mwg-menu-root.is-mobile .mwg-menu-list {
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
}

.mwg-menu-root.is-mobile .mwg-menu-link {
  height: var(--mwg-mobile-nav-h);
  padding: 0 var(--mwg-mobile-item-px);
}

.mwg-menu-root.is-mobile .mwg-menu-roll-window,
.mwg-menu-root.is-mobile .mwg-menu-roll-track,
.mwg-menu-root.is-mobile .mwg-menu-roll-row {
  height: var(--mwg-mobile-line);
  line-height: var(--mwg-mobile-line);
}

.mwg-menu-root.is-mobile .mwg-menu-roll-row {
  font-size: var(--mwg-mobile-font-size);
}

.mwg-menu-root.is-mobile .mwg-menu-roll-row--clone {
  top: calc(-1 * var(--mwg-mobile-line));
}

.mwg-menu-root.is-mobile .mwg-menu-roll:hover .mwg-menu-roll-track,
.mwg-menu-root.is-mobile .mwg-menu-roll:focus-visible .mwg-menu-roll-track,
.mwg-menu-root.is-mobile .mwg-menu-roll.is-on .mwg-menu-roll-track {
  transform: translate3d(0,var(--mwg-mobile-line),0);
}

.mwg-menu-root.is-mobile.mobile-hide-nav .mwg-menu-nav {
  display: none;
}

.mwg-menu-root.is-mobile.mobile-hide-nav {
  right: auto !important;
  width: -webkit-max-content !important;
  width: max-content !important;
}

/* Very small phones: keep tap targets usable but compact. */
@media (max-width: 420px) {
  .mwg-menu-root.is-mobile {
    --mwg-mobile-item-px: 7px;
    --mwg-mobile-font-size: 10px;
  }
}

@media (hover: none), (pointer: coarse) {
  .mwg-menu-roll-track { will-change: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mwg-menu-roll-track { transition: none; transform: none !important; }
}


/* v1.3.0 — mobile hamburger navigation. Desktop keeps the original horizontal menu. */
.mwg-menu-hamburger {
  display: none;
  position: relative;
  flex: 0 0 auto;
  width: var(--mwg-mobile-hamburger-size);
  height: var(--mwg-mobile-hamburger-size);
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--mwg-mobile-hamburger-radius);
  background: var(--mwg-nav-bg);
  color: var(--mwg-nav-text);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mwg-menu-hamburger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.mwg-menu-hamburger-line {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 50%;
  transition: transform .45s cubic-bezier(.16,1,.3,1), top .45s cubic-bezier(.16,1,.3,1);
}
.mwg-menu-hamburger-line--1 { top: calc(50% - 4px); transform: translateX(-50%) rotate(0deg); }
.mwg-menu-hamburger-line--2 { top: calc(50% + 4px); transform: translateX(-50%) rotate(0deg); }
.mwg-menu-root.is-menu-open .mwg-menu-hamburger-line--1 { top: 50%; transform: translateX(-50%) rotate(45deg); }
.mwg-menu-root.is-menu-open .mwg-menu-hamburger-line--2 { top: 50%; transform: translateX(-50%) rotate(-45deg); }

.mwg-menu-root.is-mobile.has-mobile-hamburger {
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
}
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-hamburger {
  display: block;
}
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-logo-button {
  flex: 0 0 auto;
}
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-nav {
  position: absolute;
  top: calc(max(var(--mwg-mobile-logo-button-h), var(--mwg-mobile-hamburger-size)) + var(--mwg-mobile-panel-offset));
  left: 0;
  right: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  max-height: 0;
  min-height: 0;
  padding: 0 var(--mwg-mobile-panel-padding);
  border-radius: var(--mwg-mobile-panel-radius);
  overflow: hidden;
  background: var(--mwg-nav-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0,-10px,0) scale(.985);
  transform-origin: 50% 0;
  transition:
    max-height .55s cubic-bezier(.16,1,.3,1),
    opacity .28s ease,
    transform .55s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .55s,
    padding .55s cubic-bezier(.16,1,.3,1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: contain;
}
.mwg-menu-root.is-mobile.has-mobile-hamburger.is-menu-open .mwg-menu-nav {
  max-height: min(70vh, 640px);
  padding-top: var(--mwg-mobile-panel-padding);
  padding-bottom: var(--mwg-mobile-panel-padding);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
  transition-delay: 0s;
}
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--mwg-mobile-panel-gap);
  width: 100%;
  min-width: 0;
}
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-item {
  width: 100%;
}
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-link {
  justify-content: flex-start;
  width: 100%;
  height: var(--mwg-mobile-panel-item-h);
  padding: 0 var(--mwg-mobile-item-px);
  border-radius: calc(var(--mwg-mobile-panel-item-h) / 2);
}
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-roll-window,
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-roll-track,
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-roll-row {
  height: var(--mwg-mobile-line);
  line-height: var(--mwg-mobile-line);
}
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-roll-row {
  font-size: var(--mwg-mobile-font-size);
}
/* Touch/mobile menu uses a single stable row rather than sticky hover roll. */
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-roll-row--clone { display: none; }
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-roll-track,
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-roll:hover .mwg-menu-roll-track,
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-roll:focus-visible .mwg-menu-roll-track,
.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-roll.is-on .mwg-menu-roll-track {
  transform: none !important;
}
/* Hamburger supersedes the old "hide nav" option: nav is hidden until the button opens it. */
.mwg-menu-root.is-mobile.has-mobile-hamburger.mobile-hide-nav .mwg-menu-nav {
  display: block;
}
.mwg-menu-root.is-mobile.has-mobile-hamburger.mobile-hide-nav {
  right: max(var(--mwg-mobile-side), env(safe-area-inset-right, 0px)) !important;
  width: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  .mwg-menu-hamburger-line,
  .mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-nav { transition-duration: .001ms !important; }
}


/* v1.3.2 — robust mobile head: logo + hamburger stay together; dropdown has an independent width. */
.mwg-menu-mobile-head {
  display: contents;
}

.mwg-menu-root.is-mobile.has-mobile-hamburger {
  display: block;
  overflow: visible;
}

.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-mobile-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--mwg-mobile-gap);
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
}

.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-hamburger {
  display: block;
  margin: 0 !important;
}

.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-nav {
  position: absolute;
  top: calc(max(var(--mwg-mobile-logo-button-h), var(--mwg-mobile-hamburger-size)) + var(--mwg-mobile-panel-offset));
  left: 0;
  right: auto;
  z-index: 3;
  width: min(360px, calc(100vw - (2 * var(--mwg-mobile-side))));
  max-width: calc(100vw - (2 * var(--mwg-mobile-side)));
  min-width: min(260px, calc(100vw - (2 * var(--mwg-mobile-side))));
  height: auto;
  max-height: 0;
  min-height: 0;
  padding: 0 var(--mwg-mobile-panel-padding);
  border-radius: var(--mwg-mobile-panel-radius);
  overflow: hidden;
  background: var(--mwg-nav-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0,-8px,0) scale(.99);
  transform-origin: left top;
  transition:
    max-height .5s cubic-bezier(.16,1,.3,1),
    opacity .22s ease,
    transform .5s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .5s,
    padding .5s cubic-bezier(.16,1,.3,1);
  overscroll-behavior: auto;
}

.mwg-menu-root.is-mobile.has-mobile-hamburger.is-menu-open .mwg-menu-nav {
  max-height: min(70vh, 640px);
  padding-top: var(--mwg-mobile-panel-padding);
  padding-bottom: var(--mwg-mobile-panel-padding);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
  transition-delay: 0s;
}

.mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-list {
  width: 100%;
  min-width: 0;
}

/* Keep the old hide-nav option from shrinking the new hamburger dropdown. */
.mwg-menu-root.is-mobile.has-mobile-hamburger.mobile-hide-nav {
  left: max(var(--mwg-mobile-side), env(safe-area-inset-left, 0px)) !important;
  right: max(var(--mwg-mobile-side), env(safe-area-inset-right, 0px)) !important;
  width: auto !important;
}
.mwg-menu-root.is-mobile.has-mobile-hamburger.mobile-hide-nav .mwg-menu-nav {
  display: block;
}

@media (max-width: 420px) {
  .mwg-menu-root.is-mobile.has-mobile-hamburger .mwg-menu-nav {
    width: calc(100vw - (2 * var(--mwg-mobile-side)));
    min-width: 0;
  }
}
