:root {
    --compare-ink: #111111;
    --compare-paper: #f5f4f0;
    --compare-line: #dedcd4;
    --compare-muted: #706f6b;
    --compare-gold: #b8962e;
    --compare-serif: 'Playfair Display', Georgia, serif;
    --compare-sans: 'Inter', Arial, sans-serif;
}

.viv-card-link { display: block; color: inherit; text-decoration: none; }
.viv-compare-control {
    padding: 0 20px 18px;
    background: #fff;
}
.viv-compare-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.viv-compare-control label {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-top: 1px solid #e0e0e0;
    color: #666;
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    transition: color .2s;
}
.viv-compare-control label:hover { color: #111; }
.viv-compare-box {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border: 1px solid #aaa79e;
    background: #fff;
    transition: border-color .2s, background .2s;
}
.viv-compare-control input:checked + label { color: #111; }
.viv-compare-control input:checked + label .viv-compare-box { border-color: #111; background: #111; }
.viv-compare-control input:checked + label .viv-compare-box::after { content: ''; width: 6px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.viv-compare-control input:focus-visible + label { outline: 2px solid var(--compare-gold); outline-offset: 3px; }
.viv-compare-control input:disabled + label { opacity: .35; cursor: not-allowed; }

.comparison-tray {
    position: fixed;
    z-index: 90;
    right: 22px;
    bottom: 22px;
    left: 22px;
    max-width: 1120px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(17,17,17,.97);
    color: #fff;
    box-shadow: 0 20px 55px rgba(0,0,0,.24);
}
.comparison-tray[hidden] { display: none; }
.comparison-tray__inner { min-height: 82px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 22px; padding: 13px 14px 13px 22px; }
.comparison-tray__heading { min-width: 118px; }
.comparison-tray__heading > span { display: block; margin-bottom: 5px; color: rgba(255,255,255,.5); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.comparison-tray__heading strong { font-family: var(--compare-serif); font-size: 19px; font-weight: 500; }
.comparison-tray__heading strong span { font: inherit; }
.comparison-tray__items { min-width: 0; display: flex; gap: 10px; }
.comparison-tray__item { min-width: 0; max-width: 210px; height: 52px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 28px; align-items: center; position: relative; border: 1px solid rgba(255,255,255,.16); }
.comparison-tray__item img { width: 48px; height: 50px; object-fit: cover; }
.comparison-tray__item span { overflow: hidden; padding: 0 9px; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.comparison-tray__item button { width: 28px; height: 100%; border: 0; background: transparent; color: rgba(255,255,255,.55); font-size: 17px; }
.comparison-tray__item button:hover { color: #fff; }
.comparison-tray__status { width: 126px; margin: 0; color: rgba(255,255,255,.48); font-size: 9px; line-height: 1.35; }
.comparison-tray__button { min-height: 50px; padding: 0 20px; border: 1px solid #fff; background: #fff; color: #111; font-size: 9px; font-weight: 750; text-transform: uppercase; transition: background .2s, color .2s, opacity .2s; }
.comparison-tray__button:disabled { opacity: .28; cursor: default; }
.comparison-tray__button:not(:disabled):hover { background: transparent; color: #fff; }

.compare-hero {
    padding: 142px max(24px, calc((100vw - 1240px) / 2)) 64px;
    background: var(--compare-paper);
    border-bottom: 1px solid var(--compare-line);
}
.comparison-page .bv-widget,
.comparison-page .blv-public-chat,
.not-found-page .bv-widget { display: none; }

.compare-hero__inner { max-width: 850px; }
.compare-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 54px;
    color: var(--compare-muted);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}
.compare-back span { color: var(--compare-gold); font-size: 16px; }
.compare-hero h1 {
    max-width: 760px;
    margin: 0 0 20px;
    font-family: var(--compare-serif);
    font-size: clamp(45px, 6vw, 78px);
    font-weight: 500;
    line-height: 1;
}
.compare-hero p:not(.eyebrow) {
    max-width: 700px;
    margin: 0;
    color: var(--compare-muted);
    font-size: 15px;
    line-height: 1.75;
}

.compare-workspace {
    min-height: 520px;
    padding: 58px max(24px, calc((100vw - 1240px) / 2)) 100px;
    background: #fff;
}
.compare-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 38px;
}
.compare-toolbar__count {
    display: block;
    margin-bottom: 7px;
    color: var(--compare-ink);
    font-family: var(--compare-serif);
    font-size: 25px;
}
.compare-toolbar p { margin: 0; color: var(--compare-muted); font-size: 11px; line-height: 1.5; }
.compare-add { width: min(100%, 380px); }
.compare-add label {
    display: block;
    margin-bottom: 8px;
    color: var(--compare-muted);
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}
.compare-add__control { display: grid; grid-template-columns: 1fr 48px; }
.compare-add select {
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--compare-line);
    border-right: 0;
    border-radius: 0;
    background: #fff;
    color: var(--compare-ink);
    font-size: 12px;
}
.compare-add button {
    height: 48px;
    border: 1px solid var(--compare-ink);
    background: var(--compare-ink);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    transition: background .2s, color .2s, opacity .2s;
}
.compare-add button:disabled { opacity: .25; cursor: default; }
.compare-add button:not(:disabled):hover { background: #fff; color: var(--compare-ink); }

.compare-empty {
    min-height: 390px;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid var(--compare-line);
    background: var(--compare-paper);
    text-align: center;
    padding: 46px 24px;
}
.compare-empty__mark { margin-bottom: 28px; color: var(--compare-gold); font-family: var(--compare-serif); font-size: 18px; }
.compare-empty h2 { margin: 0 0 12px; font-family: var(--compare-serif); font-size: clamp(32px, 4vw, 48px); font-weight: 500; }
.compare-empty p { max-width: 460px; margin: 0 0 28px; color: var(--compare-muted); font-size: 13px; line-height: 1.7; }
.compare-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 1px solid var(--compare-ink);
    background: var(--compare-ink);
    color: #fff;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .2s, color .2s;
}
.compare-button:hover { background: #fff; color: var(--compare-ink); }
.compare-button--light { border-color: #fff; background: #fff; color: #111; }
.compare-button--light:hover { background: transparent; color: #fff; }

.compare-notice {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 30px;
    padding: 18px 20px;
    border-left: 2px solid var(--compare-gold);
    background: var(--compare-paper);
}
.compare-notice span { color: var(--compare-ink); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.compare-notice p { margin: 0; color: var(--compare-muted); font-size: 12px; }

.compare-insights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 32px;
    border: 1px solid var(--compare-line);
}
.compare-insight { min-width: 0; padding: 24px 26px; border-right: 1px solid var(--compare-line); }
.compare-insight:last-child { border-right: 0; }
.compare-insight span { display: block; margin-bottom: 14px; color: var(--compare-gold); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.compare-insight strong { display: block; margin-bottom: 8px; font-family: var(--compare-serif); font-size: 17px; font-weight: 500; line-height: 1.25; }
.compare-insight p { margin: 0; color: var(--compare-muted); font-size: 11px; line-height: 1.55; }

.compare-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--compare-line); scrollbar-color: #b9b6ad transparent; }
.compare-swipe { display: none; }
.compare-grid {
    min-width: calc(190px + var(--compare-count) * 255px);
    display: grid;
    grid-template-columns: minmax(190px, .72fr) repeat(var(--compare-count), minmax(255px, 1fr));
    align-items: stretch;
}
.compare-grid__corner {
    min-height: 382px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    background: var(--compare-ink);
    color: #fff;
}
.compare-grid__corner span { margin-bottom: 7px; color: rgba(255,255,255,.5); font-size: 9px; text-transform: uppercase; }
.compare-grid__corner strong { font-family: var(--compare-serif); font-size: 22px; font-weight: 500; }
.compare-property { min-width: 0; position: relative; border-left: 1px solid var(--compare-line); background: #fff; }
.compare-remove {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%;
    background: rgba(10,10,10,.72);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    transition: background .2s, transform .2s;
}
.compare-remove:hover { background: #111; transform: scale(1.04); }
.compare-property__image { height: 214px; display: block; overflow: hidden; background: #ecebe7; }
.compare-property__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s; }
.compare-property__image:hover img { transform: scale(1.02); }
.compare-property__image span { height: 100%; display: grid; place-items: center; color: var(--compare-muted); font-size: 11px; }
.compare-property__body { min-height: 168px; display: flex; flex-direction: column; padding: 20px; }
.compare-property__body > span { overflow: hidden; margin-bottom: 7px; color: var(--compare-muted); font-size: 9px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.compare-property__body h2 { margin: 0 0 10px; font-family: var(--compare-serif); font-size: 18px; font-weight: 500; line-height: 1.22; }
.compare-property__body > strong { margin-bottom: 18px; font-size: 14px; }
.compare-property__actions { display: flex; gap: 16px; margin-top: auto; }
.compare-property__actions a { padding-bottom: 3px; border-bottom: 1px solid #bdbab1; color: var(--compare-ink); font-size: 9px; font-weight: 750; text-decoration: none; text-transform: uppercase; }
.compare-property__actions a:last-child { border-color: var(--compare-gold); color: #80691f; }

.compare-section-title {
    grid-column: 1 / -1;
    padding: 15px 18px;
    border-top: 1px solid var(--compare-line);
    background: var(--compare-paper);
    color: var(--compare-ink);
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}
.compare-label,
.compare-value {
    min-height: 70px;
    display: flex;
    align-items: center;
    padding: 16px 18px;
    border-top: 1px solid var(--compare-line);
}
.compare-label { background: #fbfbf9; color: var(--compare-muted); font-size: 10px; font-weight: 650; }
.compare-value { position: relative; border-left: 1px solid var(--compare-line); background: #fff; }
.compare-value strong { font-size: 12px; font-weight: 600; line-height: 1.45; }
.compare-value.is-missing strong { color: #aaa8a1; font-weight: 450; }
.compare-value.is-best { background: #fbf8ee; }
.compare-value.is-best::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--compare-gold); }
.compare-best-mark { position: absolute; top: 8px; right: 10px; color: #8a7022; font-size: 7px; font-weight: 750; text-transform: uppercase; }
.compare-disclaimer { max-width: 820px; margin: 18px 0 0; color: #8b8983; font-size: 10px; line-height: 1.6; }

.not-found {
    min-height: 720px;
    display: grid;
    grid-template-columns: minmax(300px, .75fr) minmax(460px, 1.25fr);
    align-items: center;
    gap: clamp(50px, 8vw, 130px);
    padding: 130px max(24px, calc((100vw - 1240px) / 2)) 70px;
    overflow: hidden;
    background: #111;
    color: #fff;
}
.not-found__code {
    color: transparent;
    font-family: var(--compare-serif);
    font-size: clamp(170px, 24vw, 330px);
    line-height: .74;
    -webkit-text-stroke: 1px rgba(255,255,255,.24);
    user-select: none;
}
.not-found__content { max-width: 650px; }
.not-found__content h1 { margin: 0 0 24px; font-family: var(--compare-serif); font-size: clamp(48px, 6vw, 82px); font-weight: 500; line-height: .98; }
.not-found__content > p:not(.eyebrow) { max-width: 590px; margin: 0; color: rgba(255,255,255,.65); font-size: 15px; line-height: 1.75; }
.not-found__actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.not-found__link { padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 10px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.not-found-listings { padding: 90px max(24px, calc((100vw - 1240px) / 2)) 110px; }
.not-found-listings__heading { max-width: 680px; margin-bottom: 42px; }
.not-found-listings__heading h2 { margin: 0; font-family: var(--compare-serif); font-size: clamp(36px, 4.5vw, 58px); font-weight: 500; line-height: 1.08; }
.not-found-listings__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.not-found-property { border: 1px solid var(--compare-line); color: inherit; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.not-found-property:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(0,0,0,.06); }
.not-found-property__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--compare-paper); }
.not-found-property__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s; }
.not-found-property:hover img { transform: scale(1.02); }
.not-found-property__body { padding: 20px; }
.not-found-property__body span { display: block; margin-bottom: 8px; color: var(--compare-muted); font-size: 9px; text-transform: uppercase; }
.not-found-property__body h3 { min-height: 44px; margin: 0 0 16px; font-family: var(--compare-serif); font-size: 18px; font-weight: 500; line-height: 1.25; }
.not-found-property__body strong { display: block; padding-top: 14px; border-top: 1px solid var(--compare-line); font-size: 13px; }

@media (max-width: 850px) {
    .comparison-tray__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
    .comparison-tray__status { display: none; }
    .compare-toolbar { align-items: stretch; flex-direction: column; }
    .compare-add { width: 100%; }
    .compare-insights { grid-template-columns: 1fr; }
    .compare-insight { border-right: 0; border-bottom: 1px solid var(--compare-line); }
    .compare-insight:last-child { border-bottom: 0; }
    .not-found { grid-template-columns: 1fr; align-content: center; gap: 42px; }
    .not-found__code { font-size: 180px; }
    .not-found-listings__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .viv-compare-control { padding-right: 18px; padding-left: 18px; }
    .comparison-tray { right: 10px; bottom: 10px; left: 10px; }
    .comparison-tray__inner { grid-template-columns: auto 1fr; gap: 10px 14px; padding: 12px; }
    .comparison-tray__heading { min-width: 0; }
    .comparison-tray__items { justify-content: flex-end; }
    .comparison-tray__item { width: 42px; grid-template-columns: 42px; border: 0; }
    .comparison-tray__item img { width: 42px; height: 46px; }
    .comparison-tray__item span { display: none; }
    .comparison-tray__item button { position: absolute; width: 18px; height: 18px; margin: -40px 0 0 26px; border-radius: 50%; background: #fff; color: #111; line-height: 16px; }
    .comparison-tray__button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
    .compare-hero { padding: 118px 18px 48px; }
    .compare-back { margin-bottom: 40px; }
    .compare-hero h1 { font-size: 46px; }
    .compare-workspace { padding: 42px 16px 70px; }
    .compare-notice { align-items: flex-start; flex-direction: column; gap: 6px; }
    .compare-scroll { margin-right: -16px; width: calc(100% + 16px); border-right: 0; }
    .compare-swipe { display: flex; justify-content: flex-end; gap: 7px; margin: -5px 0 10px; color: var(--compare-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
    .compare-swipe span { color: var(--compare-gold); font-size: 14px; line-height: 8px; }
    .compare-grid { min-width: calc(148px + var(--compare-count) * 222px); grid-template-columns: 148px repeat(var(--compare-count), 222px); }
    .compare-grid__corner { min-height: 346px; padding: 16px; }
    .compare-property__image { height: 178px; }
    .compare-property__body { min-height: 168px; padding: 16px; }
    .compare-property__body h2 { font-size: 16px; }
    .compare-property__actions { gap: 12px; }
    .compare-label, .compare-value { min-height: 66px; padding: 14px 12px; }
    .not-found { min-height: 680px; padding: 124px 20px 64px; }
    .not-found__code { font-size: 132px; }
    .not-found__content h1 { font-size: 48px; }
    .not-found__actions { align-items: flex-start; flex-direction: column; }
    .not-found-listings { padding: 70px 18px 80px; }
    .not-found-listings__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .compare-property__image img,
    .not-found-property,
    .not-found-property img { transition: none; }
}
