.empty-state {
    /* Self-centring within the viewport — bypass the layout chain
       (wrapper → section → container → list) by claiming the
       remaining height ourselves. The buffer accounts for stuff that
       renders above (breadcrumbs, headings); pages with extra
       chrome above (e.g. search results header) override the var. */
    --empty-state-offset: 10rem;
    min-height: calc(100vh - var(--header-total-height) - var(--wp-admin-header-height, 0px) - var(--empty-state-offset));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 16px;
}

/* Search results: breadcrumbs + h1 + count + form ≈ 18rem above. */
.search-results .empty-state {
    --empty-state-offset: 18rem;
}

.empty-state__icon {
    /* Render any single-colour SVG (regardless of its hard-coded fills)
       as a brand-coloured silhouette via mask-image. The icon URL is
       passed inline as --empty-state-icon. */
    width: 64px;
    height: 64px;
    background-color: var(--c-brand);
    -webkit-mask: var(--empty-state-icon) center / contain no-repeat;
    mask: var(--empty-state-icon) center / contain no-repeat;
    opacity: 0.4;
}

/* Thematic illustrations (e.g. 404) opt out of the mask so their
   original colour fills survive. */
.empty-state__icon--native {
    background: transparent;
    -webkit-mask: none;
    mask: none;
    opacity: 1;
}

.empty-state__title {
    margin: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: var(--fs-lg);
    line-height: 28px;
    color: var(--c-text);
}

.empty-state__text {
    margin: 0;
    max-width: 480px;
    font-size: var(--fs-base);
    line-height: 22px;
    color: var(--c-text);
    opacity: 0.7;
}

/* Visual style is shared with the .btn family in blocks.css — only
   the layout offset belongs here. */
.empty-state__action {
    margin-top: 8px;
}