/* REDESIGNED Mobile Sidenav (Stronger Overrides) */

/* Force hide/show logic for mobile only */
@media (max-width: 900px) {

    /* 1. HAMBURGER BUTTON - Must be visible */
    .cart-and-mobile {
        display: block !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 20000 !important;
        width: auto !important;
        height: auto !important;
    }

    #menu-mobile {
        display: block !important;
    }

    #menu-submit {
        display: flex !important;
        align-items: center;
        background: #fff;
        border: 1px solid #ccc;
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        color: #333;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 13px;
    }

    /* 2. SIDENAV CONTAINER - The actual drawer */
    /* Often Webnode nests these deeply, so we target the NAV element directly to be the drawer */
    nav#menu {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1) !important;
        z-index: 19999 !important;

        /* Hidden state */
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;

        /* Reset any inherited styles */
        margin: 0 !important;
        padding: 60px 0 0 0 !important;
        /* Top padding for content */
        overflow-y: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 3. ACTIVE STATE - Slide in */
    body.sidenav-active nav#menu {
        transform: translateX(0) !important;
    }

    /* 4. WRAPPERS - Prevent them from messing up layout */
    /* Hide the wrapper containers but allow children (nav#menu) to be fixed */
    .n-l-w,
    .n-l-w-i,
    #menu-slider,
    #menu-block {
        position: static !important;
        /* Or absolute/fixed if needed, but 'static' usually lets children break out with fixed */
        width: auto !important;
        height: auto !important;
        background: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* Important: If the wrappers are preventing fixed positioning, we might need to reset them */
    .n-l-w {
        overflow: visible !important;
    }

    /* 5. MENU ITEMS STYLING */
    nav#menu .menu-wrapper {
        display: block !important;
    }

    nav#menu ul.level-1 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    nav#menu li {
        display: block !important;
        width: 100% !important;
        border: none !important;
        margin: 0 !important;
    }

    nav#menu a.menu-item {
        display: block !important;
        padding: 15px 25px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        color: #4b5563 !important;
        /* Gray */
        text-decoration: none !important;
        font-family: 'Roboto', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        transition: background 0.2s;
    }

    nav#menu a.menu-item:hover {
        background-color: #f9fafb !important;
    }

    /* Active Item */
    nav#menu .wnd-active a.menu-item {
        color: #C5A065 !important;
        /* Gold */
        background-color: #fffaf0 !important;
        border-left: 4px solid #C5A065 !important;
    }

    /* 6. OVERLAY BACKDROP */
    .sidenav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 15000;
        /* Below nav, above everything else */
        backdrop-filter: blur(3px);
        display: none;
        /* Hidden by default */
    }

    body.sidenav-active .sidenav-overlay {
        display: block !important;
    }

    /* Hide the "More" button and close button inside menu usually */
    .more-text,
    .menu-close {
        display: none !important;
    }
}