/* ══════════════════════════════════════════════════════════════════════
   Property — the listing surface, tuned like a real estate portal.
   Everything here is scoped to [data-market="property"] so the other three
   Market pages keep the shell's default look.
   ══════════════════════════════════════════════════════════════════════ */
.vai-mkt[data-market="property"] {
    --vai-prop-sale: #0f766e;
    --vai-prop-rent: #4338ca;
    --vai-prop-gold: #b45309;
    /* Anything written by us rather than by the owner wears this colour, and
       only that — it is never used for a listing's own content. */
    --vai-prop-ai:   #7c3aed;
}
body[data-background-color="dark"] .vai-mkt[data-market="property"] {
    --vai-prop-sale: #2dd4bf;
    --vai-prop-rent: #a5b4fc;
    --vai-prop-gold: #fbbf24;
    --vai-prop-ai:   #a78bfa;
}

/* ── Filter control ─────────────────────────────────────────────────────
   The numeric filters the feed supports (beds, baths, price) all live in one
   dialog; its button sits in the topbar, so the shell's filter row stays
   collapsed rather than holding a near-empty strip. */
.vai-mkt[data-market="property"] .vai-mkt__filters { display: none; }
.vai-prop-filters { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
/* ── Map panel ──────────────────────────────────────────────────────── */
.vai-mkt[data-market="property"] .vai-mkt__panel { background: var(--vai-mkt-surface); margin-bottom: 20px; }
.vai-prop-map__head { display: flex; align-items: center; gap: 9px; padding: 12px 15px; }
.vai-prop-map__title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.vai-prop-map__note { font-size: 12px; color: var(--vai-mkt-muted); }
.vai-prop-map__toggle {
    margin-left: auto; height: 28px; padding: 0 11px;
    border: 1px solid var(--vai-mkt-border); border-radius: 8px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-ink-2);
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.vai-prop-map__loc { display: inline-flex; align-items: center; gap: 6px; }
.vai-prop-map__loc svg { color: #2563eb; }
.vai-prop-map__toggle:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }
.vai-prop-map__canvas { height: clamp(380px, calc(var(--vzoom-vh, 100vh) * .58), 680px); border-top: 1px solid var(--vai-mkt-border); background: var(--vai-mkt-surface-3); }
/* What shows through while the tiles load: Google's own base grey, so the
   map does not fade in out of a dark hole. */
.vai-prop-map__canvas,
.vai-prop-locmap,
body[data-background-color="dark"] .vai-prop-map__canvas,
body[data-background-color="dark"] .vai-prop-locmap { background: #e5e3df; }
.vai-prop-map.is-closed .vai-prop-map__canvas { display: none; }

/* Google's info bubble is white in both themes, so it carries fixed colours. */
.vai-prop-pin { min-width: 216px; max-width: 264px; font-family: inherit; color: #18181b; }
.vai-prop-pin__city { font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.vai-prop-pin__row {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 6px 0; border: 0; border-top: 1px solid #ececf0;
    background: none; text-align: left; cursor: pointer; font-family: inherit;
}
.vai-prop-pin__row:hover .vai-prop-pin__name { text-decoration: underline; }
.vai-prop-pin__thumb { flex: 0 0 auto; width: 42px; height: 34px; border-radius: 6px; object-fit: cover; background: #f1f5f9; }
.vai-prop-pin__txt { flex: 1 1 auto; min-width: 0; }
.vai-prop-pin__name { font-size: 12px; font-weight: 600; color: #18181b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vai-prop-pin__price { font-size: 12px; font-weight: 700; color: #16a34a; margin-top: 1px; }
.vai-prop-pin__more { padding-top: 7px; font-size: 11px; color: #71717a; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.vai-mkt[data-market="property"] .vai-mkt__grid,
.vai-mkt[data-market="property"] .vai-mkt__skeleton {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.vai-mkt[data-market="property"] .vai-mkt__grid.is-list-view { grid-template-columns: 1fr; gap: 0; }
.vai-mkt[data-market="property"] .vai-mkt-card { border-radius: 16px; }
.vai-mkt[data-market="property"] .vai-mkt-card__media { aspect-ratio: 3 / 2; }
.vai-mkt[data-market="property"] .vai-mkt-card__body { gap: 3px; padding: 13px 14px 14px; }
.vai-mkt[data-market="property"] .vai-mkt-card__title {
    font-size: 13.5px; font-weight: 600; line-height: 1.45; -webkit-line-clamp: 1; order: 2;
}

/* Photo overlays */
.vai-prop-scrim {
    position: absolute; inset: auto 0 0 0; height: 44%;
    background: linear-gradient(to top, rgba(9, 9, 11, .38), rgba(9, 9, 11, 0));
    pointer-events: none;
}
.vai-prop-tag, .vai-prop-feat {
    position: absolute; top: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: #18181b; font-size: 11px; font-weight: 700; letter-spacing: -.005em;
    box-shadow: 0 2px 8px rgba(9, 9, 11, .18);
    backdrop-filter: blur(6px);
}
.vai-prop-tag { left: 10px; }
.vai-prop-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vai-prop-tag--sale .vai-prop-tag__dot { background: #0f766e; }
.vai-prop-tag--rent .vai-prop-tag__dot { background: #4338ca; }
.vai-prop-feat { right: 10px; color: #92400e; }
.vai-prop-feat svg { width: 11px; height: 11px; color: #d97706; }

/* Card body */
.vai-prop-price { order: 1; display: flex; align-items: baseline; gap: 3px; font-size: 19px; font-weight: 750; letter-spacing: -.025em; line-height: 1.25; color: var(--vai-mkt-ink); }
.vai-prop-price__per { font-size: 12px; font-weight: 550; color: var(--vai-mkt-muted); letter-spacing: 0; }
.vai-prop-loc { order: 3; display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 1px; font-size: 12px; color: var(--vai-mkt-muted); }
.vai-prop-loc svg { width: 12.5px; height: 12.5px; flex: 0 0 auto; opacity: .75; }
.vai-prop-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vai-prop-specs {
    order: 4; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: auto; padding-top: 11px;
    border-top: 1px solid var(--vai-mkt-border);
    font-size: 12px; color: var(--vai-mkt-muted);
}
.vai-prop-specs > span { display: inline-flex; align-items: center; gap: 5px; }
.vai-prop-specs svg { width: 13px; height: 13px; opacity: .7; }
.vai-prop-specs b { font-weight: 650; color: var(--vai-mkt-ink-2); }

/* List view keeps the same vocabulary, laid out as rows */
.vai-mkt[data-market="property"] .is-list-view .vai-mkt-card__media { flex-basis: 190px; width: 190px; border-radius: 12px; }
.vai-mkt[data-market="property"] .is-list-view .vai-mkt-card__body { padding: 4px 2px; }
.vai-mkt[data-market="property"] .is-list-view .vai-prop-specs { border-top: 0; margin-top: 7px; padding-top: 0; }
.vai-mkt[data-market="property"] .is-list-view .vai-prop-tag { top: 7px; left: 7px; }
/* A 190px thumbnail has room for one badge, and the type is the useful one. */
.vai-mkt[data-market="property"] .is-list-view .vai-prop-feat,
.vai-mkt[data-market="property"] .is-list-view .vai-prop-scrim { display: none; }

/* Skeleton mirrors the new card proportions */
.vai-mkt[data-market="property"] .vai-mkt__skeleton-tile { border-radius: 16px; }
.vai-mkt[data-market="property"] .vai-mkt__skeleton-tile i:nth-child(1) { aspect-ratio: 3 / 2; }

/* ── Detail ─────────────────────────────────────────────────────────── */
.vai-mkt[data-market="property"] .vai-mkt-d__h {
    margin: 24px 0 11px; font-size: 14.5px; font-weight: 700;
    text-transform: none; letter-spacing: -.01em; color: var(--vai-mkt-ink);
}
.vai-prop-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink-2);
    font-size: 11.5px; font-weight: 650;
}
.vai-prop-chip--sale { background: color-mix(in srgb, var(--vai-prop-sale) 13%, transparent); color: var(--vai-prop-sale); }
.vai-prop-chip--rent { background: color-mix(in srgb, var(--vai-prop-rent) 13%, transparent); color: var(--vai-prop-rent); }
.vai-prop-chip--gold { background: color-mix(in srgb, var(--vai-prop-gold) 15%, transparent); color: var(--vai-prop-gold); }
.vai-prop-chip svg { width: 11px; height: 11px; }

/* ── Detail layout ──────────────────────────────────────────────────────
   The shell puts the title above the media; a listing is sold by its photos,
   so here they run full width across the top and the title moves down beside
   the price card. Same grid, different reading order. */
.vai-mkt[data-market="property"] .vai-mkt-split {
    grid-template-areas: "gal gal" "head side" "main side" "sim sim";
}
.vai-mkt[data-market="property"] .vai-mkt-split__gal { margin-bottom: 22px; }
.vai-mkt[data-market="property"] .vai-mkt-split__head { margin-bottom: 0; }
.vai-mkt[data-market="property"] .vai-mkt-split__side { top: 16px; }

/* ── Photo mosaic ───────────────────────────────────────────────────────
   Five tiles at most, whatever the listing has. The shapes are declared per
   count so three photos make a composition rather than a row with a hole. */
.vai-prop-mos {
    position: relative;
    display: grid;
    gap: 6px;
    border-radius: 16px;
    overflow: hidden;
}
.vai-prop-mos__t { margin: 0; position: relative; overflow: hidden; cursor: zoom-in; background: var(--vai-mkt-surface-3); }
.vai-prop-mos__t::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(9, 9, 11, .16); opacity: 0;
    transition: opacity .15s ease;
}
.vai-prop-mos__t:hover::after { opacity: 1; }
.vai-prop-mos__img,
.vai-prop-mos__t > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A dead photo becomes the shell's glyph tile — it has to fill the same box
   or the mosaic collapses around the hole. */
.vai-prop-mos__t > .vai-mkt-ph { width: 100%; height: 100%; }
.vai-prop-mos--1 { grid-template-columns: 1fr; }
.vai-prop-mos--1 .vai-prop-mos__t { aspect-ratio: 16 / 9; }
.vai-prop-mos--2 { grid-template-columns: 1fr 1fr; }
.vai-prop-mos--2 .vai-prop-mos__t { aspect-ratio: 4 / 3; }
.vai-prop-mos--3 { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; }
.vai-prop-mos--3 .vai-prop-mos__t:first-child { grid-row: 1 / 3; }
.vai-prop-mos--4 { grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.vai-prop-mos--4 .vai-prop-mos__t:first-child { grid-row: 1 / 3; }
.vai-prop-mos--4 .vai-prop-mos__t:nth-child(4) { grid-column: 2 / 4; }
.vai-prop-mos--5 { grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.vai-prop-mos--5 .vai-prop-mos__t:first-child { grid-row: 1 / 3; }
.vai-prop-mos--3 .vai-prop-mos__t,
.vai-prop-mos--4 .vai-prop-mos__t,
.vai-prop-mos--5 .vai-prop-mos__t { aspect-ratio: auto; min-height: 0; }
.vai-prop-mos--3, .vai-prop-mos--4, .vai-prop-mos--5 { aspect-ratio: 16 / 8.2; }
.vai-prop-mos__more {
    position: absolute; right: 12px; bottom: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(9, 9, 11, .72); color: #fff;
    font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
    backdrop-filter: blur(6px);
}
.vai-prop-mos__more:hover { background: rgba(9, 9, 11, .88); }
.vai-prop-mos__more svg { width: 13px; height: 13px; }

/* Full-screen viewer — one at a time, appended to the body so no ancestor's
   overflow or transform can clip it. */
.vai-prop-lb {
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center;
    padding: 40px 56px;
    background: rgba(6, 6, 8, .93);
    animation: vaiPropFade .16s ease both;
}
@keyframes vaiPropFade { from { opacity: 0; } to { opacity: 1; } }
.vai-prop-lb__img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; }
.vai-prop-lb__img.is-dead {
    width: min(560px, 80vw); height: min(380px, 55vh);
    background: var(--vai-mkt-surface-3); color: transparent; font-size: 0;
}
.vai-prop-lb__count { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); color: #d4d4d8; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vai-prop-lb__x,
.vai-prop-lb__nav {
    position: absolute; display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(24, 24, 27, .8); color: #fafafa; cursor: pointer;
}
.vai-prop-lb__x:hover,
.vai-prop-lb__nav:hover { background: rgba(63, 63, 70, .9); }
.vai-prop-lb__x { top: 16px; right: 16px; }
.vai-prop-lb__nav--prev { left: 14px; top: 50%; transform: translateY(-50%); }
.vai-prop-lb__nav--next { right: 14px; top: 50%; transform: translateY(-50%); }
.vai-prop-lb__x svg, .vai-prop-lb__nav svg { width: 17px; height: 17px; }

/* ── Facts strip ────────────────────────────────────────────────────────
   Four numbers, hairline-separated rather than four cards: they are one set
   of readings off the same listing, not four separate objects. */
.vai-prop-facts {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 1px; margin-top: 18px;
    border: 1px solid var(--vai-mkt-border); border-radius: 14px;
    background: var(--vai-mkt-border); overflow: hidden;
}
.vai-prop-fact { background: var(--vai-mkt-surface); padding: 12px 14px; }
.vai-prop-fact svg { width: 15px; height: 15px; color: var(--vai-mkt-muted); }
.vai-prop-fact__v {
    margin-top: 5px; font-size: 17px; font-weight: 700;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.vai-prop-fact__k { margin-top: 1px; font-size: 11.5px; color: var(--vai-mkt-muted); }

/* ── Sections ───────────────────────────────────────────────────────────── */
.vai-prop-blk { margin-top: 28px; }
.vai-prop-bh { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.vai-prop-bh__t { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.012em; color: var(--vai-mkt-ink); }
.vai-prop-aimark {
    display: inline-flex; align-items: center; gap: 5px;
    height: 21px; padding: 0 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--vai-prop-ai) 14%, transparent);
    color: var(--vai-prop-ai); font-size: 11px; font-weight: 650;
}
.vai-prop-aimark svg { width: 11px; height: 11px; }
.vai-prop-blk.is-waiting .vai-prop-about { color: var(--vai-mkt-muted); font-style: italic; }

/* Highlights — each chip restates a fact the listing already carries. */
.vai-prop-hl { display: flex; flex-wrap: wrap; gap: 8px; }
.vai-prop-hl span {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--vai-mkt-border); background: var(--vai-mkt-surface-2);
    font-size: 12.5px; color: var(--vai-mkt-ink-2);
}
.vai-prop-hl svg { width: 13px; height: 13px; color: var(--vai-mkt-accent, #3d9a6a); }
.vai-prop-areanote { margin: 10px 0 0; font-size: 13px; line-height: 1.65; color: var(--vai-mkt-ink-2); }
.vai-prop-areanote .vai-prop-aimark { margin-left: 7px; vertical-align: middle; }

/* ── Price card ─────────────────────────────────────────────────────────── */
.vai-prop-side { display: grid; gap: 12px; }
.vai-prop-card {
    border: 1px solid var(--vai-mkt-border); border-radius: 16px;
    background: var(--vai-mkt-surface-2); padding: 16px;
}
.vai-prop-price { font-size: 24px; font-weight: 750; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.vai-prop-price small { margin-left: 5px; font-size: 13px; font-weight: 500; color: var(--vai-mkt-muted); letter-spacing: 0; }
.vai-prop-price__sub { margin-top: 3px; font-size: 12.5px; color: var(--vai-mkt-muted); }
.vai-prop-cta { display: grid; gap: 8px; margin-top: 14px; }
.vai-prop-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; padding: 0 14px; border-radius: 11px;
    border: 1px solid transparent; background: transparent;
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
.vai-prop-btn svg { width: 15px; height: 15px; flex: none; }
.vai-prop-btn--cta { background: var(--vai-mkt-accent); border-color: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink, #fff); }
.vai-prop-btn--cta:hover { background: var(--vai-mkt-accent-hover); border-color: var(--vai-mkt-accent-hover); color: var(--vai-mkt-accent-ink, #fff); }
.vai-prop-btn--line { border-color: var(--vai-mkt-border); background: var(--vai-mkt-surface); color: var(--vai-mkt-ink); }
.vai-prop-btn--line:hover { background: var(--vai-mkt-surface-3); }
.vai-prop-who {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vai-mkt-border);
}
.vai-prop-who__av {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--vai-mkt-surface-3); color: var(--vai-mkt-muted);
    font-size: 13px; font-weight: 700;
}
.vai-prop-who b { display: block; font-size: 12.5px; font-weight: 650; }
.vai-prop-who span { font-size: 11.5px; color: var(--vai-mkt-muted); }
.vai-prop-card--meta { padding: 10px 16px; }
.vai-prop-meta {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 5px 0; font-size: 11.5px; color: var(--vai-mkt-muted);
    font-variant-numeric: tabular-nums;
}
.vai-prop-meta span:last-child { color: var(--vai-mkt-ink-2); font-weight: 600; }

/* The owner's own notice: what was written for them, and how to replace it. */
.vai-prop-card--ai {
    border-color: color-mix(in srgb, var(--vai-prop-ai) 32%, transparent);
    background: color-mix(in srgb, var(--vai-prop-ai) 9%, var(--vai-mkt-surface-2));
}
.vai-prop-card__aih { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--vai-prop-ai); }
.vai-prop-card__aih svg { width: 13px; height: 13px; }
.vai-prop-card--ai p { margin: 8px 0 12px; font-size: 12px; line-height: 1.6; color: var(--vai-mkt-ink-2); }
.vai-prop-btn--ai {
    width: 100%;
    border-color: color-mix(in srgb, var(--vai-prop-ai) 40%, transparent);
    color: var(--vai-prop-ai);
    background: color-mix(in srgb, var(--vai-prop-ai) 12%, transparent);
}

@media (max-width: 991px) {
    .vai-mkt[data-market="property"] .vai-mkt-split {
        grid-template-areas: "gal" "head" "side" "main" "sim";
    }
    .vai-prop-mos--3, .vai-prop-mos--4, .vai-prop-mos--5 { aspect-ratio: 16 / 10; }
    .vai-prop-facts { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; }
    .vai-prop-lb { padding: 20px 16px 48px; }
    .vai-prop-lb__nav { width: 34px; height: 34px; }
}

/* Detail sections — the split layout, gallery and price card are the shell's */
.vai-prop-about { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--vai-mkt-ink-2); }
.vai-prop-about p { margin: 0 0 11px; }
.vai-prop-about p:last-child { margin-bottom: 0; }
.vai-prop-about__h { margin: 18px 0 7px; font-size: 13.5px; font-weight: 700; color: var(--vai-mkt-ink); letter-spacing: -.01em; }
.vai-prop-about__lead { font-size: 14.5px; color: var(--vai-mkt-ink); }

/* Amenities — two columns of ticks, like a spec sheet. */
.vai-prop-amen { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; }
.vai-prop-amen span { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--vai-mkt-ink-2); }
.vai-prop-amen svg { width: 15px; height: 15px; flex: none; color: var(--vai-mkt-accent, #3d9a6a); }

/* Charts */
.vai-mkt[data-market="property"] { --vai-prop-c2: #f59e0b; --vai-prop-c3: #94a3b8; }
.vai-prop-ins { display: grid; gap: 14px; }
.vai-prop-chart { border: 1px solid var(--vai-mkt-border); border-radius: 16px; background: var(--vai-mkt-surface-2); padding: 16px 18px; }
.vai-prop-chart__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vai-prop-chart__h { margin: 0 0 14px; font-size: 13.5px; font-weight: 700; color: var(--vai-mkt-ink); }
.vai-prop-chart__top .vai-prop-chart__h { margin: 0; }
.vai-prop-chart__note { margin: 12px 0 0; font-size: 12.5px; color: var(--vai-mkt-muted); }
.vai-prop-chart__note.is-low { color: var(--vai-mkt-accent, #3d9a6a); }
.vai-prop-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--vai-mkt-surface-3); }
.vai-prop-seg button { border: 0; background: transparent; padding: 5px 11px; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--vai-mkt-muted); cursor: pointer; }
.vai-prop-seg button.is-on { background: var(--vai-mkt-surface); color: var(--vai-mkt-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.vai-prop-bars { display: grid; gap: 11px; }
.vai-prop-cbar { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: 12px; font-size: 12.5px; }
.vai-prop-cbar__k { color: var(--vai-mkt-ink-2); line-height: 1.3; }
.vai-prop-cbar__k small { display: block; font-size: 11px; color: var(--vai-mkt-muted); }
.vai-prop-cbar__track { height: 10px; border-radius: 999px; background: var(--vai-mkt-surface-3); overflow: hidden; }
.vai-prop-cbar__fill { display: block; height: 100%; border-radius: inherit; background: var(--vai-prop-c3); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.vai-prop-cbar.is-me .vai-prop-cbar__fill, .vai-prop-bars--near .vai-prop-cbar__fill { background: var(--vai-mkt-accent, #3d9a6a); }
.vai-prop-cbar.is-me .vai-prop-cbar__k { color: var(--vai-mkt-ink); font-weight: 650; }
.vai-prop-cbar__v { min-width: 72px; text-align: right; font-weight: 650; color: var(--vai-mkt-ink); font-variant-numeric: tabular-nums; }
.vai-prop-hist { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 22px; border-bottom: 1px solid var(--vai-mkt-border); }
.vai-prop-hist__col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.vai-prop-hist__bar { position: relative; width: 100%; border-radius: 6px 6px 2px 2px; background: var(--vai-prop-c3); opacity: .55; }
.vai-prop-hist__col.is-me .vai-prop-hist__bar { background: var(--vai-mkt-accent, #3d9a6a); opacity: 1; }
.vai-prop-hist__bar em { position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 650; color: var(--vai-mkt-accent, #3d9a6a); }
.vai-prop-hist__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--vai-mkt-muted); font-variant-numeric: tabular-nums; }
.vai-prop-emi { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
.vai-prop-emi__ctrls { display: grid; gap: 14px; }
.vai-prop-emi__s { display: grid; gap: 6px; font-size: 12.5px; color: var(--vai-mkt-ink-2); }
.vai-prop-emi__sh { display: flex; justify-content: space-between; }
.vai-prop-emi__sh b { color: var(--vai-mkt-ink); }
.vai-prop-emi__s input { width: 100%; accent-color: var(--vai-mkt-accent, #3d9a6a); }
.vai-prop-emi__out { display: flex; align-items: center; gap: 18px; }
.vai-prop-emi__donut { position: relative; flex: none; width: 144px; height: 144px; }
.vai-prop-emi__donut svg { width: 100%; height: 100%; display: block; }
.vai-prop-emi__mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.vai-prop-emi__mid b { font-size: 13px; letter-spacing: -.01em; font-weight: 750; color: var(--vai-mkt-ink); }
.vai-prop-emi__mid span { font-size: 11px; color: var(--vai-mkt-muted); }
.vai-prop-emi__legend { display: grid; gap: 8px; font-size: 12px; min-width: 0; }
.vai-prop-emi__legend div { display: grid; grid-template-columns: 10px 1fr; column-gap: 7px; align-items: center; }
.vai-prop-emi__legend i { width: 10px; height: 10px; border-radius: 3px; }
.vai-prop-emi__legend span { color: var(--vai-mkt-muted); }
.vai-prop-emi__legend b { grid-column: 2; color: var(--vai-mkt-ink); font-weight: 650; }
@media (max-width: 760px) {
    .vai-prop-emi { grid-template-columns: 1fr; }
    .vai-prop-cbar { grid-template-columns: 1fr auto; }
    .vai-prop-cbar__track { grid-column: 1 / -1; grid-row: 2; }
}

/* Contact */
.vai-prop-contact { border: 1px solid var(--vai-mkt-border); border-radius: 16px; background: var(--vai-mkt-surface-2); padding: 16px; }
.vai-prop-contact__who { display: flex; align-items: center; gap: 11px; }
.vai-prop-contact__av {
    flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--vai-mkt-accent, #3d9a6a); color: #fff; font-size: 15px; font-weight: 700;
}
.vai-prop-contact__who > div > b { display: block; font-size: 14px; font-weight: 650; color: var(--vai-mkt-ink); }
.vai-prop-contact__who > div > span { display: block; font-size: 12px; color: var(--vai-mkt-muted); }
.vai-prop-contact__ways { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vai-prop-contact__form { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vai-mkt-border); }
.vai-prop-contact__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vai-prop-contact__form .vai-prop-in { width: 100%; box-sizing: border-box; background: var(--vai-mkt-surface); font-size: 13.5px; }
.vai-prop-contact__form .vai-prop-in--area { min-height: 92px; }
.vai-prop-contact__send { justify-self: start; }
.vai-prop-contact__send[disabled] { opacity: .6; cursor: default; }
.vai-prop-contact__note { margin: 0; font-size: 12.5px; color: #dc2626; }
.vai-prop-contact__note.is-ok { color: var(--vai-mkt-accent, #3d9a6a); }
@media (max-width: 640px) { .vai-prop-contact__row { grid-template-columns: 1fr; } }
.vai-prop-locmap { position: relative; height: 250px; border: 1px solid var(--vai-mkt-border); border-radius: 14px; overflow: hidden; background: var(--vai-mkt-surface-3) center / cover no-repeat; }
.vai-prop-locmap__ring {
    position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px;
    border-radius: 50%; background: rgba(22, 163, 74, .14); border: 1.5px solid rgba(22, 163, 74, .55); pointer-events: none;
}
.vai-prop-locnote { margin: 8px 0 0; font-size: 11.5px; color: var(--vai-mkt-muted); }

/* Similar rail */
.vai-mkt[data-market="property"] .vai-mkt-d__rail { gap: 14px; }
.vai-mkt[data-market="property"] .vai-mkt-d__rail-item { flex-basis: 176px; width: 176px; }
.vai-prop-rail-p { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.vai-prop-rail-t { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--vai-mkt-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vai-prop-rail-s { margin-top: 3px; font-size: 11.5px; color: var(--vai-mkt-muted); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .vai-prop-map__canvas { height: 320px; }
}
@media (max-width: 560px) {
    .vai-mkt[data-market="property"] .vai-mkt__grid,
    .vai-mkt[data-market="property"] .vai-mkt__skeleton { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 13px; }
    .vai-prop-price { font-size: 16.5px; }
    .vai-mkt[data-market="property"] .vai-mkt-card__body { padding: 11px 11px 12px; }
    .vai-prop-specs { gap: 9px; font-size: 11.5px; }
}

/* ── RTL ────────────────────────────────────────────────────────────── */
[data-dashboard-language="rtl"] .vai-prop-tag { left: auto; right: 10px; }
[data-dashboard-language="rtl"] .vai-prop-feat { right: auto; left: 10px; }

.vai-prop-edit-only { display: none !important; }
.vai-mkt-split.is-editing .vai-prop-edit-only { display: flex !important; }
.vai-mkt-split.is-editing .vai-prop-view { display: none !important; }
.vai-prop-airow { display: flex; align-items: flex-start; gap: 8px; width: 100%; }
.vai-prop-in {
    width: 100%; min-width: 0;
    border: 1px solid var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface-2); color: var(--vai-mkt-ink);
    font: inherit; padding: 10px 12px;
}
.vai-prop-in:focus { outline: none; border-color: var(--vai-mkt-accent); }
.vai-prop-in--title { font-size: 22px; font-weight: 750; letter-spacing: -.025em; line-height: 1.3; }
.vai-prop-in--area { min-height: 148px; resize: vertical; line-height: 1.65; font-size: 13.5px; }
.vai-prop-in--num { text-align: center; font-weight: 700; padding: 6px 4px; font-size: 14px; }
.vai-prop-ai {
    flex: 0 0 auto; width: 36px; height: 36px; margin-top: 2px;
    border: 1px solid var(--vai-mkt-border); border-radius: 10px;
    background: var(--vai-mkt-surface); color: var(--vai-mkt-accent, #22c55e);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.vai-prop-ai svg { width: 16px; height: 16px; }
.vai-prop-ai:hover { background: var(--vai-mkt-surface-3); }
.vai-prop-ai.is-busy { opacity: .5; pointer-events: none; }
.vai-prop-err { display: none; margin-top: 8px; font-size: 12px; color: #ef4444; text-align: center; }

/* The map is the first thing in the list, and it reads as part of the header
   rather than as a card floating under it — so the list's own 20px top padding
   showed as an empty band between the two. Only while the map is actually
   there: with it hidden the grid becomes the first child and wants that
   padding back, which is what the :has() is for. */
.vai-mkt[data-market="property"] .vai-mkt__list:has(> .vai-mkt__panel:not([hidden])) {
    padding-top: 0;
}

/* ── Topbar ─────────────────────────────────────────────────────────────
   One filled button in the row, and it is the one that starts a listing.
   Everything else — Filters, My Properties — goes quiet so the eye lands
   on "Create Property" instead of scanning five identical outlines.
   Scoped to this page: the other catalogues keep the shell's own look.

   The layout switcher is hidden rather than removed: the filter button is
   inserted before it (buildFilterBar), so the node has to stay in the DOM. */
.vai-mkt[data-market="property"] .vai-mkt__views { display: none; }

/* The header, set as option B of the header review (2026-10-15): the
   system face, quiet grey buttons with no outline, and "Create Property" as
   the one inverted button — white on the dark theme, near-black on the
   light — the way Manus marks its primary action. Sizes are what paints:
   the dashboard runs at zoom .9 (--vzoom), so each is divided by it. */
.vai-mkt[data-market="property"] {
    --prop-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --prop-btn: #f1f1f3; --prop-btn-hover: #e6e6e9; --prop-btn-ink: #18181b;
    --prop-cta: #18181b; --prop-cta-hover: #2e2e32; --prop-cta-ink: #ffffff;
    --prop-field: #f1f1f3; --prop-field-ink: #18181b; --prop-field-ph: #8e8e93;
    --prop-sub: #71717a;
}
body[data-background-color="dark"] .vai-mkt[data-market="property"] {
    --prop-btn: #323234; --prop-btn-hover: #3d3d40; --prop-btn-ink: #ececee;
    --prop-cta: #f2f2f3; --prop-cta-hover: #ffffff; --prop-cta-ink: #111113;
    --prop-field: #2e2e30; --prop-field-ink: #f2f2f3; --prop-field-ph: #8e8e93;
    --prop-sub: #9a9aa2;
}
.vai-mkt[data-market="property"] .vai-mkt__title {
    font-family: var(--prop-font);
    font-size: calc(24px / var(--vzoom, 1));
    font-weight: 650;
    letter-spacing: -.02em;
}
/* The count is a plain grey line beside the title, not a pill. */
.vai-mkt[data-market="property"] .vai-mkt__count {
    padding: 0; border-radius: 0; background: none;
    font-family: var(--prop-font);
    font-size: calc(14px / var(--vzoom, 1));
    font-weight: 500;
    color: var(--prop-sub);
}

.vai-mkt[data-market="property"] .vai-mkt-fbtn,
.vai-mkt[data-market="property"] .vai-mkt-create {
    height: calc(36px / var(--vzoom, 1));
    padding: 0 calc(14px / var(--vzoom, 1));
    gap: calc(8px / var(--vzoom, 1));
    border: 0;
    border-radius: calc(10px / var(--vzoom, 1));
    background: var(--prop-btn);
    color: var(--prop-btn-ink);
    font-family: var(--prop-font);
    font-size: calc(14px / var(--vzoom, 1));
    font-weight: 500;
}
.vai-mkt[data-market="property"] .vai-mkt-fbtn svg,
.vai-mkt[data-market="property"] .vai-mkt-create svg {
    width: calc(16px / var(--vzoom, 1));
    height: calc(16px / var(--vzoom, 1));
    opacity: 1;
}
.vai-mkt[data-market="property"] .vai-mkt-fbtn:hover,
.vai-mkt[data-market="property"] .vai-mkt-create:hover,
.vai-mkt[data-market="property"] .vai-mkt-fbtn.is-on,
.vai-mkt[data-market="property"] .vai-mkt-fbtn.is-open {
    background: var(--prop-btn-hover);
    color: var(--prop-btn-ink);
}

.vai-mkt[data-market="property"] .vai-mkt-create--cta {
    padding: 0 calc(16px / var(--vzoom, 1));
    background: var(--prop-cta);
    color: var(--prop-cta-ink);
    font-weight: 600;
}
.vai-mkt[data-market="property"] .vai-mkt-create--cta:hover {
    background: var(--prop-cta-hover);
    color: var(--prop-cta-ink);
}

/* ── Scroll motion ──────────────────────────────────────────────────────
   initScrollMotion() puts .vai-prop-rev on a card only when it has an
   observer ready to take it off again, so nothing here can leave a card
   invisible on its own. */
.vai-prop-rev { opacity: 0; }
.vai-prop-rev.is-in { animation: vaiPropIn .5s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes vaiPropIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* The map stays put at the top of the scrollport and the listings ride up
   over it, covering it completely by the time the first row reaches the top.
   It is still in the flow, so nothing has to reserve space for it. */
.vai-mkt[data-market="property"] .vai-prop-map {
    position: sticky;
    top: 0;
    z-index: 0;
    will-change: opacity;
    animation: vaiPropMapIn .55s cubic-bezier(.22, .61, .36, 1);
}

/* The sheet that does the covering. Full-bleed background — the list's own
   side padding is cancelled and re-added — so the map cannot show past the
   cards at the edges, and a rounded lip on the grid makes the overlap read
   as one surface sliding rather than a gap closing. */
.vai-mkt[data-market="property"] .vai-mkt__grid,
.vai-mkt[data-market="property"] .vai-mkt__skeleton,
.vai-mkt[data-market="property"] .vai-mkt__more,
.vai-mkt[data-market="property"] .vai-mkt__state {
    position: relative;
    z-index: 1;
    background: var(--vai-mkt-bg);
    margin-inline: -24px;
    padding-inline: 24px;
}
.vai-mkt[data-market="property"] .vai-mkt__grid {
    padding-top: 16px;
    border-radius: 16px 16px 0 0;
}
/* Only while the map is actually above it — with no map the grid is just
   the top of the page and a lip there would be decoration. */
.vai-mkt__list:has(> .vai-mkt__panel:not([hidden])) .vai-mkt__grid {
    box-shadow: 0 -12px 26px -20px rgba(0, 0, 0, .45);
}
@media (max-width: 991px) {
    .vai-mkt[data-market="property"] .vai-mkt__grid,
    .vai-mkt[data-market="property"] .vai-mkt__skeleton,
    .vai-mkt[data-market="property"] .vai-mkt__more,
    .vai-mkt[data-market="property"] .vai-mkt__state {
        margin-inline: -16px;
        padding-inline: 16px;
    }
}
@keyframes vaiPropMapIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vai-prop-rev,
    .vai-prop-rev.is-in,
    .vai-mkt[data-market="property"] .vai-prop-map { animation: none; opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════════════
   Map-search layout
   ─────────────────
   The map used to be a banner sitting on top of the results: on a laptop it
   took the whole first screen, and the listings — the thing people came for
   — started below the fold. It becomes the left half of the page instead,
   with the listings scrolling beside it, which is how every property portal
   is read: point at an area, look at what is in it.

   Three other moves come with it: the filters leave the crowded topbar for
   a row of their own, the results column gets a heading that says
   what you are looking at, and each card carries its facts as two boxes
   under the price with one obvious action at the bottom.

   All of it is scoped to [data-market="property"] — the other three Market
   pages keep the shell's default look.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The filter row ────────────────────────────────────────────────── */
.vai-prop-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 11px 24px;
    border-bottom: 1px solid var(--vai-mkt-border);
    background: var(--vai-mkt-surface);
}
.vai-mkt.is-detail .vai-prop-bar { display: none; }
/* The shell's search box is MOVED here (not copied), so the engine keeps
   listening to the same element. It only needs a new size. */
.vai-mkt[data-market="property"] .vai-prop-bar .vai-mkt__search {
    flex: 0 1 300px; min-width: 190px; height: 40px;
}
.vai-mkt[data-market="property"] .vai-mkt__search-input {
    height: calc(38px / var(--vzoom, 1));
    border: 0;
    border-radius: calc(10px / var(--vzoom, 1));
    background: var(--prop-field);
    color: var(--prop-field-ink);
    font-family: var(--prop-font);
    font-size: calc(14.5px / var(--vzoom, 1));
}
.vai-mkt[data-market="property"] .vai-mkt__search-input::placeholder { color: var(--prop-field-ph); }
/* dashboard-dark.css paints every catalogue search box in the admin's input
   colour with !important; on this header the field is one of the grey
   controls, so it keeps their grey. */
body[data-background-color="dark"] .vai-mkt[data-market="property"] .vai-mkt__search-input {
    background: var(--prop-field) !important;
    background-color: var(--prop-field) !important;
    border-color: transparent !important;
    color: var(--prop-field-ink) !important;
}
.vai-prop-bar .vai-prop-filters { margin-left: auto; }
.vai-prop-bar .vai-mkt-actions { flex: 0 0 auto; }
/* AI Leasing Agent takes the right-hand end of the filter row, just before
   Filters; on a wide enough screen the row stops wrapping and the search box
   gives up a little width instead, so every control stays on one line. */
.vai-prop-bar .vai-prop-leasing { margin-left: auto; flex: 0 0 auto; }
.vai-prop-bar .vai-prop-leasing + .vai-prop-filters { margin-left: 0; }
@media (min-width: 1320px) {
    .vai-mkt[data-market="property"] .vai-prop-bar { flex-wrap: nowrap; }
    .vai-mkt[data-market="property"] .vai-prop-bar .vai-mkt__search { min-width: 170px; }
}
/* In the topbar the bar is part of the header line: no strip of its own,
   no rule under it, and no rule under the header either. */
.vai-mkt[data-market="property"] .vai-mkt__topbar { border-bottom: 0; flex-wrap: wrap; }
.vai-mkt[data-market="property"] .vai-mkt__topbar .vai-mkt__spacer { display: none; }
.vai-mkt__topbar .vai-prop-bar {
    flex: 1 1 auto; min-width: 0;
    padding: 0; border: 0; background: transparent;
}

/* ── Body: map column + results column ─────────────────────────────── */
.vai-prop-mapcol {
    flex: 0 0 46%; min-width: 340px; max-width: 780px;
    position: relative; min-height: 0;
    border-right: 1px solid var(--vai-mkt-border);
    background: var(--vai-mkt-surface-3);
}
/* Opening a listing is a page swap in this shell — the map steps aside with
   the list rather than sitting beside a detail it has nothing to do with. */
.vai-mkt__body.has-detail .vai-prop-mapcol,
.vai-mkt.is-detail .vai-prop-mapcol,
.vai-mkt[data-market="property"].is-map-off .vai-prop-mapcol { display: none; }

/* The map used to run flush into the shell's left edge, so it touched the
   sidebar with nothing between them and read as a hole in the page rather
   than a panel on it. It takes the same gutter the results column has, and
   with an edge to call its own it gets a border and a radius back. */
.vai-mkt[data-market="property"] .vai-prop-mapcol {
    /* Equal on both sides, so the map sits centred in its column instead of
       being pushed off one edge. The column stops painting its own surface:
       with a gutter on each side that fill was showing through as two grey
       strips, one against the sidebar and one against the listings. */
    padding: 18px 22px;
    background: transparent;
    border-right: 0;
}
.vai-mkt[data-market="property"] .vai-prop-mapcol .vai-mkt__panel {
    /* The positioning context for the count pill, which is placed 14px in:
       measured from the panel, that is 14px onto the map; measured from the
       column it would be 14px into the new gutter. */
    position: relative;
    height: 100%; margin: 0; overflow: hidden;
    border: 1px solid var(--vai-mkt-border);
    border-radius: 14px;
    display: flex; flex-direction: column;
}
.vai-mkt[data-market="property"] .vai-prop-mapcol .vai-prop-map__canvas {
    flex: 1 1 auto; height: auto; min-height: 0; border-top: 0;
}
/* The map's own strip floats ON the map now, the way map chrome does:
   a dark count pill top-left, nothing else competing with the tiles. */
.vai-mkt[data-market="property"] .vai-prop-mapcol .vai-prop-map__head {
    position: absolute; z-index: 3; left: 14px; top: 14px; right: 14px;
    padding: 0; pointer-events: none;
}
.vai-mkt[data-market="property"] .vai-prop-mapcol .vai-prop-map__title { display: none; }
.vai-mkt[data-market="property"] .vai-prop-mapcol .vai-prop-map__note {
    pointer-events: auto;
    padding: 7px 12px; border-radius: 6px;
    background: rgba(23, 23, 23, .78); color: #fff;
    font-size: 12.5px; font-weight: 600;
}
/* The Hide-map control moves into the results heading (see buildResultsHead),
   so the copy left behind in the map strip would be a second one. */
.vai-mkt[data-market="property"] .vai-prop-mapcol .vai-prop-map__toggle { display: none; }

/* ── Results column ────────────────────────────────────────────────── */
.vai-mkt[data-market="property"] .vai-mkt__list { padding: 18px 22px 60px; }
.vai-prop-rhead { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 14px; }
.vai-prop-rhead__box { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vai-prop-rhead__t {
    margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em;
    color: var(--vai-mkt-ink);
}
.vai-prop-rhead__n { font-size: 13px; font-weight: 600; color: var(--vai-mkt-ink-2); }
.vai-prop-rhead__sp { flex: 1 1 auto; }
.vai-prop-rhead__btn {
    height: 34px; padding: 0 11px;
    display: inline-flex; align-items: center; gap: 7px;
    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; cursor: pointer; white-space: nowrap;
}
.vai-prop-rhead__btn:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }
.vai-prop-rhead__btn svg { width: 12px; height: 12px; opacity: .6; }
.vai-prop-rhead__btn--sort { color: var(--vai-mkt-accent); border-color: transparent; background: transparent; }
.vai-prop-rhead__btn--sort:hover { background: var(--vai-mkt-surface-3); }

/* Two columns beside a map, whatever the window: three would make the cards
   too narrow to read a price and an address on one line each. */
@media (min-width: 1100px) {
    .vai-mkt[data-market="property"] .vai-mkt__grid:not(.is-list-view) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.vai-mkt[data-market="property"].is-map-off .vai-mkt__grid:not(.is-list-view) {
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}

/* ── The card ──────────────────────────────────────────────────────── */
.vai-mkt-card--property { border-radius: 11px; }
.vai-mkt[data-market="property"] .vai-mkt-card__body { padding: 13px 14px 15px; gap: 9px; display: flex; flex-direction: column; }
.vai-prop-badges { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
/* The badges were positioned individually on opposite corners; in a row they
   read as one line of facts instead of two labels fighting for the photo. */
.vai-mkt[data-market="property"] .vai-prop-badges .vai-prop-tag,
.vai-mkt[data-market="property"] .vai-prop-badges .vai-prop-feat {
    position: static; left: auto; right: auto; top: auto; bottom: auto;
}
/* The card body orders itself explicitly (price 1, title 2, place 3), so
   anything added to it has to take a number or it lands above the price. */
.vai-prop-chips { order: 4; display: flex; gap: 8px; margin-top: 2px; }
.vai-prop-chipbox {
    flex: 1 1 0; min-width: 0;
    padding: 8px 9px; border: 1px solid var(--vai-mkt-border); border-radius: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--vai-mkt-ink);
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vai-prop-cardnote { order: 5; font-size: 12px; color: var(--vai-mkt-muted); }
.vai-prop-cta-btn {
    order: 6;
    width: 100%; height: 42px; margin-top: 2px;
    border: 0; border-radius: 9px;
    background: var(--vai-mkt-accent); color: var(--vai-mkt-accent-ink);
    font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: inherit;
}
.vai-prop-cta-btn:hover { filter: brightness(1.06); }

/* ── Narrow: the two columns stack, map first and short ────────────── */
@media (max-width: 1099px) {
    .vai-mkt[data-market="property"] .vai-mkt__body { flex-direction: column; }
    .vai-prop-mapcol { flex: 0 0 auto; max-width: none; min-width: 0; }
    .vai-mkt[data-market="property"] .vai-prop-mapcol {
        height: clamp(268px, 34vh, 368px);
        padding: 14px 16px 0;
        background: transparent;
        border-right: 0; border-bottom: 0;
    }
    .vai-prop-bar { padding: 10px 16px; }
    /* Narrow: the title keeps its line and the controls wrap onto the next. */
    .vai-mkt__topbar .vai-prop-bar { flex-basis: 100%; padding: 4px 0 0; }
    .vai-mkt[data-market="property"] .vai-mkt__list { padding: 14px 16px 60px; }
}
@media (max-width: 620px) {
    .vai-prop-rhead__t { font-size: 18px; }
    .vai-prop-chips { flex-wrap: wrap; }
}


/* ══════════════════════════════════════════════════════════════════════
   Card polish + motion
   ────────────────────
   The cards read as heavy: a solid green button on every one turned the
   column into a stack of green bars, and nothing answered the pointer
   beyond a 2px nudge. The button is outlined now and fills when its card
   is hovered; the card lifts, the photo drifts in, a light sweeps across
   it, and the arrow on the button steps forward. Entrance is a short wave
   (initScrollMotion), the map and the heading settle in once on load.
   ══════════════════════════════════════════════════════════════════════ */
.vai-mkt[data-market="property"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card {
    border-radius: 18px;
    border: 1px solid var(--vai-mkt-border);
    background: var(--vai-mkt-surface);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1), border-color .3s ease;
}
.vai-mkt[data-market="property"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--vai-mkt-accent) 45%, var(--vai-mkt-border));
    box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--vai-mkt-accent) 55%, transparent), 0 10px 22px -14px rgba(0, 0, 0, .35);
}

/* Photo: a slow drift in, a deeper scrim, and one sweep of light. */
.vai-mkt[data-market="property"] .vai-mkt-card__media { position: relative; overflow: hidden; isolation: isolate; }
.vai-mkt[data-market="property"] .vai-mkt-card__img { transition: transform .9s cubic-bezier(.2, .8, .2, 1), filter .5s ease; }
.vai-mkt[data-market="property"] .vai-mkt-card:hover .vai-mkt-card__img { transform: scale(1.08); filter: saturate(1.08); }
.vai-mkt[data-market="property"] .vai-prop-scrim { height: 55%; opacity: .8; transition: opacity .4s ease; z-index: 1; }
.vai-mkt[data-market="property"] .vai-mkt-card:hover .vai-prop-scrim { opacity: 1; }
.vai-mkt[data-market="property"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card__media::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
    transform: translateX(-120%);
}
.vai-mkt[data-market="property"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card:hover .vai-mkt-card__media::after {
    transform: translateX(120%); transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

/* Badges: frosted, and they slide in after the card does. */
.vai-mkt[data-market="property"] .vai-prop-badges .vai-prop-tag,
.vai-mkt[data-market="property"] .vai-prop-badges .vai-prop-feat {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    animation: vaiPropBadge .5s .25s cubic-bezier(.2, .8, .2, 1) both;
}
.vai-mkt[data-market="property"] .vai-prop-badges .vai-prop-feat { animation-delay: .33s; }
.vai-mkt[data-market="property"] .vai-prop-tag--rent .vai-prop-tag__dot,
.vai-mkt[data-market="property"] .vai-prop-tag--sale .vai-prop-tag__dot { animation: vaiPropDot 2.4s ease-in-out infinite; }
.vai-mkt[data-market="property"] .vai-prop-feat svg { animation: vaiPropTwinkle 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes vaiPropBadge { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes vaiPropDot { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 3px transparent; } }
.vai-mkt[data-market="property"] .vai-prop-tag--rent .vai-prop-tag__dot { color: rgba(67, 56, 202, .35); }
.vai-mkt[data-market="property"] .vai-prop-tag--sale .vai-prop-tag__dot { color: rgba(15, 118, 110, .35); }
@keyframes vaiPropTwinkle { 0%, 80%, 100% { transform: scale(1) rotate(0); } 88% { transform: scale(1.3) rotate(72deg); } }

/* Body: the price leads, the facts sit on soft tiles instead of boxes. */
.vai-mkt[data-market="property"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card__body { padding: 16px 16px 16px; gap: 8px; }
.vai-mkt[data-market="property"] .vai-mkt__grid:not(.is-list-view) .vai-prop-price { font-size: 22px; font-variant-numeric: tabular-nums; }
.vai-mkt[data-market="property"] .vai-prop-price__per { color: var(--vai-mkt-accent); font-weight: 650; }
.vai-mkt[data-market="property"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card__title { font-size: 14.5px; font-weight: 650; transition: color .25s ease; }
.vai-mkt[data-market="property"] .vai-mkt-card:hover .vai-mkt-card__title { color: var(--vai-mkt-accent); }
.vai-mkt[data-market="property"] .vai-prop-loc svg { color: var(--vai-mkt-accent); opacity: 1; }
.vai-mkt[data-market="property"] .vai-prop-chipbox {
    border: 0; border-radius: 10px;
    background: var(--vai-mkt-surface-3);
    padding: 9px 10px; font-variant-numeric: tabular-nums;
    transition: background .3s ease;
}
.vai-mkt[data-market="property"] .vai-mkt-card:hover .vai-prop-chipbox { background: color-mix(in srgb, var(--vai-mkt-accent) 10%, var(--vai-mkt-surface-3)); }

/* The button: outlined at rest, filled on hover, arrow steps forward. */
.vai-mkt[data-market="property"] .vai-prop-cta-btn {
    position: relative; overflow: hidden; z-index: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; border-radius: 11px;
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--vai-mkt-accent) 55%, transparent);
    color: var(--vai-mkt-accent);
    transition: color .3s ease, border-color .3s ease;
}
.vai-mkt[data-market="property"] .vai-prop-cta-btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--vai-mkt-accent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.vai-mkt[data-market="property"] .vai-prop-cta-btn::after {
    content: "→"; font-size: 15px; line-height: 1;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.vai-mkt[data-market="property"] .vai-mkt-card:hover .vai-prop-cta-btn { color: var(--vai-mkt-accent-ink); border-color: var(--vai-mkt-accent); filter: none; }
.vai-mkt[data-market="property"] .vai-mkt-card:hover .vai-prop-cta-btn::before { transform: scaleX(1); }
.vai-mkt[data-market="property"] .vai-mkt-card:hover .vai-prop-cta-btn::after { transform: translateX(4px); }
[data-dashboard-language="rtl"] .vai-mkt[data-market="property"] .vai-prop-cta-btn::after { content: "←"; }
[data-dashboard-language="rtl"] .vai-mkt[data-market="property"] .vai-prop-cta-btn::before { transform-origin: right; }
[data-dashboard-language="rtl"] .vai-mkt[data-market="property"] .vai-mkt-card:hover .vai-prop-cta-btn::after { transform: translateX(-4px); }

/* Entrance: a touch more travel and a soft scale, still one short wave. */
@keyframes vaiPropIn {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.vai-prop-rev.is-in { animation-duration: .65s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* The heading and the map's count pill settle in once. */
.vai-mkt[data-market="property"] .vai-prop-rhead { animation: vaiPropRise .55s .05s cubic-bezier(.2, .8, .2, 1) both; }
.vai-mkt[data-market="property"] .vai-prop-mapcol .vai-prop-map__note { animation: vaiPropRise .55s .35s cubic-bezier(.2, .8, .2, 1) both; }
.vai-mkt[data-market="property"] .vai-prop-mapcol .vai-mkt__panel { animation: vaiPropMapZoom .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vaiPropRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vaiPropMapZoom { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .vai-mkt[data-market="property"] .vai-mkt-card,
    .vai-mkt[data-market="property"] .vai-mkt-card *,
    .vai-mkt[data-market="property"] .vai-mkt-card *::before,
    .vai-mkt[data-market="property"] .vai-mkt-card *::after,
    .vai-mkt[data-market="property"] .vai-prop-rhead,
    .vai-mkt[data-market="property"] .vai-prop-mapcol .vai-mkt__panel,
    .vai-mkt[data-market="property"] .vai-prop-mapcol .vai-prop-map__note { animation: none !important; transition: none !important; }
    .vai-mkt[data-market="property"] .vai-mkt__grid:not(.is-list-view) .vai-mkt-card:hover,
    .vai-mkt[data-market="property"] .vai-mkt-card:hover .vai-mkt-card__img { transform: none; }
}

/* ── Detail: photos room by room, everything else in one pane ────────────
   The listing's photos are grouped by the room their file is named after
   and run down the left; price, facts, actions and the write-up sit in a
   470px pane on the right that keeps its place while the photos scroll.
   Below 1100px the two wrappers are display:contents and the stacked grid
   above lays the same pieces out, with each room as a swipe strip. */
.vai-prop-rooms { display: flex; flex-direction: column; gap: 22px; }
.vai-prop-rooms__nav { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.vai-prop-rooms__nav::-webkit-scrollbar { display: none; }
.vai-prop-rooms__chip {
    flex: none; height: 34px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--vai-mkt-border-2); background: transparent; color: var(--vai-mkt-ink-2);
    font: inherit; font-size: 13px; font-weight: 550; white-space: nowrap; cursor: pointer;
}
.vai-prop-rooms__chip:hover { background: var(--vai-mkt-surface-3); }
.vai-prop-rooms__chip.is-on { background: var(--vai-mkt-ink); border-color: var(--vai-mkt-ink); color: var(--vai-mkt-bg); }
.vai-prop-rooms__all {
    flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--vai-mkt-border-2); background: transparent; color: var(--vai-mkt-ink);
    font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.vai-prop-rooms__all:hover { background: var(--vai-mkt-surface-3); }
.vai-prop-rooms__all svg { width: 13px; height: 13px; }
.vai-prop-room { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 66px; }
.vai-prop-room__h { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.012em; color: var(--vai-mkt-ink); }
.vai-prop-room__h span { font-size: 12.5px; font-weight: 500; color: var(--vai-mkt-muted); }
.vai-prop-room__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vai-prop-room__t { margin: 0; position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3; cursor: zoom-in; background: var(--vai-mkt-surface-3); }
.vai-prop-room__grid.is-one .vai-prop-room__t,
.vai-prop-room__grid.is-odd .vai-prop-room__t:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.vai-prop-room__t::after { content: ""; position: absolute; inset: 0; background: rgba(9, 9, 11, .14); opacity: 0; transition: opacity .15s ease; }
.vai-prop-room__t:hover::after { opacity: 1; }
.vai-prop-room__t > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.vai-prop-panebar { display: none; }
.vai-prop-more {
    display: inline-flex; align-items: center; margin-top: 10px; padding: 0; border: 0; background: none;
    color: var(--vai-mkt-ink); font: inherit; font-size: 13px; font-weight: 650;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.vai-prop-more[hidden] { display: none; }
.vai-prop-more--line {
    margin-top: 14px; height: 36px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--vai-mkt-border-2); text-decoration: none;
}
.vai-prop-more--line:hover { background: var(--vai-mkt-surface-3); }
.vai-prop-about.is-clamped:not(.is-open) {
    max-height: calc(1.7em * 6); overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.vai-prop-amen .is-extra { display: none; }
.vai-prop-amen.is-all .is-extra { display: flex; }
.vai-prop-amen svg { width: 17px; height: 17px; color: var(--vai-mkt-ink); }

@media (max-width: 1099.98px) {
    /* The shell stacks list and detail in a column here, and a column flex
       item keeps min-height:auto — the detail grew to its full content
       height inside a root that clips, so a listing could not be scrolled
       past its first screen. */
    .vai-mkt[data-market="property"] .vai-mkt__detail { min-height: 0; }
    .vai-mkt[data-market="property"] .vai-mkt__detail-body:has(.vai-prop-mbar) { padding-bottom: 180px; }
    .vai-mkt-split__photos, .vai-mkt-split__pane { display: contents; }
    .vai-prop-room__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .vai-prop-room__grid::-webkit-scrollbar { display: none; }
    .vai-prop-room__t,
    .vai-prop-room__grid.is-odd .vai-prop-room__t:first-child { flex: 0 0 82%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
    .vai-prop-room__grid.is-one .vai-prop-room__t { flex-basis: 100%; aspect-ratio: 16 / 10; }
    /* The photos come first here, so price and Message ride along at the
       bottom of the screen instead of waiting a dozen photos down. Fixed,
       not sticky: the shell's column runs taller than the screen when the
       app banner is showing, and a sticky bar parked below the fold. */
    .vai-prop-mbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--vai-mkt-surface); border-top: 1px solid var(--vai-mkt-border);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
    }
    .vai-prop-mbar__p { display: flex; align-items: baseline; gap: 3px; min-width: 0; font-size: 19px; font-weight: 750; letter-spacing: -.02em; color: var(--vai-mkt-ink); }
    .vai-prop-mbar__p small { font-size: 13px; font-weight: 500; color: var(--vai-mkt-muted); }
    .vai-prop-mbar .vai-prop-btn { flex: none; width: auto; height: 44px; padding: 0 18px; }
}
/* Tablet widths keep the sidebar on screen; a full-width fixed bar would sit
   across it. */
@media (min-width: 992px) and (max-width: 1099.98px) {
    .vai-prop-mbar { display: none !important; }
    .vai-mkt[data-market="property"] .vai-mkt__detail-body:has(.vai-prop-mbar) { padding-bottom: 64px; }
}

@media (min-width: 1100px) {
    .vai-mkt[data-market="property"] .vai-mkt__detail-body:has(> .vai-mkt__detail-inner > .vai-mkt-split.is-rooms) {
        display: flex; padding: 0; overflow: hidden;
    }
    .vai-mkt[data-market="property"] .vai-mkt__detail-body:has(> .vai-mkt__detail-inner > .vai-mkt-split.is-rooms) > .vai-mkt__detail-inner {
        flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; display: flex;
    }
    .vai-mkt[data-market="property"] .vai-mkt-split.is-rooms {
        flex: 1 1 auto; min-width: 0;
        grid-template-columns: minmax(0, 1fr) 470px;
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "photos pane";
        gap: 0; align-items: stretch;
    }
    .vai-mkt-split.is-rooms > .vai-mkt-split__photos {
        grid-area: photos; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
        padding: 0 28px 48px 30px; scrollbar-width: thin;
    }
    .vai-mkt-split.is-rooms > .vai-mkt-split__pane {
        grid-area: pane; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
        display: flex; flex-direction: column; gap: 18px;
        padding: 14px 26px 48px; border-left: 1px solid var(--vai-mkt-border);
        background: var(--vai-mkt-surface-2); scrollbar-width: thin;
    }
    .vai-mkt-split.is-rooms .vai-prop-rooms__nav {
        position: sticky; top: 0; z-index: 2;
        margin: 0 -28px -8px -30px; padding: 16px 28px 12px 30px;
        background: var(--vai-mkt-bg);
    }
    .vai-mkt-split.is-rooms .vai-mkt-split__gal { margin: 0; }
    .vai-mkt-split.is-rooms .vai-mkt-split__head { margin: 0; }
    .vai-mkt-split.is-rooms .vai-mkt-split__side { position: static; }
    .vai-mkt-split.is-rooms .vai-mkt-split__sim { margin-top: 34px; }
    .vai-mkt-split.is-rooms .vai-mkt-split__main > .vai-prop-blk:first-child { margin-top: 4px; }
    .vai-mkt-split.is-rooms .vai-prop-amen { grid-template-columns: 1fr 1fr; }
    .vai-mkt-split.is-rooms .vai-prop-contact__row { grid-template-columns: 1fr 1fr; }
    .vai-mkt-split.is-rooms .vai-prop-contact__row > :last-child { grid-column: 1 / -1; }
    .vai-prop-mbar { display: none !important; }
    .vai-mkt-split.is-rooms .vai-prop-panebar { display: flex; align-items: center; justify-content: space-between; }
    .vai-prop-panebar button {
        display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; margin: 0 -10px;
        border: 0; border-radius: 8px; background: transparent; color: var(--vai-mkt-ink-2);
        font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .vai-prop-panebar button:hover { background: var(--vai-mkt-surface-3); color: var(--vai-mkt-ink); }
    .vai-prop-panebar svg { width: 15px; height: 15px; }
}