/* ============================================================
   Property detail page
   ============================================================ */
.property-detail__inner {
  padding: 140px 100px 100px;
}

.property-not-found {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 40px;
  text-align: center;
  background: var(--paper-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.property-not-found__title {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--ink);
}

.property-not-found__desc {
  margin: 0 0 22px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- Header: title + share only ---- */
.property-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.property-detail__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  line-height: 1.12;
  color: var(--ink);
}

/* Icon-only now: the "Share" label (.js-share-label, still written by
   wireShareButton() in script.js since the tour/lightbox share buttons
   reuse that same markup) is hidden here rather than removed at the
   source, so this stays scoped to just this button. */
.property-detail__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.property-detail__share .js-share-label {
  display: none;
}

.property-detail__share .icon {
  width: 19px;
  height: 19px;
}

.property-detail__share:hover {
  background: var(--border-soft);
}

.property-detail__share.is-copied {
  color: var(--dusk-deep);
}

/* ---- Gallery: hero (~60%) + 2x2 grid (~40%), last tile carries "View all" ---- */
.property-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 14px;
  height: 460px;
  margin-bottom: 28px;
}

.property-gallery__hero {
  position: relative;
  height: 100%;
  min-height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.property-gallery__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s var(--ease);
}

.property-gallery__hero:hover img {
  opacity: 0.85;
}

.property-gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.property-gallery__grid--count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.property-gallery__grid--count-2 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.property-gallery__tile {
  position: relative;
  min-height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.property-gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s var(--ease);
}

.property-gallery__tile:hover img {
  opacity: 0.85;
}

/* A corner-pinned pill over the last tile's own photo, not a full-tile
   dark scrim with a centered button: the image underneath stays exactly
   as bright as its neighbors, matching a plain "Show all photos" pill
   floating in the bottom-right corner. */
.property-gallery__viewall {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
}

.property-gallery__viewall-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--paper-elevated);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 300;
  box-shadow: var(--shadow-card);
  transition: background 0.15s var(--ease);
}

.property-gallery__viewall:hover .property-gallery__viewall-pill {
  background: var(--paper);
}

.property-gallery__viewall-pill .icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: none;
}

/* ---- Mobile swipeable carousel: replaces the hero+grid preview
   entirely under 640px (see the max-width: 640px block below), rather
   than reflowing it; hidden here so it never renders on desktop. ---- */
.property-gallery-carousel {
  display: none;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.property-gallery-carousel__track {
  display: flex;
  cursor: grab;
}

.property-gallery-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
}

.property-gallery-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.property-gallery-carousel__counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink-rgb), 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}

/* ---- Type + location line: "Entire house in Pompano Beach, Florida,
   United States", the subheading directly under the title. Still a step
   above the quick-facts line below it in weight, but noticeably smaller
   now than the (bigger) title above it. ---- */
.property-detail__location {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

/* ---- Quick facts: a single plain text line (value + label pairs
   joined by " · "), smaller and lighter than the type+location line
   above it so it reads as secondary detail, not a second heading. ---- */
.property-quickfacts {
  margin-bottom: 20px;
}

.property-quickfacts__text {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---- Facts row: highlight pills on the left, check-in/check-out on
   the right, same row, below the quick-facts line. ---- */
.property-facts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin-bottom: 40px;
}

/* ---- Header tags: highlights render here as pills. ---- */
.property-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.property-tag {
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: rgba(var(--dusk-glow-rgb), 0.14);
  border: 1px solid rgba(var(--dusk-glow-rgb), 0.35);
  color: var(--dusk-deep);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---- Full-width content: every section below the quick-facts bar
   runs the full page width (no sidebar column reserving space for
   its full height). ---- */
.property-detail__main {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.property-section__title {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--ink);
}

.property-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 20px;
}

.property-section__header .property-section__title {
  margin: 0;
}

.property-section__rating {
  display: flex;
  flex: 0 0 30%;
  width: 30%;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.property-section__rating-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dusk-glow);
}

.property-section__rating-value .icon {
  width: 18px;
  height: 18px;
  fill: var(--dusk-glow);
  stroke: none;
}

.property-section__rating-count {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.property-section__lede {
  margin: -10px 0 20px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---- About: 4 optional fields, 2-col when there's room ---- */
.property-description-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px 40px;
}

.property-description__heading {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.property-description__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---- Amenities: plain tags (icon + label pill), not cards. Ends
   with the Check-In/Check-Out row. ---- */
.amenity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.amenity-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
}

.amenity-tag .icon {
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
}

.property-checkinout {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.property-checkinout__label {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.property-checkinout__value {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.property-map {
  aspect-ratio: 21 / 8;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}

.property-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.property-map__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.15s var(--ease);
}

.property-map__link .icon {
  width: 15px;
  height: 15px;
}

.property-map__link:hover {
  color: var(--dusk-deep);
}

/* ---- Things to Know: plain stacked text sections, not cards ---- */
.things-to-know {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.know-block + .know-block {
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
}

.know-block__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--ink);
}

.know-block__title .icon {
  width: 20px;
  height: 20px;
  color: var(--ink-soft);
}

.know-block__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.know-block__text--muted {
  font-style: italic;
}

/* ---- Meet Your Host: one card, photo + bio + Airbnb-attributed stats.
   Sits directly above Reviews since both are trust-building content, but
   is visually its own card (like .review-card) so its stats never read
   as this site's own review numbers. ---- */
.host-card {
  display: flex;
  gap: 26px;
  padding: 26px;
  background: var(--paper-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.host-card__photo {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-soft);
}

.host-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.host-card__intro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.host-card__name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: normal;
  color: var(--ink);
}

/* Superhost pill carries the Airbnb "brand" cue (name in the label
   itself) so it reads as an Airbnb credential, not a site badge. */
.host-card__superhost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(var(--dusk-glow-rgb), 0.14);
  border: 1px solid rgba(var(--dusk-glow-rgb), 0.35);
  color: var(--dusk-deep);
  font-size: 0.78rem;
  font-weight: 700;
}

.host-card__superhost .icon {
  width: 13px;
  height: 13px;
}

.host-card__bio {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.host-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.host-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.host-card__stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.host-card__stat-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* Explicit "this is Airbnb's number" footer: the thing that keeps a
   guest from mistaking these for the site's own review count further
   down the page. */
.host-card__attribution {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-soft);
}

.host-card__attribution .icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

@media (max-width: 560px) {
  .host-card {
    flex-direction: column;
  }
}

/* ---- Reviews: static grid reusing .review-card, unclamped so a guest
   can actually read the whole thing rather than a ticker-truncated line ---- */
/* Same .review-card component as the homepage's ticker (identical fixed
   width, padding, colors, 3-line-clamped quote): just laid out as a
   plain wrapping row instead of an animated marquee. */
.property-reviews-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 640px) {
  .property-reviews-grid {
    justify-content: center;
  }
}

.reviews-empty {
  padding: 40px;
  text-align: center;
  background: var(--paper-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.reviews-empty__title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--ink);
}

.reviews-empty__desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---- Booking bar: flat, full-width, stuck to the bottom of the
   viewport while scrolling (not a floating rounded card: a plain
   rectangle, no shadow, matching the flat page treatment). It lives
   inside .property-page-body, which ends exactly where the footer
   begins, so position: sticky naturally releases the bar right at
   the footer's edge with no gap and no scroll-driven JS needed. ---- */
.booking-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 760px) 1fr;
  align-items: center;
  gap: 32px;
  padding: 20px 50px;
  background: var(--paper-elevated);
  border-top: 1px solid var(--border);
}

.booking-bar__price {
  justify-self: start;
  flex-shrink: 0;
}

.booking-bar__price-main {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}

.booking-bar__price-main strong {
  font-size: 1.35rem;
}

.booking-bar__price-main span {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* Same enter/exit mechanics as .search-field__badge in the hero search
   bar: collapses to nothing via max-width/margin/padding/opacity (not
   display:none), so it grows in and shrinks out smoothly instead of
   popping, and pulses via .is-bump when the night count changes. */
.booking-bar__price-main .booking-bar__nights {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  max-width: 0;
  margin-left: 0;
  padding: 3px 0;
  opacity: 0;
  border-radius: var(--radius-pill);
  background: rgba(var(--dusk-glow-rgb), 0.14);
  border: 1px solid transparent;
  color: var(--dusk-deep);
  font-size: 0.74rem;
  font-weight: 600;
  transition: max-width 0.32s var(--ease), margin-left 0.32s var(--ease),
    padding 0.32s var(--ease), border-color 0.2s var(--ease), opacity 0.22s var(--ease);
}

.booking-bar__price-main .booking-bar__nights.is-visible {
  max-width: 160px;
  margin-left: 10px;
  padding: 3px 12px;
  border-color: rgba(var(--dusk-glow-rgb), 0.35);
  opacity: 1;
}

.booking-bar__price-main .booking-bar__nights.is-bump {
  animation: stepperBump 0.28s var(--ease);
}

.booking-bar__price-note {
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.booking-bar__fields {
  display: flex;
  align-items: stretch;
  justify-self: center;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.booking-bar__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.booking-bar__field:last-child {
  border-right: none;
}

.booking-bar__field:hover {
  background: var(--border-soft);
}

.booking-bar__field.is-invalid {
  background: rgba(var(--dusk-glow-rgb), 0.18);
}

.booking-bar__field-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--ink-soft);
}

.booking-bar__field-icon .icon {
  width: 18px;
  height: 18px;
}

.booking-bar__field-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.booking-bar__field-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.booking-bar__field-value {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  /* Was allowed to visually spill past the field's own rounded edge on
     narrow widths once "Dates" started showing a full range instead of a
     single "Add date" placeholder: max-width:100% (of the already
     min-width:0 flex column above) plus ellipsis clips it gracefully
     instead. */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
  transition: opacity 0.15s var(--ease), width 0.32s var(--ease);
}

.booking-bar__cta {
  justify-self: end;
  flex-shrink: 0;
  padding: 19px 32px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.booking-bar__cta:hover {
  background: var(--dusk-deep);
}

/* Mobile booking bar: price + CTA sit on one compact row (Airbnb-style:
   was stacking onto its own full-width row because the desktop CTA's
   padding/font left no room beside the price text at mobile widths, not
   because anything forced it to 100%), with the Dates/Guests fields
   below as a smaller secondary row. Check-in and check-out used to be
   two separate fields here; merged into one "Dates" field (see
   initBookingCard() in script.js) they both already opened the same
   calendar panel, so this is a display consolidation, not a behavior
   change: closer to how Guests/Sort already read as one compact
   summary control rather than one button per underlying value. */
@media (max-width: 900px) {
  /* Grid with explicit areas, not flex-wrap: the price text's length
     varies a lot ("From $220 per night" vs. "$1,368 total for 4
     nights") and flex-wrap made the whole row's wrap decision depend
     on that length, so a longer price pushed the CTA onto its own
     full-width row. Fixed tracks (price: 1fr, cta: auto) keep price+CTA
     on one row regardless of text length.
     The separate Dates/Guests field row is gone on mobile: tapping the
     price area now opens the price-details sheet (see initPriceSheet()
     in script.js), which is where dates/guests get changed instead;
     desktop keeps the inline field row untouched. */
  .booking-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "price cta";
    align-items: center;
    padding: 14px 20px;
    gap: 10px 12px;
  }

  .booking-bar__price {
    grid-area: price;
    min-width: 0;
    cursor: pointer;
  }

  .booking-bar__price-main {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.92rem;
  }

  /* Chevron affordance hinting the price area opens something, same
     glyph the desktop date-panel/guest-panel triggers don't need
     (those already look like buttons) but this plain price text does. */
  .booking-bar__price-main::after {
    content: "";
    align-self: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: currentColor;
    opacity: 0.5;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .booking-bar__price-main strong {
    font-size: 1.08rem;
  }

  .booking-bar__price-note {
    display: none;
  }

  /* Once dates are picked the price text itself already reads "$X total
     for N nights". This badge repeating "N nights" right underneath just
     wrapped onto its own line in the narrower mobile column and read as
     duplicated, not informative. Still shown on desktop, where it sits
     inline beside a single-line price instead of stacking under it. */
  .booking-bar__price-main .booking-bar__nights {
    display: none;
  }

  .booking-bar__cta {
    grid-area: cta;
    padding: 12px 20px;
    font-size: 0.85rem;
  }

  .booking-bar__fields {
    display: none;
  }
}


/* ---- Responsive (restored from the pre-split monolith's combined
   900px/640px block: split back out per-category during the CSS
   modularization pass) ---- */
@media (max-width: 900px) {
  /* The hero+grid preview (desktop/tablet) is replaced outright by the
     swipeable carousel below 640px, not reflowed. #propertyGallery (the
     JS mount point) carries the .property-gallery class itself, so it's
     the *parent* of both the hero+grid markup and the carousel markup,
     not a sibling of either; display:none on .property-gallery here
     would take its carousel child down with it. Neutralize the desktop
     grid instead (so the carousel child lays out as a plain block) and
     hide only the two desktop-only pieces directly. */
  .property-gallery {
    display: block;
    height: auto;
  }

  .property-gallery__hero,
  .property-gallery__grid {
    display: none;
  }

  .property-gallery-carousel {
    display: block;
    margin-bottom: 0;
  }

  /* 21/8 reads fine on a wide desktop column but on a phone-width column
     that ratio squashes the map down to a sliver too short to make out
     streets or the pin. Switch to a fixed, generous height instead. */
  .property-map {
    aspect-ratio: auto;
    height: 260px;
  }
}

@media (max-width: 640px) {
  /* Mobile-only reorder, DOM stays untouched (desktop keeps its own
     title-above-gallery order): images first, then the title, then
     share, then the smaller type+location line, then everything else
     in its existing order. Flex + order rather than a markup change so
     this affects only this breakpoint. */
  .property-detail__inner {
    display: flex;
    flex-direction: column;
    padding: 60px 20px;
  }

  .booking-unavailable-banner {
    order: -4;
  }

  .property-gallery {
    order: -3;
  }

  .property-detail__header {
    order: -2;
  }

  .property-detail__location {
    order: -1;
  }

  .property-detail__title {
    font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  }

  .property-detail__location,
  .property-quickfacts__text {
    text-align: center;
  }

  .property-facts-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .property-detail__tags {
    justify-content: center;
  }

  .property-checkinout {
    gap: 10px;
    justify-content: center;
  }

  .property-checkinout__block {
    text-align: center;
  }
}