/* =====================================================================
 * THE EIGHT-VIEW GALLERY — card strip, detail stage and the modal viewer.
 *
 * Scoped entirely under .hbv / .hbv-modal. These styles land on property.php,
 * property-details.php and three AJAX card renderers, all of which carry large
 * and long-standing stylesheets of their own, so nothing here may leak.
 * ===================================================================== */

.hbv {
  --hbv-gold: #ebd8b0;
  --hbv-ink: #061121;
  --hbv-line: rgba(235, 216, 176, 0.22);
  --hbv-panel: rgba(6, 17, 33, 0.82);
}

/* ------------------------------------------------------------- the grid */

.hbv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}

.hbv-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  padding: 0;
  margin: 0;
  border: 1px solid var(--hbv-line);
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  background: #0a1524;
  /* The card is a full-bleed photograph and these sit on top of it, so every
     tile needs its own ground rather than borrowing the one behind. */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-align: center;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}

.hbv-tile:hover,
.hbv-tile:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(235, 216, 176, 0.75);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(235, 216, 176, 0.28);
  outline: none;
}

.hbv-tile.is-active {
  border-color: var(--hbv-gold);
  box-shadow: 0 0 0 1px var(--hbv-gold), 0 0 16px rgba(235, 216, 176, 0.35);
}

.hbv-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.hbv-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 11, 22, 0.92) 0%, rgba(4, 11, 22, 0.35) 45%, rgba(4, 11, 22, 0) 78%);
  pointer-events: none;
}

.hbv-cap {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: #fff;
  line-height: 1.15;
  pointer-events: none;
}

.hbv-cap i {
  font-size: 12px;
  color: var(--hbv-gold);
  text-shadow: 0 0 8px rgba(235, 216, 176, 0.55);
}

.hbv-cap-t {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* --------------------------------------------------- the eighth cell */

/* SEE INSIDE? — THE EIGHTH CELL IS AN INVITATION, NOT A VIEW.
 *
 * Seven tiles show the outside of the building from the street and the sky.
 * The eighth is the only place a buyer can ask to see the inside, and for a
 * long time it did not say so: first a dim navy panel, then a gold plate that
 * read "Initiate Deal Room" — the name of the mechanism, not the reason to
 * press it. A buyer does not want a Deal Room. A buyer wants to know what the
 * rooms look like.
 *
 * So the tile is now a blurred interior with a lock on it and the question
 * asked outright — SEE INSIDE? — with the route underneath: REQUEST VIA DEAL
 * ROOM. The blur is the promise (there is an inside to see) and the lock is
 * the honest condition (you ask first). The photograph is a fixed asset,
 * images/artwork/deal-room-inside.jpg, carried by a child span the markup emits so
 * this stylesheet never has to know where the page lives; a dark gradient
 * sits under it so a missing file still leaves a legible tile. The file
 * shipped is Unsplash photo 1600210492486-724fe5c67fb0 (Unsplash License:
 * free to use, no attribution required), cropped 1000x750 and pre-blurred
 * (Gaussian, r=7); swap it for a
 * house photograph of your own by replacing the file, nothing else.
 *
 * MARKUP HOOKS ARE LOAD-BEARING. The external flow in property.php rewrites
 * .hbv-cta-t to "Opening…", swaps the <i> inside .hbv-cta-ic for a spinner
 * and toggles [data-busy]. Those three names are kept exactly.
 */
.hbv-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 3px;
  text-align: center;
  color: #fff;
  container-type: inline-size;
}

/* A white disc, a dark lock: the one element that is not a photograph or a
   word, and the first thing the eye lands on. */
.hbv-cta-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  font-size: 9px;
  width: clamp(20px, 32cqw, 48px);
  height: clamp(20px, 32cqw, 48px);
  font-size: clamp(10px, 16cqw, 22px);
  border-radius: 50%;
  background: #fff;
  color: #061121;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* Set on the glyph itself, with !important: the card stylesheet paints every
   <i> inside the overlay white, which made this a white lock on a white disc —
   no lock at all. */
.hbv .hbv-cta .hbv-cta-ic i { color: #061121 !important; }

.hbv-cta-t {
  /* One line, always: at 12cqw the question fits a 64px content box at the 8px
     floor and grows with the tile from there. Wrapped, it read SEE / INSIDE?. */
  font-size: 8px;
  font-size: clamp(8px, 12cqw, 22px);
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: uppercase;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .6);
  max-width: 100%;
}

/* Always shown now — it is the instruction, not a caption. Two lines on the
   narrowest tiles by design. */
.hbv-cta-s {
  display: block;
  font-size: 6px;
  font-size: clamp(6px, 8cqw, 11px);
  font-weight: 800;
  letter-spacing: .25px;
  text-transform: uppercase;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .6);
  max-width: 100%;
}
.hbv-cta-s i { font-size: .9em; }

/* Working, not disabled: the spinner is the signal. */
.hbv-cta[data-busy="1"] {
  pointer-events: none;
  filter: brightness(.85);
}

/* ------------------------------------------------- the card variant */

/* THE LABEL SITS UNDER THE PICTURE ON A CARD, NOT ON IT.
 *
 * Every tile is a photograph or a map, and a caption laid over one needs a
 * scrim and a text-shadow to stay readable — which is eight smudged boxes in a
 * row once they are this small. Below the image the label is just text on the
 * card's own ground: no scrim, no shadow, and the pictures are left alone.
 *
 * Card variant only. The detail page's tiles are twice the size and read fine
 * with the caption over them, and its stage depends on the tile being a single
 * bordered rectangle.
 *
 * The eight views are untouched — this moves where their names are drawn, not
 * which views exist or what they do.
 */
.hbv-card .hbv-tile {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The frame moves off the button and onto the picture, so the label below it
   is not inside a box of its own. */
.hbv-card .hbv-thumb {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  border: 1px solid var(--hbv-line);
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.hbv-card .hbv-tile:hover,
.hbv-card .hbv-tile:focus-visible { box-shadow: none; }

.hbv-card .hbv-tile:hover .hbv-thumb,
.hbv-card .hbv-tile:focus-visible .hbv-thumb {
  border-color: rgba(235, 216, 176, 0.75);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(235, 216, 176, 0.28);
}

/* The view now showing in the card's photograph. */
.hbv-card .hbv-tile.is-active { box-shadow: none; }
.hbv-card .hbv-tile.is-active .hbv-thumb {
  border-color: var(--hbv-gold);
  box-shadow: 0 0 0 1px var(--hbv-gold), 0 0 16px rgba(235, 216, 176, 0.35);
}

.hbv-card .hbv-scrim { display: none; }

.hbv-card .hbv-cap {
  position: static;
  left: auto; right: auto; bottom: auto;
  flex: none;
}
/* The icon was there to carry meaning over a busy photograph. Under it the
   word does that on its own, and eight icons in a row is noise. */
.hbv-card .hbv-cap i { display: none; }
.hbv-card .hbv-cap-t {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .72);
  text-shadow: none;
}

/* THE LOOK, in both variants. Placed after the card-variant rules above at the
   same specificity, so it — not .hbv-card .hbv-tile — decides the ground,
   the frame and the shadow. Three layers: a darkening wash so white type
   reads on any photograph, the interior itself, and a navy gradient that
   shows only if the file is missing. */
.hbv .hbv-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 10px;
  border: 1.5px solid #dcc18a;
  /* The wash that keeps white type legible on a bright room, over a navy
     ground that shows only while the photograph is missing. */
  background:
    linear-gradient(180deg, rgba(6, 17, 33, .18) 0%, rgba(6, 17, 33, .58) 100%),
    linear-gradient(160deg, #2a3f5e 0%, #101c30 100%);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(235, 216, 176, 0.3);
}
/* THE ROOM. A child span under the wash; its inline background-image is the
   photograph. The blur is IN THE FILE, not here: this site switches every CSS
   filter off on touch and narrow screens (a site-wide
   "html body * { filter: none !important }" under max-width:1024px / hover:none,
   for phone GPUs), so a runtime blur rendered sharp on exactly the devices most
   buyers use. images/artwork/deal-room-inside.jpg is therefore shipped pre-blurred;
   replace it with another pre-blurred interior and nothing else changes. */
.hbv .hbv-cta > .hbv-cta-bg {
  position: absolute;
  inset: -4px;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform .3s ease;
}
.hbv .hbv-cta:hover > .hbv-cta-bg,
.hbv .hbv-cta:focus-visible > .hbv-cta-bg { transform: scale(1.04); }
.hbv .hbv-cta > span:not(.hbv-cta-bg) { position: relative; z-index: 1; }
.hbv .hbv-cta:hover,
.hbv .hbv-cta:focus-visible {
  border-color: #f6e6c0;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(235, 216, 176, 0.55);
}

/* On a card it stretches to the height of picture-plus-label beside it: it is
   the one tile that invites rather than shows, and the gold frame and glow
   already say so.
   It used to sit at scale(1.1) from its bottom-right corner as well. The
   grid's gap is 6px, so that 10% grew straight into the row above and over the
   "Neighborhood" caption, and past the left edge of the tile beside it — the
   one cell in the grid that did not line up. It now fills its cell exactly and
   only lifts on hover. The hover still names the transform — .hbv-card
   .hbv-tile:hover would otherwise replace it with a bare translateY. */
.hbv-card .hbv-cta {
  aspect-ratio: auto;
  align-self: stretch;
  min-height: 100%;
  position: relative;
  z-index: 1;
  transform: none;
  transform-origin: 50% 100%;
}
.hbv-card .hbv-cta:hover,
.hbv-card .hbv-cta:focus-visible {
  transform: scale(1.03) translateY(-1px);
}

.hbv-card {
  margin: 8px 0 10px;
  padding: 7px;
  border-radius: 12px;
  background: var(--hbv-panel);
  border: 1px solid rgba(235, 216, 176, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* One column of cards means a much wider card, so the labels get their room
   back and the CTA can afford its subtitle. */
@media (max-width: 991px) {
  .hbv-cap-t { font-size: 10.5px; }
}

/* NO SUBTITLE ON A CARD, AT ANY WIDTH.
   It used to appear below 991px on the theory that one column of cards means a
   wide card. Measured, that theory does not hold anywhere: the card grid is
   4 tiles across at every breakpoint, so the tile peaks at about 92x63 on a
   large phone and drops back to ~73x50 on a tablet once cards go two-up. The
   disc, two lines of title and one line of subtitle need ~55px of the ~53px
   that is there at the very best of those, which is why the handshake was
   sheared off at the top and "Make an offer" at the bottom. The detail page
   keeps it — that grid is genuinely wider. */

/* ----------------------------------------------- the detail variant */

.hbv-detail {
  margin: 0;
}

.hbv-detail .hbv-grid {
  gap: 8px;
  margin-top: 10px;
}

.hbv-detail .hbv-cap i { font-size: 14px; }
.hbv-detail .hbv-cap-t { font-size: 11px; }
/* .hbv-detail's own .hbv-cta-t / -s / -ic sizes stood here. They said the same
   thing as the container query above, only in one hard-coded place, and being
   more specific they would have overridden it. */

.hbv-stage-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(235, 216, 176, 0.22);
  background: #08111f;
}

.hbv-stage {
  position: relative;
  width: 100%;
  height: 380px;
  background: #08111f;
}

/* Only the 3D custom element needs telling; google.maps.Map and
   StreetViewPanorama fill the container they are handed. A blanket
   `.hbv-stage > *` here also caught .hbv-note and stretched the parcel caveat
   into a full-height slab across the map. */
.hbv-stage > gmp-map-3d { display: block; width: 100%; height: 100%; }

.hbv-stage-boot,
.hbv-stage-msg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: rgba(255, 255, 255, .72);
  font-size: 12.5px;
  text-align: center;
  padding: 18px;
  z-index: 2;
  background: #08111f;
}

.hbv-stage-msg i { font-size: 20px; color: var(--hbv-gold); }
.hbv-stage-msg b { color: #fff; font-size: 13.5px; }
.hbv-stage-msg span { max-width: 380px; line-height: 1.5; }
.hbv-stage-boot i { font-size: 18px; color: var(--hbv-gold); }

/* In full screen the wrapper fills the display, but .hbv-stage keeps its fixed
   380px unless told otherwise — which left a small map floating in a large
   black rectangle. */
.hbv-stage-wrap:fullscreen,
.hbv-stage-wrap:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  background: #08111f;
}

.hbv-stage-wrap:fullscreen .hbv-stage,
.hbv-stage-wrap:-webkit-full-screen .hbv-stage {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.hbv-stage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(6, 17, 33, 0.92);
  border-top: 1px solid rgba(235, 216, 176, 0.16);
}

.hbv-stage-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--hbv-gold);
  white-space: nowrap;
}

.hbv-stage-hint {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .58);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hbv-full,
.hbv-modal-x {
  background: rgba(235, 216, 176, 0.12);
  color: var(--hbv-gold);
  border: 1px solid rgba(235, 216, 176, 0.4);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease;
}

.hbv-full:hover,
.hbv-modal-x:hover { background: rgba(235, 216, 176, 0.24); }

/* The lot-size caveat, printed on the parcel view wherever it appears. It is
   an approximation of area, not a boundary, and never says otherwise. */
.hbv-note {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(6, 17, 33, 0.88);
  border: 1px solid rgba(235, 216, 176, 0.35);
  color: rgba(255, 255, 255, .82);
  font-size: 10.5px;
  line-height: 1.25;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hbv-note i { color: var(--hbv-gold); font-size: 10px; }

/* ------------------------------------------------------- the modal */

.hbv-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.hbv-modal.is-open { display: flex; }

.hbv-modal-back {
  position: absolute;
  inset: 0;
  background: rgba(2, 7, 15, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.hbv-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: min(760px, 100%);
  background: #08111f;
  border: 1px solid rgba(235, 216, 176, 0.3);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}

.hbv-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(235, 216, 176, 0.16);
  background: rgba(6, 17, 33, 0.95);
}

.hbv-modal-titles { flex: 1; min-width: 0; }

.hbv-modal-t {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbv-modal-s {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.hbv-modal-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.hbv-modal-body .hbv-stage {
  flex: 1;
  height: auto;
  min-width: 0;
}

.hbv-modal-rail {
  width: 168px;
  flex: none;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: rgba(6, 17, 33, 0.9);
  border-left: 1px solid rgba(235, 216, 176, 0.14);
}

.hbv-modal-rail .hbv-tile { aspect-ratio: 16 / 10; }

.hbv-modal-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-top: 1px solid rgba(235, 216, 176, 0.16);
  background: rgba(6, 17, 33, 0.95);
  font-size: 11.5px;
}

.hbv-modal-hint { color: rgba(255, 255, 255, .62); flex: 1; }
.hbv-modal-drag { color: var(--hbv-gold); white-space: nowrap; }
.hbv-modal-drag i { margin-right: 5px; }

@media (max-width: 760px) {
  .hbv-modal { padding: 0; }
  .hbv-modal-panel { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .hbv-modal-body { flex-direction: column; }
  .hbv-modal-body .hbv-stage { min-height: 0; }
  .hbv-modal-rail {
    width: 100%;
    flex: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-left: 0;
    border-top: 1px solid rgba(235, 216, 176, 0.14);
  }
  .hbv-modal-rail .hbv-tile { width: 108px; flex: none; }
  .hbv-modal-drag { display: none; }
}

/* Google's own controls sit inside our stage; keep them off our chrome. */
.hbv-stage .gm-style-cc,
.hbv-modal .gm-style-cc { z-index: 1; }

/* =====================================================================
 * PRESET VIEWS — six photographs of the building, swiped not flown.
 *
 * Prefix is .hbsnap and NOT .hbp: inc/footer.php already owns .hbp-badge and
 * .hbp-badges for the deal-room participant chips, it loads on every page after
 * this file, and at equal specificity the later rule wins. The snapshot badges
 * inherited inline-flex pills with a 50px radius and stacked one per row.
 * Renaming is the fix; !important would only have started an argument.
 * ===================================================================== */

.hbsnap {
  --hbsnap-gold: #ebd8b0;
  --hbsnap-ink: #061121;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(14, 30, 55, 0.92) 0%, rgba(6, 17, 33, 0.94) 100%);
  border: 1px solid rgba(235, 216, 176, 0.20);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.hbsnap *,
.hbsnap *::before,
.hbsnap *::after { box-sizing: border-box; }

.hbsnap-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 14px;
}

.hbsnap-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
}

.hbsnap-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .58);
  flex: 1 1 260px;
  min-width: 0;
}

/* ------------------------------------------------------------- the rail
 *
 * A GRID ON DESKTOP, A SCROLLER ON A PHONE. All six fit side by side in this
 * column, so forcing a min-width per item only produced a scrollbar and a
 * "Neighborh…" label on a row that had room to spare. minmax(0, 1fr) is what
 * lets a grid track shrink below its content instead of overflowing. */

.hbsnap-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.hbsnap-item {
  min-width: 0;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.hbsnap-shot {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #0a1524;
  border: 2px solid transparent;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .45);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.hbsnap-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hbsnap-item:hover .hbsnap-shot,
.hbsnap-item:focus-visible .hbsnap-shot {
  transform: translateY(-2px);
  border-color: rgba(235, 216, 176, .6);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .55);
  outline: none;
}

.hbsnap-item.is-active .hbsnap-shot {
  border-color: var(--hbsnap-gold);
  box-shadow: 0 0 0 1px rgba(235, 216, 176, .5), 0 0 18px rgba(235, 216, 176, .3);
}

.hbsnap-name {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .78);
  letter-spacing: .1px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbsnap-item.is-active .hbsnap-name { color: var(--hbsnap-gold); }

/* ---------------------------------------------------------- the badges
 *
 * Two up, not four. The design deck shows four across a full-width page; this
 * sits in the listing's left column, where four would leave every description
 * about eighteen characters wide. */

.hbsnap-badges {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(235, 216, 176, .14);
}

@media (min-width: 620px) {
  .hbsnap-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hbsnap-badge {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  min-width: 0;
  padding: 12px 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(235, 216, 176, .15);
}

.hbsnap-badge-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--hbsnap-gold);
  background: rgba(235, 216, 176, .12);
  border: 1px solid rgba(235, 216, 176, .35);
}

.hbsnap-badge-txt { min-width: 0; }

.hbsnap-badge-txt b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
}

.hbsnap-badge-txt > span {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .58);
}

/* -------------------------------------------------- the save action --- */

.hbsnap-badge-save { border-color: rgba(235, 216, 176, .3); }

.hbsnap-save-row {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 9px;
}

.hbsnap-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  color: var(--hbsnap-ink);
  background: linear-gradient(135deg, #ebd8b0 0%, #c9a96e 100%);
  border: 1px solid rgba(235, 216, 176, .6);
  transition: filter .18s ease, transform .18s ease;
}

.hbsnap-save:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hbsnap-save i { font-size: 11px; }

.hbsnap-save.is-saved {
  background: rgba(46, 232, 136, .16);
  border-color: rgba(46, 232, 136, .5);
  color: #7bf0b4;
}

.hbsnap-fav-link {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--hbsnap-gold);
  text-decoration: none;
  white-space: nowrap;
}

.hbsnap-fav-link:hover { text-decoration: underline; color: #fff; }
.hbsnap-fav-link i { font-size: 10px; margin-left: 3px; }

/* -------------------------------------------------------- the lightbox */

.hbsnap-lb {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
}

.hbsnap-lb.is-open { display: flex; }

.hbsnap-lb-back {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 13, .93);
}

.hbsnap-lb-panel {
  position: relative;
  width: min(1100px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 14px;
}

.hbsnap-lb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  padding: 2px 2px 10px;
}

.hbsnap-lb-t { font-size: 15px; font-weight: 800; white-space: nowrap; }
.hbsnap-lb-s {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hbsnap-lb-x {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
.hbsnap-lb-x:hover { background: rgba(255, 255, 255, .2); }

.hbsnap-lb-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  background: #060d18;
  touch-action: pan-y;
}

/* contain, not cover: the front view Google sells is portrait, and cropping a
   photograph of a house to fill a landscape frame cuts the roof off. */
.hbsnap-lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.hbsnap-lb-spin {
  position: absolute;
  color: #ebd8b0;
  font-size: 22px;
}

.hbsnap-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(6, 17, 33, .8);
  border: 1px solid rgba(235, 216, 176, .4);
  color: #ebd8b0;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
}
.hbsnap-lb-nav:hover { background: rgba(6, 17, 33, .95); }
.hbsnap-lb-prev { left: 12px; }
.hbsnap-lb-next { right: 12px; }

.hbsnap-lb-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 12px 0 4px;
}

.hbsnap-lb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.hbsnap-lb-dot.is-active {
  background: #ebd8b0;
  box-shadow: 0 0 8px rgba(235, 216, 176, .7);
}

/* --------------------------------------------------------- narrow view */

@media (max-width: 900px) {
  /* Below this the six no longer fit, so the grid becomes the swipeable rail
     the copy promises. */
  .hbsnap-rail {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 216, 176, .45) transparent;
  }
  .hbsnap-rail::-webkit-scrollbar { height: 6px; }
  .hbsnap-rail::-webkit-scrollbar-track { background: transparent; }
  .hbsnap-rail::-webkit-scrollbar-thumb {
    background: rgba(235, 216, 176, .35);
    border-radius: 999px;
  }
  .hbsnap-item { flex: 0 0 132px; scroll-snap-align: start; }
  .hbsnap-name { font-size: 11.5px; }
}

@media (max-width: 640px) {
  .hbsnap { padding: 14px 13px; }
  .hbsnap-lb-nav { width: 38px; height: 38px; }
}

/* ── Modern Property Card Pricing Block ──────────────────────────── */
.price2-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  text-align: left !important;
}

.price2 {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.price2 .price2-period {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #8A9FB8 !important;
  letter-spacing: normal !important;
}

.price2-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .6px !important;
  color: rgba(235, 216, 176, 0.75) !important;
  text-transform: uppercase !important;
}

.hb-pricemove {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-top: 4px !important;
  margin-bottom: 2px !important;
}

.hb-pricemove-fig {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: .2px !important;
  font-variant-numeric: tabular-nums !important;
}

.hb-pricemove-arrow {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.hb-pricemove-pct {
  font-size: 13px !important;
  font-weight: 700 !important;
  opacity: .95 !important;
}

.hb-pricemove.is-down .hb-pricemove-fig { color: #22C55E !important; }
.hb-pricemove.is-up   .hb-pricemove-fig { color: #F5A623 !important; }

.hb-pricemove-when {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: .1px !important;
  color: #8A9FB8 !important;
}