/* Keep the usable wallet balance visible beside the top-up action on storefront pages. */
body.marketplace-surface .market-header-unified .market-action-link.market-balance-shortcut {
    width: auto;
    min-width: 118px;
    min-height: 42px;
    justify-content: flex-start;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--cw-brand-border) 78%, var(--cw-line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--cw-brand-soft) 56%, var(--cw-surface));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 48%), 0 4px 12px rgb(15 118 110 / 8%);
    padding: 5px 10px;
    color: var(--cw-brand-hover);
}

body.marketplace-surface .market-header-unified .market-action-link.market-balance-shortcut > span {
    min-width: 0;
    display: grid;
}

body.marketplace-surface .market-balance-shortcut .ui-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

body.marketplace-surface .market-balance-shortcut small {
    overflow: hidden;
    color: var(--cw-muted);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.marketplace-surface .market-balance-shortcut b {
    max-width: 138px;
    overflow: hidden;
    color: var(--cw-brand-hover);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 820;
    letter-spacing: -.015em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.marketplace-surface .market-balance-shortcut:hover,
body.marketplace-surface .market-balance-shortcut:focus-visible {
    border-color: var(--cw-brand);
    background: var(--cw-brand-soft);
    box-shadow: 0 0 0 3px rgb(15 118 110 / 12%), 0 7px 16px rgb(15 118 110 / 12%);
}

html[data-color-scheme="dark"] body.marketplace-surface .market-header-unified .market-action-link.market-balance-shortcut {
    border-color: #2a746d;
    background: #10312f;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 6px 15px rgb(0 0 0 / 20%);
    color: #8fe1d5;
}

html[data-color-scheme="dark"] body.marketplace-surface .market-balance-shortcut small { color: #a7c5c1; }
html[data-color-scheme="dark"] body.marketplace-surface .market-balance-shortcut b { color: #effffc; }

@media (max-width: 1180px) {
    body.marketplace-surface .market-header-unified .market-action-link.market-balance-shortcut {
        min-width: 104px;
        padding-inline: 8px;
    }

    body.marketplace-surface .market-balance-shortcut small { display: none; }
    body.marketplace-surface .market-balance-shortcut b { max-width: 92px; margin-top: 0; }
}

@media (max-width: 640px) {
    body.marketplace-surface .market-header-unified .market-action-link.market-balance-shortcut { display: none; }
}