/* Base hidden state */
.canvas-nav-wrap {
    position: fixed;
    inset: 0;
    z-index: 1050;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

    /* Overlay + panel default */
    .canvas-nav-wrap .overlay-canvas-nav {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.45);
        opacity: 0;
        transition: opacity .25s ease;
        border: 0;
    }

    .canvas-nav-wrap .inner-canvas-nav {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: min(92vw, 420px);
        background: #0e0e10; /* keep your theme color */
        transform: translateX(100%);
        transition: transform .28s ease;
        box-shadow: -12px 0 30px rgba(0,0,0,.35);
    }

    /* Open state */
    .canvas-nav-wrap.is-open {
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
    }

        .canvas-nav-wrap.is-open .overlay-canvas-nav {
            opacity: 1;
        }

        .canvas-nav-wrap.is-open .inner-canvas-nav {
            transform: translateX(0);
        }

.canvas-nav-close {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

    .canvas-nav-close svg {
        display: block;
    }


/* --- Mobile nav: layout-only toggle (preserves theme look) --- */

/* Container exists in DOM; hidden until .is-open */
.mobile-nav-wrap {
    position: fixed;
    inset: 0;
    z-index: 2000; /* above header */
    display: block; /* override themes that use display:none */
}

    /* Hidden state */
    .mobile-nav-wrap:not(.is-open) {
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    /* Overlay: let theme handle color; we just wire interaction */
    .mobile-nav-wrap .overlay-mobile-nav {
        position: absolute;
        inset: 0;
        transition: opacity .25s ease;
        pointer-events: none;
    }

    .mobile-nav-wrap.is-open .overlay-mobile-nav {
        pointer-events: auto;
    }

    /* Panel: only slide mechanics; theme keeps colors, width, padding, etc. */
    .mobile-nav-wrap .inner-mobile-nav {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%);
        transition: transform .28s ease;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-nav-wrap.is-open .inner-mobile-nav {
        transform: translateX(0);
    }

/* Buttons: neutralize default button chrome, nothing else */
.mobile-button,
.mobile-nav-close {
    border: 0;
    background: transparent;
    cursor: pointer;
}

    .mobile-nav-close svg {
        display: block;
    }