.mobile-menu,
#mobile-menu {
    --site-mobile-menu-separator-width: min(100%, 17.5rem);
    contain: layout paint style;
    isolation: isolate;
    z-index: 100200 !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(100%, 0, 0) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    justify-content: center !important;
    gap: clamp(1rem, 2.6vh, 1.35rem) !important;
    min-height: 100dvh;
    padding: max(4.6rem, calc(env(safe-area-inset-top) + 4.2rem)) clamp(1.5rem, 6vw, 3rem) max(4.6rem, calc(env(safe-area-inset-bottom) + 4.2rem));
}

.mobile-menu::-webkit-scrollbar,
#mobile-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.mobile-menu.is-open,
#mobile-menu.is-open {
    pointer-events: auto !important;
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
}

.mobile-menu a,
#mobile-menu a {
    pointer-events: auto;
    text-align: center;
    text-wrap: balance;
    outline: none;
    max-width: min(100%, 28rem);
}

.mobile-menu > a,
#mobile-menu > a {
    font-size: clamp(1.95rem, 7.35vw, 2.85rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.015em !important;
}

.mobile-menu > a.border-t,
#mobile-menu > a.border-t {
    width: var(--site-mobile-menu-separator-width);
    margin-top: clamp(0.45rem, 1.8vh, 0.75rem) !important;
    padding-top: clamp(1rem, 2.4vh, 1.3rem) !important;
    border-color: rgba(235, 233, 237, 0.22) !important;
}

.mobile-menu a:focus-visible,
#mobile-menu a:focus-visible,
.mobile-menu button:focus-visible,
#mobile-menu button:focus-visible,
.mobile-menu-btn:focus-visible,
#mobile-menu-btn:focus-visible {
    outline: 2px solid #D85DB5;
    outline-offset: 0.45rem;
}

.mobile-menu-btn,
#mobile-menu-btn {
    z-index: 100210 !important;
    color: #EBE9ED;
    touch-action: manipulation;
}

.mobile-menu-btn span,
#mobile-menu-btn span {
    transform-origin: center;
    will-change: transform, opacity;
}

.mobile-menu-btn[aria-expanded="true"] span:first-child,
#mobile-menu-btn[aria-expanded="true"] span:first-child {
    transform: translateY(9px) rotate(45deg) !important;
}

.mobile-menu-btn[aria-expanded="true"] span:last-child,
#mobile-menu-btn[aria-expanded="true"] span:last-child {
    transform: translateY(-9px) rotate(-45deg) !important;
}

html.bpd-mobile-menu-lock,
body.bpd-mobile-menu-lock {
    overflow: hidden !important;
    touch-action: none;
}

body.bpd-mobile-menu-lock header {
    z-index: 100230 !important;
    isolation: isolate;
    mix-blend-mode: normal !important;
    transform: translateZ(0);
}

body.bpd-mobile-menu-lock .cookie-floating,
body.bpd-mobile-menu-lock .cursor-dot,
body.bpd-mobile-menu-lock .cursor-ring {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu,
    #mobile-menu,
    .mobile-menu-btn span,
    #mobile-menu-btn span {
        transition-duration: 1ms !important;
    }
}

@media (min-width: 768px) {
    header nav.md\:flex ~ .mobile-menu-btn,
    header nav.md\:flex ~ #mobile-menu-btn {
        display: none !important;
    }
}

@media (max-width: 900px) and (max-height: 720px) {
    .mobile-menu,
    #mobile-menu {
        justify-content: flex-start !important;
        padding-top: max(4.8rem, calc(env(safe-area-inset-top) + 4rem)) !important;
        padding-bottom: max(2.4rem, calc(env(safe-area-inset-bottom) + 1.8rem)) !important;
    }
}

@media (max-width: 380px) {
    .mobile-menu,
    #mobile-menu {
        gap: 0.9rem !important;
        padding-top: max(5.1rem, calc(env(safe-area-inset-top) + 4.6rem));
    }

    .mobile-menu > a,
    #mobile-menu > a {
        font-size: clamp(1.76rem, 8.1vw, 2.28rem) !important;
    }
}
