/* Responsive refinements for market asset detail pages. */
.asset-page {
    overflow-x: hidden;
}

.asset-hero,
.asset-content-grid,
.asset-related,
.asset-alert-card,
.asset-explainer,
.asset-chart-card {
    min-width: 0;
}

.asset-status {
    flex-wrap: wrap;
    line-height: 1.8;
}

.asset-chart-toolbar {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}

.asset-chart-toolbar::-webkit-scrollbar {
    display: none;
}

.asset-chart-toolbar button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.asset-chart-toolbar span {
    flex: 0 0 auto;
    white-space: nowrap;
}

.asset-line-chart {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .asset-hero {
        gap: 18px;
    }

    .asset-content-grid {
        gap: 14px;
    }
}

@media (max-width: 560px) {
    .asset-breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .asset-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .asset-hero {
        gap: 16px;
        padding: 20px 16px;
    }

    .asset-hero h1 {
        font-size: clamp(26px, 8vw, 34px);
        overflow-wrap: anywhere;
    }

    .asset-hero p,
    .asset-explainer p,
    .asset-alert-card p {
        font-size: 12px;
        line-height: 2;
    }

    .asset-status {
        align-items: flex-start;
        gap: 4px 7px;
        font-size: 10px;
    }

    .asset-price-card {
        align-items: flex-start;
        padding: 19px 16px;
    }

    .asset-price-card strong {
        font-size: clamp(25px, 8vw, 34px);
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .asset-metrics {
        gap: 8px;
    }

    .asset-metrics > div {
        min-width: 0;
        padding: 11px 10px;
    }

    .asset-metrics b {
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .asset-chart-card,
    .asset-explainer,
    .asset-alert-card,
    .asset-related {
        padding: 16px;
        border-radius: 16px;
    }

    .asset-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .asset-section-heading h2 {
        font-size: 18px;
    }

    .asset-chart-toolbar {
        margin-inline: -2px;
        padding-inline: 2px;
        padding-bottom: 4px;
    }

    .asset-chart-toolbar span {
        margin-right: auto;
    }

    .asset-chart-stage {
        min-height: 210px;
    }

    .asset-line-chart {
        min-height: 190px;
    }

    .asset-alert-form {
        gap: 9px;
    }

    .asset-alert-form input,
    .asset-alert-form select,
    .asset-alert-form button {
        min-height: 44px;
    }

    .asset-related-card b {
        font-size: 14px;
    }
}