/* Hub-only desktop list refinements. Shared navigation is owned by platform_navigation.css. */
@media (min-width: 761px) {
    body.kb-surface-hub #keybox-list [x-ref="contentWrapper"] > .grid,
    body.kb-surface-hub #keybox-list .kb-hub-keybox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 100% !important;
    }
}

body.kb-surface-hub #keybox-list .kb-hub-filter-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    width: 100% !important;
    margin-inline: auto !important;
}
body.kb-surface-hub #keybox-list .kb-hub-category-controls,
body.kb-surface-hub #keybox-list .kb-hub-sort-controls {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    width: auto !important;
    margin-inline: 0 !important;
}

/* Pagination/end-state is a grid item. Span both card columns and own a centered slot. */
body.kb-surface-hub #keybox-list .kb-hub-pagination,
body.kb-surface-hub #keybox-list .kb-keybox-pagination {
    grid-column: 1 / -1 !important;
    place-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    text-align: center !important;
}
body.kb-surface-hub #keybox-list .kb-keybox-pagination-slot {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    place-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
}
body.kb-surface-hub #keybox-list .kb-list-end-state,
body.kb-surface-hub #keybox-list .kb-load-more {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    margin-inline: auto !important;
}
body.kb-surface-hub #keybox-list .kb-list-end-state {
    width: max-content !important;
    max-width: calc(100vw - 40px) !important;
    text-align: center !important;
}

@media (max-width: 760px) {
    body.kb-surface-hub #keybox-list .kb-hub-filter-controls {
        gap: 8px !important;
    }
}