@media (max-width: 1023.98px) {
    .cos-topbar {
        height: auto;
        min-height: var(--cos-topbar-h);
        padding-top: var(--cos-space-2);
        padding-bottom: var(--cos-space-2);
        flex-wrap: wrap;
    }

    .cos-topbar-left,
    .cos-topbar-right {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 767.98px) {
    .u-hide-mobile { display: none !important; }
    .u-show-mobile { display: block !important; }

    .cos-sidebar {
        transform: translateX(-100%);
        width: min(86vw, 320px);
    }

    .cos-main {
        margin-left: 0;
        width: 100%;
    }

    .cos-app.is-sidebar-open .cos-sidebar,
    body.is-sidebar-open .cos-sidebar {
        transform: translateX(0);
    }

    .cos-app.is-sidebar-open .cos-sidebar-backdrop,
    body.is-sidebar-open .cos-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .cos-content {
        padding: var(--cos-space-3);
    }

    .cos-toolbar,
    .cos-action-bar,
    .cos-page-header {
        align-items: stretch;
    }

    .cos-field {
        min-width: 100%;
    }

    .cos-mobile-cards {
        display: grid;
    }

    .cos-table-wrap.u-hide-mobile,
    .u-hide-mobile .cos-table-wrap {
        display: none;
    }

    .cos-btn,
    .cos-input,
    .cos-select,
    .cos-textarea {
        min-height: 44px;
    }

    .cos-drawer-panel {
        width: 100%;
    }
}