.sx[data-v-539b55573c7d7649] { background: var(--vb-bg, #fff); padding: 20px 0 56px;
}
.sx-wrap[data-v-539b55573c7d7649] { max-width: 1440px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; text-align: start;
}
.sx-head[data-v-539b55573c7d7649] { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.sx-crumbs[data-v-539b55573c7d7649] { font-size: 13px; color: var(--vb-muted, #5f6b78);
}
.sx-crumbs a[data-v-539b55573c7d7649] { color: inherit;
}
.sx-head h1[data-v-539b55573c7d7649] { margin: 4px 0 2px; font-size: clamp(26px, 3.5vw, 36px); color: var(--vb-heading, #1f1b4d);
}
.sx-count[data-v-539b55573c7d7649] { margin: 0; color: var(--vb-muted, #5f6b78);
}
.sx-tools[data-v-539b55573c7d7649] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.sx-sort[data-v-539b55573c7d7649] { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--vb-muted, #5f6b78);
}
.sx-sort select[data-v-539b55573c7d7649], .sx-filters select[data-v-539b55573c7d7649] { height: 40px; padding: 0 10px; border: 1px solid var(--vb-border, #dcd8ef); border-radius: 10px; font: inherit; background: #fff;
}
.sx-toggle[data-v-539b55573c7d7649], .sx-ftoggle[data-v-539b55573c7d7649] { height: 40px; padding: 0 14px; border: 1px solid var(--vb-border, #dcd8ef); border-radius: 10px; background: #fff; font: inherit; font-weight: 700; color: var(--vb-heading, #1f1b4d); cursor: pointer;
}
.sx-ftoggle[data-v-539b55573c7d7649] { display: none;
}
.sx-grid[data-v-539b55573c7d7649] { display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(0, .85fr); gap: 20px; align-items: start;
}
.sx-filters[data-v-539b55573c7d7649] { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; border: 1px solid var(--vb-border, #e4e1f2); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 14px; background: #fff;
}
.sx-fhead[data-v-539b55573c7d7649] { display: flex; justify-content: space-between; align-items: center;
}
.sx-fhead b[data-v-539b55573c7d7649] { color: var(--vb-heading, #1f1b4d);
}
.sx-filters fieldset[data-v-539b55573c7d7649] { border: 0; border-top: 1px solid var(--vb-border, #f1effa); margin: 0; padding: 10px 0 0; display: flex; flex-direction: column; gap: 6px;
}
.sx-filters legend[data-v-539b55573c7d7649] { padding: 0; font-weight: 800; font-size: 14px; color: var(--vb-heading, #1f1b4d); margin-bottom: 4px;
}
.sx-opt[data-v-539b55573c7d7649] { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--vb-text, #334155); cursor: pointer;
}
.sx-opt input[data-v-539b55573c7d7649] { width: 17px; height: 17px; margin: 0; accent-color: var(--vb-primary, #3b2f8f);
}
.sx-opt small[data-v-539b55573c7d7649] { margin-inline-start: auto; color: var(--vb-muted, #5f6b78);
}
.sx-range[data-v-539b55573c7d7649] { display: flex; gap: 6px; align-items: center;
}
.sx-range input[data-v-539b55573c7d7649] { width: 100%; min-width: 0; height: 38px; padding: 0 8px; border: 1px solid var(--vb-border, #dcd8ef); border-radius: 8px; font: inherit;
}
.sx-quick[data-v-539b55573c7d7649] { display: flex; flex-wrap: wrap; gap: 4px;
}
.sx-quick button[data-v-539b55573c7d7649] { padding: 4px 8px; border: 1px solid var(--vb-border, #dcd8ef); border-radius: 999px; background: #fff; font: inherit; font-size: 12px; cursor: pointer;
}
.sx-quick button.on[data-v-539b55573c7d7649] { background: var(--vb-primary, #3b2f8f); border-color: var(--vb-primary, #3b2f8f); color: #fff;
}
.sx-step[data-v-539b55573c7d7649] { display: flex; align-items: center; gap: 10px;
}
.sx-step button[data-v-539b55573c7d7649] { width: 32px; height: 32px; border: 1px solid var(--vb-border, #dcd8ef); border-radius: 50%; background: #fff; font-size: 18px; cursor: pointer;
}
.sx-step button[data-v-539b55573c7d7649]:disabled { opacity: .35;
}
.sx-step b[data-v-539b55573c7d7649] { min-width: 80px; text-align: center; color: var(--vb-heading, #1f1b4d); font-size: 14px;
}
.sx-link[data-v-539b55573c7d7649] { border: 0; background: none; padding: 0 0 0 4px; font: inherit; font-size: 13px; font-weight: 700; color: var(--vb-primary, #3b2f8f); cursor: pointer;
}
.sx-list[data-v-539b55573c7d7649] { display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.sx-empty[data-v-539b55573c7d7649] { padding: 24px; border: 2px dashed var(--vb-border, #dcd8ef); border-radius: 14px; color: var(--vb-muted, #5f6b78);
}
.sx-card[data-v-539b55573c7d7649] { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--vb-border, #e4e1f2); border-radius: 16px; overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.sx-card.active[data-v-539b55573c7d7649] { border-color: var(--vb-primary, #3b2f8f); box-shadow: 0 10px 30px -18px rgba(31, 27, 77, .5);
}
.sx-media[data-v-539b55573c7d7649] { position: relative; display: block; background: var(--vb-surface, #f7f6fc); min-height: 180px;
}
.sx-media img[data-v-539b55573c7d7649] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.sx-sample[data-v-539b55573c7d7649] { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 9px; border-radius: 999px; background: #f5a524; color: #1f1b4d; font-size: 12px; font-weight: 800;
}
.sx-body[data-v-539b55573c7d7649] { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.sx-top[data-v-539b55573c7d7649] { display: flex; justify-content: space-between; gap: 10px;
}
.sx-type[data-v-539b55573c7d7649] { color: var(--vb-primary, #3b2f8f); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.sx-body h2[data-v-539b55573c7d7649] { margin: 2px 0; font-size: 19px; line-height: 1.25;
}
.sx-body h2 a[data-v-539b55573c7d7649] { color: var(--vb-heading, #1f1b4d); text-decoration: none;
}
.sx-loc[data-v-539b55573c7d7649] { color: var(--vb-muted, #5f6b78); font-size: 13px;
}
.sx-score[data-v-539b55573c7d7649] { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0;
}
.sx-score b[data-v-539b55573c7d7649] { min-width: 38px; padding: 6px 8px; border-radius: 10px 10px 10px 2px; background: var(--vb-primary, #3b2f8f); color: #fff; text-align: center; font-size: 16px;
}
.sx-score small[data-v-539b55573c7d7649] { font-size: 12px; color: var(--vb-muted, #5f6b78); margin-top: 3px; white-space: nowrap;
}
.sx-amen[data-v-539b55573c7d7649] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #047857;
}
.sx-else[data-v-539b55573c7d7649] { margin: 0; font-size: 12px; color: var(--vb-muted, #5f6b78);
}
.sx-rooms[data-v-539b55573c7d7649] { margin: 0; font-size: 13px; color: var(--vb-text, #334155);
}
.sx-foot[data-v-539b55573c7d7649] { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
.sx-price[data-v-539b55573c7d7649] { display: flex; flex-direction: column;
}
.sx-price small[data-v-539b55573c7d7649] { font-size: 12px; color: var(--vb-muted, #5f6b78);
}
.sx-price b[data-v-539b55573c7d7649] { font-size: 20px; color: var(--vb-heading, #1f1b4d);
}
.sx-price > span[data-v-539b55573c7d7649] { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap;
}
.sx-btn[data-v-539b55573c7d7649] { height: 40px; padding: 0 16px; border-radius: 10px; background: var(--vb-primary, #3b2f8f); color: var(--vb-on-primary, #fff); text-decoration: none; font-weight: 700; display: inline-flex; align-items: center;
}
.sx-more[data-v-539b55573c7d7649] { align-self: center; height: 44px; padding: 0 22px; border: 1px solid var(--vb-border, #dcd8ef); border-radius: 12px; background: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.sx-mapbox[data-v-539b55573c7d7649] { position: sticky; top: 84px;
}
.sx-map[data-v-539b55573c7d7649] { height: calc(100vh - 110px); min-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid var(--vb-border, #e4e1f2); background: var(--vb-surface, #f7f6fc); z-index: 0;
}
.sx-mapnote[data-v-539b55573c7d7649] { margin: 6px 0 0; font-size: 12px; color: var(--vb-muted, #5f6b78);
}
[data-v-539b55573c7d7649] .sx-pin { background: none; border: 0;
}
[data-v-539b55573c7d7649] .sx-pin span { display: inline-block; transform: translate(-50%, -100%); padding: 4px 8px; border-radius: 999px; background: #fff; color: #1f1b4d; font: 700 12px/1.2 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); border: 1px solid #dcd8ef;
}
@media (max-width: 1180px) {
.sx-grid[data-v-539b55573c7d7649] { grid-template-columns: 240px minmax(0, 1fr);
}
.sx-mapbox[data-v-539b55573c7d7649] { display: none; grid-column: 1 / -1; position: static;
}
.sx-grid.map .sx-mapbox[data-v-539b55573c7d7649] { display: block;
}
.sx-grid.map .sx-list.hideMobile[data-v-539b55573c7d7649] { display: none;
}
}
@media (max-width: 820px) {
.sx-grid[data-v-539b55573c7d7649] { grid-template-columns: 1fr;
}
.sx-ftoggle[data-v-539b55573c7d7649] { display: inline-block;
}
.sx-filters[data-v-539b55573c7d7649] { display: none; position: static; max-height: none;
}
.sx-filters.open[data-v-539b55573c7d7649] { display: flex;
}
.sx-card[data-v-539b55573c7d7649] { grid-template-columns: 1fr;
}
.sx-media[data-v-539b55573c7d7649] { min-height: 200px;
}
.sx-map[data-v-539b55573c7d7649] { height: 70vh;
}
}
@media (min-width: 1181px) {
.sx-toggle[data-v-539b55573c7d7649] { display: none;
}
}