/* Marketplace v5 — desktop hero + result bar, design of 2026-11-01 (≥1024px): eyebrow, bold headline with a metallic
 * accent word, subline, live-count pill, full-width search with a "/" hint and a blue Search button, pill tabs, and
 * a result bar with a subline and a Sort menu. Overrides the older hero rules in market-v5-list.css (loaded after it).
 * Markup: components/market/v5/hero.php + the #mk5Bar block in pages/dashboard.php. */

@media (min-width: 1024px) {
    body.mkt-v5 { --mk5-blue: #6ebeff; --mk5-on-blue: #06121f; --mk5-live: #34d399; }
    html[data-theme="light"] body.mkt-v5 { --mk5-blue: rgb(29 78 216); --mk5-on-blue: #fff; --mk5-live: #059669; }

    #mk5 .mk5-hero__in { background: radial-gradient(ellipse 60% 120% at 85% 0%, rgb(var(--mk-fg) / 0.045), transparent 60%), linear-gradient(180deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-s2)) 100%); }
    #mk5 .mk5-hero__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; padding: 24px 28px 0; }
    #mk5 .mk5-hero__head { display: flex; flex-direction: column; gap: 0; min-width: 0; }
    #mk5 .mk5-eyebrow { margin-top: 22px; font-size: 11px; font-weight: 700; letter-spacing: .22em; color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); }
    #mk5 .mk5-title { margin: 10px 0 0; font-size: clamp(34px, 3.4vw, 50px); font-weight: 700; line-height: 1.04; letter-spacing: -0.045em; }
    #mk5 .mk5-sub { margin: 12px 0 0; font-size: 15px; font-weight: 500; color: rgb(var(--mk-fg) / calc(0.62 * var(--mk-tk))); }
    html[dir="rtl"] #mk5 :is(.mk5-title, .mk5-eyebrow) { letter-spacing: 0; }

    /* Live count pill */
    #mk5 .mk5-live {
        flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; height: 36px; padding: 0 16px; border-radius: 999px;
        border: 1px solid rgb(var(--mk-fg) / 0.12); background: rgb(var(--mk-fg) / 0.03); font-size: 13px; font-weight: 500; white-space: nowrap;
        color: rgb(var(--mk-fg) / calc(0.7 * var(--mk-tk)));
    }
    #mk5 .mk5-live b { color: rgb(var(--mk-fg)); font-weight: 700; font-variant-numeric: tabular-nums; }
    #mk5 .mk5-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mk5-live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk5-live) 22%, transparent); animation: mk5-pulse 2.4s ease-in-out infinite; }
    @keyframes mk5-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mk5-live) 0%, transparent); } }

    /* Search: the whole width of the card */
    #mk5 .mk5-search { flex: none; max-width: none; height: 60px; margin: 22px 28px 0; padding-inline: 20px 8px; border-radius: 16px; gap: 14px; background: rgb(var(--mk-bg) / 0.55); }
    #mk5 .mk5-search__ico { font-size: 15px; }
    #mk5 .mk5-search__input { font-size: 15.5px; }
    #mk5 .mk5-search__kbd {
        flex-shrink: 0; min-width: 24px; height: 24px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px;
        border: 1px solid rgb(var(--mk-fg) / 0.16); background: rgb(var(--mk-fg) / 0.04); color: rgb(var(--mk-fg) / calc(0.6 * var(--mk-tk)));
        font: 600 12px 'JetBrains Mono', ui-monospace, monospace;
    }
    #mk5 .mk5-search:focus-within .mk5-search__kbd { display: none; }
    #mk5 .mk5-search__btn { height: 44px; padding: 0 24px; border-radius: 11px; background: var(--mk5-blue); color: var(--mk5-on-blue); font-size: 14.5px; font-weight: 700; }

    /* Platform tabs: pills; the picked one framed, its count in blue */
    #mk5 .mk5-tabs { gap: 6px; margin-top: 22px; padding: 14px 28px 16px; }
    #mk5 .mk5-tab { height: 42px; padding: 0 14px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; transition: color .2s ease, background .2s ease, border-color .2s ease; }
    #mk5 .mk5-tab::after { display: none; }
    #mk5 .mk5-tab:hover { background: rgb(var(--mk-fg) / 0.04); }
    #mk5 .mk5-tab:is([aria-selected="true"], .is-active) { color: rgb(var(--mk-fg)); border-color: color-mix(in srgb, var(--mk5-blue) 40%, transparent); background: color-mix(in srgb, var(--mk5-blue) 8%, transparent); }
    #mk5 .mk5-tab:is([aria-selected="true"], .is-active) .mk5-tab__n { background: var(--mk5-blue); color: var(--mk5-on-blue); }

    /* Result bar: big count, subline, Sort menu + view toggle */
    #mk5 .mk5-bar { align-items: flex-end; margin: 26px 0 16px; padding-bottom: 0; border-bottom: 0; }
    #mk5 .mk5-bar__head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    #mk5 #resultCountDesktop { font-size: 26px; font-weight: 700; }
    #mk5 .mk5-bar__label { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: rgb(var(--mk-fg)); }
    #mk5 .mk5-bar__sub { margin: 0; font-size: 12.5px; font-weight: 500; color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); }
    #mk5 .mk5-sort { position: relative; display: flex; align-items: center; }
    #mk5 .mk5-sort select {
        height: 40px; min-width: 170px; padding-block: 0; padding-inline: 14px 38px; border-radius: 11px; appearance: none; -webkit-appearance: none; cursor: pointer;
        border: 1px solid rgb(var(--mk-fg) / 0.14); background: rgb(var(--mk-fg) / 0.03); color: rgb(var(--mk-fg)); font: inherit; font-size: 13.5px; font-weight: 600;
    }
    #mk5 .mk5-sort select:hover { border-color: rgb(var(--mk-fg) / 0.25); }
    #mk5 .mk5-sort select option { background: rgb(var(--mk-s1)); color: rgb(var(--mk-fg)); }
    #mk5 .mk5-sort i { position: absolute; inset-inline-end: 14px; font-size: 11px; pointer-events: none; color: rgb(var(--mk-fg) / calc(0.6 * var(--mk-tk))); }

    @media (prefers-reduced-motion: reduce) { #mk5 .mk5-live__dot { animation: none; } }
}