/* --- MOBILE SPECIFIC: MAX-WIDTH 900px (v33.8 - GREEN UPDATE) --- */
@media (max-width: 900px) {
    html, body { 
        overflow-x: clip !important; 
        position: relative; 
        width: 100%; 
        margin: 0;
    }
    
    .pagewidth { 
        width: 95%; 
        margin: 0 auto; 
        display: flex; 
        flex-direction: column; 
    }
    
    #wrapper-top { 
        background: #f2a900 !important; 
        border-bottom: 4px solid var(--b17-green); 
        min-height: 90px; 
    }
    
    #sitename { 
        min-height: 90px;
        display: flex !important; 
        justify-content: center !important; 
        align-items: center !important; 
        width: 100% !important; 
    }
    
    .logo-desktop { display: none !important; }
    .logo-mobile { display: block !important; }
    
    .logo-mobile img { 
        height: 75px !important;
        width: auto !important; 
        max-width: 95% !important; 
        margin: 0 auto !important; 
        display: block !important; 
    }

    #nav-wrapper { 
        background: var(--b17-green) !important; 
        width: 100%; 
        position: -webkit-sticky !important; 
        position: sticky !important; 
        top: 0 !important;           
        z-index: 9900; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.15); 
    }
    
    #mobile-toggle-btn { 
        display: flex !important; 
        width: 100%; 
        padding: 8px 15px; 
        color: #fff !important; 
        font-family: "Bebas Neue", sans-serif; 
        font-size: 20px; 
        cursor: pointer; 
        justify-content: center; 
        align-items: center; 
        background: none; 
        border: none; 
    }
    
    .hamburger { width: 22px; height: 16px; margin-right: 10px; position: relative; display: inline-block; }
    .hamburger span { display: block !important; position: absolute !important; height: 2px !important; width: 100% !important; background: #ffffff !important; border-radius: 2px; }
    .hamburger span:nth-child(1) { top: 0px; }
    .hamburger span:nth-child(2) { top: 6px; }
    .hamburger span:nth-child(3) { top: 12px; }

    #b17-nav-container { display: none; width: 100%; background: var(--b17-green) !important; }
    #b17-nav-container.is-open { display: block !important; }
    #b17-nav-container ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
    #b17-nav-container li { border-bottom: 1px solid rgba(255,255,255,0.1); }
    
    #b17-nav-container li a, #b17-nav-container li span { 
        display: flex !important; 
        justify-content: space-between !important; 
        align-items: center !important; 
        padding: 10px 20px !important; 
        color: #ffffff !important; 
        font-family: "Bebas Neue", sans-serif !important; 
        font-size: 18px !important; 
        text-decoration: none !important; 
    }

    #sidebar-overlay { 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background: rgba(0,0,0,0.6); 
        z-index: 10000 !important; 
        display: none; 
        opacity: 0; 
        transition: opacity 0.3s ease; 
    }
    #sidebar-overlay.active { display: block; opacity: 1; }

    #sidebar-flyout-toggle { 
        display: block !important; 
        position: fixed; 
        right: 0; 
        top: 35%; 
        background: var(--b17-green); 
        color: #ffffff; 
        padding: 15px 8px; 
        writing-mode: vertical-rl; 
        text-orientation: mixed; 
        border: none; 
        border-radius: 8px 0 0 8px; 
        font-family: "Bebas Neue", sans-serif; 
        font-size: 18px; 
        z-index: 9901; 
        box-shadow: -2px 0 10px rgba(0,0,0,0.3); 
    }

    #news-sidebar { 
        position: fixed !important; 
        top: 20px; 
        bottom: 20px; 
        right: -320px; 
        width: 280px; 
        background: #f9f9f9 !important; 
        z-index: 10001 !important; 
        transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
        box-shadow: -5px 0 25px rgba(0,0,0,0.5); 
        border-radius: 12px 0 0 12px; 
        display: flex !important; 
        flex-direction: column; 
        overflow: hidden; 
    }
    #news-sidebar.is-open { right: 0; }
    
    #news-sidebar > .sidebar-header {
        background: var(--b17-green) !important;
        color: #ffffff !important;
        padding: 15px;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        border-bottom: none;
    }
    
    .sidebar-scroll-content { 
        flex-grow: 1; 
        overflow-y: auto; 
        padding: 15px; 
        -webkit-overflow-scrolling: touch; 
    }
    
    #sidebar-close { 
        background: none; 
        border: none; 
        color: white; 
        font-size: 35px; 
        cursor: pointer; 
        line-height: 1; 
    }

    #main-content { 
        width: 100% !important; 
        padding: 20px 0 !important; 
    }
    
    #wrapper { 
        width: 100% !important; 
        padding: 20px !important; 
        box-sizing: border-box; 
        background: #ffffff; 
        border-top: 4px solid var(--b17-green) !important; 
        border-bottom: 4px solid var(--b17-green) !important; 
    }
    
    #top-gallery-wrapper { display: none !important; }

    .home-appeal, .video-grid, .gallery-grid, .home-footer { 
        display: flex; 
        flex-direction: column; 
        gap: 20px; 
    }
    
    .gallery-grid { display: grid; grid-template-columns: 1fr; }
    .gallery-grid img { height: auto; max-height: 300px; }
    .btn-primary, .video-card { display: block; text-align: center; width: 100%; }

    .progress-wrapper { flex-direction: column-reverse; }
    .loco-badge { width: 100%; }
}