/* ── Full-bleed app surface ─────────────────────────────────────────── */
body .main-panel > .footer { display: none !important; }
.main-panel > .content > .page-inner,
#vn-spa-content { padding: 0 !important; }

/* ── Design tokens ──────────────────────────────────────────────────── */
.vai-mkt {
    --vai-mkt-bg: #ffffff;
    --vai-mkt-surface: #ffffff;
    --vai-mkt-surface-2: #f8fafc;
    --vai-mkt-surface-3: #f1f5f9;
    --vai-mkt-border: #e8e8ec;
    --vai-mkt-border-2: #d8d8de;
    --vai-mkt-ink: #18181b;
    --vai-mkt-ink-2: #3f3f46;
    --vai-mkt-muted: #71717a;
    /* Brand green, matching the primary buttons on Skills, Evaluations and
       Team. These pages were the last ones still using near-black in light
       mode and near-white in dark, so a Contact / Order button here looked
       like it belonged to a different product. */
    --vai-mkt-accent: #3d9a6a;
    --vai-mkt-accent-ink: #ffffff;
    --vai-mkt-accent-hover: #2f7a54;
    --vai-mkt-brand: #16a34a;
    --vai-mkt-gold: #d97706;
    --vai-mkt-radius: 14px;
    --vai-mkt-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    --vai-mkt-shadow-2: 0 12px 28px -14px rgba(15, 23, 42, .28);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: var(--vai-mkt-ink);
    background: var(--vai-mkt-bg);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 62px);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
body[data-background-color="dark"] .vai-mkt {
    --vai-mkt-bg: var(--app-dark-bg, #000000);
    --vai-mkt-surface: var(--app-dark-bg, #000000);
    --vai-mkt-surface-2: var(--app-dark-bg, #000000);
    --vai-mkt-surface-3: var(--app-dark-bg, #111111);
    --vai-mkt-border: #26262b;
    --vai-mkt-border-2: #35353c;
    --vai-mkt-ink: #fafafa;
    --vai-mkt-ink-2: #e4e4e7;
    --vai-mkt-muted: #a1a1aa;
    /* Same green in dark mode. It used to invert to near-white here, which is
       why the button changed identity with the theme. */
    --vai-mkt-accent: #3d9a6a;
    --vai-mkt-accent-ink: #ffffff;
    --vai-mkt-accent-hover: #48ab78;
    --vai-mkt-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --vai-mkt-shadow-2: 0 12px 28px -14px rgba(0, 0, 0, .8);
}
.vai-mkt *, .vai-mkt *::before, .vai-mkt *::after { box-sizing: border-box; }
.vai-mkt [hidden] { display: none !important; }
.vai-mkt button { font-family: inherit; }

/* ── Topbar ─────────────────────────────────────────────────────────── */
.vai-mkt__topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px 12px;
    border-bottom: 1px solid var(--vai-mkt-border);
    background: var(--vai-mkt-bg);
}
.vai-mkt__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.vai-mkt__count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vai-mkt-muted);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--vai-mkt-surface-3);
    white-space: nowrap;
}
.vai-mkt__spacer { flex: 1 1 auto; min-width: 4px; }

.vai-mkt__nav { display: none; }

/* Search */
.vai-mkt__search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(340px, 34vw);
}
.vai-mkt__search svg {
    position: absolute;
    left: 11px;
    width: 15px;
    height: 15px;
    color: var(--vai-mkt-muted);
    pointer-events: none;
}
.vai-mkt__search-input {
    width: 100%;
    height: 36px;
    padding: 0 30px 0 33px;
    border: 1px solid var(--vai-mkt-border);
    border-radius: 10px;
    background: var(--vai-mkt-surface-2);
    color: var(--vai-mkt-ink);
    font-size: 13.5px;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.vai-mkt__search-input:focus {
    border-color: var(--vai-mkt-border-2);
    background: var(--vai-mkt-surface);
}
.vai-mkt__search-clear {
    position: absolute;
    right: 7px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--vai-mkt-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.vai-mkt__search-clear:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }

/* Sort dropdown */
.vai-mkt__sort { position: relative; }
.vai-mkt__sort-btn,
.vai-mkt__external,
.vai-mkt__views-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    border: 1px solid var(--vai-mkt-border);
    border-radius: 10px;
    background: var(--vai-mkt-surface);
    color: var(--vai-mkt-ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
}
.vai-mkt__sort-btn { padding: 0 11px; white-space: nowrap; }
.vai-mkt__sort-btn:hover,
.vai-mkt__external:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }
.vai-mkt__sort-chevron { width: 13px; height: 13px; transition: transform .15s ease; }
.vai-mkt__sort.is-open .vai-mkt__sort-chevron { transform: rotate(180deg); }
.vai-mkt__sort-menu {
    position: absolute;
    top: 42px;
    right: 0;
    min-width: 186px;
    padding: 5px;
    border: 1px solid var(--vai-mkt-border);
    border-radius: 12px;
    background: var(--vai-mkt-surface);
    box-shadow: var(--vai-mkt-shadow-2);
    z-index: 20;
    display: none;
}
.vai-mkt__sort.is-open .vai-mkt__sort-menu { display: block; }
.vai-mkt__sort-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--vai-mkt-ink-2);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.vai-mkt__sort-item:hover { background: var(--vai-mkt-surface-3); }
.vai-mkt__sort-item.is-active { color: var(--vai-mkt-ink); font-weight: 600; }
.vai-mkt__sort-item.is-active::after { content: '✓'; font-size: 12px; }

/* Grid / list toggle */
.vai-mkt__views { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--vai-mkt-border); border-radius: 10px; background: var(--vai-mkt-surface-2); }
.vai-mkt__views-btn { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; padding: 0; }
.vai-mkt__views-btn svg { width: 15px; height: 15px; }
.vai-mkt__views-btn.is-active { background: var(--vai-mkt-surface); color: var(--vai-mkt-ink); box-shadow: var(--vai-mkt-shadow); }

.vai-mkt__external { width: 36px; padding: 0; }
.vai-mkt__external svg { width: 15px; height: 15px; }

/* Catalog create CTA — quiet outline, sits with search/sort on the right. */
.vai-mkt-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.vai-mkt-create {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px; flex: none;
    border: 1px solid var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink);
    font-size: 13px; font-weight: 600; white-space: nowrap;
    font-family: inherit; text-decoration: none;
}
.vai-mkt-create:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }
/* One filled action per surface. "Offer a service" is what this page wants a
   visitor to do, so it takes the accent and the buttons beside it stay
   outlines — two filled buttons side by side are just two buttons. */
.vai-mkt-create--primary {
    border-color: var(--vai-mkt-accent);
    background: var(--vai-mkt-accent);
    color: var(--vai-mkt-accent-ink);
}
.vai-mkt-create--primary:hover {
    border-color: var(--vai-mkt-accent-hover);
    background: var(--vai-mkt-accent-hover);
    color: var(--vai-mkt-accent-ink);
}
.vai-mkt-create svg { width: 14px; height: 14px; flex: none; }
.vai-mkt-create__short { display: none; }
@media (max-width: 720px) {
    .vai-mkt-create__full { display: none; }
    .vai-mkt-create__short { display: inline; }
}

/* The one control that opens a catalogue's filter dialog, and the
   link that clears what it set. Both catalogues use them. */
.vai-mkt-fbtn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px;
    border: 1px solid var(--vai-mkt-border); border-radius: 9px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink-2);
    font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vai-mkt-fbtn:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }
.vai-mkt-fbtn svg { width: 12px; height: 12px; opacity: .65; }
.vai-mkt-fbtn.is-on { background: var(--vai-mkt-surface-3); border-color: var(--vai-mkt-border-2); color: var(--vai-mkt-ink); }
.vai-mkt-fbtn.is-open { border-color: var(--vai-mkt-border-2); }
.vai-mkt-fclear {
    border: 0; background: none; padding: 0 2px;
    color: var(--vai-mkt-muted); font-size: 12.5px; font-weight: 600;
    cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.vai-mkt-fclear:hover { color: var(--vai-mkt-ink); }

/* ── Filter dialog ───────────────────────────────────────────────────
   Five dropdowns crowded the bar and were the first thing to fall off a
   narrow screen, so every filter now lives in one dialog: pick what you
   want, apply once. It mounts inside .vai-mkt, so the design tokens (and
   dark mode with them) apply without a single literal colour. */
.vai-mkt-fbtn__count {
    display: inline-grid; place-items: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink);
    font-size: 11px; font-weight: 700;
}
.vai-mkt-dlg {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.vai-mkt-dlg__scrim {
    position: absolute; inset: 0; background: rgba(9, 12, 16, .55);
    opacity: 0; transition: opacity .2s ease;
}
.vai-mkt-dlg.is-in .vai-mkt-dlg__scrim { opacity: 1; }
.vai-mkt-dlg__panel {
    position: relative; z-index: 1;
    width: min(760px, 100%); max-height: min(88vh, 760px);
    display: flex; flex-direction: column;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink);
    border: 1px solid var(--vai-mkt-border); border-radius: 16px;
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .5); overflow: hidden;
    /* Drops in from above the fold, a beat after the scrim has dimmed the
       page — so the eye is already on the dialog when it lands. The curve
       overshoots slightly and settles. */
    opacity: 0; transform: translateY(-34px) scale(.985);
    transition:
        opacity .22s ease .06s,
        transform .42s cubic-bezier(.18, .89, .3, 1.06) .06s;
}
.vai-mkt-dlg.is-in .vai-mkt-dlg__panel { opacity: 1; transform: none; }
/* Dark theme: the dialog is grey, not the page's black — on a black page a
   black panel only reads by its border. Re-pointing the tokens here greys
   every surface inside it (pills, segments, inputs) in one go. */
body[data-background-color="dark"] .vai-mkt-dlg {
    --vai-mkt-surface: #2f3237;
    --vai-mkt-surface-2: #26292d;
    --vai-mkt-surface-3: #3a3e44;
    --vai-mkt-border: #41454b;
    --vai-mkt-border-2: #4b5058;
}
body[data-background-color="dark"] .vai-mkt-dlg__panel {
    background: linear-gradient(180deg, #34373c 0%, #2c2f34 100%);
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06);
}
body[data-background-color="dark"] .vai-mkt-dlg__foot { background: rgba(0, 0, 0, .14); }
.vai-mkt-dlg__head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--vai-mkt-border);
}
.vai-mkt-dlg__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.vai-mkt-dlg__x {
    margin-left: auto; width: 32px; height: 32px;
    display: grid; place-items: center;
    border: 1px solid var(--vai-mkt-border); border-radius: 9px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink-2);
    font-size: 17px; line-height: 1; cursor: pointer;
}
.vai-mkt-dlg__x:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }
.vai-mkt-dlg__body {
    padding: 0; overflow-y: auto;
    display: flex; flex-direction: column;
}
/* Each section keeps its own padding, so the rule between two of them can
   run the full width of the panel instead of floating inside a margin. */
.vai-mkt-dlg-field { display: flex; flex-direction: column; gap: 10px; padding: 15px 18px; }
.vai-mkt-dlg-field + .vai-mkt-dlg-field { border-top: 1px solid var(--vai-mkt-border); }
.vai-mkt-dlg-field[hidden] { display: none; }
.vai-mkt-dlg-field__lbl {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--vai-mkt-muted);
}
.vai-mkt-dlg-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.vai-mkt-dlg-pill {
    height: 34px; padding: 0 14px;
    border: 1px solid var(--vai-mkt-border); border-radius: 999px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink-2);
    font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vai-mkt-dlg-pill:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }
.vai-mkt-dlg-pill.is-active {
    background: var(--vai-mkt-accent); border-color: var(--vai-mkt-accent);
    color: var(--vai-mkt-accent-ink);
}
/* A short, exclusive choice — sort order, for sale vs to rent — reads
   faster as one segmented control than as a scatter of pills. */
.vai-mkt-dlg-seg {
    align-self: flex-start;
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
    border: 1px solid var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface-2); max-width: 100%;
}
.vai-mkt-dlg-seg button {
    border: 0; background: transparent; color: var(--vai-mkt-muted);
    font: inherit; font-size: 12.5px; font-weight: 600;
    padding: 6px 12px; border-radius: 8px; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.vai-mkt-dlg-seg button:hover { color: var(--vai-mkt-ink); }
.vai-mkt-dlg-seg button.is-active {
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* Long lists — twenty-odd categories — are rows with a tick and, where the
   feed knows it, how many listings sit behind each one. */
.vai-mkt-dlg-rows { display: flex; flex-direction: column; }
.vai-mkt-dlg-rows.is-cols { display: block; columns: 2; column-gap: 16px; }
.vai-mkt-dlg-rows.is-cols .vai-mkt-dlg-row { break-inside: avoid; }
.vai-mkt-dlg-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: 9px; background: transparent;
    color: var(--vai-mkt-ink-2); font: inherit; font-size: 13px;
    text-align: left; cursor: pointer;
}
.vai-mkt-dlg-row:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }
.vai-mkt-dlg-row.is-active { color: var(--vai-mkt-ink); font-weight: 650; }
.vai-mkt-dlg-row__tick {
    flex: 0 0 auto; width: 16px; height: 16px;
    display: grid; place-items: center;
    border: 1px solid var(--vai-mkt-border-2); border-radius: 5px;
    font-size: 10px; line-height: 1; color: transparent;
}
.vai-mkt-dlg-row.is-active .vai-mkt-dlg-row__tick {
    background: var(--vai-mkt-accent); border-color: var(--vai-mkt-accent);
    color: var(--vai-mkt-accent-ink);
}
.vai-mkt-dlg-row__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vai-mkt-dlg-row__n {
    margin-left: auto; padding-left: 8px;
    font-size: 11.5px; font-weight: 500; color: var(--vai-mkt-muted);
    font-variant-numeric: tabular-nums;
}
.vai-mkt-dlg-find {
    display: flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 12px;
    border: 1px solid var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface-2); color: var(--vai-mkt-muted);
}
.vai-mkt-dlg-find:focus-within { border-color: var(--vai-mkt-accent); }
.vai-mkt-dlg-find svg { width: 14px; height: 14px; flex: none; }
.vai-mkt-dlg-find input {
    flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
    color: var(--vai-mkt-ink); font: inherit; font-size: 12.5px; outline: none;
}
.vai-mkt-dlg-find input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }
.vai-mkt-dlg-empty { padding: 8px 10px; font-size: 12.5px; color: var(--vai-mkt-muted); }

.vai-mkt-dlg-range { display: flex; align-items: center; gap: 9px; }
.vai-mkt-dlg-range input {
    flex: 1 1 0; min-width: 0; height: 38px; padding: 0 12px;
    border: 1px solid var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface-2); color: var(--vai-mkt-ink);
    font-family: inherit; font-size: 13px;
}
.vai-mkt-dlg-range input:focus { outline: none; border-color: var(--vai-mkt-accent); }
.vai-mkt-dlg-range span { color: var(--vai-mkt-muted); }
.vai-mkt-dlg__foot {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-top: 1px solid var(--vai-mkt-border);
}
.vai-mkt-dlg__go {
    margin-left: auto; height: 40px; padding: 0 22px;
    border: 0; border-radius: 999px;
    background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink);
    font-family: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
}
.vai-mkt-dlg__go:hover { filter: brightness(1.06); }
@media (max-width: 560px) {
    .vai-mkt-dlg-rows.is-cols { columns: 1; }
    .vai-mkt-dlg { padding: 0; align-items: flex-end; }
    .vai-mkt-dlg__panel {
        width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0;
        transform: translateY(100%);   /* a sheet rises from its own edge */
        transition:
            opacity .22s ease .04s,
            transform .34s cubic-bezier(.2, .85, .3, 1) .04s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vai-mkt-dlg__scrim,
    .vai-mkt-dlg__panel { transition: none; }
}

/* ── Filter row: segmented control + category chips ─────────────────── */
.vai-mkt__filters {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 24px;
    border-bottom: 1px solid var(--vai-mkt-border);
    background: var(--vai-mkt-bg);   /* opaque: the list scrolls under it */
    overflow: hidden;
}
.vai-mkt__seg { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; border: 1px solid var(--vai-mkt-border); border-radius: 10px; background: var(--vai-mkt-surface-2); }
.vai-mkt__seg-btn {
    padding: 5px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--vai-mkt-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.vai-mkt__seg-btn.is-active { background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink); }

.vai-mkt__chips {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
}
.vai-mkt__chips::-webkit-scrollbar { display: none; }
.vai-mkt__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--vai-mkt-border);
    border-radius: 999px;
    background: var(--vai-mkt-surface);
    color: var(--vai-mkt-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vai-mkt__chip:hover { background: var(--vai-mkt-surface-3); }
.vai-mkt__chip.is-active { background: var(--vai-mkt-accent); border-color: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink); }
.vai-mkt__chip-count { font-size: 10.5px; font-weight: 700; opacity: .6; }

/* ── Category mega-menu (Fiverr-style, opt-in per chip via c.groups) ────
   #vaiMktChips scrolls horizontally (overflow-x:auto, which clips BOTH
   axes) so a chip-relative position:absolute panel would be clipped the
   moment it dropped below the row. Instead there is one shared panel,
   appended to <body> and positioned in JS from the hovered chip's
   getBoundingClientRect() — same escape-the-scroller approach as the
   built-in browser mega-menu (shared_assets/js/volnyn-header.js), just
   local to this page instead of loaded globally.

   It lives OUTSIDE .vai-mkt (that's the whole point — .vai-mkt itself has
   overflow:hidden, so appending inside it would clip the panel right back).
   That also means it can't read --vai-mkt-* — those custom properties are
   scoped to .vai-mkt and its descendants, so the panel silently painted
   with no background/border/text color at all (transparent, showing
   whatever was behind it) the first time this shipped. Given its own
   token set here instead, mirroring .vai-mkt's light/dark values. */
#vaiMktChipMenu {
    /* Fiverr's layout (picked by the owner 2026-10-12 over the grey panel of
       pills): a white sheet, the category's name and "Browse all" on top,
       then one column per group with the services as plain links. */
    --cm-surface: #ffffff;
    --cm-border: #e4e4e7;
    --cm-ink: #18181b;
    --cm-ink-2: #4b4b52;
    --cm-mute: #71717a;
    --cm-accent: #2f8a57;
    --cm-rule: #efeff1;
    --cm-shadow: 0 22px 50px -12px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .06);
}
body[data-background-color="dark"] #vaiMktChipMenu {
    /* Lifted off the black page, so the panel reads as a surface of its own. */
    --cm-surface: #23272d;
    --cm-border: #3a4049;
    --cm-ink: #ffffff;
    --cm-ink-2: #cfd5d4;
    --cm-mute: #9aa3a2;
    --cm-accent: #7fcda0;
    --cm-rule: #343a42;
    --cm-shadow: 0 22px 52px -14px rgba(0, 0, 0, .92);
}
.vai-mkt__chip.has-menu { padding-right: 8px; }
.vai-mkt__chip-caret { width: 11px; height: 11px; opacity: .55; transition: transform .15s ease; }
.vai-mkt__chip.has-menu:hover .vai-mkt__chip-caret,
.vai-mkt__chip.has-menu.is-menu-open .vai-mkt__chip-caret { transform: rotate(180deg); }
#vaiMktChipMenu {
    position: fixed;
    z-index: 200;
    display: none;
    padding: 0;
    border: 1px solid var(--cm-border);
    border-radius: 14px;
    background: var(--cm-surface);
    box-shadow: var(--cm-shadow);
    /* One column per group, up to four (JS sets --cm-cols); a category with
       two groups opens narrower than one with four. */
    width: min(calc(var(--cm-cols, 4) * 210px + 48px), calc(100vw - 32px));
    max-height: min(72vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--cm-border) transparent;
}
#vaiMktChipMenu.is-open { display: block; }
.vai-mkt__chipmenu-head {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: baseline; gap: 8px;
    padding: 15px 22px 13px;
    border-bottom: 1px solid var(--cm-rule);
    background: var(--cm-surface);
}
.vai-mkt__chipmenu-title { font-size: 15px; font-weight: 700; color: var(--cm-ink); }
.vai-mkt__chipmenu-meta { font-size: 12.5px; color: var(--cm-mute); }
.vai-mkt__chipmenu-all {
    margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap;
    color: var(--cm-accent); font-size: 13.5px; font-weight: 600;
}
.vai-mkt__chipmenu-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.vai-mkt__chipmenu-cols {
    display: grid; grid-template-columns: repeat(var(--cm-cols, 4), minmax(0, 1fr));
    gap: 18px 26px; padding: 16px 22px 20px;
}
.vai-mkt__chipmenu-col { min-width: 0; }
.vai-mkt__chipmenu-heading { margin: 0 0 6px; font-size: 13.5px; font-weight: 650; color: var(--cm-ink); }
.vai-mkt__chipmenu-list { list-style: none; margin: 0; padding: 0; }
/* typography.css spaces a list with `li + li { margin-top }`; the links carry
   their own padding. */
.vai-mkt__chipmenu-list > li { margin: 0; padding: 0; }
.vai-mkt__chipmenu-item {
    display: block; width: 100%; padding: 5px 0; border: 0; background: none; cursor: pointer;
    /* 14px: the dashboard renders at 90% zoom, so this lands near 12.6 real pixels. */
    text-align: left; font-size: 14px; line-height: 1.35; color: var(--cm-ink-2);
    /* A long name ("Generative Engine Optimization (GEO)") wraps inside its column. */
    overflow-wrap: anywhere;
}
.vai-mkt__chipmenu-item:hover { color: var(--cm-accent); text-decoration: underline; text-underline-offset: 3px; }
.vai-mkt__chipmenu-item.is-active { color: var(--cm-accent); font-weight: 600; }
.vai-mkt__chipmenu-item:focus-visible,
.vai-mkt__chipmenu-all:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px; border-radius: 4px; }

/* ── Category browse rail (opt-in per page) ─────────────────────────────
   A marketplace's categories deserve more than a text chip — this is the
   horizontally scrolling card row you see on Fiverr, using each category's
   own artwork. It sits above the grid while nothing is filtered and steps
   aside once the user picks one, so the results get the full height. */
.vai-mkt__rail { flex: 0 0 auto; padding: 16px 24px 4px; border-bottom: 1px solid var(--vai-mkt-border); }
.vai-mkt__body.has-detail ~ .vai-mkt__rail,
.vai-mkt.is-detail .vai-mkt__rail { display: none; }
.vai-mkt__rail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.vai-mkt__rail-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.vai-mkt__rail-nav { margin-left: auto; display: inline-flex; gap: 6px; }
.vai-mkt__rail-btn {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--vai-mkt-border); border-radius: 50%;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink-2); cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}
.vai-mkt__rail-btn svg { width: 14px; height: 14px; }
.vai-mkt__rail-btn:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }
.vai-mkt__rail-btn[disabled] { opacity: .3; cursor: default; }
.vai-mkt__rail-track {
    display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; padding-bottom: 14px;
}
.vai-mkt__rail-track::-webkit-scrollbar { display: none; }

.vai-mkt-cat {
    flex: 0 0 178px; width: 178px;
    display: flex; flex-direction: column; gap: 10px;
    padding: 13px 13px 13px;
    border: 0; border-radius: var(--vai-mkt-radius);
    background: #14342a;   /* deep green card, same idea as the reference */
    color: #fff; cursor: pointer; text-align: left;
    transition: transform .16s ease, box-shadow .16s ease;
}
.vai-mkt-cat:hover { transform: translateY(-2px); box-shadow: var(--vai-mkt-shadow-2); }
.vai-mkt-cat:focus-visible { outline: 2px solid var(--vai-mkt-brand); outline-offset: 2px; }
.vai-mkt-cat.is-active { box-shadow: 0 0 0 2px var(--vai-mkt-brand); }
.vai-mkt-cat__name {
    font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; min-height: 36px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vai-mkt-cat__art {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    border-radius: 10px; overflow: hidden; background: #0f2b22;
}
.vai-mkt-cat__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vai-mkt-cat__ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1d4a3a, #0f2b22);
    color: rgba(255,255,255,.5); font-size: 30px; font-weight: 800;
}
.vai-mkt-cat__count { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.55); }

@media (max-width: 991px) {
    .vai-mkt__rail { padding: 13px 16px 2px; }
    .vai-mkt-cat { flex-basis: 148px; width: 148px; }
}

/* ── Body: list + detail ────────────────────────────────────────────── */
.vai-mkt__body { flex: 1 1 auto; min-height: 0; display: flex; }
.vai-mkt__list {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 24px 60px;
    scrollbar-width: thin;
}
.vai-mkt__list::-webkit-scrollbar { width: 9px; }
.vai-mkt__list::-webkit-scrollbar-thumb { background: var(--vai-mkt-border-2); border-radius: 9px; border: 3px solid transparent; background-clip: content-box; }

/* Optional panel above the grid — a page claims it with h.panel() and owns
   the contents (Property fills it with the location map). It scrolls with the
   list, so it steps aside with the list when a detail opens. */
.vai-mkt__panel {
    margin-bottom: 18px;
    border: 1px solid var(--vai-mkt-border);
    border-radius: var(--vai-mkt-radius);
    background: var(--vai-mkt-surface-2);
    overflow: hidden;
}

.vai-mkt__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 18px;
}
.vai-mkt__grid.is-list-view { grid-template-columns: 1fr; gap: 0; }

/* ── Mosaic — the hub's default landing state ────────────────────────
   auto-fill gives all 40,421 games the same box, which says every one of
   them is worth the same and leaves nothing recommended. On the DEFAULT
   view only (no search, no category, sort still `popular`) the top game
   takes a 3x2 tile and everything else stays 1x1.

   TWO tiers, not five: with six columns the hero fills cols 1-3 of rows
   1-2 and the next six tiles fill cols 4-6 of those same rows, so the
   block closes flush and #8 onward continue in plain rows. More sizes
   than this stopped reading as an editor's pick and started reading as
   noise.

   Nothing can overflow a row any more: the tile is art only, and its
   caption is absolutely positioned and hover-gated. Any filter turns the
   whole thing off -- once someone has asked for something specific the
   results really are equivalent. */
.vai-mkt__grid.is-mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 168px;
    gap: 14px;
}
.vai-mkt__grid.is-mosaic > .vai-mkt-card {
    grid-column: span 1; grid-row: span 1;
    aspect-ratio: auto;              /* the row height rules here */
}
.vai-mkt__grid.is-mosaic > .vai-mkt-card:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.vai-mkt__grid.is-mosaic > .vai-mkt-card:nth-child(1) .vai-mkt-card__title { font-size: 19px; }
.vai-mkt__grid.is-mosaic > .vai-mkt-card:nth-child(1) .vai-mkt-card__body { padding: 40px 18px 16px; }

@media (max-width: 1180px) {
    .vai-mkt__grid.is-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
    .vai-mkt__grid.is-mosaic > .vai-mkt-card:nth-child(1) { grid-column: span 2; }
}
@media (max-width: 620px) {
    .vai-mkt__grid.is-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 124px; }
    .vai-mkt__grid.is-mosaic > .vai-mkt-card:nth-child(1) { grid-column: span 2; }
    .vai-mkt__grid.is-mosaic > .vai-mkt-card:nth-child(1) .vai-mkt-card__title { font-size: 15px; }
}


/* Opening an item is a PAGE SWAP, not a split view: the grid steps aside and
   the detail owns the whole content area. The list's scroll position is kept
   and restored on Back. */
.vai-mkt__body.has-detail .vai-mkt__list { display: none; }
.vai-mkt.is-detail .vai-mkt__search,
.vai-mkt.is-detail .vai-mkt__sort,
.vai-mkt.is-detail .vai-mkt__views,
.vai-mkt.is-detail .vai-mkt__count,
.vai-mkt.is-detail .vai-mkt__filters { display: none !important; }

/* ── Card ───────────────────────────────────────────────────────────── */
.vai-mkt-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vai-mkt-border);
    border-radius: var(--vai-mkt-radius);
    background: var(--vai-mkt-surface);
    overflow: hidden;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.vai-mkt-card:hover { transform: translateY(-2px); box-shadow: var(--vai-mkt-shadow-2); border-color: var(--vai-mkt-border-2); }
.vai-mkt-card:focus-visible { outline: 2px solid var(--vai-mkt-brand); outline-offset: 2px; }
.vai-mkt-card.is-active { border-color: var(--vai-mkt-accent); box-shadow: 0 0 0 1px var(--vai-mkt-accent); }

.vai-mkt-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--vai-mkt-surface-3);
    overflow: hidden;
}
.vai-mkt-card--game .vai-mkt-card__media,
.vai-mkt-card--template .vai-mkt-card__media { aspect-ratio: 16 / 10; }
.vai-mkt-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.vai-mkt-card:hover .vai-mkt-card__img { transform: scale(1.04); }
.vai-mkt-card__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--vai-mkt-surface-3), var(--vai-mkt-surface-2));
    color: var(--vai-mkt-muted);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.vai-mkt-card__badge, .vai-mkt-card__badge--alt {
    position: absolute;
    top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(9, 9, 11, .78);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    backdrop-filter: blur(4px);
}
.vai-mkt-card__badge { left: 8px; }
.vai-mkt-card__badge--alt { right: 8px; background: var(--vai-mkt-gold); }
.vai-mkt-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 9, 11, .32);
    opacity: 0;
    transition: opacity .18s ease;
}
.vai-mkt-card:hover .vai-mkt-card__play { opacity: 1; }
.vai-mkt-card__play span {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #09090b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vai-mkt-card__play svg { width: 17px; height: 17px; margin-left: 2px; }

.vai-mkt-card__body { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px 12px; flex: 1 1 auto; }
.vai-mkt-card__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vai-mkt-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vai-mkt-card__sub { font-size: 12px; color: var(--vai-mkt-muted); display: flex; align-items: center; gap: 6px; min-width: 0; }
.vai-mkt-card__sub-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Inline glyphs in the sub-line (the property pin) carry no intrinsic size —
   without this they stretch to the flex line and swallow the card. */
.vai-mkt-card__sub svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .8; }
.vai-mkt-card__avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--vai-mkt-surface-3); }
.vai-mkt-card__pill { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: var(--vai-mkt-surface-3); color: var(--vai-mkt-muted); font-size: 10.5px; font-weight: 700; }
.vai-mkt-card__meta { display: flex; align-items: center; gap: 11px; font-size: 11.5px; color: var(--vai-mkt-muted); }
.vai-mkt-card__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.vai-mkt-card__meta-item svg { width: 12px; height: 12px; opacity: .8; }
.vai-mkt-card__foot { display: flex; align-items: baseline; gap: 7px; margin-top: auto; padding-top: 4px; }
.vai-mkt-card__price { font-size: 14.5px; font-weight: 700; color: var(--vai-mkt-ink); }
.vai-mkt-card__price-note { font-size: 11px; font-weight: 500; color: var(--vai-mkt-muted); }
.vai-mkt-card__price-old { font-size: 11.5px; color: var(--vai-mkt-muted); text-decoration: line-through; }

/* List view — same cards, divided rows */
.vai-mkt__grid.is-list-view .vai-mkt-card {
    flex-direction: row;
    align-items: stretch;
    border: 0;
    border-bottom: 1px solid var(--vai-mkt-border);
    border-radius: 0;
    background: transparent;
    padding: 12px 4px;
    gap: 14px;
}
.vai-mkt__grid.is-list-view .vai-mkt-card:hover { transform: none; box-shadow: none; background: var(--vai-mkt-surface-2); }
.vai-mkt__grid.is-list-view .vai-mkt-card.is-active { background: var(--vai-mkt-surface-2); box-shadow: none; border-color: var(--vai-mkt-border); }
.vai-mkt__grid.is-list-view .vai-mkt-card__media { flex: 0 0 148px; width: 148px; aspect-ratio: 4 / 3; border-radius: 10px; }
.vai-mkt__grid.is-list-view .vai-mkt-card__body { padding: 2px 0; }
.vai-mkt__grid.is-list-view .vai-mkt-card__title { -webkit-line-clamp: 1; font-size: 14px; }

/* ── Skeleton / state ───────────────────────────────────────────────── */
.vai-mkt__skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
.vai-mkt__skeleton-tile { border: 1px solid var(--vai-mkt-border); border-radius: var(--vai-mkt-radius); overflow: hidden; background: var(--vai-mkt-surface); }
.vai-mkt__skeleton-tile i { display: block; background: var(--vai-mkt-surface-3); animation: vaiMktPulse 1.4s ease-in-out infinite; }
.vai-mkt__skeleton-tile i:nth-child(1) { aspect-ratio: 4 / 3; }
.vai-mkt__skeleton-tile i:nth-child(2) { height: 11px; margin: 12px 12px 0; border-radius: 5px; }
.vai-mkt__skeleton-tile i:nth-child(3) { height: 11px; margin: 8px 40% 14px 12px; border-radius: 5px; }
@keyframes vaiMktPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.vai-mkt__more { display: flex; justify-content: center; padding: 22px 0 4px; font-size: 12.5px; color: var(--vai-mkt-muted); }
.vai-mkt__sentinel { height: 1px; }

.vai-mkt__state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 16px; text-align: center; }
.vai-mkt__state-icon { color: var(--vai-mkt-muted); opacity: .55; }
.vai-mkt__state-icon svg { width: 38px; height: 38px; }
.vai-mkt__state-title { margin: 4px 0 0; font-size: 15px; font-weight: 650; color: var(--vai-mkt-ink); }
.vai-mkt__state-text { margin: 0; font-size: 13px; color: var(--vai-mkt-muted); max-width: 400px; }
.vai-mkt__state-btn {
    margin-top: 8px;
    padding: 8px 16px;
    border: 1px solid var(--vai-mkt-border);
    border-radius: 10px;
    background: var(--vai-mkt-surface);
    color: var(--vai-mkt-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.vai-mkt__state-btn:hover { background: var(--vai-mkt-surface-3); }

/* ── Detail page ────────────────────────────────────────────────────── */
.vai-mkt__detail {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--vai-mkt-bg);
}
.vai-mkt__detail-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--vai-mkt-border);
}
/* The head carries the title only: leaving a detail is the browser's Back
   button (openDetail pushes a real history entry for it), and the hand-off
   link a page wants lives in the footer CTA row. */
.vai-mkt__detail-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vai-mkt__detail-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.vai-mkt__detail-actions[hidden] { display: none !important; }
.vai-mkt__detail-actions .vai-mkt-d__cta {
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 8px;
    gap: 5px;
}
.vai-mkt__detail-actions .vai-mkt-d__cta svg { width: 12px; height: 12px; }
.vai-mkt__detail-close { display: none; }
/* The head is a title plus a close button that is never shown. When the body
   renders its own <h1> the title hides (see openDetail), leaving an empty strip
   whose border stacks directly under the topbar's — two rules with a sliver of
   padding between them. Collapse the whole bar in that case. `display:flex` on
   the class would otherwise beat the UA's [hidden] rule. */
.vai-mkt__detail-head[hidden] { display: none; }
.vai-mkt__detail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 64px; scrollbar-width: thin; }
.vai-mkt__detail-body::-webkit-scrollbar { width: 9px; }
.vai-mkt__detail-body::-webkit-scrollbar-thumb { background: var(--vai-mkt-border-2); border-radius: 9px; border: 3px solid transparent; background-clip: content-box; }
/* Full-bleed page, readable measure: the content sits in a centred band. */
.vai-mkt__detail-inner { max-width: 1080px; margin: 0 auto; }
.vai-mkt__detail-foot { flex: 0 0 auto; padding: 12px 24px; border-top: 1px solid var(--vai-mkt-border); background: var(--vai-mkt-surface); }
.vai-mkt__detail-foot-inner { max-width: 1080px; margin: 0 auto; display: flex; justify-content: flex-end; gap: 8px; }

/* ── Detail building blocks (shared vocabulary) ─────────────────────── */
.vai-mkt-d__hero { width: 100%; aspect-ratio: 16 / 10; max-height: 460px; border-radius: 14px; object-fit: cover; background: var(--vai-mkt-surface-3); display: block; }
.vai-mkt-d__gallery { display: flex; gap: 7px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.vai-mkt-d__gallery::-webkit-scrollbar { display: none; }
.vai-mkt-d__gallery-thumb { flex: 0 0 64px; width: 64px; height: 48px; border-radius: 8px; object-fit: cover; cursor: pointer; border: 2px solid transparent; background: var(--vai-mkt-surface-3); }
.vai-mkt-d__gallery-thumb.is-active { border-color: var(--vai-mkt-accent); }

.vai-mkt-d__frame { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #09090b; border: 1px solid var(--vai-mkt-border); margin: 0 auto; transition: max-width .22s ease; }
.vai-mkt-d__frame--16x9 { aspect-ratio: 16 / 9; }
.vai-mkt-d__frame--fill { height: min(68vh, 680px); }
.vai-mkt-d__frame--desktop { max-width: 100%; }
.vai-mkt-d__frame--tablet { max-width: 768px; }
.vai-mkt-d__frame--mobile { max-width: 390px; }
.vai-mkt-d__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--vai-mkt-surface-2, #09090b); }
.vai-mkt-d__frame--fill iframe, .vai-mkt-d__frame--16x9 iframe { position: absolute; }
.vai-mkt-d__frame-note {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
    background: var(--vai-mkt-surface-2);
    color: var(--vai-mkt-muted);
    font-size: 13px;
    z-index: 2;
}

.vai-mkt-d__devices { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--vai-mkt-border); border-radius: 10px; background: var(--vai-mkt-surface-2); }
.vai-mkt-d__device { padding: 4px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--vai-mkt-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.vai-mkt-d__device.is-active { background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink); }

.vai-mkt-d__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }
.vai-mkt-d__h { margin: 18px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vai-mkt-muted); }
.vai-mkt-d__name { margin: 14px 0 4px; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.vai-mkt-d__price { font-size: 21px; font-weight: 750; letter-spacing: -.02em; }
.vai-mkt-d__price-note { font-size: 12.5px; font-weight: 500; color: var(--vai-mkt-muted); }
.vai-mkt-d__p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--vai-mkt-ink-2); white-space: pre-line; }
/* While a detail loads (option C of the loader review, 2026-10-15): a thin
   green line runs along the foot of the detail bar, and a ring sits in the
   middle of the panel with the item's name under it — not a lone
   "Loading…" in the corner. The class is is-opening, not is-loading: a
   global rule dims every child of an .is-loading to 20% and adds its own
   spinner. */
.vai-mkt__detail.is-opening .vai-mkt__detail-head { position: relative; }
.vai-mkt__detail.is-opening .vai-mkt__detail-head::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--vai-mkt-accent) 30%, var(--vai-mkt-accent) 70%, transparent) -60% 0 / 36% 100% no-repeat,
                rgba(61, 154, 106, .14);
    animation: vaiMktLine 1.3s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes vaiMktLine { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }
.vai-mkt-load {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    min-height: 52vh; padding: 0 16px; text-align: center;
}
.vai-mkt-load__ring {
    width: 34px; height: 34px; border-radius: 50%; box-sizing: border-box;
    border: 3px solid rgba(61, 154, 106, .18); border-top-color: var(--vai-mkt-accent);
    animation: vaiMktSpin .8s linear infinite;
}
@keyframes vaiMktSpin { to { transform: rotate(360deg); } }
.vai-mkt-load__t { margin-top: 2px; max-width: 520px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--vai-mkt-ink); overflow-wrap: anywhere; }
.vai-mkt-load__s { font-size: 13px; line-height: 1.4; color: var(--vai-mkt-muted); }
@media (prefers-reduced-motion: reduce) {
    .vai-mkt-load__ring { animation-duration: 2s; }
    .vai-mkt__detail.is-opening .vai-mkt__detail-head::after { animation-duration: 3s; }
}
.vai-mkt-d__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vai-mkt-d__tag { padding: 3px 9px; border-radius: 999px; background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink-2); font-size: 11.5px; font-weight: 600; }

.vai-mkt-d__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.vai-mkt-d__fact { padding: 13px 14px; border-radius: 12px; background: var(--vai-mkt-surface-2); border: 1px solid var(--vai-mkt-border); }
.vai-mkt-d__fact-v { font-size: 14px; font-weight: 700; line-height: 1.4; }
.vai-mkt-d__fact-k { font-size: 12.5px; line-height: 1.55; color: var(--vai-mkt-muted); margin-top: 3px; }
/* Compact numeric facts (property overview) stay small and tight. */
.vai-mkt-d__facts--stat { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.vai-mkt-d__facts--stat .vai-mkt-d__fact { padding: 10px 12px; }
.vai-mkt-d__facts--stat .vai-mkt-d__fact-v { font-size: 15px; }
.vai-mkt-d__facts--stat .vai-mkt-d__fact-k { font-size: 11px; margin-top: 1px; }

.vai-mkt-d__list { margin: 0; padding: 0 0 0 18px; }
.vai-mkt-d__list li { font-size: 13.5px; line-height: 1.75; color: var(--vai-mkt-ink-2); }

.vai-mkt-d__steps { margin: 0; padding: 0; list-style: none; counter-reset: vaimktstep; }
.vai-mkt-d__steps li {
    position: relative;
    counter-increment: vaimktstep;
    padding: 0 0 16px 38px;
    border-left: 1px solid var(--vai-mkt-border);
    margin-left: 12px;
}
.vai-mkt-d__steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.vai-mkt-d__steps li::before {
    content: counter(vaimktstep);
    position: absolute;
    left: -12px;
    top: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--vai-mkt-accent);
    color: var(--vai-mkt-accent-ink);
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vai-mkt-d__step-t { display: block; font-size: 13.5px; font-weight: 650; }
.vai-mkt-d__step-d { display: block; font-size: 12.5px; line-height: 1.6; color: var(--vai-mkt-muted); margin-top: 2px; }

.vai-mkt-d__tier-tabs { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--vai-mkt-border); border-radius: 10px; background: var(--vai-mkt-surface-2); }
.vai-mkt-d__tier-tab { flex: 1; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--vai-mkt-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.vai-mkt-d__tier-tab.is-active { background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink); }
.vai-mkt-d__tier { margin-top: 10px; padding: 13px 14px; border: 1px solid var(--vai-mkt-border); border-radius: 12px; background: var(--vai-mkt-surface-2); }
.vai-mkt-d__tier-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vai-mkt-d__tier-name { font-size: 13.5px; font-weight: 650; }
.vai-mkt-d__tier-meta { display: flex; gap: 16px; margin-top: 9px; font-size: 12.5px; color: var(--vai-mkt-muted); }

.vai-mkt-d__person { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--vai-mkt-border); border-radius: 12px; background: var(--vai-mkt-surface-2); }
.vai-mkt-d__person-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--vai-mkt-surface-3); }
.vai-mkt-d__person-name { font-size: 13.5px; font-weight: 650; display: flex; align-items: center; gap: 5px; }
.vai-mkt-d__person-sub { font-size: 12px; color: var(--vai-mkt-muted); margin-top: 1px; }
.vai-mkt-d__verified { color: var(--vai-mkt-brand); display: inline-flex; }
.vai-mkt-d__verified svg { width: 13px; height: 13px; }

.vai-mkt-d__stars { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--vai-mkt-ink-2); font-weight: 600; }
.vai-mkt-d__stars svg { width: 13px; height: 13px; color: #f59e0b; }

.vai-mkt-d__review { padding: 11px 0; border-bottom: 1px solid var(--vai-mkt-border); }
.vai-mkt-d__review:last-child { border-bottom: 0; }
.vai-mkt-d__review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 650; }
.vai-mkt-d__review-txt { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--vai-mkt-ink-2); }

.vai-mkt-d__rail { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.vai-mkt-d__rail::-webkit-scrollbar { display: none; }
.vai-mkt-d__rail-item { flex: 0 0 132px; width: 132px; cursor: pointer; }
.vai-mkt-d__rail-img { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; background: var(--vai-mkt-surface-3); display: block; }
.vai-mkt-d__rail-t { margin-top: 6px; font-size: 12px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vai-mkt-d__rail-p { font-size: 12px; font-weight: 700; color: var(--vai-mkt-ink); margin-top: 2px; }

/* ── Split detail: media + a sticky action card ──────────────────────────
   The richer detail shape (Property, Freelancer). Head and Similar span the
   full width; the action card sticks beside the media and stacks under it on
   narrow screens, where it must stay ABOVE the long prose. */
.vai-mkt-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 318px;
    grid-template-areas: "head head" "gal side" "main side" "sim sim";
    gap: 0 30px;
    align-items: start;
}
/* Every child is a scroll host or a wrapping grid — without this the widest
   intrinsic contribution (a long film strip) blows the column open. */
.vai-mkt-split > * { min-width: 0; }
.vai-mkt-split__head { grid-area: head; margin-bottom: 16px; }
.vai-mkt-split__gal { grid-area: gal; }
/* No photos to show: take the row out, not just the element. Hiding the
   gallery alone left its grid row behind, and because the sticky side card
   spans rows two and three the browser gave half that card's height to an
   empty row — a 300px hole between the title and the description. */
.vai-mkt-split.is-nogal { grid-template-areas: "head head" "main side" "sim sim"; }
.vai-mkt-split__side { grid-area: side; position: sticky; top: 0; }
.vai-mkt-split__main { grid-area: main; }
.vai-mkt-split__sim { grid-area: sim; }
.vai-mkt-split__title { margin: 0 0 7px; font-size: 23px; font-weight: 750; line-height: 1.25; letter-spacing: -.025em; }
.vai-mkt-split__sub { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--vai-mkt-muted); }
.vai-mkt-split__sub svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .8; }
.vai-mkt-split__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }

/* Placeholder tile for any dead image — a glyph, never a broken-image icon. */
.vai-mkt-ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--vai-mkt-surface-3), var(--vai-mkt-surface-2));
    color: var(--vai-mkt-muted);
}
.vai-mkt-ph svg { width: 34px; height: 34px; opacity: .42; }

/* Gallery — hero with arrows, counter and a film strip */
.vai-mkt-gal__stage {
    position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 470px;
    border-radius: 16px; overflow: hidden; background: var(--vai-mkt-surface-3);
}
.vai-mkt-gal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vai-mkt-gal__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #18181b;
    box-shadow: 0 2px 10px rgba(9, 9, 11, .22); cursor: pointer;
    opacity: 0; transition: opacity .16s ease;
}
.vai-mkt-gal__stage:hover .vai-mkt-gal__nav, .vai-mkt-gal__nav:focus-visible { opacity: 1; }
.vai-mkt-gal__nav svg { width: 16px; height: 16px; }
.vai-mkt-gal__nav--prev { left: 12px; }
.vai-mkt-gal__nav--next { right: 12px; }
.vai-mkt-gal__count {
    position: absolute; right: 12px; bottom: 12px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(9, 9, 11, .68); color: #fff; font-size: 11.5px; font-weight: 650;
    backdrop-filter: blur(4px);
}
.vai-mkt-gal__strip { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.vai-mkt-gal__strip::-webkit-scrollbar { display: none; }
.vai-mkt-gal__thumb {
    flex: 0 0 78px; width: 78px; height: 58px; border-radius: 10px; object-fit: cover;
    background: var(--vai-mkt-surface-3); cursor: pointer;
    border: 2px solid transparent; opacity: .62; transition: opacity .15s ease, border-color .15s ease;
}
.vai-mkt-gal__thumb:hover { opacity: 1; }
.vai-mkt-gal__thumb.is-active { opacity: 1; border-color: var(--vai-mkt-accent); }

/* Owner photo editor — shown only while the listing is in edit mode. */
.vai-mkt-photos { display: none; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: stretch; }
.vai-mkt-split.is-editing .vai-mkt-photos { display: flex; }
.vai-mkt-photos__thumb {
    position: relative; width: 78px; height: 58px; border-radius: 10px;
    background: var(--vai-mkt-surface-3) center / cover no-repeat;
    border: 1px solid var(--vai-mkt-border);
}
.vai-mkt-photos__x {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
    border: 0; border-radius: 50%; background: #18181b; color: #fff;
    font-size: 13px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.vai-mkt-photos__add {
    width: 78px; min-height: 58px; padding: 6px;
    border: 1px dashed var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface-2); color: var(--vai-mkt-muted);
    font-size: 11px; font-weight: 650; cursor: pointer;
}

/* Sticky action card */
.vai-mkt-side {
    border: 1px solid var(--vai-mkt-border); border-radius: 16px;
    background: var(--vai-mkt-surface); padding: 17px 17px 16px;
    box-shadow: var(--vai-mkt-shadow);
}
.vai-mkt-side__price { display: flex; align-items: baseline; gap: 5px; font-size: 26px; font-weight: 760; letter-spacing: -.03em; line-height: 1.15; }
.vai-mkt-side__per { font-size: 13px; font-weight: 550; color: var(--vai-mkt-muted); letter-spacing: 0; }
.vai-mkt-side__sub { margin-top: 5px; font-size: 12.5px; color: var(--vai-mkt-muted); }
.vai-mkt-side__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 15px 0; }
.vai-mkt-stat { padding: 11px 8px; border: 1px solid var(--vai-mkt-border); border-radius: 12px; background: var(--vai-mkt-surface-2); text-align: center; }
.vai-mkt-stat svg { width: 14px; height: 14px; color: var(--vai-mkt-muted); }
.vai-mkt-stat__v { margin-top: 4px; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.vai-mkt-stat__k { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--vai-mkt-muted); margin-top: 2px; }
.vai-mkt-side__cta { display: flex; flex-direction: column; gap: 8px; }
.vai-mkt-btn { width: 100%; min-width: 0; }
.vai-mkt-side__note { margin: 11px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--vai-mkt-muted); text-align: center; }

/* Label / value rows for a spec table */
.vai-mkt-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 0 28px; }
.vai-mkt-dl__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--vai-mkt-border); font-size: 13px; }
.vai-mkt-dl__k { color: var(--vai-mkt-muted); }
.vai-mkt-dl__v { font-weight: 650; text-align: right; }

.vai-mkt-d__cta {
    flex: 0 0 auto;
    min-width: 168px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--vai-mkt-accent);
    border-radius: 11px;
    background: var(--vai-mkt-accent);
    color: var(--vai-mkt-accent-ink);
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s ease;
}
/* A real hover colour rather than an opacity fade — fading a coloured button
   washes it into the page instead of darkening it. */
.vai-mkt-d__cta:hover {
    background: var(--vai-mkt-accent-hover);
    border-color: var(--vai-mkt-accent-hover);
    color: var(--vai-mkt-accent-ink);
}
.vai-mkt-d__cta svg { width: 15px; height: 15px; }
.vai-mkt-d__cta--ghost { background: var(--vai-mkt-surface); border-color: var(--vai-mkt-border); color: var(--vai-mkt-ink); min-width: 0; }
.vai-mkt-d__cta--ghost:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); opacity: 1; }
.vai-mkt-d__cta[disabled] { opacity: .55; cursor: default; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .vai-mkt {
        height: calc(100vh - 62px);
    }
    .vai-mkt__nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        border: 1px solid var(--vai-mkt-border);
        border-radius: 10px;
        background: var(--vai-mkt-surface);
        color: var(--vai-mkt-ink-2);
        cursor: pointer;
    }
    .vai-mkt__nav svg { width: 17px; height: 17px; }
    .vai-mkt__navov { position: fixed; inset: 0; z-index: 100050; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
    html.nav_open .vai-mkt__navov { opacity: 1; pointer-events: auto; }
    .vai-mkt__topbar { flex-wrap: wrap; padding: 12px 16px 10px; }
    .vai-mkt__search { order: 5; width: 100%; }
    .vai-mkt__spacer { display: none; }
    .vai-mkt__views { display: none; }
    .vai-mkt__filters { padding: 10px 16px; }
    .vai-mkt__list { padding: 16px 16px 60px; }
    .vai-mkt__detail-head { padding: 11px 16px; }
    .vai-mkt__detail-body { padding: 18px 16px 60px; }
    .vai-mkt__detail-foot { padding: 11px 16px; }
    .vai-mkt-d__frame--fill { height: min(52vh, 460px); }
}
@media (max-width: 1080px) {
    .vai-mkt-split { grid-template-columns: minmax(0, 1fr) 286px; gap: 0 22px; }
}
@media (max-width: 900px) {
    .vai-mkt-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "gal" "side" "main" "sim";
    }
    .vai-mkt-split__side { position: static; margin-top: 18px; }
    .vai-mkt-split__title { font-size: 20px; }
}
@media (max-width: 560px) {
    .vai-mkt-side__price { font-size: 23px; }
    .vai-mkt__detail-foot-inner { flex-direction: column-reverse; }
    .vai-mkt-d__cta { width: 100%; min-width: 0; }
    .vai-mkt__grid, .vai-mkt__skeleton { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .vai-mkt__title { font-size: 17px; }
    .vai-mkt__count { display: none; }
}

/* ── RTL ────────────────────────────────────────────────────────────── */
[data-dashboard-language="rtl"] .vai-mkt-card__badge { left: auto; right: 8px; }
[data-dashboard-language="rtl"] .vai-mkt-card__badge--alt { right: auto; left: 8px; }
[data-dashboard-language="rtl"] .vai-mkt__sort-menu { right: auto; left: 0; }
[data-dashboard-language="rtl"] .vai-mkt__search svg { left: auto; right: 11px; }
[data-dashboard-language="rtl"] .vai-mkt__search-input { padding: 0 33px 0 30px; }
[data-dashboard-language="rtl"] .vai-mkt__search-clear { right: auto; left: 7px; }
[data-dashboard-language="rtl"] .vai-mkt-gal__nav--prev { left: auto; right: 12px; }
[data-dashboard-language="rtl"] .vai-mkt-gal__nav--next { right: auto; left: 12px; }
[data-dashboard-language="rtl"] .vai-mkt-gal__count { right: auto; left: 12px; }