/* Marketplace v5 — desktop ≥1024px (design "OG Marketplace Listing"): page shell, top bar, filter sidebar.
 * Listing pieces (hero, result bar, cards, pager) are in market-v5-list.css. Phone / tablet keep market-v2/v3.
 * Rules are anchored on #mk5 (the .dash-page root) so they win over the older .mkt skins without !important;
 * !important is used only against theme-light.css rules that are themselves !important.
 * Colours are tokens so light mode is its own palette (same paper palette as the v5 homepage). */

@font-face { font-family: 'Satoshi'; src: url('../webfonts/satoshi/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../webfonts/satoshi/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../webfonts/satoshi/satoshi-700.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; }

/*  --mk-fg ink · --mk-bg page · --mk-side sidebar · --mk-s1/s2 hero surface · --mk-c1/c2 card surface
 *  --mk-on text on ink fills · --mk-hl highlight · --mk-tk secondary-text boost · --mk-sh/shk shadows */
/* Dark surfaces stay close to the black page and close to each other (no grey sheen across a card). */
body.mkt-v5 {
    --mk-fg: 255 255 255; --mk-bg: 0 0 0; --mk-side: 8 8 9; --mk-s1: 11 11 12; --mk-s2: 8 8 9;
    --mk-c1: 12 12 13; --mk-c2: 9 9 10; --mk-on: 0 0 0; --mk-hl: 255 255 255; --mk-tk: 1;
    --mk-sh: 0 0 0; --mk-shk: 1; --mk-well: rgb(0 0 0 / 0.35);
    --mk-grad: linear-gradient(180deg, #f4f4f6 0%, #8e8e95 100%);
    --mk-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* --mk-acc / --mk-on-acc: filled actions and the selected tab. Same as ink here; blue in white mode. */
    --mk-acc: 255 255 255; --mk-on-acc: 0 0 0;
}
html[data-theme="light"] body.mkt-v5 {
    --mk-fg: 8 7 6; --mk-bg: 239 237 234; --mk-side: 248 246 244; --mk-s1: 251 250 248; --mk-s2: 244 242 239;
    --mk-c1: 252 251 249; --mk-c2: 245 243 240; --mk-on: 255 255 255; --mk-tk: 1.38; --mk-acc: 29 78 216; --mk-on-acc: 255 255 255;
    --mk-sh: 46 36 22; --mk-shk: 0.26; --mk-well: rgb(255 255 255 / 0.8);
    --mk-grad: linear-gradient(180deg, #080706 0%, #5c5955 100%);
}

/* Desktop-only blocks stay out of the phone / tablet layout. */
.mk5-only, .mk5-card, #mk5 .mk5-ico { display: none; }

@media (min-width: 1024px) {
    /* ---- Page shell: sidebar column + content column (wrappers dissolve into one grid) ---- */
    body.mkt-v5 #navbar, body.mkt-v5 .noise-overlay, body.mkt-v5 .global-vignette { display: none !important; }
    /* style.css gives html + body overflow-x: hidden, which computes body's overflow-y to auto and makes body a
     * scroll container that never scrolls (the viewport does), so the sticky #filterSidebar stuck to body and rode
     * up with the page. clip trims sideways overflow the same way without creating a scroll container. */
    /* --mk5-rail: the filter panel (272px) plus --mk5-gap, the space between the panel and the content. */
    /* --mk5-space: room the floating nav bar takes at the top (a little under --snav-space: content starts closer to it). */
    body.mkt-v5 { --mk5-rail: 288px; --mk5-gap: 16px; --mk5-space: calc(var(--snav-space) - 12px); background: rgb(var(--mk-bg)); overflow-x: clip; }
    /* Pages with the filter column (body.mk5-rail) sit in the site's shared frame (site-width.css) like every other
     * page: filter column + content centred, --page-inner wide, the same edges as the nav bar (140px each side at 1920). */
    #mk5 {
        display: grid; grid-template-columns: var(--mk5-rail) minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start;
        position: relative; z-index: 2; min-height: 100vh; overflow-x: clip; padding-top: var(--mk5-space);
        background: rgb(var(--mk-bg)) !important; color: rgb(var(--mk-fg));
        font-family: Satoshi, 'Noto Sans Arabic', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
    }
    #mk5 .mkt-hero { display: none; }
    #mk5 .mkt-body, #mk5 .mkt-layout { display: contents; }
    /* Solo pages (sold, reviews, support): the site's shared frame (site-width.css), the same edges as the nav bar. */
    #mk5 .mk5-hero, #mk5 .mkt-layout > .flex-1 { grid-column: 2; min-width: 0; margin-inline: max(var(--page-gutter), calc((100% - var(--page-inner)) / 2)); }
    /* Next to the filter column the content keeps a fixed --mk5-gap to it and runs to the frame's far edge. */
    body.mk5-rail #mk5 { grid-template-columns: calc(var(--mk5-rail) - var(--mk5-gap)) minmax(0, 1fr); max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
    body.mk5-rail #mk5 .mk5-hero, body.mk5-rail #mk5 .mkt-layout > .flex-1 { margin-inline: var(--mk5-gap) 0; }
    #mk5 .mk5-hero { grid-row: 2; }
    #mk5 .mkt-layout > .flex-1 { grid-row: 3; padding-bottom: 96px; }
    #mk5 :is(a, button, input, summary):focus-visible { outline: 2px solid rgb(var(--mk-fg) / 0.85) !important; outline-offset: 2px; }

    /* ---- Sidebar (same #filterSidebar the phone uses as a bottom sheet): a panel that starts where the nav bar does
     * (--mk5-gap from the window's edge) and level with the hero card's top edge, and runs to the bottom of the window.
     * Hairline top and side edges with the hero's 24px top corners and the hero's flat surface (market-v5-list.css),
     * so the header needs no colour of its own. Scrolls inside itself when the filters are taller than the window.
     * --mk5-top: the hero's top (#mk5's nav padding + the hero's 8px margin; grid row 1 is empty on desktop). ---- */
    #mk5 #filterSidebar {
        --mk5-top: calc(var(--mk5-space) + 8px);
        grid-column: 1; grid-row: 1 / 4; position: sticky; top: var(--mk5-top); align-self: start; z-index: 3;
        width: calc(var(--mk5-rail) - var(--mk5-gap)); height: calc(100vh - var(--mk5-top)); max-height: none;
        margin: 8px 0 0; padding: 0; transform: none;
        overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent;
        border: 1px solid rgb(var(--mk-fg) / 0.1); border-block-end: 0;
        border-radius: 24px 24px 0 0; box-shadow: none;
        background: linear-gradient(180deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-s2)) 100%);
        color: rgb(var(--mk-fg)) !important;
    }
    /* The nav bar's top-lit edge (site-nav.css) becomes an even hairline here, like every other edge on these pages. */
    body.mkt-v5 .snav__edge, body.mkt-v5 .snav.is-scrolled .snav__edge { background: rgb(var(--sn-fg) / 0.1); }
    /* Rows scrolling up under the floating nav bar fade out before they reach it, instead of showing, cut off,
     * in the gap above it. Only over the content: the filter column starts below the bar. */
    body.mk5-rail .snav::before {
        content: ''; position: absolute; inset-block: 0 -30px; inset-inline: 0; z-index: -1; pointer-events: none; opacity: 0;
        background: linear-gradient(180deg, rgb(var(--mk-bg)) 0%, rgb(var(--mk-bg)) 52%, rgb(var(--mk-bg) / 0) 100%);
        transition: opacity .3s ease;
    }
    body.mk5-rail .snav.is-scrolled::before { opacity: 1; }
    /* Its scrollbar shows only while the pointer is over it (short screens). Its content is the filter panel in market-filter.css. */
    #mk5 #filterSidebar:hover { scrollbar-color: rgb(var(--mk-fg) / 0.14) transparent; }

    /* ---- Sidebar-less pages (#mk5.mk5-solo: sold, product, support, reviews) ---- */
    #mk5.mk5-solo { display: block; padding-bottom: 96px; }
}