/* Exact-reference unit details layout. Scoped so no other storefront page changes. */
.unit-reference-page {
  --ur-teal: #129d9a;
  --ur-teal-dark: #078783;
  --ur-teal-soft: #eaf8f6;
  --ur-navy: #11245a;
  --ur-text: #1c2d59;
  --ur-muted: #6c7ea4;
  --ur-line: #d6e6ed;
  --ur-bg: #f6fbfd;
  --ur-card: #fff;
  --ur-green: #0aa258;
  --ur-shadow: 0 5px 16px rgba(23, 70, 90, .055);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: clip;
  background: var(--ur-bg);
  color: var(--ur-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.unit-reference-page *, .unit-reference-page *::before, .unit-reference-page *::after { box-sizing: border-box; }
.unit-reference-page a { text-decoration: none; }

/* Compact application chrome on this page only. */
body:has(.unit-reference-page) .fl-header { min-height: 58px; }
body:has(.unit-reference-page) .dh-inner { min-height: 58px; padding-block: 5px; }
body:has(.unit-reference-page) .dh-brand .brand-image { max-height: 46px; }
body:has(.unit-reference-page) { overflow-x: hidden; }
.unit-reference-page img, .unit-reference-page iframe { max-width: 100%; }
.unit-reference-page .lp-unified-panel > * { min-width: 0; max-width: 100%; }
/* Header search bar deliberately NOT overridden here any more -- it must
   look and behave exactly like every other page's global header search
   (see partials/global_search.html / global-search.css), not a page-local
   variant. */
/* Hero banner */
.unit-reference-page .lp-hero {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background: #173c38;
}

.unit-reference-page .lp-hero-image {
  position: relative;
  width: 100%;
  height: 270px;
  min-height: 270px;
  overflow: hidden;
  background: #173c38;
}

.unit-reference-page .lp-hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 55, 51, .92) 0%, rgba(0, 63, 59, .73) 29%, rgba(0, 0, 0, .08) 62%, rgba(0, 0, 0, .38) 100%);
}

.unit-reference-page .lp-hero-image img.project-image-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .35s ease;
}
.unit-reference-page .lp-hero-image img.project-image-slide.is-active { opacity: 1; }

.unit-reference-page .lp-placeholder {
  min-height: 270px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 54px;
  font-weight: 800;
  background: linear-gradient(135deg, #087f7b, #173c38);
}

.unit-reference-page .lp-verified {
  position: absolute;
  z-index: 6;
  top: 25px;
  left: 46px;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  color: var(--ur-green);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 5px 13px rgba(0, 0, 0, .12);
}
.unit-reference-page .lp-verified::before { content: "\2713"; display: grid; place-items: center; width: 18px; height: 18px; margin-right: 7px; border-radius: 50%; background: var(--ur-green); color: #fff; }

.unit-reference-page .lp-hero-copy {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: min(820px, 68%);
  padding: 74px 48px 16px 66px;
  color: #fff;
}
.unit-reference-page .lp-hero-copy::before {
  content: "A BETTER TOMORROW LIVES HERE";
  order: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 7px;
  color: rgba(255, 255, 255, .95);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}
.unit-reference-page .lp-hero-copy h1 { order: 2; margin: 8px 0 7px; max-width: 700px; color: #fff; font-size: clamp(27px, 2.7vw, 42px); line-height: 1.08; letter-spacing: -.035em; text-shadow: 0 3px 12px rgba(0, 0, 0, .22); }
.unit-reference-page .lp-view-all-units { order: 2; display: inline-flex; align-items: center; gap: 6px; margin: -3px 0 9px; color: #99f0da; font-size: 11.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.unit-reference-page .lp-view-all-units:hover { color: #fff; }
.unit-reference-page .lp-location { order: 3; display: flex; align-items: center; gap: 7px; margin: 0; color: #fff; font-size: 12px; font-weight: 650; line-height: 1.4; }
.unit-reference-page .lp-location i { font-size: 16px; }
.unit-reference-page .lp-hero-features { order: 4; display: flex; flex-wrap: wrap; gap: 28px; margin-top: 17px; }
.unit-reference-page .lp-hero-features span { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .96); font-size: 10px; font-weight: 700; }
.unit-reference-page .lp-hero-features i { color: #99f0da; font-size: 18px; }
.unit-reference-page .lp-back,
.unit-reference-page .lp-unit-description,
.unit-reference-page .lp-tags,
.unit-reference-page .lp-price,
.unit-reference-page .lp-stats { display: none; }

.unit-reference-page .property-detail-save,
.unit-reference-page .lp-share-button {
  position: absolute;
  z-index: 7;
  top: 24px;
  display: grid !important;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .98);
  color: var(--ur-navy);
  box-shadow: 0 6px 15px rgba(0, 0, 0, .14);
}
.unit-reference-page .property-detail-save { right: 112px; }
.unit-reference-page .lp-share-button { right: 60px; }
.unit-reference-page .property-detail-save.active { color: #df3947; }
.unit-reference-page .property-detail-save svg,
.unit-reference-page .lp-share-button svg { width: 19px; height: 19px; }

.unit-reference-page .lp-hero-actions {
  position: absolute;
  z-index: 6;
  top: 76px;
  right: 66px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
/* Delete is a real POST form (with a confirm prompt), not a bare GET link
   -- display:contents keeps the <form> wrapper invisible to this flex
   layout so its button still sizes/aligns exactly like its sibling
   actions. */
.unit-reference-page .lp-action-delete-form { display: contents; }
.unit-reference-page .lp-action-delete-pending { color: #b8860b; }
.unit-reference-page .lp-hero-actions a,
.unit-reference-page .lp-hero-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 105px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  color: var(--ur-navy);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .13);
}
.unit-reference-page .lp-hero-actions .lp-action-delete { color: #ef2e2e; }
.unit-reference-page .lp-hero-actions svg { width: 13px; height: 13px; }

.unit-reference-page .lp-hero-image::after { content: none; }
.unit-reference-page .lp-gallery-arrow { position: absolute; z-index: 7; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; padding: 0 0 2px; border: 1px solid rgba(255, 255, 255, .92); border-radius: 50%; background: rgba(0, 0, 0, .2); color: #fff; font-size: 25px; line-height: 1; transform: translateY(-50%); }
.unit-reference-page .lp-gallery-prev { left: 18px; }
.unit-reference-page .lp-gallery-next { right: 18px; }
.unit-reference-page .project-image-dots { position: absolute; z-index: 7; left: 50%; bottom: 17px; display: flex; align-items: center; gap: 5px; min-height: 25px; margin: 0; padding: 0 11px; border-radius: 14px; background: rgba(9, 22, 26, .58); transform: translateX(-50%); }
.unit-reference-page .project-image-dots i { display: block; width: 24px; height: 6px; border: 1.5px solid rgba(255, 255, 255, .95); border-radius: 6px; background: transparent; }
.unit-reference-page .project-image-dots i.is-active { background: #fff; }
.unit-reference-page .lp-hero-count { order: -1; margin-right: 3px; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }

/* Unified compact page container */
.unit-reference-page .lp-unified-panel { width: min(1120px, calc(100% - 34px)); min-height: 0; margin: 0 auto; padding: 14px 0 18px; overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.unit-reference-page .lp-card,
.unit-reference-page .lp-quickview-box,
.unit-reference-page .lp-mobile-summary { min-width: 0; margin: 0; padding: 12px 13px; border: 1px solid var(--ur-line); border-radius: 11px; background: var(--ur-card); box-shadow: var(--ur-shadow); }
.unit-reference-page .lp-card > header { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; }
.unit-reference-page .lp-card > header > span { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; border: 0; border-radius: 50%; background: var(--ur-teal-soft); color: var(--ur-teal); font-size: 14px; }
.unit-reference-page .lp-card header h2,
.unit-reference-page .lp-quickview-box h3 { margin: 0; color: var(--ur-navy); font-size: 14px; font-weight: 800; line-height: 1.25; }
.unit-reference-page .lp-card header p { margin: 3px 0 0; color: var(--ur-muted); font-size: 10px; line-height: 1.35; }

/* Summary: about, photos, contact */
.unit-reference-page .lp-quickview-grid { display: grid; grid-template-columns: minmax(0, 39fr) minmax(0, 29fr) minmax(0, 32fr); gap: 8px; margin: 0 0 9px; padding: 0; background: transparent; }
.unit-reference-page .lp-quickview-grid > .lp-quickview-box:nth-child(2) { grid-column: 1; grid-row: 1; }
.unit-reference-page .lp-quickview-images { grid-column: 2; grid-row: 1; }
.unit-reference-page .lp-quickview-grid > .lp-quickview-box:nth-child(3),
.unit-reference-page .lp-quickview-grid > .lp-quickview-box:nth-child(4) { display: none; }
.unit-reference-page .lp-quickview-grid > .lp-mobile-summary { grid-column: 3; grid-row: 1; }
.unit-reference-page .lp-quickview-box h3 { display: flex; align-items: center; min-height: 31px; margin-bottom: 7px; }
.unit-reference-page .lp-quickview-box h3::before { content: "\F52B"; display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; margin-right: 8px; border-radius: 50%; background: var(--ur-teal-soft); color: var(--ur-teal); font-family: bootstrap-icons; font-size: 14px; }
.unit-reference-page .lp-quickview-images h3::before { content: "\F42B"; }
.unit-reference-page .lp-quickview-box h3 small { margin-left: 4px; color: var(--ur-teal); font-size: 10px; }
.unit-reference-page .lp-field-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.unit-reference-page .lp-field-chips span { display: block; min-width: 0; min-height: 51px; padding: 8px 9px; border: 1px solid #dce8ed; border-radius: 8px; background: #fbfdfd; color: var(--ur-navy); font-size: 11px; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.unit-reference-page .lp-field-chips span b { display: block; margin-bottom: 4px; color: #6980a1; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.unit-reference-page .lp-quickview-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; height: 62px; overflow: hidden; }
.unit-reference-page .lp-quickview-photo-grid:has(.lp-quickview-more) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.unit-reference-page .lp-quickview-photo { display: none; min-width: 0; height: 62px; border: 1px solid #dce6eb; border-radius: 7px; overflow: hidden; background: #f4f8f9; }
.unit-reference-page .lp-quickview-photo:nth-child(-n+3) { display: block; }
.unit-reference-page .lp-quickview-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.unit-reference-page .lp-quickview-photo:hover img { transform: scale(1.035); }
.unit-reference-page .lp-quickview-more { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; height: 62px; padding: 0; border: 1px solid #dce6eb; border-radius: 7px; background: #f4f8f9; color: var(--ur-teal-dark); font-size: 8px; font-weight: 800; }
.unit-reference-page .lp-quickview-more strong { font-size: 12px; }

.unit-reference-page .lp-mobile-summary .lp-posted,
.unit-reference-page .lp-mobile-summary .lp-audience-chips { display: none; }
.unit-reference-page .lp-owner-premium { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 100%; }
.unit-reference-page .lp-owner-contact-block { display: flex; align-items: center; gap: 9px; min-width: 0; }
.unit-reference-page .lp-owner-avatar { position: relative; display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: var(--ur-teal-soft); color: var(--ur-teal); }
.unit-reference-page .lp-owner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.unit-reference-page .lp-owner-avatar b { position: absolute; inset: auto 0 0 auto; font-size: 10px; }
.unit-reference-page .lp-owner-contact-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.unit-reference-page .lp-owner-contact-copy small,
.unit-reference-page .lp-owner-contact-copy span { display: block; max-width: 100%; color: #617495; font-size: 8px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-reference-page .lp-owner-contact-copy strong { color: var(--ur-navy); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-reference-page .lp-owner-contact-copy .lp-unlocked-badge { color: var(--ur-green); font-size: 8px; font-style: normal; font-weight: 800; }
.unit-reference-page .lp-source-badge { display: inline; color: inherit; }
.unit-reference-page .lp-owner-premium .lp-premium-unlock-btn,
.unit-reference-page .lp-owner-premium .lp-unlocked-action,
.unit-reference-page .lp-owner-premium > a { display: inline-flex; align-items: center; justify-content: center; min-height: 35px; max-width: 160px; margin: 0; padding: 7px 10px; border: 0; border-radius: 8px; background: #efa900; color: #fff; font-size: 9px; font-weight: 800; line-height: 1.2; text-align: center; white-space: normal; }
.unit-reference-page .lp-owner-premium .lp-unlocked-action { background: #eaf8ed; color: #078b46; }
.unit-reference-page .fl-lock-icon,
.unit-reference-page .lp-premium-unlock-btn small { display: none; }

/* Section tabs */
.unit-reference-page .lp-detail-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-height: 37px; margin: 0 0 9px; }
.unit-reference-page .lp-detail-tabs a { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 41px; padding: 7px 8px; border: 1px solid var(--ur-line); border-radius: 8px; background: #fff; color: var(--ur-navy); font-size: 11px; font-weight: 800; transition: .18s ease; }
.unit-reference-page .lp-detail-tabs i { color: var(--ur-teal); font-size: 14px; }
.unit-reference-page .lp-detail-tabs a:hover,
.unit-reference-page .lp-detail-tabs a.is-active { border-color: transparent; background: linear-gradient(135deg, #2cb4b1, #07938f); color: #fff; }
.unit-reference-page .lp-detail-tabs a:hover i,
.unit-reference-page .lp-detail-tabs a.is-active i { color: #fff; }

/* Price, availability, Vastu, overview, location */
.unit-reference-page .lp-primary-dashboard { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 32fr) minmax(0, 34fr); grid-template-rows: auto auto; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.unit-reference-page #priceBreakdown { grid-column: 1; grid-row: 1; }
.unit-reference-page #availability { grid-column: 2; grid-row: 1; }
.unit-reference-page #vastuDetails { grid-column: 1; grid-row: 2; }
.unit-reference-page #unitOverview { grid-column: 2; grid-row: 2; }
.unit-reference-page #unitLocation { grid-column: 3; grid-row: 1 / span 2; display: block; align-self: start; }
.unit-reference-page .lp-breakdown-grid,
.unit-reference-page .lp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.unit-reference-page .lp-breakdown-grid > div,
.unit-reference-page .lp-facts > div { min-width: 0; min-height: 49px; padding: 7px 8px; border: 1px solid #dce8ed; border-radius: 7px; background: #fbfdfd; }
.unit-reference-page .lp-breakdown-grid span,
.unit-reference-page .lp-facts span { display: block; margin: 0 0 3px; color: #6c7fa0; font-size: 9px; line-height: 1.25; }
.unit-reference-page .lp-breakdown-grid b,
.unit-reference-page .lp-facts strong { display: block; color: var(--ur-navy); font-size: 11px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.unit-reference-page #unitOverview .lp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.unit-reference-page #unitOverview .lp-facts > div:nth-child(-n+2) { grid-column: span 1; }
.unit-reference-page #unitLocation > p { margin: 0 0 7px; color: #3e5278; font-size: 9px; line-height: 1.4; }
.unit-reference-page .lp-map-preview { position: relative; min-height: 220px; height: 220px; overflow: hidden; border: 0; border-radius: 7px; background: #849296; }
.unit-reference-page .lp-map-preview iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.65); }
.unit-reference-page .lp-map-preview.is-locked iframe { filter: blur(3px) saturate(.55); transform: scale(1.04); }
.unit-reference-page .lp-map-preview > div { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; background: rgba(45, 55, 61, .34); color: #fff; text-align: center; }
.unit-reference-page .lp-map-preview > div span { display: block; font-size: 25px; }
.unit-reference-page .lp-map-preview > div strong { font-size: 10px; }
.unit-reference-page .lp-map-preview > div small { font-size: 8px; }
.unit-reference-page .lp-address-card > a { display: inline-flex; margin-top: 6px; padding: 6px 9px; border-radius: 6px; background: var(--ur-teal); color: #fff; font-size: 9px; font-weight: 800; }
.unit-reference-page .lp-review-note { display: flex; align-items: center; gap: 8px; min-height: 49px; margin: 8px 0 0; padding: 8px 10px; border: 0; border-radius: 7px; background: #fff3d8; color: #9b6300; font-size: 9px; line-height: 1.35; }
.unit-reference-page .lp-review-note i { color: #f39b00; font-size: 16px; }

/* Four compact cards */
.unit-reference-page .lp-secondary-dashboard { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 23fr) minmax(0, 21.5fr) minmax(0, 21.5fr); gap: 8px; margin-bottom: 8px; }
.unit-reference-page .lp-secondary-dashboard .lp-card { min-height: 104px; }
.unit-reference-page .lp-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.unit-reference-page .lp-tile { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 46px; padding: 6px 7px; border: 1px solid #dce8ed; border-radius: 7px; background: #fbfdfd; }
.unit-reference-page .lp-tile-icon { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; border: 0; border-radius: 50%; background: var(--ur-teal-soft); color: var(--ur-teal); font-size: 14px; }
.unit-reference-page .lp-tile-body { min-width: 0; }
.unit-reference-page .lp-tile-body small { display: block; margin-bottom: 2px; color: #6c80a1; font-size: 7.5px; }
.unit-reference-page .lp-tile-body strong,
.unit-reference-page .lp-tile-compact strong { display: block; color: var(--ur-navy); font-size: 9px; line-height: 1.2; overflow-wrap: anywhere; }
.unit-reference-page .lp-tile-meta { display: block; margin-top: 2px; color: var(--ur-green); font-size: 8px; font-weight: 800; }
.unit-reference-page .lp-tile-grid-compact .lp-tile { align-items: center; }
.unit-reference-page .lp-term-list { display: grid; gap: 5px; }
.unit-reference-page .lp-term-row { display: flex; align-items: flex-start; gap: 7px; color: #263d6b; font-size: 9px; line-height: 1.4; }
.unit-reference-page .lp-term-row i { margin-top: 2px; color: #263d9c; font-size: 8px; }
.unit-reference-page .lp-show-more { margin-top: 5px; padding: 0; border: 0; background: transparent; color: var(--ur-teal-dark); font-size: 8px; font-weight: 800; }
.unit-reference-page .lp-note-box { display: flex; align-items: center; gap: 8px; min-height: 38px; margin: 0 0 9px; padding: 7px 12px; border: 1px solid #f0d588; border-radius: 7px; background: #fff7db; color: #996100; font-size: 9px; line-height: 1.3; }
.unit-reference-page .lp-note-box i { color: #efa000; font-size: 15px; }

/* Rooms, amenities, additional information, general map */
.unit-reference-page .lp-lower-dashboard { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 8px; }
.unit-reference-page .lp-lower-main,
.unit-reference-page .lp-lower-side { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.unit-reference-page .lp-room-groups { display: flex; flex-direction: column; gap: 7px; }
.unit-reference-page .lp-room-group { overflow: hidden; border: 1px solid #dce8ed; border-radius: 7px; background: #fff; }
.unit-reference-page .lp-room-group summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 9px 11px; list-style: none; background: #fbfdfd; color: var(--ur-navy); cursor: pointer; font-size: 10.5px; }
.unit-reference-page .lp-room-group summary::-webkit-details-marker { display: none; }
.unit-reference-page .lp-room-group summary::before { content: "+"; margin-right: 8px; color: var(--ur-teal); font-size: 14px; }
.unit-reference-page .lp-room-group[open] summary::before { content: "\2212"; }
.unit-reference-page .lp-room-group summary strong { margin-right: auto; }
.unit-reference-page .lp-room-group summary > span { display: none; }
.unit-reference-page .lp-room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 9px; border-top: 1px solid #e4edf1; background: #fbfdfd; }
/* Each room is its own small, self-contained box -- name/count header, then
   its amenity chips, then a wrapping strip of ALL its own photos (never
   just the first one hidden behind the rest with no indication). */
.unit-reference-page .lp-room-box { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 9px; border: 1px solid #e4edf1; border-radius: 8px; background: #fff; }
.unit-reference-page .lp-room-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.unit-reference-page .lp-room-title h3 { margin: 0; color: var(--ur-navy); font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-reference-page .lp-room-title span { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: #eaf8ed; color: var(--ur-green); font-size: 8px; font-weight: 800; }
.unit-reference-page .lp-amenities { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.unit-reference-page .lp-amenities span { display: flex; align-items: center; min-height: 30px; padding: 6px 9px; border: 1px solid #cfe1e8; border-radius: 8px; background: #fbfdfd; color: #31476f; font-size: 10px; font-weight: 650; }
.unit-reference-page .lp-amenities span::before { content: "\F46D"; margin-right: 4px; color: var(--ur-teal); font-family: bootstrap-icons; }
.unit-reference-page .lp-amenities b { color: var(--ur-teal-dark); }
.unit-reference-page .lp-room-photos { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.unit-reference-page .lp-room-photos a { position: relative; flex: 0 0 auto; width: 56px; height: 56px; overflow: hidden; border: 1px solid #dce7eb; border-radius: 6px; }
.unit-reference-page .lp-room-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.unit-reference-page .lp-room-photo-more::after { content: attr(data-more); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(17, 36, 90, .62); color: #fff; font-size: 11px; font-weight: 800; }
.unit-reference-page .lp-lower-side .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unit-reference-page .lp-approval-card > div { display: flex; flex-wrap: wrap; gap: 5px; }
.unit-reference-page .lp-approval-card > div span { padding: 5px 7px; border-radius: 6px; background: #edf9f1; color: #168b43; font-size: 8px; font-weight: 700; }
.unit-reference-page .lp-explore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.unit-reference-page .lp-explore-grid a { display: grid; gap: 3px; padding: 8px; border-radius: 7px; background: var(--ur-teal-soft); color: var(--ur-teal-dark); font-size: 8px; text-align: center; }
.unit-reference-page .lp-general-map { position: relative; height: 135px; overflow: hidden; border: 1px solid #dce7eb; border-radius: 7px; background: #d7e7e6; }
.unit-reference-page .lp-general-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.unit-reference-page .lp-general-map-label { position: absolute; top: 10px; left: 50%; display: grid; gap: 42px; color: var(--ur-navy); font-size: 9px; text-align: center; transform: translateX(-50%); text-shadow: 0 1px 2px #fff; }
.unit-reference-page .lp-general-map-label::after { content: "\F3E7"; position: absolute; top: 27px; left: 50%; color: #e63843; font-family: bootstrap-icons; font-size: 31px; transform: translateX(-50%); text-shadow: none; }
.unit-reference-page .lp-general-map a { display: none; }

/* Lightbox remains functional and above the page. */
.unit-reference-page .lp-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(5, 15, 25, .9); }
.unit-reference-page .lp-lightbox.is-open { display: flex; }
.unit-reference-page .lp-lightbox img { max-width: min(1100px, 88vw); max-height: 82vh; object-fit: contain; }
.unit-reference-page .lp-lightbox button { position: absolute; border: 0; color: #fff; background: transparent; }
.unit-reference-page .lp-lightbox-close { top: 18px; right: 25px; font-size: 36px; }
.unit-reference-page .lp-lightbox-nav { top: 50%; font-size: 48px; transform: translateY(-50%); }
.unit-reference-page .lp-lightbox-prev { left: 25px; }
.unit-reference-page .lp-lightbox-next { right: 25px; }
.unit-reference-page .lp-lightbox-count { position: absolute; bottom: 20px; left: 50%; color: #fff; transform: translateX(-50%); }
.unit-reference-page [id] { scroll-margin-top: 72px; }

/* Tablet */
@media (max-width: 1100px) {
  .unit-reference-page .lp-unified-panel { width: min(100% - 24px, 960px); }
  .unit-reference-page .lp-quickview-grid { grid-template-columns: 1fr 1fr; }
  .unit-reference-page .lp-quickview-grid > .lp-quickview-box:nth-child(2) { grid-column: 1; }
  .unit-reference-page .lp-quickview-images { grid-column: 2; }
  .unit-reference-page .lp-quickview-grid > .lp-mobile-summary { grid-column: 1 / -1; grid-row: 2; }
  .unit-reference-page .lp-primary-dashboard { grid-template-columns: 1fr 1fr; }
  .unit-reference-page #priceBreakdown { grid-column: 1; grid-row: 1; }
  .unit-reference-page #availability { grid-column: 2; grid-row: 1; }
  .unit-reference-page #vastuDetails { grid-column: 1; grid-row: 2; }
  .unit-reference-page #unitOverview { grid-column: 2; grid-row: 2; }
  .unit-reference-page #unitLocation { grid-column: 1 / -1; grid-row: 3; }
  .unit-reference-page .lp-secondary-dashboard { grid-template-columns: 1fr 1fr; }
  .unit-reference-page .lp-lower-dashboard { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* Mobile */
@media (max-width: 800px) {
  body:has(.unit-reference-page) .fl-header { min-height: 58px; }
  .unit-reference-page .lp-hero { border-radius: 0; }
  .unit-reference-page .lp-hero-image { height: 360px; min-height: 360px; }
  .unit-reference-page .lp-hero-copy { width: 100%; padding: 91px 22px 20px 58px; }
  .unit-reference-page .lp-hero-copy h1 { max-width: calc(100% - 90px); font-size: clamp(26px, 8vw, 38px); }
  .unit-reference-page .lp-location { max-width: calc(100% - 85px); font-size: 11px; }
  .unit-reference-page .lp-verified { top: 18px; left: 18px; }
  .unit-reference-page .property-detail-save { top: 16px; right: 66px; }
  .unit-reference-page .lp-share-button { top: 16px; right: 16px; }
  .unit-reference-page .lp-hero-actions { top: 66px; right: 64px; }
  .unit-reference-page .lp-hero-actions a { min-width: 42px; width: 42px; padding: 0; font-size: 0; }
  .unit-reference-page .lp-hero-actions a span { margin: 0; }
  .unit-reference-page .lp-gallery-prev { left: 12px; }
  .unit-reference-page .lp-gallery-next { right: 12px; }
  .unit-reference-page .lp-unified-panel { width: calc(100% - 20px); }
  .unit-reference-page .lp-quickview-grid,
  .unit-reference-page .lp-primary-dashboard,
  .unit-reference-page .lp-secondary-dashboard,
  .unit-reference-page .lp-lower-dashboard { grid-template-columns: 1fr; }
  .unit-reference-page .lp-quickview-grid > .lp-quickview-box:nth-child(2),
  .unit-reference-page .lp-quickview-images,
  .unit-reference-page .lp-quickview-grid > .lp-mobile-summary,
  .unit-reference-page #priceBreakdown,
  .unit-reference-page #availability,
  .unit-reference-page #vastuDetails,
  .unit-reference-page #unitOverview,
  .unit-reference-page #unitLocation { grid-column: 1; grid-row: auto; }
  .unit-reference-page #unitLocation .lp-map-preview { min-height: 220px; }
  .unit-reference-page .lp-quickview-grid > .lp-quickview-box:nth-child(2) { order: 1; }
  .unit-reference-page .lp-quickview-images { order: 2; }
  .unit-reference-page .lp-quickview-grid > .lp-mobile-summary { order: 3; }
  .unit-reference-page .lp-detail-tabs { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .unit-reference-page .lp-detail-tabs a { flex: 0 0 116px; }
  .unit-reference-page .lp-lower-main,
  .unit-reference-page .lp-lower-side { display: contents; }
}

@media (max-width: 800px) {
  .unit-reference-page .lp-hero-image > .property-detail-save,
  .unit-reference-page .lp-hero-image > .lp-share-button {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 16px !important;
    z-index: 20 !important;
  }
  .unit-reference-page .lp-hero-image > .property-detail-save { right: 66px !important; }
  .unit-reference-page .lp-hero-image > .lp-share-button { right: 16px !important; }
}

@media (max-width: 560px) {
  .unit-reference-page .lp-hero-image { height: 390px; min-height: 390px; }
  .unit-reference-page .lp-hero-copy h1 { font-size: 29px; }
  .unit-reference-page .lp-hero-features { gap: 10px 18px; }
  .unit-reference-page .lp-hero-features span { font-size: 9px; }
  .unit-reference-page .project-image-dots i { width: 15px; }
  .unit-reference-page .lp-field-chips,
  .unit-reference-page .lp-breakdown-grid,
  .unit-reference-page .lp-facts,
  .unit-reference-page #unitOverview .lp-facts,
  .unit-reference-page .lp-tile-grid { grid-template-columns: 1fr 1fr; }
  .unit-reference-page .lp-owner-premium { grid-template-columns: 1fr; }
  .unit-reference-page .lp-owner-premium .lp-premium-unlock-btn,
  .unit-reference-page .lp-owner-premium .lp-unlocked-action,
  .unit-reference-page .lp-owner-premium > a { width: 100%; max-width: none; }
  .unit-reference-page .lp-room-list { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 420px) {
  .unit-reference-page .lp-hero-image { height: 350px; min-height: 350px; }
  .unit-reference-page .lp-hero-copy { padding: 84px 14px 16px 48px; }
  .unit-reference-page .lp-hero-copy h1 { max-width: calc(100% - 34px); font-size: 25px; line-height: 1.12; }
  .unit-reference-page .lp-location { max-width: calc(100% - 20px); font-size: 10px; }
  .unit-reference-page .lp-hero-features { gap: 9px 13px; }
  .unit-reference-page .lp-hero-features span { font-size: 8.5px; }
  .unit-reference-page .lp-unified-panel { width: calc(100% - 12px); padding-top: 8px; }
  .unit-reference-page .lp-card,
  .unit-reference-page .lp-quickview-box,
  .unit-reference-page .lp-mobile-summary { padding: 11px; }
  .unit-reference-page .lp-detail-tabs a { flex-basis: 104px; }
  .unit-reference-page .lp-room-list { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 7px; }
  .unit-reference-page .lp-room-photos a { width: 48px; height: 48px; }
  .unit-reference-page .lp-amenities span { min-width: 0; padding-inline: 7px; font-size: 9.5px; }
}

@media (max-width: 340px) {
  .unit-reference-page .lp-field-chips,
  .unit-reference-page .lp-breakdown-grid,
  .unit-reference-page .lp-facts,
  .unit-reference-page #unitOverview .lp-facts,
  .unit-reference-page .lp-tile-grid { grid-template-columns: 1fr; }
  .unit-reference-page .lp-room-list { grid-template-columns: 1fr; }
}