/* Only the new mobile dialog. The original desktop navigation is untouched. */
.rdm:not([open]) { display: none; }
dialog.rdm {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: 60%; max-width: 100%;
  height: 100vh; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; background: #fff; color: #25211e;
  font-family: var(--template-font, "Nunito"), sans-serif;
  box-sizing: border-box; overflow: hidden;
}
dialog.rdm[open] { display: flex; flex-direction: column; }
.rdm::backdrop { background: rgb(0 0 0 / 45%); }
.rdm *, .rdm *::before, .rdm *::after { box-sizing: border-box; }
.rdm [hidden] { display: none !important; }
.rdm__header {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  min-height: 68px; background: #f8ebe2; border-bottom: 1px solid #eaded6;
}
.rdm .rdm__heading { flex: 1; min-width: 0; margin: 0; font: inherit; font-size: 18px; line-height: 1.25; font-weight: 800; }
.rdm .rdm__back, .rdm .rdm__close {
  appearance: none; border: 0; background: transparent; color: #25211e;
  font: inherit; font-weight: 700; min-height: 44px; min-width: 44px;
  padding: 8px; cursor: pointer; flex-shrink: 0;
}
.rdm .rdm__close { font-size: 30px; line-height: 1; }
.rdm__scroller { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.rdm .rdm__list { list-style: none; margin: 0; padding: 0 16px; }
.rdm .rdm__item { display: block; margin: 0; padding: 0; border-bottom: 1px solid #eee9e5; }
.rdm .rdm__row {
  appearance: none; display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 58px; margin: 0; padding: 13px 4px;
  border: 0; border-radius: 0; background: transparent; color: #25211e;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.35;
  text-align: left; text-decoration: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rdm .rdm__row:active { background: #faf3ee; }
.rdm .rdm__all { color: #b30c17; padding-top: 18px; padding-bottom: 18px; }
.rdm .rdm__icon { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; margin: 0; }
.rdm__label { flex: 1; min-width: 0; }
.rdm__arrow { font-size: 27px; font-weight: 400; line-height: 1; }
.rdm .rdm__item--extra .rdm__row { font-size: 14px; font-weight: 400; min-height: 48px; }
.rdm .rdm__divider { list-style: none; height: 18px; margin: 0; padding: 0; }
.rdm :is(button,a):focus-visible { outline: 2px solid #c81020; outline-offset: -2px; }
.rdm__heading:focus { outline: none; }
.rdm__banner:empty { display: none; }
.rdm__banner { margin: 20px 16px 0; }
.rdm .rox-menu-promo {
  position: relative; display: block; height: var(--rdm-banner-height, 220px);
  width: 100%; overflow: hidden; border-radius: 10px; padding: 0; margin: 0;
  background: #333; color: #fff; text-decoration: none; isolation: isolate;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.rdm .rox-menu-promo__image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center var(--rdm-image-y, 75%); margin: 0; }
.rdm .rox-menu-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 80%), transparent 75%); z-index: 1; pointer-events: none; }
.rdm .rox-menu-promo__content { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rdm .rox-menu-promo__title, .rdm .rox-menu-promo__title h3 { display: block; margin: 0; padding: 0; font: inherit; font-size: 22px; line-height: 1.2; font-weight: 800; color: #fff; }
/* Keep the site's button sizing; prevent only the touch hover delay. */
.rdm .rox-menu-promo .btn { transition: none; }
.rdm .rox-menu-promo .btn-secondary-w { background: transparent; border-color: #fff; color: #fff; }
.rdm .rox-menu-promo:active .btn-secondary-w { background: #fff; color: #000; }
@media (max-width: 480px) { dialog.rdm { width: 80%; } }
@media (min-width: 768px) { dialog.rdm { display: none !important; } }

.rdm .rdm__heading:focus,
.rdm .rdm__heading:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
