/* =====================================================================
   VinDevs discovery hub: /marketplace (hiring listings) + /portfolios
   (creators directory). Loaded after the shell cascade AND after
   asset-market.css (whose unscoped .am-* shelf/rail/chip/feature/creator
   components both pages reuse). Namespaces: .mh-* marketplace hub,
   .pf-* portfolios. Consumes Developer OS tokens only.

   Marketplace rules are scoped body[data-page="marketplace"] to match
   the design-system override passes they must beat by source order.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* Marketplace masthead                                                */
/* ------------------------------------------------------------------ */

body[data-page="marketplace"] .mh-masthead {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: clamp(18px, 2.6vw, 34px);
    margin-bottom: clamp(18px, 2.4vw, 28px);
}

body[data-page="marketplace"] .mh-masthead__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

body[data-page="marketplace"] .mh-masthead__title h1 {
    margin: 0;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

body[data-page="marketplace"] .mh-masthead__title p {
    margin: 6px 0 0;
    color: var(--text-subtle);
    font-size: 0.95rem;
    max-width: 64ch;
}

body[data-page="marketplace"] .mh-masthead__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    color: var(--text-subtle);
    font-size: 0.85rem;
}

body[data-page="marketplace"] .mh-masthead__proof strong {
    color: var(--text-muted);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

body[data-page="marketplace"] .mh-masthead__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* Marketplace shell: sidebar grid → single column flow                */
/* ------------------------------------------------------------------ */

body[data-page="marketplace"] .marketplace-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 0;
}

/* Category rail → chip row (wired to the filter engine) */
body[data-page="marketplace"] .marketplace-category-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

body[data-page="marketplace"] .marketplace-category-card {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    min-height: 34px;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.18));
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: pointer;
    transition:
        border-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 160ms cubic-bezier(0.22, 1, 0.36, 1),
        color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-page="marketplace"] .marketplace-category-card strong {
    font-size: 0.87rem;
    font-weight: 600;
    color: inherit;
}

body[data-page="marketplace"] .marketplace-category-card span {
    font-size: 0.72rem;
    color: var(--text-subtle);
}

body[data-page="marketplace"] .marketplace-category-card:hover {
    border-color: var(--border-strong, rgba(194, 205, 220, 0.3));
    color: var(--text-strong);
}

body[data-page="marketplace"] .marketplace-category-card.is-active {
    border-color: color-mix(in oklab, var(--ds-accent) 58%, transparent);
    background: color-mix(in oklab, var(--ds-accent) 16%, transparent);
    color: var(--text-strong);
}

body[data-page="marketplace"] .marketplace-category-card.is-active span {
    color: var(--text-muted);
}

/* ------------------------------------------------------------------ */
/* Filters panel → command toolbar. The design-system final pass lays
   the shell out as a sticky 2-col rail at 3-class specificity
   (ds ~5293-5378); every rule here matches or beats that so the
   toolbar wins by source order.                                       */
/* ------------------------------------------------------------------ */

body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    grid-row: auto;
    grid-column: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-panel-results {
    grid-row: auto;
    grid-column: auto;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-category-rail {
    grid-row: auto;
    grid-column: auto;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters .section-header,
body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters > header {
    display: none;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters .marketplace-filter-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters .marketplace-filter-grid > * {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    margin: 0;
}

/* The search field is the command bar: full row, biggest target. */
body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters .marketplace-filter-search {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    order: -2;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters .marketplace-filter-search .filter-label {
    display: none;
}

body[data-page="marketplace"] .marketplace-search-combobox {
    position: relative;
    z-index: 40;
}

/* The magnifier is drawn once by the .marketplace-search-icon span (live
   layer). The old ::before mask duplicated it, two glyphs stacked at the
   input's left edge read as one doubled icon, so it's removed. */

body[data-page="marketplace"] .marketplace-search-combobox input[type="search"] {
    width: 100%;
    min-height: 56px;
    padding: 0 16px 0 48px;
    border-radius: 16px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.16));
    background: var(--bg-surface, rgba(20, 25, 32, 0.92));
    color: var(--text-strong);
    font: inherit;
    font-size: 1.02rem;
    outline: none;
    box-shadow: var(--shadow-soft);
    transition:
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-page="marketplace"] .marketplace-search-combobox input[type="search"]:focus {
    border-color: color-mix(in oklab, var(--ds-accent) 55%, transparent);
    box-shadow:
        0 0 0 3px color-mix(in oklab, var(--ds-accent) 16%, transparent),
        var(--shadow-soft);
}

body[data-page="marketplace"] .marketplace-search-combobox input::-webkit-search-cancel-button {
    display: none;
}

/* Suggestions listbox, using the same visual language as .am-suggest */
body[data-page="marketplace"] .marketplace-search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: min(56vh, 480px);
    overflow-y: auto;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--border-strong, rgba(194, 205, 220, 0.24));
    background: var(--bg-glass, rgba(14, 18, 24, 0.97));
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow-strong);
}

body[data-page="marketplace"] .marketplace-search-suggestions[hidden] {
    display: none;
}

body[data-page="marketplace"] .mh-suggest-label {
    display: block;
    padding: 4px 10px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

body[data-page="marketplace"] .mh-suggest-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

body[data-page="marketplace"] .mh-suggest-item:hover,
body[data-page="marketplace"] .mh-suggest-item.is-hot {
    background: var(--ds-surface-selected, rgba(84, 128, 255, 0.14));
    color: var(--text-strong);
}

body[data-page="marketplace"] .mh-suggest-item strong {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-page="marketplace"] .mh-suggest-item small {
    display: block;
    margin-top: 1px;
    font-size: 0.78rem;
    color: var(--text-subtle);
}

body[data-page="marketplace"] .mh-suggest-item em {
    font-style: normal;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Compact filter controls in one wrapping row */
body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-filter:not(.marketplace-filter-search) {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 1 auto;
    width: auto;
    min-width: 150px;
    max-width: 220px;
    margin: 0;
    padding: 0;
    border: 0;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-filter select,
body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-filter input:not([type="search"]),
body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-budget-filter select,
body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-budget-filter input {
    width: 100%;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-filter .filter-label,
body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-budget-filter legend {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-filter .filter-icon {
    display: none;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters .marketplace-budget-filter {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-budget-filter legend {
    float: left;
    margin-bottom: 5px;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-budget-filter > label,
body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters .marketplace-budget-range label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid .marketplace-budget-filter > label > span,
body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters .marketplace-budget-range label span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters .marketplace-budget-range {
    display: flex;
    gap: 10px;
}

body[data-page="marketplace"] .marketplace-shell .marketplace-panel-filters .marketplace-budget-range input {
    width: 96px;
}

/* The Apply button disappears with JS on: filtering is instant. */
body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid > button[type="submit"] {
    display: none;
}

@media (scripting: none) {
    body[data-page="marketplace"] .marketplace-shell .marketplace-filter-grid > button[type="submit"] {
        display: inline-flex;
    }
}

body[data-page="marketplace"] .marketplace-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

body[data-page="marketplace"] .marketplace-filter-status {
    color: var(--text-subtle);
    font-size: 0.8rem;
}

/* ------------------------------------------------------------------ */
/* Browse rails wrapper (collapses once intent shows up)               */
/* ------------------------------------------------------------------ */

body[data-page="marketplace"] .mh-browse {
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 3.2vw, 42px);
    margin-bottom: clamp(26px, 3.2vw, 42px);
}

body[data-page="marketplace"] .mh-browse.is-hidden {
    display: none;
}

/* Compact rail card for marketplace posts (server-rendered anchors) */
.mh-mini {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 158px;
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.13));
    background: var(--bg-surface, rgba(22, 27, 34, 0.85));
    text-decoration: none;
    overflow: hidden;
    transition:
        transform 190ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mh-mini:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong, rgba(194, 205, 220, 0.3));
    box-shadow: 0 18px 40px oklch(8% 0.02 252 / 0.4);
}

.mh-mini--premium {
    border-color: rgba(232, 182, 76, 0.38);
}

.mh-mini__scan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mh-mini__intent {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mh-mini__intent.is-hiring {
    color: color-mix(in oklab, var(--ds-accent) 80%, white);
}

.mh-mini__flags {
    display: flex;
    gap: 5px;
    flex: none;
}

.mh-flag {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.mh-flag--boost {
    background: color-mix(in oklab, var(--ds-accent) 22%, transparent);
    color: color-mix(in oklab, var(--ds-accent) 82%, white);
}

.mh-flag--premium {
    background: rgba(232, 182, 76, 0.16);
    color: #e8c268;
}

.mh-flag--verified {
    background: color-mix(in oklab, var(--ds-success) 18%, transparent);
    color: color-mix(in oklab, var(--ds-success) 85%, white);
}

.mh-mini__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: var(--text-strong);
    font-size: 0.98rem;
    font-weight: 640;
    line-height: 1.3;
    min-height: 2.6em;
}

.mh-mini__pay {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mh-mini__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    min-width: 0;
}

.mh-mini__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
    background: var(--ds-surface-selected, oklch(26% 0.045 258));
}

.mh-mini__author {
    font-size: 0.8rem;
    color: var(--text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mh-mini__signal {
    flex: none;
    margin-left: auto;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

.mh-mini__signal.is-live {
    color: color-mix(in oklab, var(--ds-success) 80%, white);
}

/* ------------------------------------------------------------------ */
/* Marketplace card re-skin (same DOM, new hierarchy)                  */
/* ------------------------------------------------------------------ */

body[data-page="marketplace"] .marketplace-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.13));
    background: var(--bg-surface, rgba(22, 27, 34, 0.85));
    box-shadow: none;
    transition:
        transform 190ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-page="marketplace"] .marketplace-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong, rgba(194, 205, 220, 0.3));
    box-shadow: 0 18px 40px oklch(8% 0.02 252 / 0.4);
}

body[data-page="marketplace"] .marketplace-card.premium {
    border-color: rgba(232, 182, 76, 0.34);
}

/* Restore natural DOM order (older passes reordered footer above body) */
body[data-page="marketplace"] .marketplace-card-top,
body[data-page="marketplace"] .marketplace-card-body,
body[data-page="marketplace"] .marketplace-card-footer,
body[data-page="marketplace"] .marketplace-card-bottom-row {
    order: 0;
    padding: 0;
}

body[data-page="marketplace"] .marketplace-card-media {
    order: -1;
    margin: -16px -16px 0;
    border: 0;
    border-radius: 14px 14px 0 0;
    aspect-ratio: 16 / 9;
    max-height: 170px;
    overflow: hidden;
    background: rgba(4, 7, 10, 0.72);
}

body[data-page="marketplace"] .marketplace-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-page="marketplace"] .marketplace-card:hover .marketplace-card-media img {
    transform: scale(1.035);
}

body[data-page="marketplace"] .marketplace-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body[data-page="marketplace"] .marketplace-card-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 4px;
}

body[data-page="marketplace"] .marketplace-card-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--text-strong);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body[data-page="marketplace"] .marketplace-card-meta {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--text-subtle);
}

body[data-page="marketplace"] .marketplace-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

body[data-page="marketplace"] .marketplace-card-summary {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-height: 66px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 0;
    border: 0;
    background: transparent;
}

body[data-page="marketplace"] .marketplace-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body[data-page="marketplace"] .marketplace-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Evidence strip: payment is the anchor, posted/reach quiet beside it */
body[data-page="marketplace"] .marketplace-card-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft, rgba(194, 205, 220, 0.1));
}

body[data-page="marketplace"] .marketplace-card-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

body[data-page="marketplace"] .marketplace-card-detail-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

body[data-page="marketplace"] .marketplace-card-detail-item span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

body[data-page="marketplace"] .marketplace-card-detail-item strong {
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

body[data-page="marketplace"] .marketplace-card-detail-item:first-child strong {
    font-size: 1rem;
    font-weight: 750;
}

body[data-page="marketplace"] .marketplace-card-signals {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

body[data-page="marketplace"] .marketplace-card-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

body[data-page="marketplace"] .marketplace-card-actions-shell {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body[data-page="marketplace"] .marketplace-card-actions-primary,
body[data-page="marketplace"] .marketplace-card-actions-secondary {
    display: flex;
    gap: 8px;
}

body[data-page="marketplace"] .marketplace-card-actions-shell .apply-button,
body[data-page="marketplace"] .marketplace-card-actions-shell .ghost-button {
    min-height: 34px;
    padding: 6px 13px;
    font-size: 0.84rem;
}

body[data-page="marketplace"] .marketplace-card-author-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.14));
    background: rgba(255, 255, 255, 0.025);
    text-decoration: none;
    transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-page="marketplace"] .marketplace-card-author-pill:hover {
    border-color: var(--border-strong, rgba(194, 205, 220, 0.3));
}

body[data-page="marketplace"] .marketplace-card-author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

body[data-page="marketplace"] .marketplace-card-author-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

body[data-page="marketplace"] .marketplace-card-portfolio-link {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.12));
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-page="marketplace"] .marketplace-card-portfolio-link:hover {
    border-color: var(--border-strong, rgba(194, 205, 220, 0.28));
}

body[data-page="marketplace"] .marketplace-card-portfolio-link-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

body[data-page="marketplace"] .marketplace-card-portfolio-link strong {
    font-size: 0.86rem;
    color: var(--text-muted);
}

body[data-page="marketplace"] .marketplace-card-portfolio-link-meta {
    font-size: 0.76rem;
    color: var(--text-subtle);
}

body[data-page="marketplace"] .marketplace-card-remove-x {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 11, 16, 0.82);
    color: var(--text-subtle);
    cursor: pointer;
}

body[data-page="marketplace"] .marketplace-card-remove-x:hover {
    color: var(--ds-danger);
    border-color: color-mix(in oklab, var(--ds-danger) 50%, transparent);
}

body[data-page="marketplace"] .marketplace-card-remove-x svg {
    width: 14px;
    height: 14px;
}

/* Keep the owner/staff remove control clear of the badge stack. */
body[data-page="marketplace"] .marketplace-card-remove-x ~ .marketplace-card-top .marketplace-card-badges {
    margin-right: 34px;
}

body[data-page="marketplace"] .marketplace-grid:not([data-view="list"]) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px;
}

body[data-page="marketplace"] .marketplace-results-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

#marketplace-results-count {
    font-size: 0.92rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Segment rail: quieter, denser */
body[data-page="marketplace"] .marketplace-segment-section {
    margin: 0 0 18px;
}

/* ------------------------------------------------------------------ */
/* Portfolios directory (.pf-*)                                        */
/* ------------------------------------------------------------------ */

body.portfolios-index .pf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.13));
    background: var(--bg-surface, rgba(22, 27, 34, 0.85));
    overflow: hidden;
    transition:
        transform 190ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 190ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.portfolios-index .pf-card:hover,
body.portfolios-index .pf-card:focus-within {
    transform: translateY(-3px);
    border-color: var(--border-strong, rgba(194, 205, 220, 0.3));
    box-shadow: 0 18px 40px oklch(8% 0.02 252 / 0.4);
}

body.portfolios-index .pf-card--styled {
    border-color: color-mix(
        in oklab,
        var(--decoration-accent, transparent) 38%,
        var(--border-soft, rgba(194, 205, 220, 0.13))
    );
}

body.portfolios-index .pf-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: rgba(4, 7, 10, 0.72);
    overflow: hidden;
}

body.portfolios-index .pf-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.portfolios-index .pf-card:hover .pf-card__media img {
    transform: scale(1.045);
}

body.portfolios-index .pf-card__initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 750;
    color: var(--text-subtle);
    background:
        radial-gradient(
            120% 90% at 50% -20%,
            color-mix(in oklab, var(--ds-accent) 12%, transparent),
            transparent 62%
        ),
        var(--ds-canvas-raised, oklch(17.5% 0.014 252));
}

body.portfolios-index .pf-card__badges {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 6px;
    pointer-events: none;
}

body.portfolios-index .pf-card__like {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

body.portfolios-index .pf-card__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 13px 15px 15px;
    flex: 1;
}

body.portfolios-index .pf-card__scan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.portfolios-index .pf-card__proof {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.portfolios-index .pf-card__proof--none {
    font-weight: 500;
    color: var(--text-subtle);
    font-size: 0.74rem;
}

body.portfolios-index .pf-card__likes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}

body.portfolios-index .pf-card__likes svg {
    width: 13px;
    height: 13px;
}

body.portfolios-index .pf-card__title {
    color: var(--text-strong);
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.portfolios-index .pf-card__title:hover {
    color: color-mix(in oklab, var(--ds-accent) 65%, var(--text-strong));
}

body.portfolios-index .pf-card__title::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

body.portfolios-index .pf-card__tagline {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

body.portfolios-index .pf-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    position: relative;
    z-index: 2;
}

body.portfolios-index .pf-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid var(--border-soft, rgba(194, 205, 220, 0.16));
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-subtle);
    font-size: 0.72rem;
    font-weight: 600;
}

body.portfolios-index .pf-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft, rgba(194, 205, 220, 0.1));
    font-size: 0.78rem;
    color: var(--text-subtle);
}

body.portfolios-index .pf-card__meta strong {
    color: var(--text-muted);
    font-weight: 650;
}

body.portfolios-index .pf-card__avail {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.portfolios-index .pf-card__avail.is-open {
    color: color-mix(in oklab, var(--ds-success) 80%, white);
    font-weight: 650;
}

/* Spotlight creator (reuses .am-feature shell from asset-market.css) */
body.portfolios-index .pf-spot__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Directory grid */
body.portfolios-index .pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 16px;
}

/* ------------------------------------------------------------------ */
/* Responsive + reduced motion                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 720px) {
    body[data-page="marketplace"] .marketplace-filter,
    body[data-page="marketplace"] .marketplace-budget-filter {
        min-width: calc(50% - 10px);
    }

    body[data-page="marketplace"] .marketplace-grid:not([data-view="list"]) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.portfolios-index .pf-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 11px;
    }
}

/* Touch-target floors on coarse pointers (phones/tablets). Only the tap
   area grows. Glyph/icon sizes are untouched, and desktop is unaffected. */
@media (pointer: coarse) {
    body[data-page="marketplace"] .marketplace-category-card {
        min-height: 44px;
        align-items: center;
    }

    body[data-page="marketplace"] .marketplace-card-remove-x {
        width: 44px;
        height: 44px;
    }

    body[data-page="marketplace"] .marketplace-card-remove-x ~ .marketplace-card-top .marketplace-card-badges {
        margin-right: 48px;
    }

    body[data-page="marketplace"] .marketplace-card-actions-shell .apply-button,
    body[data-page="marketplace"] .marketplace-card-actions-shell .ghost-button {
        min-height: 44px;
    }

    body[data-page="marketplace"] .mh-suggest-item {
        min-height: 44px;
    }

    body[data-page="marketplace"] .marketplace-card-author-pill {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mh-mini,
    body[data-page="marketplace"] .marketplace-card,
    body[data-page="marketplace"] .marketplace-card-media img,
    body.portfolios-index .pf-card,
    body.portfolios-index .pf-card__media img {
        transition: none;
    }

    .mh-mini:hover,
    body[data-page="marketplace"] .marketplace-card:hover,
    body.portfolios-index .pf-card:hover {
        transform: none;
    }

    body[data-page="marketplace"] .marketplace-card:hover .marketplace-card-media img,
    body.portfolios-index .pf-card:hover .pf-card__media img {
        transform: none;
    }
}

/* Keep the browser from laying out every below-the-fold shelf and listing
   card during first paint. The intrinsic size preserves scroll geometry until
   a section approaches the viewport. */
@supports (content-visibility: auto) {
    body[data-page="marketplace"] .mh-browse .am-shelf,
    body[data-page="marketplace"] #marketplace-listings {
        content-visibility: auto;
        contain-intrinsic-size: auto 520px;
    }
}

/* =====================================================================
   Premium hiring discovery, July 2026
   Search, modes, filters, trust, and conversion now share one hierarchy.
   ===================================================================== */

body[data-page="marketplace"] main > .container {
    position: relative;
    max-width: 1440px;
    padding-block-start: 0;
}

body[data-page="marketplace"] main {
    padding-block-start: 0;
}

body[data-page="marketplace"] .mh-masthead {
    position: relative;
    isolation: isolate;
    gap: 0;
    margin: 0;
    /* Tightened ~18-20% so listings surface sooner; search stays dominant. */
    padding: clamp(26px, 3.6vw, 52px) 0 clamp(16px, 2.2vw, 26px);
}

body[data-page="marketplace"] .mh-masthead::before {
    position: absolute;
    z-index: -1;
    inset: -56px -12vw -92px;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(
            70% 80% at 18% 18%,
            color-mix(in oklab, var(--ds-accent) 12%, transparent),
            transparent 67%
        ),
        radial-gradient(
            42% 58% at 86% 24%,
            color-mix(in oklab, var(--ds-accent) 6%, transparent),
            transparent 74%
        );
    opacity: 0.72;
}

body[data-page="marketplace"] .mh-masthead__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(24px, 5vw, 72px);
}

body[data-page="marketplace"] .mh-masthead__title {
    max-width: 700px;
}

body[data-page="marketplace"] .mh-masthead__eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--ds-accent);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body[data-page="marketplace"] .mh-masthead__title h1 {
    max-width: 15ch;
    margin: 0;
    color: var(--ds-text);
    font-size: clamp(2.4rem, 4.4vw, 3.75rem);
    font-weight: 680;
    line-height: 0.99;
    letter-spacing: -0.052em;
    text-wrap: balance;
}

body[data-page="marketplace"] .mh-masthead__title p {
    max-width: 58ch;
    margin: 13px 0 0;
    color: var(--ds-text-muted);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.55;
    text-wrap: pretty;
}

body[data-page="marketplace"] .mh-masthead__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding-bottom: 4px;
}

body[data-page="marketplace"] .mh-safety-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    color: var(--ds-text-muted);
    font-size: 0.86rem;
    font-weight: 560;
    text-decoration: none;
    transition: color var(--motion-duration-fast, 160ms)
        var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .mh-safety-link svg {
    width: 17px;
    height: 17px;
    color: var(--ds-success);
}

body[data-page="marketplace"] .mh-safety-link:hover,
body[data-page="marketplace"] .mh-safety-link:focus-visible {
    color: var(--ds-text);
}

body[data-page="marketplace"] .marketplace-explore-surface {
    position: relative;
    display: flow-root;
}

body[data-page="marketplace"] .marketplace-command-surface {
    position: sticky;
    z-index: 20;
    top: calc(var(--vd-top-h, 60px) + 8px);
    margin: 0 0 18px;
    padding: 8px;
    border: 1px solid color-mix(in oklab, var(--ds-border-strong) 72%, transparent);
    border-radius: var(--radius-lg, 16px);
    background:
        linear-gradient(
            145deg,
            color-mix(in oklab, var(--ds-surface) 94%, transparent),
            color-mix(in oklab, var(--ds-canvas-raised) 91%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, var(--ds-text) 8%, transparent),
        0 18px 56px color-mix(in oklab, var(--ds-canvas) 72%, transparent);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    transition:
        padding var(--motion-duration-normal, 200ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color var(--motion-duration-normal, 200ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--motion-duration-normal, 200ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Once the command surface pins to the top bar, JS flags it .is-stuck so it
   lifts off the page as the hero scrolls away, search + modes stay pinned
   and legible over the listings. */
body[data-page="marketplace"] .marketplace-command-surface.is-stuck {
    padding: 6px;
    border-color: color-mix(in oklab, var(--ds-accent) 22%, var(--ds-border-strong));
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, var(--ds-text) 10%, transparent),
        0 10px 24px color-mix(in oklab, var(--ds-canvas) 62%, transparent),
        0 26px 70px color-mix(in oklab, var(--ds-canvas) 78%, transparent);
}

body[data-page="marketplace"] .marketplace-filter-grid,
body[data-page="marketplace"]
    .marketplace-panel-filters
    .marketplace-filter-grid {
    display: block;
    margin: 0;
}

body[data-page="marketplace"] .marketplace-command-bar {
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr) auto auto;
    grid-template-areas: "modes search submit filters";
    align-items: center;
    gap: 8px;
}

body[data-page="marketplace"] .marketplace-modebar {
    grid-area: modes;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 3px;
    border-radius: var(--radius-md, 12px);
    background: color-mix(in oklab, var(--ds-canvas) 68%, transparent);
}

body[data-page="marketplace"] .marketplace-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 13px;
    border-radius: var(--radius-sm, 9px);
    color: var(--ds-text-subtle);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        background-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        transform var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .marketplace-mode:hover,
body[data-page="marketplace"] .marketplace-mode:focus-visible {
    color: var(--ds-text);
    background: var(--ds-surface-hover);
}

body[data-page="marketplace"] .marketplace-mode.is-active {
    color: var(--ds-accent-ink);
    background: var(--ds-surface-selected);
    box-shadow: inset 0 0 0 1px
        color-mix(in oklab, var(--ds-accent) 28%, transparent);
}

body[data-page="marketplace"] .marketplace-mode:active,
body[data-page="marketplace"] .marketplace-search-submit:active,
body[data-page="marketplace"] .marketplace-filter-toggle:active {
    transform: translateY(1px);
}

body[data-page="marketplace"] .marketplace-filter-search {
    grid-area: search;
    min-width: 0;
    margin: 0;
}

body[data-page="marketplace"] .marketplace-filter-search > .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body[data-page="marketplace"] .marketplace-search-combobox {
    position: relative;
    min-width: 0;
}

body[data-page="marketplace"] .marketplace-search-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 15px;
    display: grid;
    width: 20px;
    height: 20px;
    color: var(--ds-text-subtle);
    transform: translateY(-50%);
    pointer-events: none;
}

body[data-page="marketplace"] .marketplace-search-icon svg {
    width: 100%;
    height: 100%;
}

body[data-page="marketplace"]
    .marketplace-filter-search
    .marketplace-search-combobox
    input[type="search"] {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 43px 0 45px;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in oklab, var(--ds-canvas) 74%, transparent);
    color: var(--ds-text);
    font: inherit;
    font-size: 0.94rem;
    outline: none;
    transition:
        border-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        background-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"]
    .marketplace-filter-search
    input[type="search"]::placeholder {
    color: var(--ds-text-subtle);
}

body[data-page="marketplace"]
    .marketplace-filter-search
    .marketplace-search-combobox
    input[type="search"]:focus {
    border-color: var(--ds-accent);
    background: var(--ds-canvas-raised);
    box-shadow: 0 0 0 3px
        color-mix(in oklab, var(--ds-accent) 18%, transparent);
}

body[data-page="marketplace"] .marketplace-search-key {
    position: absolute;
    top: 50%;
    right: 12px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--ds-border);
    border-radius: 6px;
    color: var(--ds-text-subtle);
    background: var(--ds-surface);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    transform: translateY(-50%);
    pointer-events: none;
}

body[data-page="marketplace"] .marketplace-search-submit,
body[data-page="marketplace"] .marketplace-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-md, 12px);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
    transition:
        background-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        transform var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .marketplace-search-submit {
    grid-area: submit;
    border: 1px solid var(--ds-accent);
    color: var(--ds-accent-ink);
    background: var(--ds-accent);
}

body[data-page="marketplace"] .marketplace-search-submit:hover,
body[data-page="marketplace"] .marketplace-search-submit:focus-visible {
    background: var(--ds-accent-hover);
}

body[data-page="marketplace"] .marketplace-filter-toggle {
    grid-area: filters;
    border: 1px solid var(--ds-border);
    color: var(--ds-text-muted);
    background: var(--ds-surface);
}

body[data-page="marketplace"] .marketplace-filter-toggle:hover,
body[data-page="marketplace"] .marketplace-filter-toggle:focus-visible,
body[data-page="marketplace"]
    .marketplace-filter-toggle[aria-expanded="true"] {
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
    background: var(--ds-surface-hover);
}

body[data-page="marketplace"] .marketplace-filter-toggle > span:first-child,
body[data-page="marketplace"] .marketplace-filter-toggle svg {
    width: 17px;
    height: 17px;
}

body[data-page="marketplace"] .marketplace-filter-toggle strong {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    color: var(--ds-accent-ink);
    background: var(--ds-accent);
    font-family: var(--font-mono);
    font-size: 0.68rem;
}

body[data-page="marketplace"] .marketplace-search-suggestions {
    top: calc(100% + 9px);
    right: 0;
    left: 0;
    max-height: min(420px, calc(100dvh - 180px));
    border-color: var(--ds-border-strong);
    border-radius: var(--radius-lg, 16px);
    background: var(--ds-canvas-raised);
    box-shadow: var(--shadow-strong);
}

body[data-page="marketplace"] .mh-suggest-item.is-hot {
    background: var(--ds-surface-selected);
    box-shadow: inset 0 0 0 1px
        color-mix(in oklab, var(--ds-accent) 24%, transparent);
}

body[data-page="marketplace"] .marketplace-filter-drawer {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    align-items: end;
    gap: 14px;
    margin-top: 8px;
    padding: 16px;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in oklab, var(--ds-canvas) 82%, transparent);
}

body[data-page="marketplace"] .marketplace-filter-drawer[hidden] {
    display: none;
}

body[data-page="marketplace"] .marketplace-filter-drawer .marketplace-filter,
body[data-page="marketplace"]
    .marketplace-filter-drawer
    .marketplace-budget-filter {
    min-width: 0;
    margin: 0;
}

body[data-page="marketplace"] .marketplace-filter-drawer .filter-label,
body[data-page="marketplace"] .marketplace-filter-drawer legend,
body[data-page="marketplace"]
    .marketplace-filter-drawer
    .marketplace-budget-filter
    > label
    > span,
body[data-page="marketplace"]
    .marketplace-filter-drawer
    .marketplace-budget-range
    label
    span {
    color: var(--ds-text-subtle);
    font-size: 0.72rem;
    font-weight: 620;
    letter-spacing: 0.02em;
    text-transform: none;
}

body[data-page="marketplace"]
    .marketplace-filter-drawer
    :is(select, input[type="number"]) {
    width: 100%;
    min-height: 42px;
    border-color: var(--ds-border);
    border-radius: var(--radius-sm, 9px);
    background: var(--ds-surface);
    color: var(--ds-text);
}

body[data-page="marketplace"] .marketplace-filter-drawer .marketplace-budget-filter {
    grid-column: span 2;
    padding: 0;
    border: 0;
    background: transparent;
}

body[data-page="marketplace"] .marketplace-budget-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body[data-page="marketplace"] .marketplace-filter-actions {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

body[data-page="marketplace"] .marketplace-filter-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body[data-page="marketplace"] .mh-discovery-meta {
    display: grid;
    gap: 14px;
    margin: 18px 0 clamp(30px, 4vw, 52px);
}

body[data-page="marketplace"] .mh-trending {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

body[data-page="marketplace"] .mh-trending > span {
    flex: none;
    color: var(--ds-text-subtle);
    font-size: 0.76rem;
    font-weight: 620;
}

body[data-page="marketplace"] .mh-trending > div {
    display: flex;
    gap: 7px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

body[data-page="marketplace"] .mh-trending > div::-webkit-scrollbar {
    display: none;
}

body[data-page="marketplace"] .mh-trending a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    color: var(--ds-text-muted);
    background: var(--ds-surface);
    font-size: 0.78rem;
    font-weight: 570;
    text-decoration: none;
    white-space: nowrap;
    transition:
        border-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        transform var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .mh-trending a:hover,
body[data-page="marketplace"] .mh-trending a:focus-visible {
    border-color: var(--ds-accent);
    color: var(--ds-text);
    transform: translateY(-1px);
}

body[data-page="marketplace"] .mh-live-stats {
    display: grid;
    /* One equal column per genuine metric (count varies, zeros are dropped
       server-side), so the row always fills its width with no empty cells. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--ds-border);
    border-bottom: 1px solid var(--ds-border);
}

body[data-page="marketplace"] .mh-live-stats > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0 clamp(12px, 2vw, 24px);
}

body[data-page="marketplace"] .mh-live-stats > div + div {
    border-left: 1px solid var(--ds-border);
}

body[data-page="marketplace"] .mh-live-stats dt {
    color: var(--ds-text-subtle);
    font-size: 0.72rem;
    font-weight: 540;
    white-space: nowrap;
}

body[data-page="marketplace"] .mh-live-stats dd {
    order: -1;
    margin: 0;
    color: var(--ds-text);
    font-family: var(--font-mono);
    font-size: clamp(0.98rem, 1.3vw, 1.12rem);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body[data-page="marketplace"] .mh-trust-ribbon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 14px;
    border: 1px solid
        color-mix(in oklab, var(--ds-accent) 26%, var(--ds-border));
    border-radius: var(--radius-md, 12px);
    color: var(--ds-text-muted);
    background: color-mix(in oklab, var(--ds-accent) 7%, var(--ds-surface));
    font-size: 0.83rem;
    line-height: 1.45;
    text-decoration: none;
    transition:
        border-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        background-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .mh-trust-ribbon:hover,
body[data-page="marketplace"] .mh-trust-ribbon:focus-visible {
    border-color: color-mix(in oklab, var(--ds-accent) 52%, var(--ds-border));
    background: color-mix(in oklab, var(--ds-accent) 11%, var(--ds-surface));
}

body[data-page="marketplace"] .mh-trust-ribbon > span:first-child,
body[data-page="marketplace"] .mh-trust-ribbon > svg:last-child {
    display: grid;
    width: 19px;
    height: 19px;
    color: var(--ds-success);
}

body[data-page="marketplace"] .mh-trust-ribbon > span:first-child svg {
    width: 19px;
    height: 19px;
}

body[data-page="marketplace"] .mh-trust-ribbon strong {
    color: var(--ds-text);
    font-weight: 640;
}

body[data-page="marketplace"] .mh-browse {
    gap: clamp(34px, 4vw, 58px);
    margin: 0 0 clamp(42px, 5vw, 70px);
}

body[data-page="marketplace"] .am-shelf__head h2 {
    color: var(--ds-text);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 650;
    letter-spacing: -0.025em;
}

body[data-page="marketplace"] .am-shelf__head p {
    max-width: 54ch;
    color: var(--ds-text-subtle);
}

body[data-page="marketplace"] .mh-mini {
    min-height: 168px;
    border-color: var(--ds-border);
    border-radius: var(--radius-lg, 16px);
    background:
        linear-gradient(
            155deg,
            color-mix(in oklab, var(--ds-surface) 96%, transparent),
            color-mix(in oklab, var(--ds-canvas-raised) 96%, transparent)
        );
}

body[data-page="marketplace"] .mh-mini:hover,
body[data-page="marketplace"] .mh-mini:focus-visible {
    border-color: var(--ds-border-strong);
    box-shadow: 0 18px 44px
        color-mix(in oklab, var(--ds-canvas) 68%, transparent);
}

body[data-page="marketplace"] .mh-mini__avatar {
    border-radius: 7px;
}

body[data-page="marketplace"] .am-feature {
    min-height: 360px;
    overflow: hidden;
    border-color: var(--ds-border-strong);
    border-radius: var(--radius-lg, 16px);
    background: var(--ds-surface);
    box-shadow: 0 26px 72px
        color-mix(in oklab, var(--ds-canvas) 72%, transparent);
}

body[data-page="marketplace"] .am-feature__backdrop {
    opacity: 0.16;
    filter: blur(42px) saturate(80%);
}

body[data-page="marketplace"] .mh-feature__backdrop--identity {
    background:
        radial-gradient(
            circle at 26% 26%,
            color-mix(in oklab, var(--ds-accent) 24%, transparent),
            transparent 44%
        ),
        var(--ds-canvas-raised);
}

body[data-page="marketplace"] .mh-feature-identity {
    position: relative;
    display: grid;
    place-items: center;
    background:
        radial-gradient(
            circle at 50% 35%,
            color-mix(in oklab, var(--ds-accent) 18%, transparent),
            transparent 52%
        ),
        var(--ds-canvas-raised);
}

body[data-page="marketplace"] .mh-feature-identity__light {
    position: absolute;
    inset: 18% 14%;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ds-accent) 20%, transparent);
    filter: blur(46px);
}

body[data-page="marketplace"] .mh-feature-identity img {
    position: relative;
    width: clamp(96px, 13vw, 154px);
    height: clamp(96px, 13vw, 154px);
    border: 1px solid var(--ds-border-strong);
    border-radius: 26%;
    object-fit: cover;
    box-shadow: 0 22px 58px
        color-mix(in oklab, var(--ds-canvas) 76%, transparent);
}

body[data-page="marketplace"] .am-feature__info {
    padding: clamp(24px, 4vw, 52px);
}

body[data-page="marketplace"] .am-feature__info h2 {
    max-width: 17ch;
    font-size: clamp(1.9rem, 3vw, 3rem);
    letter-spacing: -0.045em;
}

body[data-page="marketplace"] .am-feature__info > p {
    display: -webkit-box;
    max-width: 58ch;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body[data-page="marketplace"] .am-feature__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

body[data-page="marketplace"] .am-feature__proof span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body[data-page="marketplace"] .am-feature__proof .is-verified {
    color: var(--ds-success);
}

body[data-page="marketplace"] .am-feature__proof .is-verified svg {
    width: 14px;
    height: 14px;
}

body[data-page="marketplace"] .am-creator__avatar {
    overflow: hidden;
    border-radius: 10px;
}

body[data-page="marketplace"] .am-creator__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="marketplace"] .mh-assets__rail {
    grid-auto-columns: minmax(220px, 272px);
}

body[data-page="marketplace"] .mh-asset {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-lg, 16px);
    color: var(--ds-text);
    background: var(--ds-surface);
    text-decoration: none;
    transition:
        transform var(--motion-duration-normal, 200ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color var(--motion-duration-normal, 200ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--motion-duration-normal, 200ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .mh-asset:hover,
body[data-page="marketplace"] .mh-asset:focus-visible {
    border-color: var(--ds-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 44px
        color-mix(in oklab, var(--ds-canvas) 70%, transparent);
}

body[data-page="marketplace"] .mh-asset__media {
    display: grid;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    place-items: center;
    background: var(--ds-canvas-raised);
}

body[data-page="marketplace"] .mh-asset__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-duration-slow, 240ms)
        var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .mh-asset:hover .mh-asset__media img {
    transform: scale(1.035);
}

body[data-page="marketplace"] .mh-asset__media--empty svg {
    width: 34px;
    height: 34px;
    color: var(--ds-text-subtle);
}

body[data-page="marketplace"] .mh-asset__body {
    display: grid;
    gap: 6px;
    padding: 13px 14px 14px;
}

body[data-page="marketplace"] .mh-asset__meta {
    color: var(--ds-text-subtle);
    font-size: 0.7rem;
}

body[data-page="marketplace"] .mh-asset__body > strong {
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="marketplace"] .mh-asset__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ds-text-subtle);
    font-size: 0.74rem;
}

body[data-page="marketplace"] .mh-asset__foot b {
    color: var(--ds-text);
    font-family: var(--font-mono);
    font-weight: 650;
}

body[data-page="marketplace"] .mh-asset__foot span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body[data-page="marketplace"] .mh-asset__foot svg {
    width: 12px;
    height: 12px;
    color: var(--ds-warning);
}

body[data-page="marketplace"] .marketplace-shell {
    gap: 0;
    margin: 0 0 clamp(32px, 4vw, 54px);
}

body[data-page="marketplace"] .marketplace-panel-results {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-page="marketplace"] .marketplace-panel-results > .section-header,
body[data-page="marketplace"] .marketplace-panel-results > header {
    margin-bottom: 20px;
    padding: 0;
}

body[data-page="marketplace"] .marketplace-panel-results .section-title,
body[data-page="marketplace"] .marketplace-panel-results h2 {
    color: var(--ds-text);
    font-size: clamp(1.35rem, 2.3vw, 1.85rem);
    font-weight: 650;
    letter-spacing: -0.035em;
}

body[data-page="marketplace"] .marketplace-panel-results .section-lede {
    color: var(--ds-text-subtle);
}

body[data-page="marketplace"] .marketplace-grid:not([data-view="list"]) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    align-items: stretch;
    gap: 18px;
}

body[data-page="marketplace"] .marketplace-card {
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: var(--radius-lg, 16px);
    background:
        linear-gradient(
            160deg,
            color-mix(in oklab, var(--ds-surface) 98%, transparent),
            color-mix(in oklab, var(--ds-canvas-raised) 98%, transparent)
        );
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, var(--ds-text) 4%, transparent),
        0 3px 10px color-mix(in oklab, var(--ds-canvas) 32%, transparent);
    transition:
        transform var(--motion-duration-normal, 200ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color var(--motion-duration-normal, 200ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--motion-duration-normal, 200ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .marketplace-card:hover,
body[data-page="marketplace"] .marketplace-card:focus-within {
    z-index: 2;
    border-color: color-mix(in oklab, var(--ds-accent) 34%, var(--ds-border-strong));
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, var(--ds-text) 7%, transparent),
        0 8px 20px color-mix(in oklab, var(--ds-canvas) 44%, transparent),
        0 28px 64px color-mix(in oklab, var(--ds-canvas) 76%, transparent),
        0 0 0 1px color-mix(in oklab, var(--ds-accent) 12%, transparent);
}

body[data-page="marketplace"] .marketplace-card.premium {
    border-color: color-mix(
        in oklab,
        var(--premium-accent, var(--ds-warning)) 46%,
        var(--ds-border)
    );
}

body[data-page="marketplace"] .marketplace-card-media {
    position: relative;
    order: 0;
    display: grid;
    width: auto;
    max-height: none;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 8.7;
    border: 0;
    border-radius: 0;
    background: var(--ds-canvas-raised);
    text-decoration: none;
}

body[data-page="marketplace"] .marketplace-card-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-duration-slow, 240ms)
        var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .marketplace-card:hover .marketplace-card-media > img,
body[data-page="marketplace"]
    .marketplace-card:focus-within
    .marketplace-card-media
    > img {
    transform: scale(1.035);
}

body[data-page="marketplace"] .marketplace-card-media--identity {
    place-items: center;
    background:
        radial-gradient(
            circle at 50% 22%,
            color-mix(in oklab, var(--ds-accent) 17%, transparent),
            transparent 48%
        ),
        linear-gradient(155deg, var(--ds-canvas-raised), var(--ds-canvas));
}

body[data-page="marketplace"] .marketplace-card-identity-art {
    position: absolute;
    width: 48%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in oklab, var(--ds-accent) 18%, transparent);
    filter: blur(34px);
}

body[data-page="marketplace"] .marketplace-card-media--identity > img {
    position: relative;
    width: 74px;
    height: 74px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 22%;
    object-fit: cover;
    box-shadow: 0 16px 38px
        color-mix(in oklab, var(--ds-canvas) 68%, transparent);
}

body[data-page="marketplace"] .marketplace-card-top {
    order: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 0;
}

body[data-page="marketplace"] .marketplace-card-creator {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--ds-text);
    text-decoration: none;
}

body[data-page="marketplace"] .marketplace-card-creator:hover strong,
body[data-page="marketplace"] .marketplace-card-creator:focus-visible strong {
    color: var(--ds-accent-hover);
}

body[data-page="marketplace"] .marketplace-card-author-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border: 1px solid var(--ds-border);
    border-radius: 9px;
    object-fit: cover;
}

body[data-page="marketplace"] .marketplace-card-creator > span {
    display: grid;
    min-width: 0;
}

body[data-page="marketplace"] .marketplace-card-creator strong {
    overflow: hidden;
    color: var(--ds-text-muted);
    font-size: 0.8rem;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--motion-duration-fast, 160ms)
        var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .marketplace-card-creator small {
    overflow: hidden;
    color: var(--ds-text-subtle);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="marketplace"] .marketplace-card-badges {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

body[data-page="marketplace"] .marketplace-card-badges .badge {
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.66rem;
}

body[data-page="marketplace"] .marketplace-card-title {
    padding: 13px 16px 0;
}

body[data-page="marketplace"] .marketplace-card-eyebrow {
    display: block;
    margin: 0 0 5px;
    overflow: hidden;
    color: var(--ds-text-subtle);
    font-size: 0.67rem;
    font-weight: 650;
    letter-spacing: 0.045em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

body[data-page="marketplace"] .marketplace-card-title h3 {
    display: -webkit-box;
    min-height: 2.6em;
    margin: 0;
    overflow: hidden;
    color: var(--ds-text);
    font-size: 1.04rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.018em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-page="marketplace"] .marketplace-card-title h3 a {
    color: inherit;
    text-decoration: none;
}

body[data-page="marketplace"] .marketplace-card-title h3 a:hover,
body[data-page="marketplace"] .marketplace-card-title h3 a:focus-visible {
    color: var(--ds-accent-hover);
}

body[data-page="marketplace"] .marketplace-card-scan {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 11px 16px 0;
}

body[data-page="marketplace"] .marketplace-card-scan-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid var(--ds-border);
    border-radius: 7px;
    color: var(--ds-text-subtle);
    background: color-mix(in oklab, var(--ds-surface-hover) 54%, transparent);
    font-size: 0.7rem;
    font-weight: 570;
}

body[data-page="marketplace"] .marketplace-card-scan-badge.is-active {
    border-color: color-mix(in oklab, var(--ds-success) 28%, var(--ds-border));
    color: color-mix(in oklab, var(--ds-success) 82%, var(--ds-text));
    background: color-mix(in oklab, var(--ds-success) 8%, var(--ds-surface));
}

body[data-page="marketplace"] .marketplace-card-body {
    display: grid;
    gap: 10px;
    padding: 12px 16px 0;
}

body[data-page="marketplace"] .marketplace-card-summary {
    display: -webkit-box;
    min-height: 2.8em;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 0;
    color: var(--ds-text-muted);
    background: transparent;
    font-size: 0.82rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

body[data-page="marketplace"]
    .marketplace-card-summary.markdown-body
    :where(h1, h2, h3, h4, p, ul, ol, blockquote) {
    display: inline;
    margin: 0;
    padding: 0;
    font: inherit;
}

body[data-page="marketplace"] .marketplace-card-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body[data-page="marketplace"] .marketplace-card-verification,
body[data-page="marketplace"] .marketplace-card-trust-signal,
body[data-page="marketplace"] .marketplace-card-protected,
body[data-page="marketplace"] .marketplace-card-portfolio-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid var(--ds-border);
    border-radius: 7px;
    color: var(--ds-text-muted);
    background: transparent;
    font-size: 0.69rem;
    font-weight: 590;
    text-decoration: none;
}

body[data-page="marketplace"] .marketplace-card-verification.verified {
    border-color: color-mix(in oklab, var(--ds-success) 30%, var(--ds-border));
    color: color-mix(in oklab, var(--ds-success) 84%, var(--ds-text));
    background: color-mix(in oklab, var(--ds-success) 8%, var(--ds-surface));
}

body[data-page="marketplace"] .marketplace-card-trust-signal {
    border-color: color-mix(in oklab, var(--ds-success) 24%, var(--ds-border));
    color: color-mix(in oklab, var(--ds-success) 72%, var(--ds-text));
    background: color-mix(in oklab, var(--ds-success) 6%, var(--ds-surface));
}

body[data-page="marketplace"] .marketplace-card-protected {
    border-color: color-mix(in oklab, var(--ds-accent) 26%, var(--ds-border));
    color: color-mix(in oklab, var(--ds-accent) 72%, var(--ds-text));
    background: color-mix(in oklab, var(--ds-accent) 7%, var(--ds-surface));
}

body[data-page="marketplace"] .marketplace-card-verification svg,
body[data-page="marketplace"] .marketplace-card-trust-signal svg,
body[data-page="marketplace"] .marketplace-card-protected svg,
body[data-page="marketplace"] .marketplace-card-portfolio-link svg {
    width: 13px;
    height: 13px;
}

body[data-page="marketplace"] .marketplace-card-portfolio-link strong {
    display: none;
}

body[data-page="marketplace"] .marketplace-card-portfolio-link:hover,
body[data-page="marketplace"] .marketplace-card-portfolio-link:focus-visible {
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
}

/* Badges settle in smoothly, the trust row should feel alive, not static. */
body[data-page="marketplace"] .marketplace-card-scan-badge,
body[data-page="marketplace"] .marketplace-card-verification {
    transition:
        border-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        background-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Portfolio preview tile, replaces the old text pills so a creator's work is
   recognisable at a glance. Real thumbnail when the portfolio has one, a tidy
   monogram otherwise. Takes its own row inside the trust flex container. */
body[data-page="marketplace"] .marketplace-card-portfolio-preview {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: color-mix(in oklab, var(--ds-surface-hover) 42%, transparent);
    text-decoration: none;
    transition:
        border-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        background-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .marketplace-card-portfolio-preview:hover,
body[data-page="marketplace"] .marketplace-card-portfolio-preview:focus-visible {
    border-color: color-mix(in oklab, var(--ds-accent) 42%, var(--ds-border));
    background: color-mix(in oklab, var(--ds-accent) 8%, var(--ds-surface));
}

body[data-page="marketplace"] .marketplace-card-portfolio-preview__thumb {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: 8px;
    color: color-mix(in oklab, var(--ds-accent) 80%, var(--ds-text));
    background: var(--ds-canvas-raised);
    font-size: 0.9rem;
    font-weight: 750;
}

body[data-page="marketplace"]
    .marketplace-card-portfolio-preview.is-mono
    .marketplace-card-portfolio-preview__thumb {
    background:
        radial-gradient(
            120% 120% at 50% 0%,
            color-mix(in oklab, var(--ds-accent) 22%, transparent),
            transparent 72%
        ),
        var(--ds-canvas-raised);
}

body[data-page="marketplace"] .marketplace-card-portfolio-preview__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="marketplace"] .marketplace-card-portfolio-preview__meta {
    display: grid;
    gap: 1px;
    min-width: 0;
}

body[data-page="marketplace"] .marketplace-card-portfolio-preview__kicker {
    color: var(--ds-text-subtle);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body[data-page="marketplace"] .marketplace-card-portfolio-preview__meta strong {
    overflow: hidden;
    color: var(--ds-text);
    font-size: 0.82rem;
    font-weight: 620;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Primary CTA: a satisfying lift on hover, a real press on pointer-down. */
body[data-page="marketplace"]
    .marketplace-card-actions-primary
    > .apply-button {
    transition:
        transform var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        background-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"]
    .marketplace-card-actions-primary
    > .apply-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px
        color-mix(in oklab, var(--ds-accent) 30%, transparent);
}

body[data-page="marketplace"]
    .marketplace-card-actions-primary
    > .apply-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px
        color-mix(in oklab, var(--ds-accent) 22%, transparent);
}

body[data-page="marketplace"] .marketplace-card-footer {
    display: grid;
    gap: 9px;
    margin-top: auto;
    padding: 14px 16px 0;
    border: 0;
}

body[data-page="marketplace"] .marketplace-card-facts {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--ds-border);
}

body[data-page="marketplace"] .marketplace-card-fact {
    display: grid;
    gap: 3px;
    min-width: 0;
}

body[data-page="marketplace"] .marketplace-card-fact > span {
    color: var(--ds-text-subtle);
    font-size: 0.66rem;
    font-weight: 560;
}

body[data-page="marketplace"] .marketplace-card-fact strong {
    overflow: hidden;
    color: var(--ds-text);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Price is the card's anchor: pull it up to a headline weight so it wins
   the scan without adding any new markup. */
body[data-page="marketplace"]
    .marketplace-card-facts
    .marketplace-card-fact:first-child
    strong {
    color: var(--ds-text);
    font-size: 1.12rem;
    font-weight: 720;
    letter-spacing: -0.01em;
    white-space: normal;
}

body[data-page="marketplace"]
    .marketplace-card-facts
    .marketplace-card-fact:first-child
    > span {
    color: color-mix(in oklab, var(--ds-accent) 52%, var(--ds-text-subtle));
}

body[data-page="marketplace"] .marketplace-card-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0;
    color: var(--ds-text-subtle);
    font-size: 0.69rem;
    font-variant-numeric: tabular-nums;
}

body[data-page="marketplace"] .marketplace-card-signals span + span::before {
    margin: 0 7px;
    color: var(--ds-border-strong);
    content: "/";
}

body[data-page="marketplace"] .marketplace-card-bottom-row {
    display: block;
    padding: 14px 16px 16px;
}

body[data-page="marketplace"] .marketplace-card-actions-shell,
body[data-page="marketplace"] .marketplace-card-actions-primary {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 9px;
}

body[data-page="marketplace"] .marketplace-card-actions-primary {
    justify-content: space-between;
}

body[data-page="marketplace"] .marketplace-card-tools {
    display: flex;
    flex: none;
    gap: 4px;
    opacity: 0;
    transform: translateY(3px);
    transition:
        opacity var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        transform var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .marketplace-card:hover .marketplace-card-tools,
body[data-page="marketplace"]
    .marketplace-card:focus-within
    .marketplace-card-tools {
    opacity: 1;
    transform: translateY(0);
}

body[data-page="marketplace"]
    .marketplace-card-actions-primary
    > .apply-button {
    min-width: 126px;
    min-height: 38px;
    margin-left: auto;
    padding: 7px 14px;
    box-shadow: 0 8px 24px
        color-mix(in oklab, var(--ds-accent) 18%, transparent);
}

body[data-page="marketplace"] .marketplace-card-safety-hold {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin-left: auto;
    padding: 0 12px;
    border: 1px solid color-mix(in oklab, var(--ds-warning) 34%, var(--ds-border));
    border-radius: var(--radius-sm, 9px);
    color: var(--ds-warning);
    background: color-mix(in oklab, var(--ds-warning) 8%, var(--ds-surface));
    font-size: 0.72rem;
    font-weight: 620;
}

body[data-page="marketplace"] .marketplace-card-remove-x {
    top: 10px;
    right: 10px;
    border-color: var(--ds-border-strong);
    background: color-mix(in oklab, var(--ds-canvas) 84%, transparent);
    backdrop-filter: blur(10px);
}

body[data-page="marketplace"] .marketplace-results-meta {
    margin-bottom: 16px;
}

body[data-page="marketplace"] #marketplace-results-count {
    color: var(--ds-text-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

/* ------------------------------------------------------------------ */
/* Empty state: never a blank page, guide the next move               */
/* ------------------------------------------------------------------ */

body[data-page="marketplace"] .mh-empty {
    padding: clamp(20px, 4vw, 44px) 16px;
}

body[data-page="marketplace"] .mh-empty__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
}

body[data-page="marketplace"] .mh-empty__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--ds-border);
    border-radius: 15px;
    color: var(--ds-accent);
    background:
        radial-gradient(
            120% 120% at 50% 0%,
            color-mix(in oklab, var(--ds-accent) 14%, transparent),
            transparent 70%
        ),
        var(--ds-surface);
    box-shadow: 0 12px 30px
        color-mix(in oklab, var(--ds-canvas) 66%, transparent);
}

body[data-page="marketplace"] .mh-empty__icon svg {
    width: 22px;
    height: 22px;
}

body[data-page="marketplace"] .mh-empty h3 {
    margin: 0;
    color: var(--ds-text);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 650;
    letter-spacing: -0.02em;
}

body[data-page="marketplace"] .mh-empty p {
    margin: 0;
    max-width: 42ch;
    color: var(--ds-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    text-wrap: pretty;
}

body[data-page="marketplace"] .mh-empty__suggest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin-top: 2px;
}

body[data-page="marketplace"] .mh-empty__suggest-label {
    color: var(--ds-text-subtle);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body[data-page="marketplace"] .mh-empty__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

body[data-page="marketplace"] .mh-empty__chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid var(--ds-border);
    border-radius: 999px;
    color: var(--ds-text-muted);
    background: var(--ds-surface);
    font-size: 0.8rem;
    font-weight: 570;
    text-decoration: none;
    transition:
        border-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        background-color var(--motion-duration-fast, 160ms)
            var(--motion-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

body[data-page="marketplace"] .mh-empty__chip:hover,
body[data-page="marketplace"] .mh-empty__chip:focus-visible {
    border-color: var(--ds-accent);
    color: var(--ds-text);
    background: color-mix(in oklab, var(--ds-accent) 9%, var(--ds-surface));
}

body[data-page="marketplace"] .mh-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

body[data-page="marketplace"] .next-action-panel {
    border-color: var(--ds-border);
    background: var(--ds-canvas-raised);
}

body[data-page="marketplace"]
    :is(
        .marketplace-mode,
        .marketplace-search-submit,
        .marketplace-filter-toggle,
        .mh-trending a,
        .mh-trust-ribbon,
        .marketplace-card a,
        .marketplace-card button,
        .mh-asset,
        .mh-empty__chip,
        .mh-empty__actions a,
        .marketplace-view-toggle a,
        .marketplace-filter-drawer select,
        .marketplace-filter-drawer input
    ):focus-visible {
    outline: 2px solid var(--ds-accent);
    outline-offset: 2px;
}

/* Widescreen: reclaim horizontal space on ultrawide displays without
   letting cards balloon, a slightly larger floor keeps proportions. */
@media (min-width: 1700px) {
    body[data-page="marketplace"] main > .container {
        max-width: 1560px;
    }

    body[data-page="marketplace"] .marketplace-grid:not([data-view="list"]) {
        gap: 22px;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 348px), 1fr));
    }
}

@media (max-width: 1120px) {
    body[data-page="marketplace"] .marketplace-command-bar {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "search submit filters"
            "modes modes modes";
    }

    body[data-page="marketplace"] .marketplace-modebar {
        width: 100%;
        margin-top: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body[data-page="marketplace"] .marketplace-modebar::-webkit-scrollbar {
        display: none;
    }

    body[data-page="marketplace"] .marketplace-filter-drawer {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 760px) {
    body[data-page="marketplace"] .mh-masthead {
        padding: 30px 0 22px;
    }

    body[data-page="marketplace"] .mh-masthead__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    body[data-page="marketplace"] .mh-masthead__title h1 {
        font-size: clamp(2.4rem, 12vw, 3.25rem);
    }

    body[data-page="marketplace"] .mh-masthead__actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    body[data-page="marketplace"] .marketplace-command-surface {
        top: calc(var(--vd-top-h, 60px) + 5px);
        margin-right: -6px;
        margin-left: -6px;
        padding: 6px;
        border-radius: var(--radius-md, 12px);
    }

    body[data-page="marketplace"] .marketplace-command-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "search submit"
            "modes filters";
    }

    body[data-page="marketplace"] .marketplace-search-submit {
        min-height: 48px;
        padding: 0 13px;
        font-size: 0.82rem;
    }

    body[data-page="marketplace"] .marketplace-modebar {
        margin: 0;
    }

    body[data-page="marketplace"] .marketplace-mode {
        min-height: 38px;
        padding: 0 12px;
    }

    body[data-page="marketplace"] .marketplace-filter-toggle {
        min-height: 44px;
        padding: 0 12px;
    }

    body[data-page="marketplace"] .marketplace-filter-drawer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: min(60dvh, 520px);
        padding: 13px;
        overflow-y: auto;
    }

    body[data-page="marketplace"]
        .marketplace-filter-drawer
        .marketplace-budget-filter,
    body[data-page="marketplace"] .marketplace-filter-actions {
        grid-column: 1 / -1;
    }

    body[data-page="marketplace"] .mh-discovery-meta {
        margin-top: 16px;
    }

    body[data-page="marketplace"] .mh-trending {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    body[data-page="marketplace"] .mh-trending > div {
        width: 100%;
    }

    body[data-page="marketplace"] .mh-live-stats {
        grid-auto-columns: minmax(138px, 1fr);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    body[data-page="marketplace"] .mh-live-stats::-webkit-scrollbar {
        display: none;
    }

    body[data-page="marketplace"] .mh-live-stats > div {
        scroll-snap-align: start;
    }

    body[data-page="marketplace"] .mh-trust-ribbon {
        align-items: start;
    }

    body[data-page="marketplace"] .mh-browse {
        gap: 36px;
    }

    body[data-page="marketplace"] .am-feature {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    body[data-page="marketplace"] .am-feature__media {
        min-height: 230px;
    }

    body[data-page="marketplace"] .am-feature__info {
        padding: 24px 20px 26px;
    }

    body[data-page="marketplace"] .marketplace-grid:not([data-view="list"]) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 460px) {
    body[data-page="marketplace"] .mh-safety-link {
        padding-inline: 3px;
    }

    body[data-page="marketplace"] .marketplace-mode {
        padding-inline: 9px;
        font-size: 0.76rem;
    }

    body[data-page="marketplace"] .marketplace-filter-drawer {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="marketplace"]
        .marketplace-filter-drawer
        .marketplace-budget-filter,
    body[data-page="marketplace"] .marketplace-filter-actions {
        grid-column: auto;
    }

    body[data-page="marketplace"] .marketplace-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body[data-page="marketplace"] .marketplace-card-tools {
        gap: 2px;
    }

    body[data-page="marketplace"]
        .marketplace-card-actions-primary
        > .apply-button {
        min-width: 118px;
    }
}

@media (pointer: coarse) {
    body[data-page="marketplace"] .marketplace-card-tools {
        opacity: 1;
        transform: none;
    }

    body[data-page="marketplace"] .mh-empty__chip {
        min-height: 44px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    body[data-page="marketplace"] .marketplace-command-surface {
        background: var(--ds-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="marketplace"]
        :is(
            .marketplace-command-surface,
            .marketplace-mode,
            .marketplace-search-submit,
            .marketplace-filter-toggle,
            .mh-trending a,
            .mh-asset,
            .mh-asset__media img,
            .marketplace-card,
            .marketplace-card-media > img,
            .marketplace-card-tools
        ) {
        transition: none;
    }

    body[data-page="marketplace"]
        :is(.mh-trending a, .mh-asset, .marketplace-card):hover,
    body[data-page="marketplace"] .marketplace-card:focus-within {
        transform: none;
    }

    body[data-page="marketplace"]
        .marketplace-card:hover
        .marketplace-card-media
        > img,
    body[data-page="marketplace"]
        .marketplace-card:focus-within
        .marketplace-card-media
        > img,
    body[data-page="marketplace"] .mh-asset:hover .mh-asset__media img {
        transform: none;
    }

    body[data-page="marketplace"]
        .marketplace-card-actions-primary
        > .apply-button:hover,
    body[data-page="marketplace"]
        .marketplace-card-actions-primary
        > .apply-button:active {
        transform: none;
    }
}