@media (max-width: 1199.98px) {
            .topbar {
                top: 14px;
                left: 14px;
                bottom: 14px;
                width: min(320px, calc(100vw - 28px));
                max-width: calc(100vw - 28px);
                overflow-y: auto;
                border-right: 1px solid rgba(0, 0, 0, .06);
                border-bottom: 0;
                border-radius: 22px;
                box-shadow: 0 22px 50px rgba(15, 23, 42, .18);
                transform: translateX(calc(-100% - 24px));
            }

            .topbar .app-wrap {
                padding: 18px 14px !important;
            }

            .topbar-brand {
                gap: 14px;
            }

            .topbar-brand-head {
                justify-content: space-between;
                flex-wrap: wrap;
            }

            .topbar-brand-meta {
                justify-content: flex-start;
            }

            .app-main {
                margin-left: 0;
                width: 100%;
                max-width: 100%;
                min-height: 0;
                padding-top: 72px !important;
            }

            body:not(.sidebar-collapsed) .topbar {
                transform: translateX(0);
            }

            body:not(.sidebar-collapsed) .sidebar-overlay {
                opacity: 1;
                pointer-events: auto;
            }

            body.sidebar-icon-only:not(.sidebar-collapsed) .topbar {
                width: 94px;
                max-width: 94px;
            }

            body.sidebar-icon-only:not(.sidebar-collapsed) .app-main {
                margin-left: 0;
                width: 100%;
                max-width: 100%;
            }
        }

        @media (max-width: 767.98px) {
            .tabs-shell {
                align-items: stretch;
            }

            .imgvec-grid,
            .imgvec-grid-3,
            .imgvec-actions {
                grid-template-columns: 1fr;
            }

            .tabs-group,
            .tabs-group.ms-auto {
                width: 100%;
            }

            .tabs-main.nav-pills,
            .tabs-side.nav-pills {
                width: 100%;
            }

            .tabs-main .nav-link,
            .tabs-side .nav-link {
                width: 100%;
                justify-content: center;
            }

            .tabs-main .nav-link .count-pill,
            .tabs-side .nav-link .count-pill {
                margin-left: 0;
            }

            .product-svg-tabbar.nav {
                gap: 0;
                padding: 5px 5px 0;
                flex-wrap: wrap;
                min-height: 0;
            }

            .product-svg-tabbar .nav-link {
                flex: 1 1 auto;
                justify-content: center;
                text-align: center;
                padding: 10px 12px 11px;
                min-height: 0;
                margin-top: 0;
                margin-right: 2px;
            }

            .product-svg-preview-box {
                width: 100%;
                max-width: 100%;
            }

            .product-svg-preview-wrap {
                width: 100%;
                max-width: 100%;
            }

            .product-card-media {
                height: 252px;
            }
        }

        @media (max-width: 575.98px) {
            .products-header-actions {
                width: 100%;
                flex-wrap: wrap;
                justify-content: stretch;
            }

            .products-processing-head {
                flex-direction: column;
                align-items: flex-start;
            }

            .products-processing-list {
                grid-template-columns: 1fr;
            }

            .products-search-field {
                width: 100%;
                flex-basis: 100%;
            }

            .products-header-actions .btn {
                width: 100%;
            }

            .products-pagination {
                justify-content: center;
            }

            .products-pagination-nav {
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;
            }
        }