/* DDA design system — listing pages: the properties list (/properties) and the compare page (/compare).
   Loaded by those two routes after the global sheets (dda-ds, dda-ds-pages). The filter panel, results header, compare slots,
   comparison table and "select property" dialog use new `ds-` classes; the listing card (PropertyCard) and the pagination
   keep their markup and are refined here, scoped to `.ds-listing`. Tokens only (`--ds-*`), so the dark theme follows. */

.ds-listing,
.ds-compare { --ds-lift: clamp(48px, 6vw, 84px); }
/* Banner of these two pages. site.css pads every <section> with `padding: 56px 0 !important` (769-1400px; 36px on phones), which
   squeezes the PageHeader banner (a <section>) and lets the panels that overlap its bottom edge cover the title. `:not(#ds)`
   lifts the specificity above those rules; the values are the ones of dda-ds-pages.css (".ds-pagehead", "--overlap"). */
.ds-pagehead:not(#ds):has(+ .ds-listing),
.ds-compare .ds-pagehead:not(#ds) {
  padding-top: 72px !important;
  padding-bottom: clamp(96px, 10vw, 128px) !important;
}
@media (max-width: 640px) {
  .ds-pagehead:not(#ds):has(+ .ds-listing),
  .ds-compare .ds-pagehead:not(#ds) { padding-top: 56px !important; }
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-plan-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ===== Properties list: page surface ===================================================================================== */
.properties-listing.ds-listing {
  position: relative;
  z-index: 2;
  display: flow-root;
  margin: 0;
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-family: var(--ds-font);
}
/* site.css forces `padding-bottom: 0 !important` on .properties-listing, so the bottom space lives on the container. */
.ds-listing > .ds-container { padding-bottom: var(--ds-section); }

/* ----- Filter panel ----- */
.ds-listing .ds-filters {
  position: relative;
  z-index: 3;
  margin-top: calc(-1 * var(--ds-lift));
  padding: clamp(20px, 2.8vw, 36px);
  border: 1px solid var(--ds-line);
  border-radius: 24px;
  background: var(--ds-bg);
  box-shadow: var(--ds-shadow-float);
  animation: ds-rise 1s var(--ds-ease) .25s both;
}
.ds-listing .ds-filters-form { margin: 0; }
.ds-listing .ds-qsearch { position: relative; margin: 0 0 22px; }
.ds-listing .ds-qsearch > i { position: absolute; top: 50%; left: 22px; transform: translateY(-50%); font-size: 15px; color: var(--ds-gold-strong); pointer-events: none; }
.ds-listing .ds-qsearch input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 56px 0 52px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: 500 15px/1 var(--ds-font);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ds-listing .ds-qsearch input::placeholder { color: var(--ds-ink-3); opacity: 1; }
.ds-listing .ds-qsearch input::-webkit-search-cancel-button { display: none; }
.ds-listing .ds-qsearch input:hover { border-color: var(--ds-ink-3); }
.ds-listing .ds-qsearch input:focus { border-color: var(--ds-gold); background: var(--ds-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-gold) 22%, transparent); }
.ds-listing .ds-qsearch-clear {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--ds-surface-2);
  color: var(--ds-ink);
  font-size: 14px;
  cursor: pointer;
  transform: translateY(-50%);
}
.ds-listing .ds-qsearch-clear:hover { background: var(--ds-line); }
@media (max-width: 640px) { .ds-listing .ds-qsearch input { height: 52px; font-size: 16px; } }
.ds-listing .ds-filters-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 16px;
}
.ds-listing .ds-filter { display: flex; flex-direction: column; min-width: 0; }
.ds-listing .ds-filter-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px 4px;
  font: 700 11px/1.2 var(--ds-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
  cursor: pointer;
}
.ds-listing .ds-filter-label i { font-size: 12px; color: var(--ds-gold-strong); }
.ds-listing .ds-select { position: relative; min-width: 0; }
.ds-listing .ds-select select,
.ds-listing .ds-select .ds-picker-trigger {
  display: block;
  text-align: left;
  width: 100%;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 46px 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-ink);
  color-scheme: light;
  font: 600 14px/1 var(--ds-font);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
html[data-site-theme="dark"] .ds-listing .ds-select select { color-scheme: dark; }
.ds-listing .ds-select .ds-picker-trigger.is-empty { color: var(--ds-ink-2); }
.ds-listing .ds-select select option { background-color: var(--ds-bg); color: var(--ds-ink); }
.ds-listing .ds-select select:hover,
.ds-listing .ds-select .ds-picker-trigger:hover { border-color: var(--ds-line); background: var(--ds-surface-2); }
.ds-listing .ds-select select:focus,
.ds-listing .ds-select .ds-picker-trigger:focus-visible,
.ds-listing .ds-select .ds-picker-trigger[aria-expanded="true"] {
  border-color: var(--ds-gold);
  background: var(--ds-bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-gold) 22%, transparent);
}
.ds-listing .ds-select-caret {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -6px;
  font-size: 12px;
  line-height: 12px;
  color: var(--ds-ink-3);
  pointer-events: none;
  transition: color .25s ease, transform .35s var(--ds-ease);
}
.ds-listing .ds-select:hover .ds-select-caret,
.ds-listing .ds-select:focus-within .ds-select-caret { color: var(--ds-gold-strong); }
.ds-listing .ds-select:focus-within .ds-select-caret { transform: translateY(2px); }
.ds-listing .ds-select:has([aria-expanded="true"]) .ds-select-caret { color: var(--ds-gold-strong); transform: rotate(180deg); }

/* ----- Price range ----- */
.ds-listing .ds-price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px clamp(20px, 3vw, 36px);
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--ds-line);
}
.ds-listing .ds-price-head { display: contents; }
.ds-listing .ds-price-label { grid-column: 1; grid-row: 1; min-width: 0; margin: 0 0 0 4px; }
.ds-listing .ds-price-value {
  grid-column: 3;
  grid-row: 1;
  padding: 11px 20px;
  border: 1px solid color-mix(in srgb, var(--ds-gold) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-gold) 14%, var(--ds-bg));
  color: var(--ds-ink);
  font: 700 15px/1 var(--ds-font);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.ds-listing .ds-price-slider { position: relative; grid-column: 2; grid-row: 1; display: flex; align-items: center; height: 24px; min-width: 0; }
.ds-listing .ds-price-rail { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 999px; background: var(--ds-line); overflow: hidden; }
.ds-listing .ds-price-fill {
  height: 100%;
  min-width: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ds-gold-soft), var(--ds-gold));
  transition: width .12s linear;
}
.ds-listing .ds-price-input {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.ds-listing .ds-price-input:disabled { cursor: default; opacity: .55; }
.ds-listing .ds-price-input::-webkit-slider-runnable-track { height: 24px; border: 0; background: transparent; }
.ds-listing .ds-price-input::-moz-range-track { height: 24px; border: 0; background: transparent; }
.ds-listing .ds-price-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 5px solid var(--ds-gold);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  cursor: grab;
  transition: transform .3s var(--ds-ease), box-shadow .3s ease;
}
.ds-listing .ds-price-input::-moz-range-thumb {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 5px solid var(--ds-gold);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  cursor: grab;
}
.ds-listing .ds-price-input:not(:disabled):hover::-webkit-slider-thumb { transform: scale(1.12); }
.ds-listing .ds-price-input:not(:disabled):active::-webkit-slider-thumb { cursor: grabbing; }
.ds-listing .ds-price-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ds-gold) 30%, transparent), 0 4px 12px rgba(0, 0, 0, .22); }
.ds-listing .ds-price-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ds-gold) 30%, transparent), 0 4px 12px rgba(0, 0, 0, .22); }

/* ----- Results header ----- */
.ds-listing .ds-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin: clamp(40px, 5vw, 64px) 0 clamp(22px, 3vw, 34px);
  scroll-margin-top: calc(var(--ds-header-h) + 16px);
}
.ds-listing .ds-results-title {
  margin: 0;
  font: 700 clamp(28px, 3.4vw, 42px)/1.08 var(--ds-font);
  letter-spacing: -.03em;
  color: var(--ds-ink);
  text-wrap: balance;
}
.ds-listing .ds-results-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ds-listing .ds-results-count {
  display: inline-block;
  padding: 0 18px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-bg);
  color: var(--ds-ink-2);
  font: 500 14px/40px var(--ds-font);
  white-space: nowrap;
}
.ds-listing .ds-results-count strong { color: var(--ds-ink); font-weight: 700; }
.ds-listing .ds-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 8px 0 18px;
  border: 1px solid color-mix(in srgb, var(--ds-gold) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ds-gold) 14%, var(--ds-bg));
  color: var(--ds-ink);
  font: 600 13px/1 var(--ds-font);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .3s var(--ds-ease);
}
.ds-listing .ds-filter-chip i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ds-gold) 28%, transparent);
  font-size: 11px;
  transition: background-color .25s ease, color .25s ease, transform .35s var(--ds-ease);
}
.ds-listing .ds-filter-chip:hover { border-color: var(--ds-gold); background: var(--ds-gold); color: var(--ds-on-gold); }
.ds-listing .ds-filter-chip:hover i { background: rgba(17, 17, 17, .14); transform: rotate(90deg); }
.ds-listing .ds-filter-chip:focus-visible { outline: 2px solid var(--ds-gold); outline-offset: 3px; }

/* ----- Grid of listing cards ----- */
.ds-listing .ds-listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  align-items: stretch;
}
.ds-listing .ds-listing-grid > .ds-reveal { min-width: 0; }
.ds-listing .ds-listing-grid > .ds-reveal > .property-card { height: 100%; }
.ds-listing .ds-listing-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: clamp(280px, 35vh, 380px);
  font: 500 14px/1.4 var(--ds-font);
  color: var(--ds-ink-3);
}
.ds-listing .ds-listing-loading::before {
  content: "";
  width: 34px;
  height: 34px;
  border: 3px solid var(--ds-line);
  border-top-color: var(--ds-gold);
  border-radius: 50%;
  animation: ds-spin .8s linear infinite;
}
.ds-listing .page-empty-state {
  min-height: clamp(280px, 35vh, 380px);
  padding: 56px 24px;
  border: 1px dashed var(--ds-line);
  border-radius: var(--ds-radius-l);
  background: var(--ds-bg);
  color: var(--ds-ink-2);
}

/* ----- Listing card (PropertyCard) refinements ----- */
.ds-listing .property-card { display: flex; flex-direction: column; height: 100%; background: var(--ds-bg); }
html[data-site-theme="dark"] .ds-listing .property-card { background: var(--ds-bg); border-color: var(--ds-line); }
.ds-listing .property-card:hover { border-color: transparent; box-shadow: var(--ds-shadow-float); }
.ds-listing .property-card .property-content { flex: 1; padding: 20px 22px 22px; gap: 12px; }
.ds-listing .property-card .property-card-details { flex: 1; gap: 10px; }
.ds-listing .property-card .property-card-status:empty { display: none; }
.ds-listing .property-card .property-card-status { gap: 6px; }
.ds-listing .property-card .property-title { min-height: 0; }
/* The phone rules of site.css (gap / third item full width) are `!important`, hence the `!important` below. */
.ds-listing .property-card .property-meta-row { gap: 8px !important; margin: 4px 0 0; }
.ds-listing .property-card .property-meta-row > .property-meta-item {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 8px 12px;
  gap: 7px;
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-ink-2);
  font-size: 12.5px;
  line-height: 1.1;
}
.ds-listing .property-card .property-meta-row > .property-meta-item strong { color: var(--ds-ink); font-weight: 600; }
.ds-listing .property-card .property-meta-row > .property-meta-item i { color: var(--ds-gold-strong); }
.ds-listing .property-card .property-meta-location {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ds-line);
  font-size: 13px;
  color: var(--ds-ink-2);
}
.ds-listing .property-card .property-card-status .property-meta-single { font-size: 13px; }

/* ----- Pagination (src/components/site/Pagination.tsx, shared) ----- */
.ds-listing .listing-pagination {
  align-items: stretch;
  gap: 18px;
  margin: clamp(32px, 4vw, 52px) 0 0;
  padding: clamp(20px, 3vw, 28px) 0 0;
  border-top: 1px solid var(--ds-line);
}
.ds-listing .listing-pagination-toolbar { flex-wrap: nowrap; gap: 12px 20px; }
.ds-listing .listing-pagination-summary { font: 500 14px/1.3 var(--ds-font); color: var(--ds-ink-2); }
.ds-listing .listing-pagination-size { gap: 10px; font: 600 13px/1 var(--ds-font); color: var(--ds-ink-2); }
.ds-listing .listing-pagination-size-select select {
  min-width: 78px;
  min-height: 42px;
  padding: 0 38px 0 18px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font: 600 14px/1 var(--ds-font);
}
html[data-site-theme="dark"] .ds-listing .listing-pagination-size-select select { color-scheme: dark; }
.ds-listing .listing-pagination-size-select select:hover { border-color: var(--ds-ink); }
.ds-listing .listing-pagination-size-select select:focus { border-color: var(--ds-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-gold) 22%, transparent); }
.ds-listing .listing-pagination-size-select i { right: 15px; color: var(--ds-ink-3); }
.ds-listing .listing-pagination-controls { flex-wrap: wrap; gap: 10px; }
.ds-listing .listing-pagination-pages { flex-wrap: wrap; gap: 8px; }
.ds-listing .listing-pagination-btn {
  width: auto;
  min-width: 44px;
  max-width: none;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-bg);
  color: var(--ds-ink);
}
.ds-listing .listing-pagination-btn:hover:not(:disabled) { border-color: var(--ds-ink); background: var(--ds-bg); color: var(--ds-ink); }
.ds-listing .listing-pagination-page {
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-bg);
  color: var(--ds-ink);
  box-shadow: none;
}
.ds-listing .listing-pagination-page:hover:not(.is-active) { border-color: var(--ds-ink); background: var(--ds-bg); color: var(--ds-ink); }
.site-shell .ds-listing .listing-pagination-page.is-active,
.site-shell .ds-listing .listing-pagination-page.is-active:hover,
.site-shell .ds-listing .listing-pagination-page.is-active:focus,
.site-shell .ds-listing .listing-pagination-page.is-active:focus-visible {
  border-color: var(--ds-ink);
  background: var(--ds-ink);
  color: var(--ds-bg);
  box-shadow: 0 8px 18px rgba(17, 17, 17, .18);
}
.ds-listing .listing-pagination-btn:focus-visible,
.ds-listing .listing-pagination-page:focus-visible { outline: 2px solid var(--ds-gold); outline-offset: 3px; }
.ds-listing .listing-pagination-meta { font: 500 13px/1.2 var(--ds-font); color: var(--ds-ink-3); }

/* ===== Compare page ====================================================================================================== */
.ds-compare { background: var(--ds-bg); color: var(--ds-ink); font-family: var(--ds-font); }

/* ----- Slots ----- */
.ds-compare .ds-compare-slots {
  position: relative;
  z-index: 2;
  display: flow-root;
  margin: 0;
  padding: 0 0 clamp(56px, 7vw, 96px);
  background: var(--ds-surface);
  scroll-margin-top: calc(var(--ds-header-h) + 8px);
}
.ds-compare .ds-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  --ds-cgap: clamp(16px, 2vw, 28px);
  gap: var(--ds-cgap);
  margin-top: calc(-1 * var(--ds-lift));
}
.ds-compare .ds-compare-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-l);
  background: var(--ds-bg);
  box-shadow: var(--ds-shadow);
  transition: opacity .9s var(--ds-ease), transform .9s var(--ds-ease), border-color .3s ease, box-shadow .5s ease;
  transition-delay: var(--ds-delay, 0ms), var(--ds-delay, 0ms), 0ms, 0ms;
}
.ds-compare .ds-compare-col:hover { border-color: color-mix(in srgb, var(--ds-gold) 55%, var(--ds-line)); }
.ds-compare .ds-compare-label { display: flex; align-items: center; gap: 12px; padding: 2px 4px 0; }
.ds-compare .ds-compare-label-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ds-gold);
  color: var(--ds-on-gold);
  font: 700 13px/1 var(--ds-font);
}
.ds-compare .ds-compare-label-text { font: 700 12px/1.2 var(--ds-font); letter-spacing: .16em; text-transform: uppercase; color: var(--ds-ink-3); }

/* empty slot */
.ds-compare .ds-slot { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ds-compare .ds-slot--empty {
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 36px 20px;
  border: 2px dashed var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: border-color .3s ease, background-color .3s ease;
}
.ds-compare .ds-slot--empty:hover,
.ds-compare .ds-slot--empty:focus-visible {
  border-color: var(--ds-gold);
  background: color-mix(in srgb, var(--ds-gold) 8%, var(--ds-bg));
}
.ds-compare .ds-slot--empty:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-gold) 22%, transparent); }
.ds-compare .ds-slot-plus {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--ds-gold);
  color: var(--ds-on-gold);
  font-size: 20px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ds-gold) 34%, transparent);
  transition: transform .6s var(--ds-ease), box-shadow .4s ease;
}
.ds-compare .ds-slot--empty:hover .ds-slot-plus { transform: rotate(90deg) scale(1.08); box-shadow: 0 16px 34px color-mix(in srgb, var(--ds-gold) 46%, transparent); }
.ds-compare .ds-slot-title { margin: 22px 0 6px; font: 700 19px/1.2 var(--ds-font); letter-spacing: -.02em; color: var(--ds-ink); }
.ds-compare .ds-slot-hint { margin: 0; font: 400 13.5px/1.55 var(--ds-font); color: var(--ds-ink-2); }

/* filled slot */
.ds-compare .ds-slot--filled { gap: 16px; }
.ds-compare .ds-slot-plan { padding: 16px 18px; border-radius: 18px; background: var(--ds-surface); }
.ds-compare .ds-slot-view { width: 100%; margin-top: auto; }

/* property card (selected slot + dialog) */
.ds-ccard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.ds-ccard-media { position: relative; flex: none; aspect-ratio: 4 / 3.1; border-radius: 20px; background: #1b1b1d; overflow: hidden; isolation: isolate; }
.ds-ccard-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ds-ease); }
.ds-ccard:hover .ds-ccard-media img { transform: scale(1.05); }
.ds-ccard-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  max-width: 62%;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--ds-gold);
  color: var(--ds-on-gold);
  font: 700 11.5px/1 var(--ds-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-ccard-overlay {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 56px 18px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .5) 55%, transparent 100%);
  color: #fff;
}
.ds-ccard .ds-ccard-overlay h4 {
  margin: 0;
  font: 700 17px/1.25 var(--ds-font);
  letter-spacing: -.01em;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-ccard .ds-ccard-overlay p {
  margin: 5px 0 0;
  font: 400 12.5px/1.45 var(--ds-font);
  color: rgba(255, 255, 255, .8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-ccard-close {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #111;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
  transition: background-color .25s ease, transform .35s var(--ds-ease);
}
.ds-ccard-close:hover { background: var(--ds-gold); transform: rotate(90deg); }
.ds-ccard-close:focus-visible { outline: 2px solid var(--ds-gold); outline-offset: 3px; }
.ds-ccard-body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 12px; min-width: 0; padding: 18px 4px 2px; }
.ds-ccard-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ds-ccard-price { font: 700 clamp(20px, 1.9vw, 24px)/1.15 var(--ds-font); letter-spacing: -.02em; color: var(--ds-ink); }
.ds-ccard-type {
  flex: none;
  max-width: 48%;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-ink-2);
  font: 600 12px/1.1 var(--ds-font);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-ccard-loc { font: 400 14px/1.45 var(--ds-font); color: var(--ds-ink-2); }
.ds-ccard-loc i { margin-right: 5px; color: var(--ds-gold-strong); }
.ds-ccard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ds-line);
}
.ds-ccard-beds { font: 600 13.5px/1.3 var(--ds-font); color: var(--ds-ink); }
.ds-ccard-dev { font: 700 11px/1.3 var(--ds-font); letter-spacing: .1em; text-transform: uppercase; text-align: right; color: var(--ds-ink-3); }
.ds-ccard-action { width: 100%; margin-top: 16px; }
.ds-ccard--selected .ds-ccard-body { padding-bottom: 0; }

/* payment plan bars */
.ds-compare .ds-plan { display: flex; flex-direction: column; gap: 14px; }
.ds-compare .ds-plan--note { flex-direction: row; align-items: center; gap: 10px; }
.ds-compare .ds-plan--note i { flex: none; font-size: 16px; color: var(--ds-gold-strong); }
.ds-compare .ds-plan-note { margin: 0; font: 500 13px/1.45 var(--ds-font); color: var(--ds-ink-2); }
.ds-compare .ds-plan-item { display: flex; flex-direction: column; gap: 7px; }
.ds-compare .ds-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ds-compare .ds-plan-label { font: 500 12.5px/1.2 var(--ds-font); color: var(--ds-ink-2); }
.ds-compare .ds-plan-value { flex: none; font: 700 13px/1.2 var(--ds-font); color: var(--ds-ink); }
.ds-compare .ds-plan-track { height: 8px; border-radius: 999px; background: var(--ds-line); overflow: hidden; }
.ds-compare .ds-plan-fill { height: 100%; border-radius: 999px; transform-origin: left center; animation: ds-plan-grow 1.2s var(--ds-ease) both; }
.ds-compare .ds-plan-fill--booking { background: var(--ds-ink); }
.ds-compare .ds-plan-fill--construction { background: var(--ds-gold); }
.ds-compare .ds-plan-fill--handover { background: var(--ds-gold-soft); }

/* ----- Comparison table ----- */
.ds-compare .ds-ctable-section {
  margin: 0;
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px);
  background: var(--ds-bg);
}
.ds-compare .ds-compare-title {
  margin: 0 0 clamp(22px, 3vw, 36px);
  font: 700 clamp(30px, 4.1vw, 46px)/1.08 var(--ds-font);
  letter-spacing: -.03em;
  color: var(--ds-ink);
  text-wrap: balance;
}
.ds-compare .ds-ctable-wrap {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-l);
  background: var(--ds-bg);
  box-shadow: var(--ds-shadow);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.ds-compare .ds-ctable-wrap:focus-visible { box-shadow: 0 0 0 3px var(--ds-gold); }
.ds-compare .ds-ctable { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ds-compare .ds-ctable th,
.ds-compare .ds-ctable td {
  padding: 22px clamp(16px, 2vw, 28px);
  border-bottom: 1px solid var(--ds-line);
  text-align: left;
  vertical-align: middle;
  font: 500 15px/1.5 var(--ds-font);
  color: var(--ds-ink);
  overflow-wrap: anywhere;
}
.ds-compare .ds-ctable thead th {
  padding-top: 24px;
  padding-bottom: 24px;
  background: var(--ds-surface);
  font: 700 15px/1.35 var(--ds-font);
  letter-spacing: -.01em;
  text-transform: none;
  vertical-align: bottom;
}
.ds-compare .ds-ctable thead th:first-child { font: 700 11px/1.2 var(--ds-font); letter-spacing: .16em; text-transform: uppercase; color: var(--ds-ink-3); }
.ds-compare .ds-ctable thead th.is-empty { font-weight: 500; color: var(--ds-ink-3); }
.ds-compare .ds-ctable tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: clamp(130px, 20%, 220px);
  background: var(--ds-bg);
  box-shadow: 1px 0 0 var(--ds-line);
  font: 700 12px/1.3 var(--ds-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-ink-2);
}
.ds-compare .ds-ctable thead th:first-child { position: sticky; left: 0; z-index: 2; width: clamp(130px, 20%, 220px); box-shadow: 1px 0 0 var(--ds-line); }
.ds-compare .ds-ctable tbody tr:last-child th,
.ds-compare .ds-ctable tbody tr:last-child td { border-bottom: 0; }
.ds-compare .ds-ctable td.is-empty { color: var(--ds-ink-3); font-weight: 400; }
.ds-compare .ds-ctable tr.is-price th,
.ds-compare .ds-ctable tr.is-price td { background: color-mix(in srgb, var(--ds-gold) 11%, var(--ds-bg)); }
.ds-compare .ds-ctable tr.is-price th { color: var(--ds-gold-strong); }
.ds-compare .ds-ctable tr.is-price td { font: 700 clamp(17px, 1.6vw, 20px)/1.2 var(--ds-font); letter-spacing: -.02em; }
.ds-compare .ds-ctable tr.is-price td.is-empty { font-weight: 400; font-size: 15px; letter-spacing: 0; }

/* ----- "Select property" dialog ----- */
html:has(.ds-modal) { overflow: hidden; }
.ds-modal {
  font-family: var(--ds-font);
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(10, 10, 12, .58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: ds-fade .3s ease both;
}
.ds-modal-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1080px;
  max-height: min(90vh, 920px);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-l);
  background: var(--ds-bg);
  color: var(--ds-ink);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .4);
  overflow: hidden;
  animation: ds-rise .55s var(--ds-ease) both;
}
.ds-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px clamp(20px, 3vw, 34px) 6px; }
.ds-modal-title { margin: 0; font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--ds-font); letter-spacing: -.03em; color: var(--ds-ink); }
.ds-modal-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ds-line);
  border-radius: 50%;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-size: 16px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .35s var(--ds-ease);
}
.ds-modal-close:hover { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-bg); transform: rotate(90deg); }
.ds-modal-close:focus-visible { outline: 2px solid var(--ds-gold); outline-offset: 3px; }
.ds-modal-search { position: relative; padding: 14px clamp(20px, 3vw, 34px) 22px; border-bottom: 1px solid var(--ds-line); }
.ds-modal-input {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 22px 0 52px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: 500 15px/1 var(--ds-font);
  outline: none;
  box-shadow: none;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ds-modal-input::placeholder { color: var(--ds-ink-3); opacity: 1; }
.ds-modal-input:focus { border-color: var(--ds-gold); background: var(--ds-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-gold) 22%, transparent); }
.ds-modal-search > i {
  position: absolute;
  top: 14px;
  bottom: 22px;
  left: calc(clamp(20px, 3vw, 34px) + 22px);
  display: flex;
  align-items: center;
  color: var(--ds-ink-3);
  pointer-events: none;
}
.ds-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 auto;
  gap: 20px;
  min-height: 0;
  padding: 24px clamp(20px, 3vw, 34px) 34px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ds-modal-grid > .page-empty-state,
.ds-modal-empty { grid-column: 1 / -1; }
.ds-modal-empty { margin: 0; padding: 48px 20px; text-align: center; font: 500 14px/1.5 var(--ds-font); color: var(--ds-ink-3); }
.ds-ccard--modal {
  padding: 10px;
  border: 1px solid var(--ds-line);
  border-radius: 24px;
  background: var(--ds-bg);
  cursor: pointer;
  outline: none;
  content-visibility: auto;
  contain-intrinsic-size: auto 470px;
  transition: transform .5s var(--ds-ease), box-shadow .5s var(--ds-ease), border-color .3s ease;
}
.ds-ccard--modal:hover,
.ds-ccard--modal:focus-visible { transform: translateY(-4px); border-color: transparent; box-shadow: var(--ds-shadow-float); }
.ds-ccard--modal:focus-visible { box-shadow: 0 0 0 3px var(--ds-gold); }
.ds-ccard--modal .ds-ccard-media { aspect-ratio: 4 / 3; border-radius: 16px; }
.ds-ccard--modal .ds-ccard-body { padding: 16px 8px 0; }
.ds-ccard--modal .ds-ccard-price { font-size: 20px; }
.ds-ccard--modal .ds-ccard-action { margin-top: 16px; }

/* ===== Responsive ======================================================================================================== */
@media (max-width: 1099px) {
  .ds-listing .ds-filters-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ds-listing .ds-filter:nth-child(-n + 3) { grid-column: span 2; }
  .ds-listing .ds-filter:nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 1023px) {
  .ds-listing .ds-listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-compare .ds-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-compare .ds-compare-col:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - var(--ds-cgap)) / 2); justify-self: center; }
  .ds-modal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ds-listing .ds-filters { border-radius: 22px; }
  .ds-listing .ds-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .ds-listing .ds-filter:nth-child(-n + 3) { grid-column: 1 / -1; }
  .ds-listing .ds-filter:nth-child(n + 4) { grid-column: span 1; }
  .ds-listing .ds-price { grid-template-columns: minmax(0, 1fr) auto; row-gap: 16px; }
  .ds-listing .ds-price-slider { grid-column: 1 / -1; grid-row: 2; }
  .ds-listing .ds-price-value { padding: 9px 16px; font-size: 14px; }
  .ds-listing .ds-price-label { letter-spacing: .08em; }
}
@media (max-width: 640px) {
  .ds-listing .ds-listing-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-compare .ds-compare-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-compare .ds-compare-col:last-child:nth-child(odd) { width: auto; }
  .ds-compare .ds-ctable { min-width: 560px; }
  .ds-compare .ds-ctable th,
  .ds-compare .ds-ctable td { padding: 16px 14px; font-size: 14px; }
  .ds-compare .ds-ctable thead th { font-size: 13.5px; }
  .ds-compare .ds-ctable tbody th { width: 112px; font-size: 11px; letter-spacing: .06em; }
  .ds-compare .ds-ctable thead th:first-child { width: 112px; }
  .ds-modal { align-items: flex-end; padding: 0; }
  .ds-modal-panel { max-height: 92vh; border-radius: 26px 26px 0 0; }
  .ds-modal-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 20px; }
}
@media (max-width: 768px) {
  /* site.css shrinks the shared pagination with `!important` on phones (32px square buttons): round 42px ones instead. */
  .ds-listing .listing-pagination { gap: 14px !important; margin: 28px 0 0 !important; padding: 20px 0 0 !important; }
  .ds-listing .listing-pagination-btn {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 999px;
  }
  .ds-listing .listing-pagination-summary { font-size: 13px !important; }
  .ds-listing .listing-pagination-size { flex: 0 0 auto; width: auto; }
  .ds-listing .listing-pagination-page { min-width: 42px; height: 42px; font-size: 14px; border-radius: 999px; }
  .ds-listing .listing-pagination-pages { gap: 6px; }
  .ds-listing .listing-pagination-controls { gap: 6px; }
  .ds-listing .listing-pagination-size-select select { min-height: 40px; padding: 0 34px 0 16px; border-radius: 999px; font-size: 13px; }
}
@media (max-width: 380px) {
  .ds-listing .listing-pagination-btn { width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 38px !important; }
  .ds-listing .listing-pagination-page { min-width: 38px; height: 38px; }
  .ds-listing .listing-pagination-pages,
  .ds-listing .listing-pagination-controls { gap: 4px; }
}

/* While the next page of results loads (filtered on the server) the current cards dim. */
.ds-listing .ds-listing-grid { transition: opacity .2s ease; }
.ds-listing .ds-listing-grid.is-busy { opacity: .45; pointer-events: none; }