@media (max-width: 1024px) {

    /* ===============================
       TOP BAR
       =============================== */
    .mobile-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #111;
        color: #fff;
        padding: 16px 20px;
        font-size: 22px;
        position: sticky;
        top: 0;
        z-index: 900;
    }

    .mobile-top-bar .logo {
        font-weight: bold;
        letter-spacing: 1px;
    }

    .mobile-top-bar .menu {
        font-size: 30px;
        cursor: pointer;
    }



	
    /* ===============================
       MAIN LAYOUT (STACK)
       =============================== */
    .layout {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

	.layout > * {
    min-width: 0;
    width: 100%;
}

.content {
    padding: 12px;
    width: 100%;
    min-width: 0;
}
    /* ===============================
       RIGHT BLOCK — UNDER BAR
       =============================== */
    .mobile-right {
        order: 0;
        margin-top: 0;
        font-size: 22px;
    }

    /* ===============================
       CONTENT
       =============================== */
    .content {
        order: 1;
    }

    .content h1 {
        font-size: 32px;
    }

    .content-row {
        flex-direction: column;
    }

    .content-card {
        font-size: 22px;
        padding: 24px;
    }

    /* ===============================
       LEFT BLOCK — OFF CANVAS MENU
       =============================== */
    .sidebar.left {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #111;
        color: #fff;
        padding: 24px;
        z-index: 1000;
        transition: left 0.3s ease;
        overflow-y: auto;
		padding-bottom: 120px;
    }

    .sidebar.left h2 {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .sidebar.left p {
        font-size: 22px;
        margin-bottom: 16px;
    }

    /* OPEN STATE */
    .sidebar.left.open {
        left: 0;
    }
}
/* ===============================
   FILTER PAGE — widget first on mobile
   =============================== */
@media (max-width: 1024px) {
    #filter-widget-aside {
        order: -1 !important;
        display: block !important;
        width: 100%;
    }
    .layout:has(#filter-widget-aside) {
        display: flex !important;
        flex-direction: column !important;
    }
    .layout:has(#filter-widget-aside) .content {
        order: 1 !important;
    }
    .layout:has(#filter-widget-aside) .sidebar.left {
        order: 2 !important;
    }
}