@layer components {
    .nur-breadcrumb {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--nur-space-2);
        overflow-x: auto;
        padding-block: var(--nur-space-3);
        color: var(--nur-ink-soft);
        font-size: var(--nur-text-xs);
        white-space: nowrap;
        scrollbar-width: none;
    }

    .nur-breadcrumb li + li::before {
        content: "/";
        margin-right: var(--nur-space-2);
        opacity: 0.5;
    }

    .nur-breadcrumb a {
        text-decoration: underline;
    }

    .nur-card {
        padding: var(--nur-space-4);
        border: 1px solid var(--nur-line);
        border-radius: var(--nur-radius);
        background: var(--nur-surface);
    }

    .nur-stat {
        text-align: center;
    }

    .nur-stat strong {
        display: block;
        color: var(--nur-primary-strong);
        font-family: var(--nur-font-display);
        font-size: 2rem;
        line-height: 1;
    }

    .nur-stat span {
        color: var(--nur-ink-soft);
        font-size: var(--nur-text-xs);
    }

    .nur-empty {
        padding: var(--nur-space-7) var(--nur-space-4);
        text-align: center;
        color: var(--nur-ink-soft);
    }

    .nur-empty__chips {
        justify-content: center;
        margin-top: var(--nur-space-4);
    }

    .nur-empty__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--nur-space-3);
        margin-top: var(--nur-space-4);
    }

    .nur-skeleton {
        min-height: 320px;
        border-radius: var(--nur-radius);
        background: linear-gradient(90deg, var(--nur-sand-100), var(--nur-sand-50), var(--nur-sand-100));
        background-size: 200% 100%;
        animation: nur-shimmer 1.4s infinite linear;
    }

    @keyframes nur-shimmer {
        to {
            background-position: -200% 0;
        }
    }

    .nur-currency {
        display: inline-flex;
        padding: 3px;
        border: 1px solid var(--nur-line);
        border-radius: 999px;
        background: var(--nur-surface);
    }

    .nur-currency a,
    .nur-currency button {
        min-height: 36px;
        padding: 0 var(--nur-space-3);
        border: 0;
        border-radius: 999px;
        background: transparent;
        font-size: var(--nur-text-xs);
        font-weight: 700;
    }

    .nur-currency .is-active {
        background: var(--nur-primary);
        color: #fff;
    }

    .nur-currency a {
        display: inline-flex;
        align-items: center;
    }

    .nur-badge {
        display: inline-grid;
        place-items: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--nur-gold-500);
        color: var(--nur-navy-900);
        font-size: var(--nur-text-xs);
        font-weight: 800;
    }
}