body.durasan-next header-drawer[data-du-mobile-menu] {
  --drawer-animation-speed: 240ms;

  .du-mobile-menu {
    width: min(100vw, 440px); max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    overflow: hidden; background: #202020; color: #f5f5f2;
    border-right: 1px solid #3b3b3b;
  }
  .du-mobile-menu__header {
    display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 auto; min-height: 72px; gap: 16px;
    padding: max(12px, env(safe-area-inset-top)) 20px 12px;
    position: sticky; top: 0; z-index: 2; background: #202020;
  }
  .du-mobile-menu__brand {
    display: flex; align-items: center; gap: 10px;
    width: 170px; min-width: 0; min-height: 44px;
  }
  .du-mobile-menu__face {
    flex: 0 0 32px; width: 32px; height: 40px; object-fit: contain;
  }
  .du-mobile-menu__wordmark {
    display: block; flex: 1 1 0; width: 100%; min-width: 0;
    height: auto; max-height: 40px; object-fit: contain; object-position: left center;
  }
  :is(.du-mobile-menu__header, .menu-drawer__navigation) .menu-drawer__close-button {
    display: flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    padding: 12px; border: 1px solid #525252; border-radius: 50%;
    background: transparent; color: #f5f5f2; box-shadow: none;
  }
  :is(.du-mobile-menu__header, .menu-drawer__navigation) .menu-drawer__close-button .svg-wrapper {
    width: 18px; height: 18px; padding: 0; margin: 0;
  }
  :is(.du-mobile-menu__header, .menu-drawer__navigation) .menu-drawer__close-button svg {
    width: 18px; height: 18px;
  }
  .du-mobile-menu__search {
    display: flex; align-items: stretch; flex: 0 0 48px;
    min-width: 0; height: 48px; margin: 4px 20px 16px;
    border: 1px solid #626262; border-radius: 6px; background: #303030;
  }
  .du-mobile-menu__search input[type='search'] {
    flex: 1 1 0; width: 100%; min-width: 0; height: 46px;
    border: 0; border-radius: 6px 0 0 6px; padding: 0 12px;
    background: transparent; color: #f5f5f2; box-shadow: none;
    font: inherit; font-size: 16px; line-height: 1.25;
  }
  .du-mobile-menu__search input::placeholder { color: #c1c1bf; opacity: 1; }
  .du-mobile-menu__search button {
    display: grid; place-items: center; flex: 0 0 46px;
    min-width: 46px; min-height: 46px; padding: 11px;
    border: 0; border-radius: 0 6px 6px 0; background: transparent;
    color: #f5f5f2; box-shadow: none;
  }
  .du-mobile-menu__search :is(.svg-wrapper, svg) { width: 22px; height: 22px; }
  .du-mobile-menu > .menu-drawer__navigation {
    flex: 1 1 0; min-height: 0; min-width: 0; margin: 0;
    overflow: auto; overscroll-behavior-y: contain; scrollbar-width: thin;
    scrollbar-color: #757575 #202020; padding: 0 20px max(24px, env(safe-area-inset-bottom));
    scroll-padding-block: 12px;
  }
  .menu-drawer__navigation {
    .du-mobile-menu__label, .menu-drawer__additional-heading {
      margin: 0 0 6px; padding: 0; color: #bdbdb9;
      font-size: 11px; font-weight: 600; line-height: 1.5;
      letter-spacing: .1em; text-transform: uppercase;
    }
    .menu-drawer__menu { margin: 0; padding: 0; }
    .menu-drawer__menu > li { min-width: 0; min-height: 0; }
    > .menu-drawer__menu > li {
      margin: 0; border-bottom: 1px solid #414141;
    }
    .menu-drawer__menu-container--divider { border: 0; }
    .menu-drawer__menu-item {
      gap: 8px; color: #f5f5f2; text-decoration: none;
      padding: 8px 0; min-width: 0; min-height: 44px;
    }
    .menu-drawer__menu-item--mainlist {
      min-height: 52px; padding: 10px 0;
      font-size: 20px; font-weight: 500; line-height: 1.45;
      letter-spacing: -.015em; text-transform: none;
    }
    .menu-drawer__menu-item-text {
      min-width: 0; overflow: visible; text-overflow: clip;
      white-space: normal; overflow-wrap: normal; word-break: normal;
    }
    .menu-drawer__menu-item > .svg-wrapper {
      flex: 0 0 16px; width: 16px; height: 16px; padding: 0; margin: 0 2px 0 8px;
    }
    .menu-drawer__menu-item > .svg-wrapper svg { width: 16px; height: 16px; }
    .menu-drawer__menu--childlist {
      width: 100%; margin: 0; padding: 0 0 14px;
    }
    .menu-drawer__menu--grid {
      display: grid; grid-template-columns: minmax(0, 1fr);
      row-gap: 2px;
    }
    .menu-drawer__menu--grid > li { margin: 0; border: 0; }
    .menu-drawer__menu--grid .menu-drawer__menu-item {
      display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
      gap: 14px; padding: 5px 0; min-height: 62px;
      font-size: 15px; font-weight: 400; line-height: 1.35; text-transform: none;
    }
    .menu-drawer__menu--grid .menu-drawer__menu-item::before { content: none; }
    .menu-drawer__link-image {
      flex: 0 0 52px; width: 52px; height: 52px; max-width: 52px;
      aspect-ratio: auto; object-fit: cover; border-radius: 4px;
    }
    .menu-drawer__menu--grid .menu-drawer__menu-item-text { flex: 1 1 0; }
    .du-mobile-menu__view-all { grid-column: 1 / -1; }
    .du-mobile-menu__all-link {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      width: 100%; min-height: 44px; padding: 8px 0;
      color: #e2e2dd; font-size: 13px; line-height: 1.4;
      text-decoration: underline; text-underline-offset: 4px;
    }
    .du-mobile-menu__all-link svg { flex: 0 0 16px; width: 16px; height: 16px; }
    .menu-drawer__additional { margin: 24px 0 0; padding: 0; border: 0; }
    .menu-drawer__menu--additional {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px;
    }
    .menu-drawer__menu--additional .menu-drawer__menu-item {
      min-height: 44px; padding: 9px 0; color: #d5d5d1;
      font-size: 13.5px; font-weight: 400; line-height: 1.45; text-transform: none;
      overflow-wrap: anywhere;
    }
    .menu-drawer__submenu { background: #202020; color: #f5f5f2; z-index: 4; }
    .menu-drawer__inner-submenu { margin-top: 0; overscroll-behavior-y: contain; }
    .menu-drawer__inner-submenu > .menu-drawer__menu { padding: 12px 20px 24px; }
    .menu-drawer__nav-buttons {
      position: sticky; top: 0; z-index: 1; flex: 0 0 auto;
      min-height: 72px; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 20px 12px;
      background: #202020; border-bottom: 1px solid #414141;
    }
    .menu-drawer__back-button {
      flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 0;
      color: #f5f5f2; font-size: 18px; line-height: 1.35; white-space: normal;
    }
    .menu-drawer__back-button > .svg-wrapper { flex: 0 0 16px; width: 16px; height: 16px; margin-right: 12px; }
    .menu-drawer__back-button svg { width: 16px; height: 16px; }
    .menu-drawer__animated-element { animation: none; animation-delay: 0s; }
  }
  .du-mobile-menu > .menu-drawer__utility-links:empty { display: none; }
  :is(.du-mobile-menu__header, .du-mobile-menu__search, .menu-drawer__navigation)
    :is(a, button, summary, input):focus-visible {
    outline: 2px solid #f5f5f2; outline-offset: 3px;
  }
  .du-mobile-menu__search input:focus-visible { outline-offset: -3px; }
  &:not(:defined) > details[open] > .du-mobile-menu .du-mobile-menu__header > .menu-drawer__close-button {
    visibility: hidden;
  }
  &:not(:defined) > details[open] > summary {
    position: fixed; top: max(12px, env(safe-area-inset-top));
    left: calc(min(100vw, 440px) - 64px); right: auto;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 12px;
    border: 1px solid #525252; border-radius: 50%; color: #f5f5f2; background: #202020;
  }
  &:not(:defined) > details[open] > summary .header-drawer-icon--close {
    display: flex; position: static; width: 18px; height: 18px;
  }
  &:not(:defined) > details[open] > summary .header-drawer-icon--close svg { width: 18px; height: 18px; }
}

@media (max-width: 359px) {
  body.durasan-next header-drawer[data-du-mobile-menu] {
    .du-mobile-menu__header { min-height: 68px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.durasan-next header-drawer[data-du-mobile-menu] {
    --drawer-animation-speed: 0ms;
    .menu-drawer__navigation .details-content { animation: none; transition: none; }
  }
}