/* All navigation styles are scoped; the existing desktop menu is untouched. */
.spr-mm-trigger,
dialog.spr-mm-dialog { display: none; }

@media (max-width: 767px) {
    .spr-mm-trigger,
    dialog.spr-mm-dialog {
        --spr-mm-blue: #283583;
        --spr-mm-ink: #2b333d;
        --spr-mm-muted: #66707d;
        --spr-mm-line: #e8ecf1;
        font-family: "Open Sans", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: normal;
        text-transform: none;
    }
    .spr-mm-trigger:not([hidden]) {
        position: fixed;
        display: grid;
        place-items: center;
        top: calc(16px + env(safe-area-inset-top, 0px) + var(--spr-mm-admin-offset, 0px));
        right: calc(16px + env(safe-area-inset-right, 0px));
        z-index: 9990;
        width: 52px;
        height: 52px;
        min-width: 52px;
        padding: 0;
        border: 1px solid rgb(255 255 255 / 20%);
        border-radius: 17px;
        background: var(--spr-mm-blue);
        color: #fff;
        box-shadow: 0 5px 18px rgb(25 39 85 / 24%);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .spr-mm-trigger:not([hidden]):hover,
    .spr-mm-trigger:not([hidden]):focus {
        background: #202b6b;
        color: #fff;
        border-radius: 17px;
    }
    .spr-mm-icon { display: block; flex: 0 0 auto; width: 24px; height: 24px; }
    dialog.spr-mm-dialog {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(90vw, 380px);
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 24px 0 0 24px;
        background: #fff;
        color: var(--spr-mm-ink);
        box-shadow: -12px 0 48px rgb(19 29 53 / 16%);
        transform: translateX(100%);
        transition: transform 220ms cubic-bezier(.2, .75, .25, 1);
        overscroll-behavior: contain;
    }
    dialog.spr-mm-dialog[open] { display: block; }
    dialog.spr-mm-dialog.spr-mm-visible { transform: translateX(0); }
    dialog.spr-mm-dialog::backdrop {
        background: rgb(17 25 41 / 48%);
        opacity: 0;
        transition: opacity 220ms ease;
    }
    dialog.spr-mm-dialog.spr-mm-visible::backdrop { opacity: 1; }
    .spr-mm-dialog,
    .spr-mm-dialog * { box-sizing: border-box; }
    .spr-mm-dialog .spr-mm-shell { display: flex; flex-direction: column; height: 100%; }
    .spr-mm-dialog .spr-mm-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-shrink: 0;
        padding: calc(24px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) 22px 24px;
        border-bottom: 1px solid var(--spr-mm-line);
    }
    .spr-mm-dialog .spr-mm-brand { display: block; min-width: 0; color: var(--spr-mm-blue); }
    .spr-mm-dialog .spr-mm-logo { display: block; width: 190px; max-width: 100%; height: auto; }
    .spr-mm-dialog button {
        appearance: none;
        font: inherit;
        letter-spacing: inherit;
        text-transform: none;
        box-shadow: none;
        border: 0;
        margin: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .spr-mm-dialog .spr-mm-close {
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 14px;
        background: #f0f3f7;
        color: var(--spr-mm-ink);
    }
    .spr-mm-dialog .spr-mm-content {
        flex: 1;
        min-height: 0;
        padding: 24px calc(18px + env(safe-area-inset-right, 0px)) 24px 18px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .spr-mm-dialog .spr-mm-eyebrow {
        margin: 0 8px 16px;
        font-size: 11px;
        line-height: 1.5;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--spr-mm-muted);
    }
    .spr-mm-dialog .spr-mm-list,
    .spr-mm-dialog .spr-mm-submenu { display: block; list-style: none; margin: 0; padding: 0; }
    .spr-mm-dialog .spr-mm-item { display: block; float: none; width: auto; margin: 0; padding: 0; }
    .spr-mm-dialog .spr-mm-list > .spr-mm-item { margin-bottom: 8px; }
    .spr-mm-dialog .spr-mm-row { display: flex; align-items: stretch; border-radius: 16px; }
    .spr-mm-dialog .spr-mm-list > .spr-mm-item > .spr-mm-row { background: #f4f6f9; }
    .spr-mm-dialog .spr-mm-link {
        display: flex;
        align-items: center;
        flex: 1;
        gap: 12px;
        min-width: 0;
        min-height: 60px;
        padding: 12px;
        border-radius: 16px;
        background: transparent;
        color: var(--spr-mm-ink);
        text-decoration: none;
        text-align: left;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 600;
    }
    .spr-mm-dialog .spr-mm-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
    .spr-mm-dialog .spr-mm-section-icon {
        display: grid;
        place-items: center;
        flex: 0 0 36px;
        height: 36px;
        border-radius: 11px;
        color: var(--spr-mm-blue);
        background: #e8edf8;
    }
    .spr-mm-dialog .spr-mm-expand {
        display: grid;
        place-items: center;
        flex: 0 0 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 14px;
        color: var(--spr-mm-muted);
        background: transparent;
    }
    .spr-mm-dialog [data-spr-toggle] > .spr-mm-icon { width: 17px; height: 17px; transition: transform 160ms ease; }
    .spr-mm-dialog [data-spr-toggle][aria-expanded="true"] > .spr-mm-icon { transform: rotate(90deg); }
    .spr-mm-dialog .spr-mm-submenu { margin: 8px 4px 12px 24px; padding-left: 12px; border-left: 1px solid #dce3ee; }
    .spr-mm-dialog .spr-mm-submenu .spr-mm-link { min-height: 44px; padding: 10px 8px; font-size: 13px; font-weight: 400; }
    .spr-mm-dialog .spr-mm-submenu .spr-mm-submenu { margin-left: 12px; }
    .spr-mm-dialog .spr-mm-submenu[hidden] { display: none; }
    .spr-mm-dialog .spr-mm-link:hover,
    .spr-mm-dialog .spr-mm-expand:hover,
    .spr-mm-dialog .spr-mm-close:hover,
    .spr-mm-dialog .spr-mm-current > .spr-mm-row { background: #e8edf8; color: var(--spr-mm-blue); }
    .spr-mm-dialog .spr-mm-link[aria-current="page"] { color: var(--spr-mm-blue); font-weight: 700; }
    .spr-mm-dialog .spr-mm-link:focus { background: #e8edf8; color: var(--spr-mm-blue); border-radius: 16px; }
    .spr-mm-dialog .spr-mm-expand:focus,
    .spr-mm-dialog .spr-mm-close:focus { background: #e8edf8; color: var(--spr-mm-blue); border-radius: 14px; }
    .spr-mm-dialog .spr-mm-link:hover { border-radius: 16px; }
    .spr-mm-dialog .spr-mm-expand:hover,
    .spr-mm-dialog .spr-mm-close:hover { border-radius: 14px; }
    .spr-mm-dialog :focus-visible,
    .spr-mm-trigger:focus-visible { outline: 3px solid #4297c0; outline-offset: 3px; }
    .spr-mm-dialog .spr-mm-footer {
        flex-shrink: 0;
        padding: 16px calc(24px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 24px;
        border-top: 1px solid var(--spr-mm-line);
        color: var(--spr-mm-muted);
        font-size: 11px;
        line-height: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    dialog.spr-mm-dialog,
    dialog.spr-mm-dialog::backdrop,
    .spr-mm-dialog [data-spr-toggle] > .spr-mm-icon { transition: none; }
}

@media print {
    .spr-mm-trigger,
    dialog.spr-mm-dialog[open] { display: none !important; }
}