/* Marketplace — browse, sell form, listing, your listings, messages.
 *
 * Colours come from the base theme tokens (design.css / theme.css), which the
 * light theme re-points, so only a handful of fixed status tones need a
 * light-theme override at the bottom of this file.
 */

.market-page { --mk-good: #34d399; --mk-warn: #fbbf24; --mk-bad: #f87171; --mk-verified: #60a5fa; }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.market-tabs {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-default);
    overflow-x: auto;
    scrollbar-width: none;
}
.market-tabs::-webkit-scrollbar { display: none; }
.market-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.market-tab:hover { color: var(--text-primary); }
.market-tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); }
.market-tab__count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .72rem;
    line-height: 20px;
    text-align: center;
}

/* ── Filters ───────────────────────────────────────────────────────────── */
.mk-filters { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.mk-filters__main { display: flex; gap: var(--space-2); }
.mk-filters__main .btn { flex: none; }
.mk-filters__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mk-filters__row .select-sm { width: auto; flex: 0 1 auto; height: 40px; padding-top: 0; padding-bottom: 0; min-width: 0; }
.mk-filters__row .select-sm:disabled { opacity: .5; cursor: not-allowed; }
.mk-near { height: 40px; }
.mk-price-range { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); }
.mk-price-input { width: 84px; height: 40px; padding: 0 var(--space-3); }
.mk-near__status { margin: 0; min-height: 1.3em; font-size: .85rem; color: var(--text-secondary); }
/* Nothing to say yet: take no space (and cancel the flex gap) so the results sit
   right under the filters. JS fills it in when Find near me is used. */
.mk-near__status:empty { min-height: 0; margin-top: calc(var(--space-3) * -1); }
/* Sort isn't a filter: push it to the end of the row. */
.mk-filters__row .mk-sort { margin-left: auto; }
.mk-near__status.is-error { color: var(--mk-bad); }
.mk-filter-card { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.mk-count { color: var(--text-muted); font-size: .88rem; margin: 0 0 var(--space-4); }

/* ── Grid tiles ────────────────────────────────────────────────────────── */
.mk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-5);
}
.mk-tile {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s;
}
.mk-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-accent); }
/* Clean photo area: nothing is drawn over the image. */
.mk-tile__photo { display: block; aspect-ratio: 3 / 4; background: var(--bg-muted); }
.mk-tile__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-tile__nophoto { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; color: var(--text-muted); }
.mk-tile__info { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-3) var(--space-4); }
.mk-tile__price { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--text-primary); }
.mk-tile__name { margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.mk-tile__name a { color: var(--text-primary); text-decoration: none; }
.mk-tile__name a:hover { color: var(--accent-text); }
.mk-tile__name a::after { content: ''; position: absolute; inset: 0; } /* whole tile clickable */
.mk-tile { position: relative; }
.mk-tile__badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-tile__where { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin: 0; font-size: .8rem; color: var(--text-muted); }
.mk-tile__where i { font-size: .72rem; }
.mk-tile__dist { color: var(--text-secondary); font-weight: 600; }
.mk-tile__vs { margin: -4px 0 0; font-size: .76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mk-tile__vs--below { color: var(--mk-good); font-weight: 600; }
.mk-tile__set { margin: -3px 0 0; font-size: .76rem; color: var(--text-muted); line-height: 1.3; overflow-wrap: anywhere; }
.mk-tile__seller { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--border-subtle); font-size: .8rem; color: var(--text-secondary); min-width: 0; }
.mk-tile__seller-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mk-tile__rating { display: inline-flex; align-items: center; gap: 3px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mk-tile__rating i { color: #f5a524; font-size: .72rem; }

.mk-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}
.mk-chip--graded { color: var(--accent-text); border-color: var(--border-accent); }

/* ── Empty / pagination ────────────────────────────────────────────────── */
.mk-empty { text-align: center; padding: var(--space-16) var(--space-4); color: var(--text-muted); }
.mk-empty__icon { font-size: 2.6rem; opacity: .5; margin-bottom: var(--space-3); }
.mk-empty__title { font-size: 1.05rem; color: var(--text-secondary); margin: 0 0 var(--space-2); }
.mk-empty__sub { margin: 0 auto var(--space-5); max-width: 420px; }
.mk-empty .btn { margin: var(--space-2) var(--space-1) 0; }
.mk-pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.mk-pagination__info { color: var(--text-muted); font-size: .88rem; }

/* ── Shared form bits ──────────────────────────────────────────────────── */
.mk-field { display: flex; flex-direction: column; gap: 6px; }
.mk-field__label { font-size: .85rem; font-weight: 600; color: var(--text-secondary); }
.mk-field__label small { font-weight: 400; color: var(--text-muted); }
.mk-field__hint { font-size: .8rem; color: var(--text-muted); }
.mk-select { width: 100%; height: 44px; }
.mk-textarea { resize: vertical; min-height: 88px; font-family: inherit; line-height: 1.5; }
.mk-prefix { position: relative; display: flex; align-items: center; }
.mk-prefix > span { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; }
.mk-prefix input { padding-left: 28px; }

/* ── Sell form ─────────────────────────────────────────────────────────── */
/* Two columns on desktop: the steps, and a sticky live summary holding the
 * submit button. Phones stack the summary after the last step. */
.mk-sell {
    --mk-tint: color-mix(in srgb, var(--accent) 12%, transparent);
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: var(--space-6);
    align-items: start;
}
.mk-sell__main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.mk-sell__aside { position: sticky; top: 88px; min-width: 0; }

.mk-sell__section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    scroll-margin-top: 96px;
    transition: border-color .2s;
}
.mk-sell__section.has-error { border-color: var(--mk-bad); }

.mk-sec-head { display: flex; flex-direction: column; gap: var(--space-1); }
.mk-sec-head h2 { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }
.mk-sec-head__sub { margin: 0 0 0 40px; font-size: .88rem; color: var(--text-muted); }

.mk-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    flex: none;
    transition: background-color .2s, color .2s;
}
.mk-step__tick { display: none; font-size: .78rem; }
.is-done > .mk-sec-head .mk-step { background: color-mix(in srgb, var(--mk-good) 18%, transparent); color: var(--mk-good); }
.is-done > .mk-sec-head .mk-step__n { display: none; }
.is-done > .mk-sec-head .mk-step__tick { display: inline; }

.mk-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-text);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
.mk-linkbtn:hover { text-decoration: underline; text-underline-offset: 2px; }
/* app.css styles .condition-guide-trigger as a 16px "?" badge; this class is
 * only here as the hook app.js opens the guide from. */
.mk-linkbtn.condition-guide-trigger { width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; color: var(--accent-text); font-size: .82rem; font-weight: 600; }
.mk-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* Card */
.mk-cardsearch { position: relative; }
.mk-cardsearch__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.mk-cardsearch > input { height: 50px; padding-left: 44px; font-size: 1rem; }
.mk-cardsearch__results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 340px;
    overflow-y: auto;
    background: var(--bg-surface-solid);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
}
.mk-cardsearch__results[hidden] { display: none; }
.mk-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.mk-result:hover, .mk-result.is-active { background: var(--bg-hover); }
.mk-result img, .mk-result__noimg { width: 36px; aspect-ratio: 63 / 88; object-fit: contain; border-radius: 4px; background: #fff; flex: none; }
.mk-result__noimg { display: inline-block; background: var(--bg-muted); }
.mk-result__text { display: flex; flex-direction: column; min-width: 0; }
.mk-result__name { font-weight: 600; font-size: .9rem; }
.mk-result__printing { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--border-accent); border-radius: 999px; background: var(--mk-tint); color: var(--text-primary); font-size: .7rem; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.mk-result__meta { font-size: .78rem; color: var(--text-muted); }
.mk-result-empty { padding: var(--space-3); color: var(--text-muted); font-size: .9rem; }

.mk-picked {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    background: var(--mk-tint);
}
.mk-picked.is-empty { display: none; }
.mk-picked__thumb { width: 64px; aspect-ratio: 63 / 88; border-radius: 6px; background: var(--card-img-bg); overflow: hidden; flex: none; }
.mk-picked__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mk-picked__info { min-width: 0; }
.mk-picked__eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-good); }
.mk-picked__name { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.mk-picked__meta { margin: 2px 0 0; font-size: .85rem; color: var(--text-muted); }

/* Card not in the catalogue: the escape hatch under the picker, and the fields
 * it reveals. Kept visually quieter than the search so the catalogue stays the
 * obvious first choice. */
.mk-notfound { margin: 0; }
.mk-notfound[hidden] { display: none; }
.mk-custom {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
}
.mk-custom[hidden] { display: none; }
.mk-custom__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.mk-custom__note {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin: 0;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.mk-custom__note > i { color: var(--mk-warn); margin-top: 3px; flex: none; }
.mk-custom__back { margin: 0; }

/* Raw or graded */
.mk-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.mk-kind { position: relative; cursor: pointer; }
.mk-kind input { position: absolute; opacity: 0; pointer-events: none; }
.mk-kind__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    height: 100%;
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.mk-kind__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--mk-tint);
    color: var(--accent);
    font-size: 1.1rem;
    flex: none;
}
.mk-kind__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mk-kind__text strong { color: var(--text-primary); }
.mk-kind__text small { color: var(--text-muted); font-size: .82rem; line-height: 1.4; }
.mk-kind__radio { width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--border-default); flex: none; transition: border-color .15s, box-shadow .15s; }
.mk-kind:hover .mk-kind__body { border-color: var(--border-accent); }
.mk-kind input:checked + .mk-kind__body { border-color: var(--accent); background: var(--mk-tint); box-shadow: 0 0 0 1px var(--accent); }
.mk-kind input:checked + .mk-kind__body .mk-kind__radio { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--bg-surface-solid), inset 0 0 0 10px var(--accent); }
.mk-kind input:focus-visible + .mk-kind__body { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-kind-fields[hidden] { display: none; }
.mk-kind-fields--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }

/* Photos */
.mk-tips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}
.mk-tips li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    font-size: .82rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.mk-tips li > i { color: var(--accent); margin-top: 3px; flex: none; width: 1em; text-align: center; }

.mk-side { border: 0; margin: 0; padding: 0; min-width: 0; }
.mk-side + .mk-side { padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.mk-side__title { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 0; margin-bottom: var(--space-3); font-weight: 700; color: var(--text-primary); }
.mk-side__count { padding: 1px 8px; border-radius: 999px; background: var(--bg-muted); font-size: .74rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mk-side__count.is-done { background: color-mix(in srgb, var(--mk-good) 16%, transparent); color: var(--mk-good); }
.mk-side__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-4); align-items: start; }
.mk-side__corners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
/* Tablet/desktop: whole photo + 4 corners in one row of equal portrait slots,
   matching the 5-column "More photos" row. The old whole | 2×2-corners split
   made the optional corners bigger than the main photo and each side ~540px tall. */
@media (min-width: 701px) {
    .mk-side__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
    .mk-side__corners { display: contents; }
    .mk-side .mk-slot--corner .mk-slot__drop { aspect-ratio: 3 / 4; }
    /* Narrow slots: let "(optional)" drop under the name instead of splitting it. */
    .mk-side .mk-slot__label { flex-wrap: wrap; row-gap: 0; line-height: 1.3; }
}

.mk-slot { min-width: 0; }
.mk-slot__drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.mk-slot--full .mk-slot__drop { aspect-ratio: 3 / 4; }
.mk-slot--corner .mk-slot__drop { aspect-ratio: 1; }
.mk-slot__drop:hover { border-color: var(--accent); background: var(--mk-tint); }
.mk-slot__drop:hover .mk-slot__empty { color: var(--accent-text); }
.mk-slot__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mk-slot__drop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-slot__preview { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mk-slot__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: .8rem;
    pointer-events: none;
    transition: color .15s;
}
.mk-slot.has-photo .mk-slot__empty { display: none; }
.mk-slot.has-photo .mk-slot__drop { border-style: solid; border-color: var(--border-accent); }
.mk-slot.has-error .mk-slot__drop { border-color: var(--mk-bad); }
.mk-slot__label { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; font-size: .85rem; font-weight: 600; color: var(--text-primary); }
.mk-slot__tick { display: none; color: var(--mk-good); font-size: .85em; }
.mk-slot.has-photo .mk-slot__tick { display: inline; }
.mk-slot__optional { font-weight: 400; color: var(--text-muted); }
.mk-slot__status { margin: 0; min-height: 1.2em; font-size: .76rem; color: var(--text-muted); }
.mk-slot__status.is-error { color: var(--mk-bad); }

/* Mini card outline with the corner to photograph highlighted. */
.mk-glyph {
    position: relative;
    width: 34px;
    height: 46px;
    border: 2px solid currentColor;
    border-radius: 4px;
    opacity: .75;
}
.mk-glyph--back { border-style: dashed; }
.mk-glyph i {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.mk-glyph--tl i { top: -7px; left: -7px; }
.mk-glyph--tr i { top: -7px; right: -7px; }
.mk-glyph--bl i { bottom: -7px; left: -7px; }
.mk-glyph--br i { bottom: -7px; right: -7px; }
.mk-glyph--whole i { inset: 4px; width: auto; height: auto; border-radius: 2px; opacity: .35; box-shadow: none; }
.mk-slot--full .mk-glyph { width: 48px; height: 66px; }
.mk-slot__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.mk-slot__icon { font-size: 1.6rem; opacity: .75; }

/* More photos + video */
.mk-side__optional { font-size: .78rem; font-weight: 400; color: var(--text-muted); }
.mk-side__hint { margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: .82rem; color: var(--text-muted); }
.mk-extras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
/* JS reveals the next empty extra slot as each one is filled. */
.mk-slot.is-later { display: none; }
.mk-video { max-width: 420px; }
.mk-video__drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border: 1.5px dashed var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.mk-video__drop:hover { border-color: var(--accent); background: var(--mk-tint); }
.mk-video__drop:hover .mk-slot__empty { color: var(--accent-text); }
.mk-video__drop input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.mk-video__drop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-video.has-error .mk-video__drop { border-color: var(--mk-bad); }
.mk-video.has-video .mk-video__drop { display: none; }
.mk-video__picked[hidden] { display: none; }
.mk-video__preview {
    display: block;
    width: 100%;
    max-height: 360px;
    border: 1.5px solid var(--border-accent);
    border-radius: var(--radius-md);
    background: #000;
}
.mk-video__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 6px; }
.mk-video__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 600; color: var(--text-primary); }
.mk-video__remove { flex: none; }

/* Price */
.mk-field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); }
.mk-field--price { width: min(240px, 100%); }
.mk-sell .mk-field--price input { height: 52px; padding-left: 32px; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-sell .mk-field--price .mk-prefix > span { left: 16px; font-size: 1.1rem; font-weight: 700; }
.mk-market-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-muted);
    font-size: .82rem;
    color: var(--text-secondary);
}
.mk-market-hint[hidden] { display: none; }
.mk-market-hint > i { color: var(--accent); }
.mk-market-hint strong { color: var(--text-primary); }

/* Location */
.mk-locate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
}
.mk-locate__status { margin: 0; font-size: .88rem; color: var(--text-secondary); }
.mk-locate__status:empty { display: none; }
.mk-locate__status.is-ok { color: var(--mk-good); }
.mk-locate__status.is-error { color: var(--mk-bad); }
.mk-privacy {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.mk-privacy > i { color: var(--mk-good); margin-top: 4px; flex: none; }

/* Summary */
.mk-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.mk-summary__eyebrow { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.mk-summary__card { display: flex; align-items: center; gap: var(--space-3); }
.mk-summary__thumb {
    width: 56px;
    aspect-ratio: 63 / 88;
    border-radius: 6px;
    border: 1.5px dashed var(--border-default);
    background: var(--bg-muted);
    overflow: hidden;
    flex: none;
}
.mk-summary__thumb:has(img:not([hidden])) { border: 0; background: var(--card-img-bg); }
.mk-summary__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mk-summary__text { min-width: 0; }
.mk-summary__name { margin: 0; font-weight: 700; color: var(--text-primary); line-height: 1.3; overflow-wrap: anywhere; }
.mk-summary__price { margin: 4px 0 0; font-size: 1.35rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.mk-checklist { list-style: none; margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; }
.mk-sell .mk-checklist a {
    display: grid;
    grid-template-columns: 18px auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    padding: 7px var(--space-2);
    margin: 0 calc(-1 * var(--space-2));
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: .88rem;
    text-decoration: none;
}
.mk-sell .mk-checklist a:hover { background: var(--bg-hover); color: var(--text-primary); }
.mk-checklist__dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-default); }
.mk-checklist__label { font-weight: 600; }
.mk-checklist__detail { text-align: right; color: var(--text-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-checklist li.is-done .mk-checklist__dot {
    border-color: var(--mk-good);
    background: var(--mk-good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.mk-checklist li.is-done .mk-checklist__label { color: var(--text-primary); }
.mk-checklist li.has-error .mk-checklist__dot { border-color: var(--mk-bad); }
.mk-checklist li.has-error .mk-checklist__detail { color: var(--mk-bad); }

.mk-summary__meter { display: flex; flex-direction: column; gap: 6px; }
.mk-meter { height: 6px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.mk-meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .3s var(--ease-out), background-color .3s; }
.mk-sell.is-ready .mk-meter span { background: var(--mk-good); }
.mk-summary__count { margin: 0; font-size: .8rem; color: var(--text-muted); }
.mk-sell.is-ready .mk-summary__count { color: var(--mk-good); font-weight: 600; }

.mk-sell__submit { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.mk-sell__submit .btn { width: 100%; justify-content: center; }
.mk-sell__error { margin: 0; color: var(--mk-bad); font-weight: 600; font-size: .88rem; text-align: center; }
.mk-sell__error[hidden], .mk-progress[hidden] { display: none; }
.mk-progress { width: 100%; height: 6px; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.mk-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* ── Listing page ──────────────────────────────────────────────────────── */
.mk-breadcrumb { margin: var(--space-6) 0 var(--space-4); font-size: .88rem; color: var(--text-muted); }
.mk-breadcrumb a { color: var(--text-secondary); }
.mk-breadcrumb span:last-child { color: var(--text-muted); }

.mk-notice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--mk-tone, var(--accent));
    background: var(--bg-surface);
}
.mk-notice > i { color: var(--mk-tone); font-size: 1.2rem; padding-top: 2px; }
.mk-notice p { margin: 4px 0 0; color: var(--text-secondary); }
.mk-notice--bad { --mk-tone: var(--mk-bad); }
.mk-notice--sold { --mk-tone: var(--mk-good); }

.mk-listing { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }

.mk-gallery__main {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
.mk-gallery__main img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.mk-gallery__main[hidden], .mk-gallery__video[hidden] { display: none; }
.mk-gallery__video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: #000;
    object-fit: contain;
}
.mk-gallery__caption { margin: var(--space-2) 0 var(--space-4); font-size: .85rem; font-weight: 600; color: var(--text-primary); }
.mk-gallery__hint { font-weight: 400; color: var(--text-muted); }
.mk-gallery__strip { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.mk-gallery__group-title { margin: 0 0 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mk-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mk-thumb {
    width: 72px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-muted);
}
.mk-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    background: var(--bg-muted);
}
.mk-thumb:hover img { border-color: var(--border-accent); }
.mk-thumb.is-active img { border-color: var(--accent); }
.mk-thumb__label { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: .7rem; font-weight: 700; text-align: center; }
.mk-thumb__label i { font-size: .85em; }
.mk-thumb.is-active .mk-thumb__label { color: var(--accent-text); }

.mk-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.mk-detail__price { margin: 0; font-size: var(--step-4); font-weight: 800; line-height: 1; color: var(--text-primary); }
.mk-detail__name { margin: 0; font-size: var(--step-2); line-height: var(--leading-snug); }
.mk-detail__card { margin: 0; color: var(--text-secondary); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Seller-entered card: say so plainly, since nothing on the page is verified. */
.mk-notcat {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--mk-warn) 35%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--mk-warn) 8%, transparent);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.mk-notcat > i { color: var(--mk-warn); margin-top: 3px; flex: none; }

.mk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; }
.mk-facts > div { min-width: 0; }
.mk-facts dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mk-facts dd { margin: 2px 0 0; color: var(--text-primary); }
.mk-dist { color: var(--text-secondary); }

.mk-desc {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.mk-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}
.mk-panel__title { margin: 0; font-size: 1rem; }
.mk-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mk-panel__note { margin: 0; font-size: .85rem; color: var(--text-muted); }
.mk-contact { display: flex; flex-direction: column; gap: var(--space-3); }
.mk-contact-btn { width: 100%; }
.mk-safety { display: flex; gap: var(--space-2); align-items: baseline; margin: 0; font-size: .8rem; color: var(--text-muted); }

.mk-edit > summary { list-style: none; cursor: pointer; }
.mk-edit > summary::-webkit-details-marker { display: none; }
.mk-edit__form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }

/* Sale to a named buyer, and reviews between buyer and seller */
.mk-sale-state {
    --mk-tone: var(--text-muted);
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--mk-tone) 35%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--mk-tone) 8%, transparent);
}
.mk-sale-state > i { color: var(--mk-tone); }
.mk-sale-state p { margin: 0; font-size: .9rem; color: var(--text-secondary); }
.mk-sale-state a { font-weight: 600; }
.mk-sale-state--confirmed { --mk-tone: var(--mk-good); }
.mk-sale-state--pending { --mk-tone: var(--mk-warn); }
.mk-sale-state--declined { --mk-tone: var(--mk-bad); }
#sale, #review, #mark-sold, #offers, #make-offer { scroll-margin-top: 96px; }

.mk-review__form { display: flex; flex-direction: column; gap: var(--space-3); }
.mk-review__item { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-muted); }
.mk-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: .85rem; font-weight: 600; }
.mk-review__body { margin: 6px 0 0; font-size: .9rem; color: var(--text-secondary); line-height: 1.55; overflow-wrap: anywhere; }

/* Star picker: radios in reverse DOM order so "~" lights every lower star. */
.mk-star-pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.mk-star-pick legend { padding: 0; margin-bottom: 6px; }
.mk-star-pick__row { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.mk-star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mk-star-pick label {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .12s, transform .12s var(--ease-out);
}
.mk-star-pick__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk-star-pick input:checked ~ label,
.mk-star-pick label:hover,
.mk-star-pick label:hover ~ label { color: #f5a524; }
.mk-star-pick label:hover { transform: scale(1.12); }
.mk-star-pick input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-edit__form .btn { align-self: flex-start; }

.mk-seller {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}
.mk-seller:hover { border-color: var(--border-accent); }
.mk-seller__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.mk-seller__avatar--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 700; }
.mk-seller__text { display: flex; flex-direction: column; min-width: 0; }
.mk-seller__name { font-weight: 700; color: var(--text-primary); }
.mk-seller__since { font-size: .8rem; color: var(--text-muted); }
.mk-seller__stats { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .82rem; color: var(--text-secondary); }
.mk-seller__stats > span + span::before { content: '·'; margin-right: 10px; color: var(--text-muted); }
.mk-seller__rating { display: inline-flex; align-items: center; gap: 6px; }
.mk-vs { font-size: .85rem; color: var(--text-muted); }
.mk-vs--below { color: var(--mk-good); font-weight: 600; }
.mk-card-sales { display: flex; flex-direction: column; gap: var(--space-2); }
.mk-card-sales .mk-panel__title { margin: 0; }
.mk-card-sales .market-sales__row { padding: 10px 14px; min-height: 44px; gap: 2px 10px; }
.mk-card-sales .market-sales__note { margin-top: 0; }
.mk-card-sales__more { align-self: flex-start; font-size: .85rem; font-weight: 600; }
.mk-verified { color: var(--mk-verified); font-size: .9em; }

.mk-report > summary { cursor: pointer; font-size: .82rem; color: var(--text-muted); }
.mk-report__form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.mk-report__form .btn { align-self: flex-start; }

.mk-more { margin-top: var(--space-12); }

/* ── Your listings ─────────────────────────────────────────────────────── */
.mk-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mk-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.mk-row--removed { opacity: .7; }
.mk-row__thumb { display: block; width: 64px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-muted); }
.mk-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-row__name { font-weight: 700; color: var(--text-primary); text-decoration: none; }
/* Inline flow, not flex: flex made the text run one block, so on phones the
   EN badge sat alone on its own line. */
.mk-row__meta { margin: 4px 0 0; font-size: .82rem; line-height: 1.6; color: var(--text-muted); }
.mk-row__meta .badge { margin-right: 4px; vertical-align: 1px; }
.mk-row__price { margin: 0; font-weight: 800; font-size: 1.05rem; color: var(--text-primary); }
.mk-row__actions { display: flex; gap: var(--space-2); }
/* Tablet/desktop: rows share the list's columns (subgrid), so price and
   actions line up down the list even when a row has no action buttons. */
@media (min-width: 701px) {
    /* Edge tracks are auto so they absorb the row padding (a fixed 64px track
       would let the padding push the thumb into the text). */
    .mk-rows { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: var(--space-4); }
    .mk-row { grid-column: 1 / -1; grid-template-columns: subgrid; }
    .mk-row__price { text-align: right; }
    .mk-row__actions { justify-content: flex-end; }
}

.mk-status {
    --mk-tone: var(--text-muted);
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mk-tone) 14%, transparent);
    color: var(--mk-tone);
    font-weight: 700;
    font-size: .74rem;
}
.mk-status--active { --mk-tone: var(--mk-good); }
.mk-status--sold { --mk-tone: var(--mk-warn); }
.mk-status--removed { --mk-tone: var(--mk-bad); }

/* ── Inbox ─────────────────────────────────────────────────────────────── */
.mk-inbox { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mk-inbox__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
}
.mk-inbox__item:hover { border-color: var(--border-accent); }
.mk-inbox__thumb { width: 52px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-muted); flex: none; }
.mk-inbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-inbox__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mk-inbox__top { display: flex; align-items: baseline; gap: var(--space-2); }
.mk-inbox__who { font-weight: 700; color: var(--text-primary); }
.mk-inbox__role { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.mk-inbox__time { margin-left: auto; font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.mk-inbox__card { font-size: .82rem; color: var(--text-secondary); }
.mk-inbox__last { font-size: .88rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-inbox__item.is-unread .mk-inbox__last { color: var(--text-primary); font-weight: 600; }
.mk-inbox__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }

/* ── Thread ────────────────────────────────────────────────────────────── */
.mk-thread { max-width: 760px; margin: 0 auto var(--space-12); display: flex; flex-direction: column; gap: var(--space-4); }
.mk-thread__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.mk-thread__listing { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.mk-thread__thumb { width: 44px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--bg-muted); flex: none; }
.mk-thread__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-thread__card { display: flex; flex-direction: column; min-width: 0; }
.mk-thread__card strong { color: var(--text-primary); }
.mk-thread__card > span { font-size: .82rem; color: var(--text-muted); }
.mk-thread__with { margin: 0; font-size: .85rem; color: var(--text-muted); }

.mk-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); min-height: 120px; }
.mk-msg { max-width: min(78%, 520px); align-self: flex-start; }
.mk-msg--mine { align-self: flex-end; }
.mk-msg__body {
    margin: 0;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.mk-msg--mine .mk-msg__body { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 16px 16px 4px 16px; }
.mk-msg__time { display: block; margin-top: 2px; font-size: .7rem; color: var(--text-muted); }
.mk-msg--mine .mk-msg__time { text-align: right; }
.mk-msg.is-pending { opacity: .6; }

.mk-compose {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
    padding: var(--space-3) 0;
    background: var(--bg-base);
}
.mk-compose__input { resize: none; min-height: 46px; max-height: 180px; font-family: inherit; line-height: 1.4; }
.mk-compose__send { flex: none; width: 46px; height: 46px; padding: 0; }
.mk-compose__error { margin: 0; color: var(--mk-bad); font-size: .85rem; }
.mk-compose__error[hidden] { display: none; }
.mk-thread__closed { margin: 0; padding: var(--space-3); text-align: center; color: var(--text-muted); background: var(--bg-muted); border-radius: var(--radius-md); }

/* ── Offers ────────────────────────────────────────────────────────────── */
/* Offer card in a chat thread. Tone follows the offer's state. */
.mk-msg--offer { width: min(88%, 340px); max-width: none; scroll-margin-top: 96px; }
.mk-offer {
    --mk-tone: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--mk-tone);
    border-radius: var(--radius-md);
}
.mk-offer--pending { --mk-tone: var(--mk-warn); }
.mk-offer--accepted { --mk-tone: var(--mk-good); }
.mk-offer--declined { --mk-tone: var(--mk-bad); }
.mk-offer__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin: 0; font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
.mk-offer__head .fa-inline { color: var(--mk-tone); }
.mk-offer__status { font-size: .75rem; font-weight: 700; color: var(--mk-tone); white-space: nowrap; }
.mk-offer--countered .mk-offer__amount,
.mk-offer--withdrawn .mk-offer__amount,
.mk-offer--expired .mk-offer__amount,
.mk-offer--closed .mk-offer__amount { color: var(--text-muted); text-decoration: line-through; }
.mk-offer__amount { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--text-primary); }
.mk-offer__meta { margin: 0; font-size: .8rem; color: var(--text-muted); }
.mk-offer__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mk-offer__counter > summary { list-style: none; cursor: pointer; }
.mk-offer__counter > summary::-webkit-details-marker { display: none; }
.mk-offer__form { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.mk-offer__form .mk-prefix { flex: 1; min-width: 0; }
.mk-offer__form .btn { flex: none; }

/* Answers to an offer: a centred note in the timeline, not a bubble. */
.mk-msg--event { align-self: center; max-width: 100%; text-align: center; }
.mk-event { margin: var(--space-1) 0 0; font-size: .8rem; color: var(--text-muted); }
.mk-msg--offer_accepted .mk-event { color: var(--mk-good); font-weight: 600; }
.mk-event time { font-weight: 400; color: var(--text-muted); }
.mk-event__next { margin: 4px auto 0; max-width: 420px; font-size: .8rem; color: var(--text-secondary); }
.mk-event__next a { font-weight: 600; }

/* "Make an offer" above the chat box, and on the listing page */
.mk-offer-compose > summary { list-style: none; cursor: pointer; }
.mk-offer-compose > summary::-webkit-details-marker { display: none; }
.mk-thread > .mk-offer-compose { display: flex; flex-direction: column; gap: var(--space-2); align-self: flex-start; width: min(100%, 420px); }
.mk-thread > .mk-offer-compose > summary { align-self: flex-start; }

/* Seller's list of open offers on the listing page */
.mk-offers { display: flex; flex-direction: column; gap: var(--space-2); }
.mk-offers__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: .9rem; }
.mk-offers__count { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: .75rem; text-align: center; background: var(--mk-warn); color: #111; }
.mk-offers__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mk-offers__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.mk-offers__info { display: flex; flex-direction: column; min-width: 0; }
.mk-offers__info strong { font-size: 1.05rem; color: var(--text-primary); }
.mk-offers__info span { font-size: .8rem; color: var(--text-muted); }
.mk-offers__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mk-row__offers { font-weight: 700; color: var(--mk-warn); }
.mk-row__asked { display: block; font-size: .72rem; font-weight: 500; color: var(--text-muted); text-align: right; }

/* ── Responsive ────────────────────────────────────────────────────────── */
/* Desktop: cap the 4:5 frame to the viewport so the whole photo is visible
   without scrolling (nav + breadcrumb ≈ 150px above, caption below). */
@media (min-width: 1024px) {
    .mk-gallery__main, .mk-gallery__video { max-height: max(420px, calc(100vh - 215px)); }
    /* The frame is height-capped, so size the photo column to the frame's
       4:5 width; otherwise a short viewport leaves a dead gap beside it. */
    .mk-listing { grid-template-columns: minmax(0, min(52%, calc(max(420px, 100vh - 215px) * 4 / 5))) minmax(0, 1fr); }
    /* Keep price + contact in view while scrolling the photo thumbnails.
       72px = 65px sticky navbar + a small gap. */
    .mk-detail { position: sticky; top: 72px; }
}
@media (max-width: 1023.98px) {
    .mk-listing { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .mk-sell { grid-template-columns: minmax(0, 1fr); max-width: 820px; gap: var(--space-5); }
    .mk-sell__aside { position: static; }
    .mk-gallery__main, .mk-gallery__video { aspect-ratio: 1; }
}
@media (max-width: 700.98px) {
    .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .mk-tile__info { padding: var(--space-2) var(--space-2) var(--space-3); }
    .mk-tile__price { font-size: 1rem; }
    .mk-filters__row .select-sm { flex: 1 1 calc(50% - var(--space-2)); }
    .mk-near { flex: 1 1 100%; }
    .mk-price-range { flex: 1 1 100%; min-width: 0; }
    /* width/min-width 0: otherwise each input's intrinsic ~20ch width pushes
       the range past the screen edge and the page scrolls sideways. */
    .mk-price-input { flex: 1 1 0; width: 0; min-width: 0; }
    .mk-sell__section { padding: var(--space-4); gap: var(--space-4); }
    .mk-sec-head__sub { margin-left: 0; }
    .mk-tips { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .mk-side__grid { grid-template-columns: minmax(0, 1fr); }
    .mk-side__corners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-slot--full .mk-slot__drop { aspect-ratio: 4 / 3; }
    .mk-extras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-video { max-width: none; }
    .mk-kind-fields--grid { grid-template-columns: minmax(0, 1fr); }
    .mk-custom__grid { grid-template-columns: minmax(0, 1fr); }
    .mk-summary { padding: var(--space-4); }
    .mk-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .mk-row__thumb { width: 56px; height: 70px; }
    .mk-row__actions { grid-column: 1 / -1; justify-content: flex-end; }
    .mk-gallery__thumbs { gap: 6px; }
    .mk-thumb { width: 60px; }
    .mk-msg { max-width: 88%; }
}
@media (max-width: 420px) {
    .mk-kinds { grid-template-columns: minmax(0, 1fr); }
    .mk-facts { grid-template-columns: minmax(0, 1fr); }
}

/* ── Light theme: fixed tones need more contrast on white ──────────────── */
html[data-theme="light"] .market-page { --mk-good: #047857; --mk-warn: #b45309; --mk-bad: #b91c1c; --mk-verified: #2563eb; }

.mk-thread__sale { margin: 0; padding: var(--space-3) var(--space-4); font-size: .85rem; color: var(--text-secondary); border: 1px solid color-mix(in srgb, var(--mk-good) 35%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--mk-good) 8%, transparent); }
.mk-thread__sale > i { color: var(--mk-good); }
.mk-thread__sale a { font-weight: 600; }