/**
 * Property details page layout — gallery mosaic, two-column body with the sticky
 * booking sidebar, and the lightbox.
 * Loads after browse.css because it reuses that file's CTA, FAQ and map-pin styles.
 */

/* ============================================================
   Gallery mosaic
   ============================================================ */

.gallery {
  position: relative;
  /* Room for the chips and Share button, which now hang below the mosaic's edge. */
  margin-bottom: 23px;
  background: var(--color-grey-light);
}

/* The middle column is the hero. The narrow column on the left peeks at the previous
   photo, the one on the right at the next. */
.gallery__mosaic {
  display: grid;
  grid-template-columns: 315fr 919fr 676fr;
  gap: 4px;
  /* 650px is the design's height on its 1920 canvas, so the photos keep that shape as the
     window narrows. The 200px is the name and address under the photos: a short window
     gives up photo height before it pushes them off the first screen. */
  height: clamp(
    280px,
    min(33.85vw, calc(100vh - var(--header-height) - 200px)),
    650px
  );
}

.gallery__mosaic--single {
  grid-template-columns: 1fr;
}

.gallery__mosaic--pair {
  grid-template-columns: 315fr 919fr;
}

.gallery__panel {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.gallery__panel > img {
  transition: scale var(--duration-slow) var(--ease-out);
}

.gallery__panel:hover > img {
  scale: 1.03;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
}

.gallery__arrow--prev {
  left: var(--space-10);
}

.gallery__arrow--next {
  right: var(--space-10);
}

/* Figma `87:6699` / `87:6951`: the chips and the Share button sit on the 1280 content
   column — not the full-bleed mosaic — and straddle its bottom edge, hanging ~23px
   below it rather than sitting inside. */
.gallery__chips,
.gallery__share {
  position: absolute;
  bottom: -23px;
  z-index: 2;
}

.gallery__chips {
  left: max(var(--space-20), calc((100% - 1280px) / 2));
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Figma `87:6699`: white 44px buttons on a 10px radius, rose Inter SemiBold 14 with
   2px tracking — not the frosted pills the first build used. */
.gallery__chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  white-space: nowrap;
  height: 44px;
  padding: 0 15px;
  border-radius: 10px;
  background: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-rose);
  box-shadow: var(--shadow-field);
}

.gallery__share {
  right: max(var(--space-20), calc((100% - 1280px) / 2));
}

/* Figma places this low and inside the right-hand panel, not on the vertical center. */
.gallery__expand {
  position: absolute;
  right: 132px;
  bottom: 92px;
  z-index: 2;
  width: 56px;
  height: 56px;
}

/* ============================================================
   Two-column body
   ============================================================ */

.details__layout {
  display: grid;
  grid-template-columns: minmax(0, 820px) 400px;
  justify-content: center;
  gap: var(--space-16);
  align-items: start;
  padding-block: var(--space-12) var(--space-20);
}

/* Figma `87:6717`: 10px between the rows — the tag and rating share the top row, then
   the name, then the address with the size ranged right against it. */
.detail-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px var(--space-8);
}

.detail-title__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.detail-title h1 {
  grid-column: 1 / -1;
  font-size: 50px;
  line-height: 1.2;
  font-weight: var(--weight-medium);
}

/* The same teal uppercase tag the property cards wear. */
.detail-title__neighborhood {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--color-green-primary);
}

.detail-title__address {
  font-size: 20px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-secondary);
}

/* `285:25286`: one gold star, the average, then the count in brackets — not the
   five-star row the property cards draw. */
.detail-title__rating .rating__star {
  color: var(--color-star);
}

.detail-title__rating .rating__value {
  font-size: var(--text-lead);
  line-height: 24px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
}

.detail-title__sqft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  font-size: 18px;
  font-weight: var(--weight-medium);
  color: var(--color-rose);
}

.detail-description {
  margin-top: var(--space-8);
  color: var(--text-secondary);
}

/* The mobile-only affordances stay out of the desktop layout entirely. The unit rail
   carries lazy images, so hiding it here is also what keeps a desktop visitor from
   downloading every unit's photo set. */
.gallery__count,
.gallery__dots,
.unit-rail {
  display: none;
}

.detail-block {
  margin-top: var(--space-16);
}

.detail-block h2 {
  margin-bottom: var(--space-6);
  font-size: var(--text-h3);
}

.detail-block__lede {
  margin-bottom: var(--space-5);
  color: var(--text-secondary);
}

.detail-block__subtitle {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--text-h4);
}

.detail-block__body {
  color: var(--text-secondary);
}

/* --- Amenity lists --- */

/* Figma `401:18593`: two 400px columns on a 20px gutter, rows 20px apart. */
/* Figma fills the left column before the right — reading order runs down, not across —
   so the grid flows by column. The row count comes in as an inline style, because a
   column flow has nothing to break on without it. */
.amenity-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.amenity-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-lead);
  line-height: 24px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
}

/* A bare 24px glyph — the design has no tinted tile behind it. */
.amenity-list__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--color-grey-dark);
}

/* --- Location map --- */

.detail-map {
  height: 450px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-grey-light);
}

.detail-map__canvas {
  width: 100%;
  height: 100%;
}

/* --- What's around --- */

.around__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.around__head h2 {
  margin-bottom: 0;
}

.around__score {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.around__score-value {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--color-green-primary);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
}

.around__score-label {
  display: flex;
  flex-direction: column;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Figma `87:6825`: the pill row sits on a hairline with 15px of clearance below it. */
.around__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-bottom: 15px;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid #e6ebec;
}

/* These run smaller and darker than the shared browse-filter pill. */
.around__pills .filter-pill {
  height: auto;
  gap: 5px;
  padding: 7px 14px;
  border-color: #e6ebec;
  font-size: 13px;
  line-height: normal;
  font-weight: var(--weight-regular);
  letter-spacing: -0.25px;
  color: #3a4a4e;
}

.around__pills .filter-pill.is-active {
  gap: 7px;
  border-color: #0f1a1d;
  background: var(--color-grey-secondary);
  color: var(--text-inverse);
}

.around__pills .filter-pill__count {
  opacity: 1;
  font-size: inherit;
}

.around__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* Figma `87:6860`: a tinted 12px-radius panel, 40px glyph tile, category label over
   the name, and the rating / walk-time column pinned right. */
.place {
  display: flex;
  align-items: center;
  gap: 15px;
  /* A grid item won't shrink below its content by default, and the name doesn't wrap.
     Without this a long name widens its whole column past the page. */
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-md);
  background: var(--color-super-light-grey);
}

.place__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid #e6ebec;
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-grey-secondary);
}

.place__copy {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.place__category {
  font-size: 10px;
  line-height: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a82a6e;
}

.place__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-body);
  line-height: 18.2px;
  font-weight: var(--weight-bold);
  color: var(--color-grey-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place__stats {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 5px;
  width: 55px;
}

.place__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--weight-semibold);
  color: #1a1a1a;
}

/* The masked glyphs take currentColor, so each keeps its own tint from the export:
   a teal star and a gray pedestrian against the near-black figures. */
.place__stat:first-child .icon {
  color: var(--color-green-secondary);
}

.place__stat + .place__stat .icon {
  color: var(--color-grey);
}

/* A place with no rating leaves the distance as the first stat, which would turn its pin teal. */
.place__stat--distance .icon {
  color: var(--color-grey);
}

.around__more {
  margin-top: var(--space-4);
}

.around__credit {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ============================================================
   Booking sidebar
   ============================================================ */

.booking {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Figma `87:6880`: a #F6FBFC panel inside a translucent teal border, 14px radius,
   44px of head room above the summary and 30px everywhere else. */
.booking__dates {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 44px 30px 30px;
  border: 1px solid rgba(15, 118, 110, 0.4);
  border-radius: var(--radius-control-lg);
  background: #f6fbfc;
}

.booking__summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.booking__nights,
.booking__min,
.booking__from {
  font-size: var(--text-body);
  line-height: 24px;
  color: var(--color-grey-secondary);
  white-space: nowrap;
}

.booking__nights strong,
.booking__min strong {
  font-weight: var(--weight-semibold);
}

.booking__from strong {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 30px;
  line-height: 24px;
  font-weight: var(--weight-bold);
  color: var(--color-green-primary);
}

.booking__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Both fields are the 50px control with the label stacked over its value inside. */
.booking__field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding-inline: 15px;
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-control);
  background: var(--color-white);
  overflow: hidden;
  cursor: pointer;
}

.booking__field-icon {
  flex: none;
  color: var(--color-rose);
}

.booking__field-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.2;
}

.booking__field-label {
  font-size: var(--text-xs);
  color: var(--color-grey);
}

.booking__field-value {
  font-size: 18px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
  white-space: nowrap;
}

/* The field clips its value, so the guests one has to let its dropdown out. */
.booking__field[data-stay-field='guests'] {
  position: relative;
  overflow: visible;
}

.booking__guests {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* Stretches the trigger over the whole field, icon included, like the select it replaced. */
.booking__guests::after {
  content: '';
  position: absolute;
  inset: 0;
}

.booking__guests:focus-visible {
  outline: none;
}

.booking__field[data-stay-field='guests']:focus-within {
  border-color: var(--color-green-primary);
}

/* --- Guests dropdown, Figma `434:19495` --- */
.guest-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  /* Above the unit cards' own stacked photos and badges (z-index 1–2). */
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: min(340px, 100%);
  padding: 30px;
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-control);
  background: var(--color-white);
  box-shadow: var(--shadow-field);
  cursor: default;
}

.guest-picker[hidden] {
  display: none;
}

.guest-picker__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.guest-picker__label,
.guest-picker__count {
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-grey-dark);
}

.guest-picker__stepper {
  display: flex;
  align-items: center;
  gap: 25px;
}

.guest-picker__count {
  width: 23px;
  text-align: center;
}

.guest-picker__step {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 1px solid var(--color-grey-light);
  border-radius: 50%;
  background: transparent;
  color: var(--color-grey-secondary);
  cursor: pointer;
}

/* The svg draws its glyph on the 29px circle's own grid, so it sits over the border. */
.guest-picker__step svg {
  margin: -1px;
}

.guest-picker__step:hover:not(:disabled),
.guest-picker__step:focus-visible {
  border-color: var(--color-green-primary);
  outline: none;
}

.guest-picker__step:disabled {
  color: var(--color-grey);
  cursor: default;
}

/* ============================================================
   Check Unit Availability popup
   ============================================================ */

.avail-modal__dialog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 299px;
  width: min(910px, 100%);
  border-radius: var(--radius-lg);
}

.avail-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 40px 44px;
}

.avail-form__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 26px;
  line-height: normal;
  font-weight: var(--weight-semibold);
  color: var(--color-grey-secondary);
}

.avail-form .form-row {
  gap: 20px;
}

.avail-form__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-body);
  color: var(--color-grey-secondary);
  cursor: pointer;
}

.avail-form__check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-green-primary);
}

.avail-form__date {
  position: relative;
  display: block;
}

.avail-form__date .form-field__control {
  padding-right: 42px;
  cursor: pointer;
}

.avail-form__date-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  translate: 0 -50%;
  color: var(--color-rose);
  pointer-events: none;
}

.avail-form__purpose {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 25px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A legend ignores flex gap and sits on the fieldset's border unless it floats. */
.avail-form__purpose legend {
  float: left;
  width: 100%;
  padding: 0;
}

.avail-form__radios {
  display: flex;
  gap: 25px;
  clear: both;
}

.avail-form__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
}

.avail-form__status {
  margin-right: auto;
  font-size: var(--text-sm);
  color: var(--color-green-primary);
}

.avail-form__status.is-error {
  color: var(--color-rose);
}

.avail-form__submit {
  padding: 15px 50px;
}

.avail-modal__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 56px 36px;
  background: var(--color-green-primary);
  font-size: var(--text-body);
  color: var(--color-white);
}

.avail-modal__aside-title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 30px;
  font-weight: var(--weight-semibold);
}

.avail-modal__phone {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

.avail-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-grey-secondary);
  cursor: pointer;
}

/* An outline button, not the solid teal one — the design keeps the fill white. */
.booking__check {
  width: 100%;
  height: 50px;
  border: 1px solid var(--color-green-primary);
  background: var(--color-white);
  color: var(--color-green-primary);
  font-size: 18px;
  letter-spacing: 1.26px;
  box-shadow: 0 10px 7.5px rgba(0, 144, 146, 0.25);
}

.booking__units {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The Select Unit sheet's own chrome — phone only, see the 900px block. */
.booking__sheet-head,
.booking__stay {
  display: none;
}

/* Stands in for the unit list until a stay is chosen. */
.booking__prompt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-5);
  border: 1px dashed rgba(15, 118, 110, 0.4);
  border-radius: 14px;
  font-size: var(--text-sm);
  line-height: 22px;
  color: var(--color-grey-secondary);
}

.booking__prompt svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-rose);
}

/* --- Unit cards ---
   Figma `87:6881`: every card is expanded — there is no collapsed state — on a #F6FBFC
   panel inside a translucent teal border at a 14px radius with 30px padding. */

.unit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 30px;
  border: 1px solid rgba(15, 118, 110, 0.4);
  border-radius: 14px;
  background: #f6fbfc;
}

/* A unit that cannot hold the party is dimmed but still listed, so the list does not
   change length as the guest count changes. */
.unit-card.is-unavailable {
  opacity: 0.45;
}

.unit-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.unit-card__identity {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.unit-card__name {
  font-size: var(--text-h3);
  line-height: 26px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
  text-decoration: underline;
}

.unit-card__meta {
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-grey);
}

/* The square footage is picked out in rose medium inside the meta line. */
.unit-card__sqft {
  font-weight: var(--weight-medium);
  color: var(--color-rose);
}

.unit-card__badge {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-rose);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: var(--weight-bold);
}

/* Figma fans three cards behind the thumbnail; two offset pseudo-elements read the
   same at 88x65 without shipping the composite as an asset. */
.unit-photos {
  position: relative;
  flex: none;
  width: 88px;
  height: 65px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.unit-photos::before,
.unit-photos::after {
  content: '';
  position: absolute;
  border: 1px solid var(--color-grey-light);
  border-radius: 4px;
  background: var(--color-white);
}

.unit-photos::before {
  inset: 0 16px 10px 0;
}

.unit-photos::after {
  inset: 3px 8px 6px 8px;
}

.unit-photos img {
  position: absolute;
  z-index: 1;
  inset: 5px 5px 0 11px;
  width: calc(100% - 16px);
  height: calc(100% - 5px);
  object-fit: cover;
  border-radius: 4px;
  /* The dark wash the label sits on. */
  filter: brightness(0.6);
}

.unit-photos span {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: 50%;
  translate: 0 -50%;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-white);
  text-decoration: underline;
}

.unit-card__rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: 5px;
}

/* The 3D TOUR chip, on the units that have one. */
.unit-tour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: #493827;
}

.unit-tour span {
  text-decoration: underline;
}

.unit-card__rate {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}

.unit-card__rate strong {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: var(--color-green-secondary);
}

.unit-card__rate span {
  font-size: var(--text-sm);
  color: var(--color-grey);
}

.unit-card__actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.unit-card__book {
  width: 169px;
  height: 50px;
  font-size: 18px;
  letter-spacing: 1.26px;
  box-shadow: 0 10px 7.5px rgba(0, 144, 146, 0.25);
}

.unit-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
  white-space: nowrap;
}

.unit-card__nights {
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-grey-secondary);
}

.unit-card__nights strong {
  font-weight: var(--weight-semibold);
}

.unit-card__total {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}

.unit-card__total strong {
  font-size: 20px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-secondary);
}

.unit-card__total span,
.unit-card__total del {
  font-size: var(--text-sm);
  color: var(--color-grey);
}

.unit-card__due {
  font-size: var(--text-sm);
  line-height: 1;
  color: #6aa2b7;
}

.unit-card__due strong {
  font-weight: var(--weight-medium);
}

/* --- Inquire-only variant ---
   The design's last card: no rate to quote, so it offers the phone line instead. */

.unit-card__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-grey-dark);
}

.unit-card__reach,
.unit-card__contact a {
  font-weight: var(--weight-semibold);
  color: inherit;
}

.unit-card__limited {
  color: var(--color-grey);
}

.unit-card__check {
  width: 100%;
  height: 50px;
  font-size: 18px;
  letter-spacing: 1.26px;
}

/* ============================================================
   3D tour band
   ============================================================ */

/* Figma `87:6889`: an 860px band curved inward top and bottom, exactly as the home
   page's tour band. The arc is a shallow circular segment — see home.css for why an
   ellipse is wrong — carved out with two circle gradients intersected. */
.detail-tour {
  --arc-depth: 3.44vw;
  --arc-radius: 365.1vw;

  position: relative;
  min-height: 860px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-inverse);
  text-align: center;

  /* The fade runs over the last 1px only. As 99.9% it was a tenth of a 365vw radius,
     a 7px blur along both arcs at 1920. */
  -webkit-mask:
    radial-gradient(circle var(--arc-radius) at 50%
      calc(var(--arc-depth) - var(--arc-radius)), #0000 calc(100% - 1px), #000 100%),
    radial-gradient(circle var(--arc-radius) at 50%
      calc(100% - var(--arc-depth) + var(--arc-radius)), #0000 calc(100% - 1px), #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--arc-radius) at 50%
      calc(var(--arc-depth) - var(--arc-radius)), #0000 calc(100% - 1px), #000 100%),
    radial-gradient(circle var(--arc-radius) at 50%
      calc(100% - var(--arc-depth) + var(--arc-radius)), #0000 calc(100% - 1px), #000 100%);
  mask-composite: intersect;
}

.detail-tour__media,
.detail-tour__scrim {
  position: absolute;
  inset: 0;
}

.detail-tour__scrim {
  background: rgba(0, 0, 0, 0.25);
}

/* The tabs are pinned near the top of the band; the play control sits on its center.
   The content has to span the whole band for that top offset to mean anything, so it
   stretches rather than being centered as a grid item. */
.detail-tour__content {
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  place-items: center;
}

.detail-tour__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.detail-tour__play-disc {
  position: relative;
  display: block;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-pill);
  background: var(--color-rose);
  transition: scale var(--duration-fast) var(--ease-out);
}

/* The play triangle, drawn from borders so it needs no asset. */
.detail-tour__play-disc::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -35% -50%;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--color-white);
}

.detail-tour__play:hover .detail-tour__play-disc {
  scale: 1.06;
}

.detail-tour__play-label {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-h3);
  line-height: 32px;
  font-weight: var(--weight-medium);
  color: var(--text-inverse);
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}

.detail-tour__tabs {
  position: absolute;
  /* The arc bites arc-depth into the band at its center, right where the tabs sit, so
     the 60px is counted from the bottom of the bite rather than the band's top edge. */
  top: calc(var(--arc-depth) + 60px);
  left: 50%;
  translate: -50% 0;
  /* An absolute box at left: 50% is offered only the right half of the band, so six
     sizes wrapped to a second row with the other half empty. It takes its own width,
     up to the full band. */
  width: max-content;
  max-width: calc(100% - var(--gutter) * 2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}

.detail-tour__tab {
  padding: var(--space-2) var(--space-5);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--text-inverse);
}

.detail-tour__tab[aria-selected='true'] {
  background: var(--color-white);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   Reviews and similar properties
   ============================================================ */

.detail-reviews {
  background: linear-gradient(180deg, var(--surface-page), var(--surface-mint));
}

/* Figma `1:5064`: two 726px tracks on a 100px gutter, reviews 50px apart down each.
   CSS columns rather than a grid — the reviews are all different heights, and a grid
   would hold a ragged row open wherever a short one sat beside a long one. */
.detail-reviews__grid {
  columns: 2;
  column-gap: 100px;
}

/* A bordered list, not the shadowed cards the prototype drew. */
.review {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Columns break mid-element by default, which would split a review across tracks. */
  break-inside: avoid;
  margin-bottom: 50px;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-grey-light);
}

.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.review__head .rating__stars {
  gap: 2px;
}

/* Figma `282:23753`: the tick and the label in the secondary teal. */
.review__verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
  color: var(--color-green-secondary);
  white-space: nowrap;
}

.review__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 17px;
  line-height: 24px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.15px;
  color: var(--color-grey);
}

.review__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
}

.review__quote {
  font-size: var(--text-body);
  line-height: 28px;
  color: var(--color-grey-dark);
}

.detail-reviews__more {
  margin-top: var(--space-10);
  text-align: center;
}

.detail-similar__grid {
  display: flex;
  gap: 30px;
  padding-left: max(var(--gutter), calc((100% - var(--container-max)) / 2));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.detail-similar__grid::-webkit-scrollbar {
  display: none;
}

.detail-similar__grid > * {
  flex: 0 0 417.5px;
  scroll-snap-align: start;
}

/* Bare arrows centered under the rail, at every width — the design draws them on the
   desktop frame too, not only on the phone. */
.detail-similar__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.detail-similar__nav[hidden] {
  display: none;
}

.detail-similar__nav .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.detail-similar__nav .icon-btn:disabled:hover {
  background: transparent;
}

/* ============================================================
   Mobile sticky booking bar
   ============================================================ */

/* Figma `195:18530`: price and minimum-stay centered over a full-width outlined
   Check Availability button. */
.booking-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 10px 20px 19px;
  background: var(--color-white);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.1);
}

.booking-bar__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.booking-bar__price strong {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--color-green-primary);
}

/* Figma `342:19085`: the price row is 24px tall, the minimum-stay line 18px under it. */
.booking-bar__price {
  height: 24px;
}

.booking-bar__min {
  height: 18px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* `342:19090`: a 56px outlined button, 10px under the price block. */
.booking-bar__cta {
  width: 100%;
  margin-top: 10px;
  min-height: 56px;
  border: 1px solid var(--color-green-primary);
  color: var(--color-green-primary);
  background: transparent;
}

.booking-bar__cta:hover {
  background: var(--color-green-primary);
  color: var(--text-inverse);
}

/* ============================================================
   Lightbox
   ============================================================ */

.lightbox {
  background: rgba(10, 14, 20, 0.92);
}

/* Figma `435:19524`: stage and bar 19px apart, then 30px down to the thumb strip. */
.lightbox__dialog {
  display: flex;
  flex-direction: column;
  gap: 19px;
  align-items: center;
  width: min(100%, 1280px);
  /* Nothing inside may widen the dialog: the thumb strip is a full shoot laid end to end
     and would otherwise set the width and carry the close button off the screen. */
  min-width: 0;
}

.lightbox__stage {
  position: relative;
  width: 100%;
  min-width: 0;
  height: min(72vh, 750px);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--surface-dark);
}

.lightbox__photo {
  height: 100%;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
}

.lightbox__nav--prev {
  left: var(--space-4);
}

.lightbox__nav--next {
  right: var(--space-4);
}

/* Two groups, as in the design: the media links on the left and the position on the
   right. The title and price ride along in those groups — the design's unit variant
   is the only one that shows them. */
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  min-width: 0;
  color: var(--text-inverse);
}

.lightbox__title {
  display: flex;
  flex-direction: column;
}

.lightbox__title strong {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-h4);
}

.lightbox__title span {
  font-size: var(--text-xs);
  color: var(--text-inverse-muted);
}

.lightbox__chips {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Over the photo these read as plain underlined links, not the white buttons the
   gallery mosaic uses. */
.lightbox__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-inverse);
  text-decoration: underline;
  filter: drop-shadow(0 4px 7.5px rgba(0, 0, 0, 0.1));
}

.lightbox__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
}

.lightbox__price {
  font-size: var(--text-xs);
  color: var(--text-inverse-muted);
}

.lightbox__price strong {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-h4);
  color: var(--text-inverse);
}

.lightbox__counter {
  font-size: var(--text-lead);
  line-height: 20px;
  letter-spacing: -1.12px;
  color: var(--text-inverse);
}

.lightbox__counter strong {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
}

/* The 3D tour popup borrows the lightbox's dialog, stage and bar. Only the frame and the
   size pills are its own. */
.tour-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tour-modal__note {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-inverse-muted);
}

.tour-modal__bar {
  flex-wrap: wrap;
}

.tour-modal__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
}

.tour-modal__pill {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--text-inverse);
}

.tour-modal__pill[aria-selected='true'] {
  background: var(--color-white);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.lightbox__thumbs {
  display: flex;
  gap: 3px;
  align-items: center;
  margin-top: 11px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

/* The <li> is the flex item, so the size hold goes on it: the strip scrolls sideways
   rather than squeezing every thumbnail to fit. */
.lightbox__thumbs > li {
  flex: none;
}

.lightbox__thumb {
  display: block;
  width: 88px;
  height: 65px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  opacity: 0.5;
  outline: 2px solid transparent;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.lightbox__thumb.is-active,
.lightbox__thumb:hover {
  opacity: 1;
  outline-color: var(--color-white);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1280px) {
  .details__layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-10);
  }

  .gallery__chips {
    left: var(--gutter);
  }

  .gallery__share,
  .gallery__expand {
    right: var(--gutter);
  }
}

@media (max-width: 1024px) {
  /* `1fr` keeps an automatic minimum, so the widest card stretched the track past the
     container. minmax(0, 1fr) plus min-width on the columns lets it shrink. */
  .details__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .details__main,
  .booking {
    min-width: 0;
  }

  .booking {
    position: static;
  }

  /* `199:19044` runs the reviews as one column on the phone. */
  .detail-reviews__grid {
    columns: 1;
  }

  .review {
    margin-bottom: var(--space-5);
  }
}

@media (max-width: 900px) {
  /* The 23px belongs to the chips that hang below the desktop mosaic. On the phone they
     sit inside the photo, so it was 23px of nothing — and the layout's 48px of head room
     sat under it. `195:18553` starts the title 20px below the photo. */
  .gallery {
    margin-bottom: 0;
    /* Clips the sliding track below. */
    overflow: hidden;
  }

  .details__layout {
    padding-top: 20px;
  }

  /* The three panels become a track resting one panel in, so the hero (the second
     panel) fills the frame with its neighbours standing by either side. details.js
     slides the track to a neighbour, then re-centres the photo window underneath. */
  .gallery__mosaic {
    display: flex;
    /* No gap: the translate steps in whole panel widths. */
    gap: 0;
    height: 280px;
    transform: translateX(-100%);
  }

  .gallery__mosaic.is-sliding {
    transition: transform var(--duration-base) var(--ease-out);
  }

  .gallery__panel {
    flex: 0 0 100%;
  }

  /* A single photo has no neighbours and no travel. */
  .gallery__mosaic--single {
    transform: none;
  }

  /* The mobile frame swaps the arrows for a counter pill and dots, and drops the
     photos chip — 3D TOUR stays. Swipe replaces the arrows; see details.js. */
  .gallery__share,
  .gallery__expand,
  .gallery__arrow,
  .gallery__chip[data-gallery-open] {
    display: none;
  }

  /* Figma `195:18551`: a 55x28 pill inset 16px from the top-right of the 280px photo. */
  .gallery__count {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    min-width: 55px;
    height: 28px;
    padding-inline: 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-grey-dark);
  }

  /* `342:19072`: the dots ride on the chips row, 16px in from the right edge and 26px up
     from the foot of the photo. The current one stretches to a 16px pill; the rest are
     6px circles on a 6px gap. */
  .gallery__dots {
    position: absolute;
    bottom: 26px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .gallery__dots i {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.55);
    transition: width var(--duration-fast) var(--ease-out);
  }

  .gallery__dots i.is-active {
    width: 16px;
    background: var(--color-white);
  }

  /* The mobile frame keeps the chips fully inside the photo's bottom-left, and the row
     tightens and scrolls sideways rather than wrapping a label onto two lines. */
  .gallery__chips {
    left: 0;
    right: 0;
    bottom: var(--space-3);
    gap: var(--space-2);
    padding-inline: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .gallery__chips::-webkit-scrollbar {
    display: none;
  }

  .gallery__chip {
    height: 38px;
    padding: 0 12px;
    gap: 6px;
    font-size: var(--text-xs);
    letter-spacing: 1px;
  }

  /* Larger section headings than the shrunken --text-h3 token. */
  .detail-block h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .detail-title h1 {
    font-size: 30px;
    line-height: 38px;
  }

  /* Mobile title (`195:18530`): everything single-column, with the size range on its
     own line under the address. */
  .detail-title {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-title__address {
    font-size: 15px;
    line-height: 22px;
  }

  .detail-title__sqft {
    justify-self: start;
  }

  /* One column. The row template the desktop column flow needs comes in as an inline
     style, so beating it takes the important. */
  .amenity-list,
  .around__list {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none !important;
  }

  .amenity-list li {
    font-size: 20px;
  }

  .around__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .detail-map {
    height: 300px;
  }

  /* --- Select Unit, Figma `356:21697` ---
     `195:18530` draws no booking panel on the details page, because the panel is its own
     screen. This is that screen: the same sidebar element, hidden until the sticky bar
     opens it, then full screen over the page. */
  .booking {
    display: none;
  }

  /* `356:21698`: the site header stays on the Select Unit screen, so the sheet starts
     under it rather than covering it. It sits over the sticky bar but below both the
     header and the date popover, which is why the popover can open on top of it. */
  .booking.is-open {
    display: flex;
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: var(--z-sheet);
    gap: 20px;
    padding: 0 16px 40px;
    overflow-y: auto;
    /* Without this the sheet's own scrollbar sits over the right-hand padding and clips
       the cards' edges on any browser that draws a classic scrollbar. */
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    background: var(--color-white);
  }

  .booking.is-open .booking__sheet-head,
  .booking.is-open .booking__stay,
  .booking.is-open .booking__prompt {
    display: flex;
  }

  /* `358:19298`: the title row, 20px down from the top of the screen. */
  .booking__sheet-head {
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: 20px;
  }

  .booking__sheet-head h2 {
    font-size: 28px;
    line-height: 38px;
    font-weight: var(--weight-medium);
    color: var(--color-grey-dark);
  }

  .booking__sheet-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-grey-dark);
    cursor: pointer;
  }

  /* `359:19299`: each row is a label with Change ranged right, the value under it, and a
     hairline between the two rows. */
  .booking__stay {
    flex-direction: column;
    gap: 16px;
    margin-top: -5px;
  }

  .booking__stay-row + .booking__stay-row {
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
  }

  .booking__stay-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .booking__stay-head span {
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    color: var(--color-grey-dark);
  }

  .booking__stay-change {
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--text-body);
    color: var(--color-green-primary);
    text-decoration: underline;
    cursor: pointer;
  }

  /* Also a button for the dates row, so the full-width line is its tap target. */
  .booking__stay-value {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    font-size: var(--text-body);
    text-align: left;
    color: var(--color-grey-dark);
  }

  /* The summary is the resting state, and Change reveals **one** field — not the sidebar
     panel. The panel's tinted card, its border and its "From" price all belong to the
     desktop sidebar; on this screen the price is on the sticky bar and the stay is in the
     summary above, so the panel is stripped back to the field and its submit.

     The panel itself stays visible so Check Availability is always on the sheet —
     with it hidden at rest, a sheet with no stay chosen had no button at all. The
     fields below still only show while editing, and details.js turns a submit with
     no dates into opening the calendar. */
  .booking__dates {
    display: flex;
    gap: 16px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .booking__summary {
    display: none;
  }

  .booking__field {
    display: none;
  }

  .booking.is-editing-dates [data-stay-field='dates'],
  .booking.is-editing-guests [data-stay-field='guests'] {
    display: flex;
  }

  /* On the sheet the dropdown opens inline under the field's value instead of floating
     over the Check Availability button. */
  .booking__field[data-stay-field='guests'] {
    flex-wrap: wrap;
    height: auto;
    min-height: 50px;
  }

  /* Keeps the first line the field's 50px (48 inside the border) once it can wrap. */
  .booking__field[data-stay-field='guests'] .booking__field-copy {
    min-height: 48px;
  }

  .booking__guests::after {
    bottom: auto;
    height: 50px;
  }

  .guest-picker {
    position: static;
    flex-basis: 100%;
    width: 100%;
    padding: 20px 0;
    border: 0;
    border-top: 1px solid var(--color-grey-light);
    border-radius: 0;
    box-shadow: none;
  }

  /* The availability popup stacks: the teal panel drops under the form, and the close
     button moves to the dialog's own corner so it stays at the top. */
  .avail-modal__dialog {
    grid-template-columns: minmax(0, 1fr);
  }

  .avail-form {
    padding: 30px 20px;
  }

  .avail-form__title {
    padding-right: 48px;
  }

  .avail-modal__aside {
    position: static;
    padding: 30px 20px;
  }

  .avail-modal__aside-title {
    font-size: 24px;
  }

  /* `413:22499` sets the cards 20px apart. */
  .booking__units {
    gap: 20px;
  }

  /* --- Unit cards, Figma `356:21697` ---
     The phone draws a different component, not the desktop card shrunk. It is a white
     card on the page rather than a tinted panel, the rate moves up beside the name, the
     photos run full width inside it, and Book Now is a solid teal bar across the foot.

     The card is 358 wide with 16px of padding, and the two blocks inside it are 20px
     from the top and 20px from the bottom. */
  .unit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'identity rate'
      'rail     rail'
      'actions  actions';
    gap: 0;
    padding: 20px 16px;
    border: 1px solid var(--border-subtle);
    background: var(--color-white);
  }

  .unit-card__head {
    grid-area: identity;
  }

  /* The 88x65 stack is a desktop affordance; the phone shows the photos themselves. */
  .unit-photos {
    display: none;
  }

  /* `357:18976` draws the name plain; the underline is a sidebar treatment. */
  .unit-card__name {
    font-size: 24px;
    line-height: 26px;
    text-decoration: none;
  }

  .unit-card__meta {
    margin-top: 5px;
    line-height: 1.4;
  }

  /* `357:18988`: the rate stacks against the right edge — figure over the word, not the
     inline "$178.33 /Night" the sidebar uses. */
  .unit-card__rate-row {
    grid-area: rate;
    display: block;
    padding-bottom: 0;
    text-align: right;
  }

  .unit-card__rate {
    display: block;
  }

  .unit-card__rate span {
    display: block;
  }

  /* The keyboard copy of the tour chip; the phone's visible one sits on the photos. */
  .unit-card__rate-row .unit-tour {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* The totals sit above a full-width Book Now, so the row reverses. */
  .unit-card__actions {
    grid-area: actions;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 20px;
  }

  /* `357:18996`: the night count sits left, with the total over the deposit on the
     right — one row, not the right-aligned stack the sidebar uses. */
  .unit-card__price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px var(--space-4);
  }

  .unit-card__nights {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--text-body);
    text-align: left;
  }

  .unit-card__total {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .unit-card__due {
    grid-column: 2;
    grid-row: 2;
  }

  .unit-card__book {
    width: 100%;
  }

  /* The inquire card gets its own row map: contact and the button used to share the
     `actions` area, with the button's top margin leaving room for one line of contact
     text — on narrower phones "Limited Availability" wrapped onto a second line and
     disappeared behind the button. */
  .unit-card--inquire {
    grid-template-areas:
      'identity identity'
      'contact  contact'
      'actions  actions';
  }

  .unit-card__contact {
    grid-area: contact;
    flex-wrap: wrap;
    gap: 4px var(--space-4);
    margin-top: 20px;
  }

  .unit-card__check {
    grid-area: actions;
    margin-top: 16px;
    height: 56px;
  }

  /* --- In-card photo rail (`356:21699`) --- */
  .unit-rail {
    display: block;
    grid-area: rail;
    position: relative;
    /* The card's 16px padding is cancelled so the photos run edge to edge. */
    margin: 20px -16px;
    height: 257px;
    overflow: hidden;
  }

  .unit-rail__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .unit-rail__track::-webkit-scrollbar {
    display: none;
  }

  .unit-rail__track img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
  }

  /* The frame sets this in plain white over a dark corner of its photo. A real shoot has
     no such guarantee, so the shadow carries the contrast rather than a pill, which would
     add chrome the design does not draw. */
  .unit-rail__count {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-white);
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.8),
      0 0 12px rgba(0, 0, 0, 0.5);
  }

  /* A white pill with the rose glyph and label, as the gallery chips wear. */
  .unit-rail__chip {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding-inline: 14px;
    border-radius: 10px;
    background: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-rose);
    box-shadow: var(--shadow-field);
  }

  .unit-rail__dots {
    position: absolute;
    right: 16px;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .unit-rail__dots i {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.55);
    transition: width var(--duration-fast) var(--ease-out);
  }

  .unit-rail__dots i.is-active {
    width: 16px;
    background: var(--color-white);
  }

  /* The rail is the same control at every width; only the numbers change. Figma
     `340:28525` puts four 298px cards on a 20px gap, inset 16px — a fixed measure, not a
     share of the viewport, so the next card peeks by the same amount on every phone. */
  .detail-similar__grid {
    gap: 20px;
  }

  .detail-similar__grid > * {
    flex: 0 0 298px;
  }

  /* The tour chips run as one scrollable row under the band's top edge. */
  .detail-tour__tabs {
    top: var(--space-5);
    left: var(--gutter);
    right: var(--gutter);
    translate: 0 0;
    width: auto;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: var(--radius-control-lg);
  }

  .detail-tour__tabs::-webkit-scrollbar {
    display: none;
  }

  .detail-tour__tab {
    flex: none;
  }

  /* The sticky bar replaces the sidebar CTA, so the page needs room beneath it. */
  .booking-bar {
    display: flex;
  }

  .details {
    padding-bottom: 88px;
  }

  .lightbox__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* On a phone the bar stacks and the thumb strip stays, so 72vh of stage left the
     dialog taller than the screen. The stage gives that height back. */
  .lightbox__stage {
    height: 52vh;
  }
}