@charset "UTF-8";
/**
 * cire-luxury.css — CIRECaribbean.com luxury redesign layer
 * ===========================================================================
 * REBUILD (round two). The first draft was rejected on mobile. This file is
 * written against the ACTUAL rendered DOM of the live site, not against
 * assumptions, and every rule below is mobile-first.
 *
 * WHY THE FIRST DRAFT FAILED — both causes confirmed from the real markup
 * and the theme's own JavaScript:
 *
 *   1. BREAKPOINT MISMATCH. The mockups use 729px/1024px. This theme's
 *      Foundation build actually breaks at 45.5625em (729px) and 85.375em
 *      (1366px), and its JS uses two more: mrt-prop-details.js toggles
 *      .property-detail-mobile-footer at 1024px and auto-expands the spec
 *      accordions at 768px. Writing tablet rules at 1024px meant that from
 *      1025-1365px the DOM was still in its mobile configuration while the
 *      CSS applied desktop grid rules.
 *
 *   2. ACCORDIONS FORCED OPEN ON PHONES. The draft set
 *      .accordion__content { display:block !important } at every width. The
 *      theme only auto-expands those panels at >=768px and deliberately
 *      leaves them collapsed and tappable below that, so on a phone every
 *      spec table was blown open into an enormous wall of content.
 *      This file never forces them open; the theme's own JS governs them.
 *
 * A third, content-level error is also corrected here: the draft styled
 * .property-detail-highlights__list as the mockup's hairline facts row. It is
 * not — it is the "Property Highlights" feature list (Beachfront, Pool,
 * Waterfront). The real facts row is .property-detail-sidebar__unit-spec,
 * whose children are __unit-spec-figure and __unit-spec-label.
 *
 * SCOPE OF THIS FILE (deliberately narrow):
 *   Tokens + the property-detail page, scoped to the body class
 *   .property-detail-a-2col so nothing can leak to other templates.
 *   The homepage, search, agents, island and content-page rules from the
 *   draft are intentionally REMOVED until each is rebuilt against its own
 *   rendered DOM the same way. Shipping unverified CSS for five more page
 *   types is what caused the rejection.
 *
 * Loaded after css/app.css via a 'neutrino_styles' dependency (see
 * includes/enqueue.php). app.css is compiled and must never be hand-edited.
 *
 * BREAKPOINTS USED HERE — the mockup's 729/1024, which also line up with
 * real behaviour in this theme:
 *   base            phones, < 729px  (Foundation small; type tuned for 375px)
 *   >= 729px        Foundation small/medium boundary (45.5625em)
 *   >= 1024px       theme JS stops showing the sticky mobile footer
 *
 * Two other thresholds exist in the theme and are respected rather than
 * fought: its JS auto-expands the spec accordions at >=768px (so this file
 * never sets display on them), and Foundation's own "large" is 1366px (so
 * between 1024 and 1365 the masthead is still in mobile configuration).
 */

/* ==========================================================================
   01 TOKENS
   ========================================================================== */
:root {
  --cire-white: #ffffff;
  --cire-panel: #f6f7f7;
  --cire-black: #000000;
  --cire-charcoal: #384249;
  --cire-gray-med: #76787b;
  --cire-gray-light: #a3aaad;
  --cire-gold: #c9ac77;
  --cire-gold-dark: #bfa066;
  --cire-hairline: #e3e5e6;

  /* Playfair is already loaded by header.php via Google Fonts — no new
     network request. Georgia carries the fallback during the swap. */
  --cire-serif: "Playfair Display", "Playfair", Georgia, "Times New Roman", serif;
  --cire-sans: "Proxima Nova", "Proxima Nova W01", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   02 PROPERTY DETAIL — everything below is scoped to this page
   Type scale is clamp()-based throughout. Every minimum is chosen to be
   comfortable at 375px, and no value is a bare px font-size.
   ========================================================================== */

/* ---- address ----------------------------------------------------------- */
.property-detail-a-2col .property-detail-header__address {
  font-family: var(--cire-serif);
  font-weight: 500;
  /* 375px -> 1.5rem/24px. Only reaches 2.5rem on a wide desktop. */
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--cire-black);
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: balance;
}

/* ---- price ------------------------------------------------------------- */
.property-detail-a-2col .property-detail-price__price,
.property-detail-a-2col .property-detail-price__price.fuelidx_price {
  font-family: var(--cire-sans);
  font-weight: 400;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
/* price reduction: informative, never shouting. Christie's red stays unused. */
.property-detail-a-2col .property-detail-price__change {
  font-size: clamp(0.66rem, 1.8vw, 0.72rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
  margin-top: 4px;
}

/* ---- status line ------------------------------------------------------- */
.property-detail-a-2col .property-detail-header__details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
  font-size: clamp(0.66rem, 1.9vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
  line-height: 1.6;
}
.property-detail-a-2col .property-detail-header__detail,
.property-detail-a-2col .property-detail-header__detail a {
  color: var(--cire-gray-med);
  text-decoration: none;
}
.property-detail-a-2col .property-detail-header__detail a:hover {
  color: var(--cire-gold);
}
.property-detail-a-2col .property-detail-header__detail--availability.active {
  color: var(--cire-charcoal);
  background: none;
  border: none;
  padding: 0;
}
/* separators, suppressed when the row wraps onto its own line on a phone */
@media (min-width: 480px) {
  .property-detail-a-2col
    .property-detail-header__detail
    + .property-detail-header__detail::before {
    content: "·";
    margin: 0 0.6em;
    color: var(--cire-gray-light);
  }
}

/* ---- facts row --------------------------------------------------------
   The REAL facts row: beds / baths / sqft. Hairline rules above and below,
   per the mockup. (.property-detail-highlights__list is a different thing
   and is handled further down.)
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar__unit-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 20px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--cire-hairline);
  border-bottom: 1px solid var(--cire-hairline);
}
.property-detail-a-2col .property-detail-sidebar__unit-spec {
  flex: 1 1 33%;
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  min-width: 0;
}
.property-detail-a-2col .property-detail-sidebar__unit-spec-figure {
  font-size: clamp(0.95rem, 2.6vw, 1.05rem);
  color: var(--cire-black);
  font-variant-numeric: tabular-nums;
}
.property-detail-a-2col .property-detail-sidebar__unit-spec-label {
  font-size: clamp(0.78rem, 2.2vw, 0.9rem);
  color: var(--cire-gray-med);
  text-transform: none;
}

/* ---- action buttons ---------------------------------------------------- */
.property-detail-a-2col .property-detail-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.property-detail-a-2col .property-detail-header__actions > li {
  margin: 0;
  list-style: none;
}
.property-detail-a-2col .property-detail-header__action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  /* 44px minimum touch target */
  min-height: 44px;
  padding: 10px 18px;
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.08em;
  color: var(--cire-charcoal);
  text-decoration: none;
  cursor: pointer;
}
.property-detail-a-2col .property-detail-header__action-button:hover {
  border-color: var(--cire-gold);
  color: var(--cire-charcoal);
}
.property-detail-a-2col .property-detail-header__action-button:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}
/* Request Info — the single solid-gold call to action on the page */
.property-detail-a-2col .property-detail-header__schedule,
.property-detail-a-2col a.button.property-detail-header__schedule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.1em;
  padding: 12px 24px;
  text-decoration: none;
}
.property-detail-a-2col .property-detail-header__schedule:hover,
.property-detail-a-2col a.button.property-detail-header__schedule:hover {
  background: var(--cire-gold-dark);
  color: #2c3338;
}

/* ---- gallery -----------------------------------------------------------
   The slider is left functionally intact: it carries the Matterport and
   video embeds, the magnific-popup lightbox (rrrOpenLightbox triggers a
   click on .slick-current a) and its own counter wiring. Chrome only.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-slider__container {
  position: relative;
  background: var(--cire-white);
}
.property-detail-a-2col .property-detail-slider__image {
  background-size: cover;
  background-position: center;
  border-radius: 0;
}
/* photo counter -> white pill, top right */
.property-detail-a-2col .property-detail-slider__count {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  bottom: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: clamp(0.66rem, 1.9vw, 0.72rem);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  border: none;
  box-shadow: none;
}
/* status chips over the hero. :empty guard matters — this container renders
   with no children on listings that carry no tags. */
.property-detail-a-2col .property-detail-slider__meta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.property-detail-a-2col .property-detail-slider__meta:empty {
  display: none;
}
.property-detail-a-2col .property-detail-slider__meta-tag {
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: clamp(0.56rem, 1.7vw, 0.6rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: none;
  border-radius: 0;
}

/* ---- description ------------------------------------------------------- */
.property-detail-a-2col .property-detail-main__description {
  font-size: clamp(0.95rem, 2.4vw, 1rem);
  line-height: 1.75;
  color: var(--cire-charcoal);
  max-width: 68ch;
}

/* ---- section headings -------------------------------------------------- */
.property-detail-a-2col .property-detail-main__content-header,
.property-detail-a-2col .property-detail-main__accordion-section .accordion__title,
.property-detail-a-2col .property-detail-main__accordion-section .accordion__title a {
  font-family: var(--cire-sans);
  font-size: clamp(0.78rem, 2.2vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-black);
  text-decoration: none;
}
.property-detail-a-2col .property-detail-main__content-header {
  margin: 36px 0 14px;
}

/* ---- Property Highlights (feature tags, NOT the facts row) ------------- */
.property-detail-a-2col .property-detail-highlights__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.property-detail-a-2col .property-detail-highlights__list-item {
  list-style: none;
  border: 1px solid var(--cire-hairline);
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  letter-spacing: 0.08em;
  padding: 7px 14px;
}

/* ---- spec tables -------------------------------------------------------
   NOTE: no display/height/visibility rules here on purpose. The theme's JS
   expands these panels at >=768px and leaves them collapsed and tappable
   below that. Forcing them open is what broke the phone layout.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-main__accordion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.85rem, 2.3vw, 0.92rem);
  background: transparent;
}
.property-detail-a-2col .property-detail-main__accordion-table tr {
  border-bottom: 1px solid var(--cire-hairline);
  background: transparent;
}
.property-detail-a-2col .property-detail-main__accordion-table tr:last-child {
  border-bottom: none;
}
.property-detail-a-2col .property-detail-main__accordion-table td {
  padding: 10px 10px 10px 0;
  border: none;
  background: transparent;
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
  word-break: break-word;
}
.property-detail-a-2col .property-detail-main__accordion-table td:first-child {
  color: var(--cire-gray-med);
  font-weight: 400;
  width: 46%;
}
.property-detail-a-2col .property-detail-main__accordion-inner-table-header {
  color: var(--cire-gray-med);
  font-weight: 400;
}

/* ---- sidebar ----------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar__form {
  background: var(--cire-panel);
  border: none;
  border-radius: 0;
  padding: 24px 20px;
}
.property-detail-a-2col .property-detail-sidebar__agent-name {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1rem, 2.6vw, 1.1rem);
  color: var(--cire-black);
}
.property-detail-a-2col .property-detail-sidebar__agent-phone-type {
  font-size: clamp(0.6rem, 1.8vw, 0.64rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
.property-detail-a-2col .property-detail-sidebar__agent-phone a {
  color: var(--cire-charcoal);
  text-decoration: none;
}
.property-detail-a-2col .property-detail-sidebar__agent-phone a:hover {
  color: var(--cire-gold);
}

/* Gravity Form inside the inquiry panel. Markup, hooks and validation are
   untouched — this only restyles the fields. */
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input[type="text"],
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input[type="email"],
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input[type="tel"],
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper textarea {
  width: 100%;
  border: 1px solid var(--cire-gold);
  border-radius: 0;
  background: var(--cire-white);
  padding: 12px 13px;
  font-family: var(--cire-sans);
  font-size: 1rem; /* >=16px: stops iOS Safari zooming the page on focus */
  color: var(--cire-charcoal);
  box-shadow: none;
}
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input:focus,
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper textarea:focus {
  outline: 2px solid var(--cire-gold);
  outline-offset: -1px;
}
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper .gform_button,
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input[type="submit"] {
  width: 100%;
  min-height: 48px;
  background: var(--cire-gold);
  color: #2c3338;
  border: none;
  border-radius: 0;
  font-family: var(--cire-sans);
  font-size: clamp(0.8rem, 2.2vw, 0.85rem);
  letter-spacing: 0.1em;
  padding: 14px 28px;
  cursor: pointer;
}
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper .gform_button:hover,
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper input[type="submit"]:hover {
  background: var(--cire-gold-dark);
}

/* ---- sticky mobile footer ---------------------------------------------
   The theme's JS sets display:flex/none inline on this element at 1024px,
   so its visibility is never touched here — only its skin.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-mobile-footer {
  background: var(--cire-white);
  border-top: 1px solid var(--cire-hairline);
  box-shadow: none;
}
.property-detail-a-2col .property-detail-mobile-footer__action-button {
  min-height: 44px;
  color: var(--cire-charcoal);
  font-size: clamp(0.7rem, 2vw, 0.76rem);
  letter-spacing: 0.06em;
}
.property-detail-a-2col .property-detail-mobile-footer__schedule,
.property-detail-a-2col .button.property-detail-mobile-footer__schedule {
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  min-height: 44px;
  font-size: clamp(0.74rem, 2vw, 0.8rem);
  letter-spacing: 0.1em;
}

/* ==========================================================================
   03 TABLET AND UP  (>= 729px, the theme's small/medium boundary)
   ========================================================================== */
@media (min-width: 729px) {
  .property-detail-a-2col .property-detail-header__actions {
    gap: 14px;
  }
  .property-detail-a-2col .property-detail-sidebar__unit-spec {
    flex: 0 1 auto;
    margin-right: 40px;
  }
  .property-detail-a-2col .property-detail-main__accordion-table td {
    padding: 11px 12px 11px 0;
  }
}

/* ==========================================================================
   04 DESKTOP  (>= 1024px — the mockup breakpoint, and the width at which
   this theme's own JS stops showing the sticky mobile footer)

   Only here is the approved left-stacked header anatomy applied. The
   template nests the address and the status line inside
   .property-detail-header__title with .property-detail-price as a sibling;
   display:contents promotes those children to flex items of __content so
   `order` can produce address -> price -> status without moving any PHP.
   It is confined to desktop because .property-detail-header is a js-headroom
   sticky element and a tall stacked header would eat a phone viewport.

   NOTE FOR VERIFICATION: Foundation's "large" breakpoint in this build is
   1366px, not 1024px, so between 1024 and 1365 the masthead is still in its
   mobile configuration while this block applies. That follows the mockup
   spec, but 1024-1365px is the band most worth a look.
   ========================================================================== */
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-header__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 0 0;
  }
  .property-detail-a-2col .property-detail-header__title {
    display: contents;
  }
  .property-detail-a-2col .property-detail-header__address {
    order: 1;
    max-width: 20ch;
  }
  .property-detail-a-2col .property-detail-price {
    order: 2;
    display: block;
    margin-top: 10px;
    text-align: left;
  }
  .property-detail-a-2col .property-detail-header__details {
    order: 3;
  }
  .property-detail-a-2col .property-detail-header__actions {
    order: 4;
    margin-top: 24px;
  }
}

/* ==========================================================================
   05 HOMEPAGE  — scoped to the .home body class
   Written against the live rendered DOM of https://cirecaribbean.com/.

   THINGS THE DOM FORCED ME TO GET RIGHT (each broke the earlier draft):

   * Featured listings live in .listing-grid__cards.js-slider-home-featured-below
     which is a SLICK CAROUSEL, and there are three of them (the geo tabs, two
     carrying .hide-mob). Slick owns their track widths and transforms, so this
     file never sets display/grid/width on those containers - only on the card
     internals.
   * Each card's photos are themselves a slick slider
     (.listing-card__slider.js-slider-full-arrows) - likewise untouched.
   * .visual-nav wraps its links in a <ul><li>, so the grid belongs on
     .visual-nav ul, not on .visual-nav. The draft targeted the wrong element.
   * .community-landing__featured-communities carries no js-slider class, so it
     is a genuine grid container and safe to lay out.

   Mobile-first; breakpoints 729/1024 per the mockups. All type is clamp()-based
   with minimums tuned for 375px.
   ========================================================================== */

/* ---- hero -------------------------------------------------------------- */
.home .hp-hero-header__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home .hp-hero-header__header {
  font-family: var(--cire-serif);
  font-weight: 500;
  /* 375px -> 1.75rem/28px; only reaches 3.4rem on a wide desktop */
  font-size: clamp(1.75rem, 5.6vw, 3.4rem);
  line-height: 1.15;
  color: var(--cire-white);
  letter-spacing: 0.01em;
  text-transform: none;
  text-wrap: balance;
  padding: 0 16px;
}

/* search group: stacked on phones, one white bar from 729px up */
.home .hp-hero-rearch {
  width: min(980px, 92vw);
  margin-top: 22px;
}
.home .hp-hero-rearch .quicksearch {
  display: flex;
  flex-direction: column;
  background: var(--cire-white);
  padding: 0;
}
.home .hp-hero-rearch .quicksearch > * {
  border-bottom: 1px solid var(--cire-hairline);
}
.home .hp-hero-rearch .quicksearch > *:last-child {
  border-bottom: none;
}
.home .hp-hero-rearch .select2-selection {
  border: none !important; /* Select2 sets its own border inline-ish */
  border-radius: 0 !important;
  background: var(--cire-white) !important;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.home .hp-hero-rearch .select2-search__field {
  font-family: var(--cire-sans);
  font-size: 1rem; /* >=16px so iOS does not zoom on focus */
  color: var(--cire-charcoal);
}
.home .hp-hero-rearch .property-search-filters-menu-section__header {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  color: var(--cire-charcoal);
  text-decoration: none;
  font-size: clamp(0.8rem, 2.2vw, 0.85rem);
  letter-spacing: 0.06em;
}
.home .hp-hero-rearch .property-search-filters-menu-section__title {
  font-weight: 400;
  color: var(--cire-charcoal);
}

/* the one solid-gold control in the hero. The theme ships this blue;
   BRAND.md forbids blue anywhere near the logo. */
.home .hp-hero-rearch .button.button-blue,
.home .hp-hero-rearch button[type="submit"] {
  width: 100%;
  min-height: 52px;
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  font-family: var(--cire-sans);
  font-size: clamp(0.8rem, 2.2vw, 0.85rem);
  letter-spacing: 0.1em;
  padding: 14px 30px;
  margin: 0;
  cursor: pointer;
}
.home .hp-hero-rearch .button.button-blue:hover,
.home .hp-hero-rearch button[type="submit"]:hover {
  background: var(--cire-gold-dark);
  color: #2c3338;
}

/* secondary link — outline, never Christie's red */
.home .hp-hero-rearch .button.button-white,
.home .mob-more-btn .button,
.home .mob-more-btn .button--red-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  color: var(--cire-charcoal);
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 24px;
  text-decoration: none;
}
.home .hp-hero-rearch .button.button-white {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--cire-white);
  margin-top: 16px;
}
.home .hp-hero-rearch .button.button-white:hover,
.home .mob-more-btn .button:hover,
.home .mob-more-btn .button--red-outline:hover {
  border-color: var(--cire-gold);
  color: var(--cire-gold);
  background: transparent;
}
.home .mob-more-btn {
  text-align: center;
  padding: 18px 0;
}

/* ---- section headings -------------------------------------------------- */
.home .page-section-header__title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  color: var(--cire-black);
  text-transform: none;
  text-wrap: balance;
}
.home .page-section-header__select,
.home .js-page-section-header__select {
  font-family: var(--cire-serif);
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  color: var(--cire-black);
  border: none;
  border-bottom: 1px solid var(--cire-gold);
  border-radius: 0;
  background: transparent;
  padding: 0 24px 2px 0;
}
.home .community__header {
  text-align: center;
  padding: 48px 0 20px;
}
.home .community__header-subtitle {
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 2.1vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-black);
}
.home .community__header-title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  color: var(--cire-black);
  margin-top: 6px;
  text-wrap: balance;
}

/* ---- listing cards -----------------------------------------------------
   Internals only. The carousel that holds them is slick's business.
   ---------------------------------------------------------------------- */
.home .listing-card {
  background: var(--cire-white);
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--cire-charcoal);
}
.home .listing-card__content {
  padding: 14px 2px 18px;
  border-bottom: 1px solid var(--cire-hairline);
  background: var(--cire-white);
}
.home .listing-card__price,
.home .fuelidx_propsum_price {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  color: var(--cire-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.home .listing-card:hover .listing-card__price,
.home .listing-card:hover .fuelidx_propsum_price {
  color: var(--cire-gold);
}
.home .listing-card__address,
.home .fuelidx_propsum_address {
  margin-top: 3px;
  font-family: var(--cire-sans);
  font-size: clamp(0.85rem, 2.3vw, 0.93rem);
  color: var(--cire-charcoal);
  text-transform: none;
  letter-spacing: 0.01em;
}
.home .listing-card__specs,
.home .listing-card__meta {
  font-size: clamp(0.7rem, 2vw, 0.76rem);
  color: var(--cire-gray-med);
  letter-spacing: 0.05em;
}
.home .listing-card__spec-figure {
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
}
.home .listing-card__meta-tag {
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: clamp(0.56rem, 1.7vw, 0.6rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: none;
  border-radius: 0;
}

/* ---- islands grid ------------------------------------------------------ */
.home .community-landing__featured-communities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 8px 0 10px;
}
/* neutralise Foundation column widths/floats for the direct children only */
.home .community-landing__featured-communities > * {
  width: auto;
  max-width: none;
  min-width: 0;
  float: none;
  margin-left: 0;
  margin-right: 0;
}
.home .community-card--landing {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.home .community-card__content {
  position: relative;
  width: 100%;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}
.home .community-card__name {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 3.2vw, 1.35rem);
  color: var(--cire-white);
  margin: 0;
}
.home .community-card__location {
  font-size: clamp(0.6rem, 1.8vw, 0.64rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #d9cfae;
}
.home .community-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.home .community-card__actions .button,
.home .community-card__actions .button--white-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 0;
  color: var(--cire-white);
  font-size: clamp(0.66rem, 1.9vw, 0.72rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px;
  text-decoration: none;
}
.home .community-card__actions .button:hover,
.home .community-card__actions .button--white-outline:hover {
  border-color: var(--cire-gold) !important;
  color: var(--cire-gold);
  background: transparent;
}

/* ---- sell band / text blocks ------------------------------------------- */
.home .text-block {
  padding: 48px 0;
}
.home .text-block-content {
  max-width: 60ch;
}
.home .text-block-content h2 {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  color: var(--cire-black);
  text-wrap: balance;
  margin-bottom: 12px;
}
.home .text-block-content p {
  font-size: clamp(0.95rem, 2.4vw, 1rem);
  line-height: 1.75;
  color: var(--cire-charcoal);
}
.home .text-block-content p + p {
  margin-top: 1em;
}
.home .text-block-img img {
  width: 100%;
  height: auto;
  display: block;
}
.home .text-block .button,
.home .banner-btn .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  font-size: clamp(0.78rem, 2.1vw, 0.85rem);
  letter-spacing: 0.1em;
  padding: 14px 30px;
  margin-top: 20px;
  text-decoration: none;
}
.home .text-block .button:hover,
.home .banner-btn .button:hover {
  background: var(--cire-gold-dark);
  color: #2c3338;
}

/* ---- visual nav (List with Us / Contact tiles) -------------------------
   Grid goes on the <ul>: .visual-nav > ul > li > a > img + strong.title
   ---------------------------------------------------------------------- */
.home .visual-nav ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home .visual-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home .visual-nav a {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(170deg, #46525a, #2c363d);
}
.home .visual-nav a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home .visual-nav a .title {
  position: relative;
  width: 100%;
  padding: 16px;
  color: var(--cire-white);
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
.home .visual-nav a:hover .title {
  color: var(--cire-gold);
}

/* ==========================================================================
   06 HOMEPAGE — 729px and up
   ========================================================================== */
@media (min-width: 729px) {
  .home .hp-hero-rearch {
    margin-top: 30px;
  }
  .home .hp-hero-rearch .quicksearch {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .home .hp-hero-rearch .quicksearch > * {
    border-bottom: none;
    border-right: 1px solid var(--cire-hairline);
  }
  .home .hp-hero-rearch .quicksearch > *:last-child {
    border-right: none;
  }
  .home .hp-hero-rearch .property-search-filters-menu-section__search {
    flex: 1 1 240px;
    min-width: 0;
  }
  .home .hp-hero-rearch .button.button-blue,
  .home .hp-hero-rearch button[type="submit"] {
    width: auto;
    padding: 14px 34px;
  }
  .home .community-landing__featured-communities {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .home .visual-nav ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .home .community__header {
    padding: 64px 0 24px;
  }
  .home .text-block {
    padding: 64px 0;
  }
}

/* ==========================================================================
   07 HOMEPAGE — 1024px and up
   ========================================================================== */
@media (min-width: 1024px) {
  .home .community-landing__featured-communities {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .home .visual-nav ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .home .community__header {
    padding: 74px 0 26px;
  }
  .home .text-block {
    padding: 74px 0;
  }
}

/* ==========================================================================
   08 SEARCH RESULTS  — scoped to the search-results page template body class
   This template powers the ~20 island pages, so it is the highest-traffic
   layout in the redesign.

   WHAT THE RENDERED DOM CORRECTED (all three broke the rejected draft):

   * The result cards DO NOT EXIST in the initial HTML. The page ships an
     empty gallery behind #mrt-loading-cover ("Searching...") and the cards
     are injected by AJAX as .property-search-gallery-card wrappers around
     components/listings/gallery-card.php. Nothing here may depend on
     first-paint state.
   * .property-search-gallery is NOT a card container. Its direct children
     are the top pager (.property-search-gallery-filters), the cards, and the
     footer pager. The draft put display:grid on it with three equal columns,
     which would have laid the PAGERS out as grid cells beside the cards.
     Handled here by making every direct child span the full row by default
     and letting only .property-search-gallery-card occupy a column.
   * .property-search-filters-menu is an off-canvas FILTER DRAWER opened by
     .js-property-search-filters-menu-toggle, with its own mobile header,
     accordion sections and apply/reset buttons - not the mockup's horizontal
     filter bar. It is restyled as a drawer; its open/close JS is untouched.

   Each card's photo strip (.listing-card__slider.js-slider-full-arrows) is a
   slick slider and is never laid out here.

   Mobile-first; breakpoints 729/1024; clamp() type with 375px minimums.
   ========================================================================== */

/* ---- page head --------------------------------------------------------- */
.page-template-template-property-search-results .page-section-header__title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 4.4vw, 2.4rem);
  color: var(--cire-black);
  text-transform: none;
  text-wrap: balance;
}
.page-template-template-property-search-results .page-section-header__subtitle {
  font-family: var(--cire-sans);
  font-size: clamp(0.7rem, 2vw, 0.78rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
.page-template-template-property-search-results .page-section-header__description {
  max-width: 70ch;
  font-size: clamp(0.9rem, 2.3vw, 0.95rem);
  color: var(--cire-gray-med);
}

/* ---- results count + sort row ------------------------------------------ */
.page-template-template-property-search-results .search-result-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--cire-hairline);
  border-bottom: 1px solid var(--cire-hairline);
}
.page-template-template-property-search-results .search-result-option-results {
  font-size: clamp(0.7rem, 2vw, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
.page-template-template-property-search-results .search-result-option__header {
  font-size: clamp(0.7rem, 2vw, 0.76rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
  margin-right: 8px;
}
.page-template-template-property-search-results .mrt-prop-sort,
.page-template-template-property-search-results .search-result-option-sort select {
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: 1rem; /* >=16px: no iOS zoom on focus */
  letter-spacing: 0.04em;
  min-height: 44px;
  padding: 10px 14px;
  box-shadow: none;
}
.page-template-template-property-search-results .mrt-prop-sort:hover,
.page-template-template-property-search-results .search-result-option-sort select:hover {
  border-color: var(--cire-gold);
}

/* ---- results grid ------------------------------------------------------
   Default: every direct child spans the full row (pagers, no-results, any
   future sibling). Only the injected cards take a column.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 20px 0 8px;
}
.page-template-template-property-search-results .property-search-gallery > * {
  grid-column: 1 / -1;
  min-width: 0;
}
.page-template-template-property-search-results
  .property-search-gallery
  > .property-search-gallery-card {
  grid-column: auto;
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
}

/* ---- result card ------------------------------------------------------- */
.page-template-template-property-search-results .listing-card,
.page-template-template-property-search-results .listing-card--gallery {
  background: var(--cire-white);
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--cire-charcoal);
  height: 100%;
}
.page-template-template-property-search-results .listing-card__content {
  padding: 14px 2px 18px;
  border-bottom: 1px solid var(--cire-hairline);
  background: var(--cire-white);
}
.page-template-template-property-search-results .listing-card__price,
.page-template-template-property-search-results .fuelidx_propsum_price {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 3vw, 1.25rem);
  color: var(--cire-black);
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}
.page-template-template-property-search-results
  .listing-card:hover
  .listing-card__price {
  color: var(--cire-gold);
}
.page-template-template-property-search-results .listing-card__address,
.page-template-template-property-search-results .fuelidx_propsum_address {
  margin-top: 3px;
  font-family: var(--cire-sans);
  font-size: clamp(0.85rem, 2.3vw, 0.93rem);
  color: var(--cire-charcoal);
  text-transform: none;
}
.page-template-template-property-search-results .listing-card__spec,
.page-template-template-property-search-results .listing-card__meta,
.page-template-template-property-search-results .listing-card__additional-content {
  font-size: clamp(0.7rem, 2vw, 0.76rem);
  color: var(--cire-gray-med);
  letter-spacing: 0.05em;
}
.page-template-template-property-search-results .listing-card__additional-content-value {
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
}
/* price decrease: quiet, never Christie's red */
.page-template-template-property-search-results .listing-card__price-decrease {
  font-size: clamp(0.66rem, 1.9vw, 0.72rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
/* status flag: white chip, gold stays an accent */
.page-template-template-property-search-results .listing-card__meta-tag {
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: clamp(0.56rem, 1.7vw, 0.6rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: none;
  border-radius: 0;
}
/* save heart: circular, 44px touch target */
.page-template-template-property-search-results .listing-card__actions.save-property a,
.page-template-template-property-search-results .listing-card__actions .save-listing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cire-white);
  color: var(--cire-charcoal);
}
.page-template-template-property-search-results .listing-card__actions .save-listing:hover {
  color: var(--cire-gold);
}

/* exclusive / presented-by card variant */
.page-template-template-property-search-results .list-card-exclusive {
  background: var(--cire-panel);
  border: none;
  border-radius: 0;
}
.page-template-template-property-search-results .list-card-exclusive__title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  color: var(--cire-black);
}
.page-template-template-property-search-results .list-card-exclusive__pressented,
.page-template-template-property-search-results .list-card-exclusive-agent__name {
  font-size: clamp(0.66rem, 1.9vw, 0.72rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}

/* ---- no results -------------------------------------------------------- */
.page-template-template-property-search-results .property-search-no-results {
  padding: 40px 0;
  text-align: center;
}
.page-template-template-property-search-results .property-search-no-results h4 {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 3.6vw, 1.7rem);
  color: var(--cire-black);
}

/* ---- filter drawer -----------------------------------------------------
   Off-canvas panel. Only the skin changes; the toggle/open/close JS and the
   accordion sections keep their own behaviour.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-filters-menu-toggle {
  /* no display here: the theme switches the two variants itself */
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.1em;
  padding: 11px 20px;
  cursor: pointer;
}
.page-template-template-property-search-results .property-search-filters-menu-toggle:hover {
  border-color: var(--cire-gold);
}
.page-template-template-property-search-results .property-search-filters-menu {
  background: var(--cire-white);
  border-right: 1px solid var(--cire-hairline);
}
.page-template-template-property-search-results .property-search-filters-menu-mobile-header {
  border-bottom: 1px solid var(--cire-hairline);
  padding: 14px 16px;
}
.page-template-template-property-search-results .property-search-filters-menu-mobile-header__title {
  font-family: var(--cire-sans);
  font-size: clamp(0.78rem, 2.2vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-black);
}
.page-template-template-property-search-results .property-search-filters-menu-section {
  border-bottom: 1px solid var(--cire-hairline);
}
.page-template-template-property-search-results .property-search-filters-menu-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 16px;
  color: var(--cire-charcoal);
  text-decoration: none;
}
.page-template-template-property-search-results .property-search-filters-menu-section__title {
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cire-black);
}
.page-template-template-property-search-results .property-search-filters-menu-section__current-selection {
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--cire-gray-med);
}
/* apply = the one gold control in the drawer; reset stays a quiet link */
.page-template-template-property-search-results .property-search-filters-menu-submit__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.1em;
  padding: 12px 24px;
  cursor: pointer;
}
.page-template-template-property-search-results .property-search-filters-menu-submit__apply:hover {
  background: var(--cire-gold-dark);
  color: #2c3338;
}
.page-template-template-property-search-results .property-search-filters-menu-submit__reset {
  background: none;
  border: none;
  color: var(--cire-charcoal);
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  cursor: pointer;
}
.page-template-template-property-search-results .property-search-filters-menu-submit__reset:hover {
  color: var(--cire-gold);
}
/* filter inputs sized so iOS does not zoom */
.page-template-template-property-search-results .property-search-filters-menu input[type="text"],
.page-template-template-property-search-results .property-search-filters-menu select {
  font-size: 1rem;
  border-radius: 0;
}

/* ==========================================================================
   09 SEARCH — 729px and up
   ========================================================================== */
@media (min-width: 729px) {
  .page-template-template-property-search-results .property-search-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .page-template-template-property-search-results .search-result-options {
    gap: 16px;
  }
}

/* ==========================================================================
   10 SEARCH — 1024px and up
   ========================================================================== */
@media (min-width: 1024px) {
  .page-template-template-property-search-results .property-search-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 30px 0 8px;
  }
}

/* ==========================================================================
   11 PROPERTY DETAIL — GALLERY HERO + THUMBNAIL GRID
   The approved anatomy, built around the existing slick slider rather than
   replacing it.

   Structure produced by the template patch:
     .cire-gallery                       (grid wrapper)
       .property-detail-slider__container  (the untouched slick hero)
       .cire-gallery__thumbs               (new thumbnail rail)
         a.cire-gallery__thumb  x N
         button.cire-gallery__all

   MOBILE FIRST. On phones the thumbnails would only steal height from the
   hero, so the rail becomes a single horizontally-scrollable strip beneath
   it. The mockup's 2-column thumb grid beside the hero appears at 1024px,
   which is also where the theme stops showing its sticky mobile footer.

   Slick caches slide widths at init, and the hero now lives in a grid cell,
   so js/cire-gallery.js calls slick's public setPosition after layout and on
   resize. Nothing here sets width/display on .property-detail-slider itself.
   ========================================================================== */

/* ---- mobile: hero, then a scrollable thumb strip ----------------------- */
.property-detail-a-2col .cire-gallery {
  display: block;
  position: relative;
}
.property-detail-a-2col .cire-gallery__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.property-detail-a-2col .cire-gallery__thumb {
  flex: 0 0 34vw;
  height: 22vw;
  min-height: 74px;
  display: block;
  background-color: #384249;
  background-size: cover;
  background-position: center;
  border: none;
  outline-offset: -2px;
  text-decoration: none;
  cursor: pointer;
}
.property-detail-a-2col .cire-gallery__thumb.is-active {
  outline: 2px solid var(--cire-gold);
}
.property-detail-a-2col .cire-gallery__thumb:focus-visible {
  outline: 2px solid var(--cire-gold);
}
.property-detail-a-2col .cire-gallery__all {
  flex: 0 0 auto;
  min-height: 44px;
  align-self: stretch;
  padding: 10px 18px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: clamp(0.72rem, 2vw, 0.78rem);
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
}
.property-detail-a-2col .cire-gallery__all:hover {
  border-color: var(--cire-gold);
}
.property-detail-a-2col .cire-gallery__all:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}

/* ---- 729px: slightly larger thumbs, still a strip ---------------------- */
@media (min-width: 729px) {
  .property-detail-a-2col .cire-gallery__thumb {
    flex: 0 0 20vw;
    height: 13vw;
  }
}

/* ---- 1024px: the approved hero + 2-column thumb grid ------------------- */
@media (min-width: 1024px) {
  .property-detail-a-2col .cire-gallery {
    display: grid;
    grid-template-columns: 2.15fr 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 10px;
    height: min(58vh, 540px);
  }
  /* the slick hero occupies the tall left cell */
  .property-detail-a-2col .cire-gallery > .property-detail-slider__container {
    grid-row: 1 / 4;
    grid-column: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }
  /* the rail becomes the 2x3 grid of thumbs in the right-hand columns */
  .property-detail-a-2col .cire-gallery__thumbs {
    display: grid;
    grid-column: 2 / 4;
    grid-row: 1 / 4;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
    padding-bottom: 0;
    overflow: visible;
    min-width: 0;
    min-height: 0;
  }
  .property-detail-a-2col .cire-gallery__thumb {
    flex: none;
    width: auto;
    height: auto;
    min-height: 0;
  }
  /* the "view all" control sits over the last thumb rather than taking a cell */
  .property-detail-a-2col .cire-gallery__all {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 4;
    align-self: auto;
    background: var(--cire-white);
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
  }
  /* the slick track must fill the hero cell */
  .property-detail-a-2col .cire-gallery .property-detail-slider,
  .property-detail-a-2col .cire-gallery .property-detail-slider .slick-list,
  .property-detail-a-2col .cire-gallery .property-detail-slider .slick-track {
    height: 100%;
  }
  .property-detail-a-2col .cire-gallery .property-detail-slide,
  .property-detail-a-2col .cire-gallery .property-detail-slider__image {
    height: 100%;
  }
}

/* ==========================================================================
   12 STICKY HEADER + ACTION BUTTONS  (review redline)
   Studied against the live DOM of
   /for-sale/homes/bb-st.-james-holetown-31250-303/

   WHY THE BUTTONS LOOKED MISMATCHED — the theme builds the three controls
   inconsistently:
     Save   <a><span class="icon icon--heart-outline"></span>
                <span class="text">Save</span></a>
     Share  <a><div  class="icon icon--share"></div>  Share</a>   <- bare text
     Tools  <a><span class="icon icon--ellipsis"></span> Tools</a> <- bare text
   One icon is a <div> (block) and two are <span> (inline), and two labels are
   bare text nodes with no element to hook. That mix is what made them sit at
   different heights and optical sizes. This section normalises every .icon to
   one inline-flex box at one size, and uses font-size:0 on the button with the
   size restored on the .icon - the only way to suppress a bare text node in
   CSS.

   Save and Share become the mockup's circular icon buttons. Tools stays a
   hairline ghost pill (it opens a dropdown, so it needs its label). Request
   Info is the single solid-gold CTA.

   Sticky bar: solid white ground, one crisp hairline bottom rule, no shadow,
   generous vertical rhythm, and a compact single-line variant on phones so it
   cannot eat the viewport.
   ========================================================================== */

/* ---- the sticky bar itself --------------------------------------------- */
.property-detail-a-2col .property-detail-header {
  background: var(--cire-white); /* solid: never translucent */
  border-bottom: 1px solid var(--cire-hairline);
  box-shadow: none;
}
.property-detail-a-2col .property-detail-header.headroom--not-top,
.property-detail-a-2col .property-detail-header.headroom--pinned {
  background: var(--cire-white);
  /* at most an extremely subtle lift once it detaches from the top */
  box-shadow: 0 1px 0 rgba(56, 66, 73, 0.06);
}

/* ---- icon normalisation (the root of the mismatch) --------------------- */
.property-detail-a-2col .property-detail-header__action-button .icon,
.property-detail-a-2col .property-detail-mobile-footer__action-button .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  color: inherit;
}

/* ---- Save + Share: circular icon buttons ------------------------------- */
.property-detail-a-2col .property-detail-header__action-button--save,
.property-detail-a-2col .property-detail-header__action-button.a2a_dd,
.property-detail-a-2col .property-detail-mobile-footer__action-button--save,
.property-detail-a-2col .property-detail-mobile-footer__action-button.a2a_dd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  gap: 0;
  border: 1px solid var(--cire-gray-light);
  border-radius: 50%;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  /* suppresses the label, including Share's bare text node.
     The text stays in the DOM for assistive tech. */
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.property-detail-a-2col .property-detail-header__action-button--save .icon,
.property-detail-a-2col .property-detail-header__action-button.a2a_dd .icon,
.property-detail-a-2col .property-detail-mobile-footer__action-button--save .icon,
.property-detail-a-2col .property-detail-mobile-footer__action-button.a2a_dd .icon {
  font-size: 1.05rem;
  line-height: 1;
}
.property-detail-a-2col .property-detail-header__action-button--save:hover,
.property-detail-a-2col .property-detail-header__action-button.a2a_dd:hover {
  border-color: var(--cire-gold);
  color: var(--cire-charcoal);
  background: var(--cire-white);
}
.property-detail-a-2col .property-detail-header__action-button--save:focus-visible,
.property-detail-a-2col .property-detail-header__action-button.a2a_dd:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}
/* saved state reads in gold rather than the theme's red */
.property-detail-a-2col .save-listing.is-saved,
.property-detail-a-2col .save-listing.saved {
  border-color: var(--cire-gold);
  color: var(--cire-gold);
}

/* ---- Tools: hairline ghost pill, keeps its label ----------------------- */
.property-detail-a-2col .property-detail-header__action-button--tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
}
.property-detail-a-2col .property-detail-header__action-button--tools:hover {
  border-color: var(--cire-gold);
}

/* ---- Request Info: the one solid-gold CTA ------------------------------ */
.property-detail-a-2col .property-detail-header__schedule,
.property-detail-a-2col a.button.property-detail-header__schedule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  min-height: 46px;
  padding: 0 28px;
  background: var(--cire-gold);
  border: none;
  border-radius: 0;
  color: #2c3338;
  font-size: clamp(0.76rem, 2.1vw, 0.82rem);
  letter-spacing: 0.1em;
  line-height: 1;
}

/* ---- spacing: keep the controls off the address block ------------------ */
.property-detail-a-2col .property-detail-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}

/* ---- phones: compact single-line bar ----------------------------------- */
@media (max-width: 728px) {
  .property-detail-a-2col .property-detail-header__content {
    padding: 14px 0 12px;
  }
  .property-detail-a-2col .property-detail-header__address {
    font-size: clamp(1.15rem, 4.6vw, 1.45rem);
    line-height: 1.25;
  }
  .property-detail-a-2col .property-detail-header__actions {
    margin-top: 14px;
    gap: 10px;
  }
  .property-detail-a-2col .property-detail-header__action-button--save,
  .property-detail-a-2col .property-detail-header__action-button.a2a_dd {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .property-detail-a-2col .property-detail-header__action-button--tools,
  .property-detail-a-2col .property-detail-header__schedule,
  .property-detail-a-2col a.button.property-detail-header__schedule {
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
  }
}

/* ==========================================================================
   13 STICKY HEADER — desktop layout (>= 1024px)
   Replaces the fully stacked arrangement from section 04 with the reviewed
   one: address and status on the left, price right-aligned in the serif,
   controls on their own row beneath. display:contents is deliberately NOT
   used here - the address and status must stay grouped as one left-hand
   block for the two-column balance to work.
   ========================================================================== */
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-header__content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 40px;
    row-gap: 0;
    padding: 30px 0 26px;
  }
  /* undo section 04's promotion so the left block stays a group */
  .property-detail-a-2col .property-detail-header__title {
    display: block;
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }
  .property-detail-a-2col .property-detail-header__address {
    /* controlled size: authoritative without crowding the price */
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    max-width: 26ch;
  }
  .property-detail-a-2col .property-detail-header__details {
    order: 2;
    margin-top: 8px;
  }
  .property-detail-a-2col .property-detail-price {
    order: 3;
    flex: 0 0 auto;
    display: block;
    margin-top: 4px;
    text-align: right;
  }
  .property-detail-a-2col .property-detail-price__price,
  .property-detail-a-2col .property-detail-price__price.fuelidx_price {
    font-family: var(--cire-serif);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    color: var(--cire-black);
    line-height: 1.2;
  }
  .property-detail-a-2col .property-detail-price__change {
    text-align: right;
  }
  /* controls take their own full-width row under both columns */
  .property-detail-a-2col .property-detail-header__actions {
    order: 4;
    flex: 0 0 100%;
    margin-top: 26px;
  }
}

/* ==========================================================================
   14 LEGACY CARD CHROME REMOVAL  (review redline)
   The "black line/border" on result photos is legacy chrome in app.css that
   my earlier layers did not fully override:

     .listing-card            { border: 1px solid #000; color: #fff }
     .listing-card:focus      { border-color: #000000 }
     .listing-card--exclusive { border-color: #000000; background: #f7f6f4 }
     .listing-card__image::before {
         content:""; position:absolute; inset:0; z-index:3;
         background-image: linear-gradient(to top, rgba(0,0,0,.7), transparent 65%) }

   So every card carried a literal 1px black frame, a beige ground, white body
   text, and a heavy black gradient scrim washed across the bottom of the
   photograph. The scrim existed because the legacy card printed white text
   OVER the image; in the approved design the text sits BELOW the photo on
   white, so the scrim earns nothing and is the single most dated element on
   the card.

   The same card partial renders on the homepage carousels, so this is applied
   in both scopes rather than only on search.

   Specificity note: each override is two classes deep (0,2,0) against
   app.css's single class (0,1,0), so these win on cascade order AND weight -
   no !important needed, and the AJAX-injected markup carries the same classes
   so injection timing is irrelevant.

   Photo flush, no frame; the only rule on the card is the hairline under the
   body, per the mockup.
   ========================================================================== */

/* ---- kill the frame, the beige ground and the inherited white text ------ */
.home .listing-card,
.home .listing-card--gallery,
.home .listing-card--exclusive,
.page-template-template-property-search-results .listing-card,
.page-template-template-property-search-results .listing-card--gallery,
.page-template-template-property-search-results .listing-card--exclusive {
  border: none;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  box-shadow: none;
  transition: none;
}
.home .listing-card:focus,
.home .listing-card:hover,
.page-template-template-property-search-results .listing-card:focus,
.page-template-template-property-search-results .listing-card:hover {
  border: none;
  border-color: transparent;
}

/* ---- remove the black gradient scrim from the photograph --------------- */
.home .listing-card__image::before,
.page-template-template-property-search-results .listing-card__image::before {
  display: none;
  content: none;
  background-image: none;
}

/* ---- photo sits flush -------------------------------------------------- */
.home .listing-card__image,
.page-template-template-property-search-results .listing-card__image {
  border: none;
  border-radius: 0;
  outline: none;
}
.home .listing-card__slider,
.page-template-template-property-search-results .listing-card__slider {
  border: none;
  border-radius: 0;
}

/* ---- the card's only rule: a hairline beneath the body ----------------- */
.home .listing-card__content,
.page-template-template-property-search-results .listing-card__content {
  background: var(--cire-white);
  border: none;
  border-bottom: 1px solid var(--cire-hairline);
}

/* ---- legacy hover "extension" panel: no dark frame, no lift ------------ */
.home .listing-card__extension,
.page-template-template-property-search-results .listing-card__extension {
  border-color: var(--cire-hairline);
  box-shadow: none;
}
.home .listing-card--gallery.listing-card--exclusive:hover .listing-card__extension,
.page-template-template-property-search-results
  .listing-card--gallery.listing-card--exclusive:hover
  .listing-card__extension {
  box-shadow: none;
}

/* ---- save control over the photo now needs its own ground -------------- */
.home .listing-card__actions.save-property,
.page-template-template-property-search-results .listing-card__actions.save-property {
  z-index: 4;
}

/* ==========================================================================
   15 DESKTOP REVIEW NITS  (Barbados "Derricks" screenshot)
   ========================================================================== */

/* ---- NIT 2: doubled separator dots -------------------------------------
   This one was mine. app.css already draws a separator after every item:

     .property-detail-header__detail:after            { content:"•"; margin:0 .3125rem }
     .property-detail-header__detail:last-of-type:after { content:"" }

   Section 02 of this file then added a SECOND separator as a ::before on
   adjacent siblings, producing "ST. JAMES, BB · · SINGLE FAMILY ...".
   The fix is to retire my separator and restyle the theme's existing one,
   rather than hide a glyph and leave two mechanisms fighting.
   ---------------------------------------------------------------------- */
.property-detail-a-2col
  .property-detail-header__detail
  + .property-detail-header__detail::before {
  content: none;
  margin: 0;
}

/* the theme's own separator, restyled to the brand hairline tone */
.property-detail-a-2col .property-detail-header__detail::after {
  color: var(--cire-gray-light);
  margin: 0 0.6em;
  display: inline-block;
}
.property-detail-a-2col .property-detail-header__detail:last-of-type::after {
  content: "";
  margin: 0;
}
/* Guard against an empty field rendering a stray separator: an item with no
   text should not contribute a dot. :empty only matches elements with no
   child nodes at all, which is exactly the "field returned nothing" case. */
.property-detail-a-2col .property-detail-header__detail:empty {
  display: none;
}
.property-detail-a-2col .property-detail-header__detail:empty::after {
  content: "";
  margin: 0;
}

/* ---- NIT 1: price rendered twice ---------------------------------------
   The header price is canonical. The sidebar repeats it under the map.
   Hidden rather than removed from markup: .property-detail-sidebar carries
   js-headroom and the sticky logic measures this subtree, so a CSS hide is
   the lower-risk change. The mobile-highlights price is a DIFFERENT element
   and is deliberately untouched, so phones keep their in-flow price.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar__info .property-detail-price {
  display: none;
}

/* ---- NIT 3: sidebar section order --------------------------------------
   Markup order is __map -> __info (price + unit-specs) -> __form.
   Reviewed order is facts first, then the mini map.

   Done with flex order rather than a markup move: the map is initialised by
   initPropSidebarMap() against the #map_sidebar id and Leaflet caches its
   container geometry, so relocating the node is the riskier option. Reordering
   paints it elsewhere without touching the element the JS holds.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar {
  display: flex;
  flex-direction: column;
}
/* facts first, then the agent, then the mini map, then the inquiry form */
.property-detail-a-2col .property-detail-sidebar__info {
  order: 1;
}
.property-detail-a-2col .property-detail-sidebar__agent {
  order: 2;
}
.property-detail-a-2col .property-detail-sidebar__map {
  order: 3;
  margin-top: 22px;
}
.property-detail-a-2col .property-detail-sidebar__form {
  order: 4;
}

/* facts in the sidebar read as the hairline row, not a price block */
.property-detail-a-2col .property-detail-sidebar__info .property-detail-sidebar__unit-specs {
  margin-top: 0;
}

/* ==========================================================================
   16 MID-SCROLL CAPTURE BUGS  (post-2.0c4 review)
   All three are legacy app.css chrome that my layer had not overridden.
   ========================================================================== */

/* ---- BUG 1: stray bullets beside the highlight chips -------------------
   app.css draws them as absolutely-positioned pseudo-element content, which
   list-style:none cannot touch:

     .property-detail-highlights__list-item {
         position:relative; font-weight:700; margin-bottom:.5rem;
         padding-left:.9375rem }
     .property-detail-highlights__list-item:before {
         content:"• "; position:absolute; top:-.0625rem; left:0 }

   The bullet sat at left:0 while my chip padding started further in, so it
   rendered outside the box. Killed at the source.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-highlights__list-item::before {
  content: none;
  display: none;
}
.property-detail-a-2col .property-detail-highlights__list-item {
  position: static;
  padding-left: 14px;
  margin-bottom: 0;
  font-weight: 400;
  list-style: none;
}
.property-detail-a-2col .property-detail-highlights__list-item::marker {
  content: "";
}

/* ---- BUG 2: the mostly-empty gray band ---------------------------------
   Two causes stacked. The band carried a heavy beige ground and 35px/30px
   padding:

     .property-detail-highlights { padding:2.1875rem 1.875rem; background:#f7f6f4 }

   and the list was still a multi-column layout:

     .property-detail-highlights__list { column-count:2 }
     .property-detail-highlights__list { column-count:3 }

   column-count reserves all three columns whether or not there is content,
   so two chips left two empty columns of dead space. Dropping the columns
   lets the chips flow inline, and the band loses its ground so it reads as
   part of the white page rather than a filled panel.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-highlights {
  background: transparent;
  color: var(--cire-charcoal);
  padding: 0;
  margin-bottom: 8px;
}
.property-detail-a-2col .property-detail-highlights__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  /* kill the reserved empty columns */
  column-count: auto;
  columns: auto;
  -webkit-columns: auto;
  -moz-columns: auto;
}
/* the section header sits tight above the chips, not floating in a void */
.property-detail-a-2col .property-detail-highlights .property-detail-main__content-header {
  margin: 0 0 12px;
}

/* ---- BUG 3: harsh black header bar on the inquiry form -----------------
   Three separate pieces of legacy chrome:

     .property-detail-sidebar__form:after {
         content:""; position:absolute; top:0; width:100%; height:25px;
         background:#000000 }                         <- the black bar
     .property-detail-sidebar__close-button {
         position:absolute; bottom:0; height:1.25rem; background:#000000 }
     .property-detail-sidebar__form.is-open {
         border:1px solid #ececec;
         background:#ececec linear-gradient(#dadada,#ececec) }

   plus a .property-detail-sidebar__close anchor (white X, left:50%) sitting
   on that black bar, and an empty <div class="after-bar"> in the markup.

   The X is a real collapse toggle: the form is height:0 by default and only
   .is-open gives it height. Collapsing it would leave a visitor with no way
   to reopen the inquiry form, so the control is hidden rather than restyled
   - the form stays permanently open, which is what the approved design wants.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar__form::after,
.property-detail-a-2col .property-detail-sidebar__form.is-open::after {
  content: none;
  display: none;
  background: transparent;
}
.property-detail-a-2col .property-detail-sidebar__form::before,
.property-detail-a-2col .property-detail-sidebar__form.is-open::before {
  content: none;
  display: none;
}
.property-detail-a-2col .property-detail-sidebar__close-button,
.property-detail-a-2col .property-detail-sidebar__form.is-open .property-detail-sidebar__close-button {
  display: none;
}
.property-detail-a-2col .property-detail-sidebar__close,
.property-detail-a-2col .property-detail-sidebar__form.is-open .property-detail-sidebar__close {
  display: none;
}
.property-detail-a-2col .property-detail-sidebar__form .after-bar {
  display: none;
}

/* the panel itself, per the design system */
.property-detail-a-2col .property-detail-sidebar__form,
.property-detail-a-2col .property-detail-sidebar__form.is-open {
  position: relative;
  height: auto;
  background: var(--cire-panel);
  background-image: none;
  border: 1px solid var(--cire-hairline);
  border-radius: 0;
  padding: 24px 20px;
  box-shadow: none;
}

/* ==========================================================================
   17 LISTING CARD FACTS ROW — carousel overflow  (homepage capture)
   The Beds|Baths|Sqft row overflowed its slick slide and collided with the
   neighbouring card. Two causes in app.css:

     .listing-card__spec { padding: 0 1vw }

   1vw is VIEWPORT-relative, so inside a slick slide (whose width slick
   computes in px) the padding does not shrink with the slide - on a wide
   desktop that is ~19px per side per cell that the slide never accounted for.

     .listing-card__specs { display:flex; justify-content:flex-end; overflow:hidden }
     .listing-card__cell  { width:40%/48%/59% }

   and the flex children carried no min-width:0, so they refused to shrink
   below their content width and pushed out of the slide box regardless of
   overflow:hidden on the parent.

   Fixed by containing the row rather than by guessing slide widths, so it
   holds at ANY width slick computes: min-width:0 on every flex ancestor,
   max-width:100%, wrap allowed, and container-proportional padding.

   Applied to the homepage carousels AND the search results grid, because
   both render components/listings/gallery-card.php.
   ========================================================================== */
.home .listing-card__content,
.home .listing-card__cell,
.home .listing-card__specs,
.home .listing-card__spec,
.page-template-template-property-search-results .listing-card__content,
.page-template-template-property-search-results .listing-card__cell,
.page-template-template-property-search-results .listing-card__specs,
.page-template-template-property-search-results .listing-card__spec {
  min-width: 0;
  max-width: 100%;
}
.home .listing-card__specs,
.page-template-template-property-search-results .listing-card__specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 0;
  row-gap: 4px;
  overflow: hidden;
  text-align: left;
}
/* container-proportional padding replaces the viewport-relative 1vw */
.home .listing-card__spec,
.page-template-template-property-search-results .listing-card__spec {
  padding: 0 10px;
  flex: 0 1 auto;
}
.home .listing-card__spec:first-child,
.page-template-template-property-search-results .listing-card__spec:first-child {
  padding-left: 0;
}
.home .listing-card__spec:last-child,
.page-template-template-property-search-results .listing-card__spec:last-child {
  padding-right: 0;
}
/* the divider was a solid black 31px bar; make it a true hairline */
.home .listing-card__spec::before,
.page-template-template-property-search-results .listing-card__spec::before {
  background: var(--cire-hairline);
  height: 60%;
  top: 20%;
}
.home .listing-card__spec-figure,
.page-template-template-property-search-results .listing-card__spec-figure {
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home .listing-card__spec-label,
.page-template-template-property-search-results .listing-card__spec-label {
  font-size: clamp(0.6rem, 1.7vw, 0.68rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
  white-space: nowrap;
}

/* belt-and-braces: never let a card paint outside its slick slide */
.home .slick-slide,
.home .slick-slide > div,
.page-template-template-property-search-results .slick-slide,
.page-template-template-property-search-results .slick-slide > div {
  min-width: 0;
  max-width: 100%;
}

/* a fact cell whose value came back empty contributes nothing */
.home .listing-card__spec-figure:empty,
.page-template-template-property-search-results .listing-card__spec-figure:empty {
  display: none;
}

/* ==========================================================================
   18 THE 1024-1365 BAND  (iPad landscape, now a first-class target)
   Foundation's "large" in this build starts at 1366px, so this band runs the
   MOBILE chrome with desktop-width content. Everything here is written for
   that gap specifically.
   ========================================================================== */

/* ---- BUG: two Filters controls rendering at once -----------------------
   This one was mine. app.css gives BOTH toggles a base display:none and
   reveals exactly one per breakpoint:

     .property-search-filters-menu-toggle--desktop { display:none }
     .property-search-filters-menu-toggle--mobile  { display:none }
     @media (max-width:767px) { ...--desktop { display:none } }
     @media (min-width:768px) { ...--mobile  { display:none } }

   Section 08 then styled the SHARED base class with display:inline-flex,
   which outranks those single-class rules (0,2,0 vs 0,1,0) and un-hid both.
   Fixed by never setting display on the shared class and instead driving each
   variant explicitly, so exactly one control exists at every width.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-filters-menu-toggle {
  /* deliberately NO display here */
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 1.6vw, 0.82rem);
  letter-spacing: 0.1em;
  padding: 11px 20px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  cursor: pointer;
}
.page-template-template-property-search-results .property-search-filters-menu-toggle--desktop,
.page-template-template-property-search-results .property-search-filters-menu-toggle--mobile {
  display: none;
}
/* 768-1199 only. At >=1200 the theme switches to the inline bar and hides
   BOTH toggles itself (style.css: .property-search-wide-expand
   .property-search-filters-menu-toggle{display:none}). That rule and this one
   have identical specificity (0,2,0), and our sheet loads later - so an
   unbounded min-width:768 here silently re-showed the dead "Filter by" box on
   top of the working bar. Bounding the query is the whole fix; we must not
   add our own display:none, or we would break the drawer toggle below 1200
   where it is the only way in. */
@media (min-width: 768px) and (max-width: 1199px) {
  .page-template-template-property-search-results .property-search-filters-menu-toggle--desktop {
    display: inline-flex;
  }
  .page-template-template-property-search-results .property-search-filters-menu-toggle--mobile {
    display: none;
  }
}
@media (max-width: 767px) {
  .page-template-template-property-search-results .property-search-filters-menu-toggle--mobile {
    display: inline-flex;
  }
  .page-template-template-property-search-results .property-search-filters-menu-toggle--desktop {
    display: none;
  }
}

/* ---- off-brand red glyphs and carets ------------------------------------
   BRAND.md reserves Christie's red for sparing accent use; it must never be
   the default colour of an icon or a dropdown caret. Forced to charcoal
   across the filter chrome. Gold is reserved for the Apply action alone.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-filters-menu .icon,
.page-template-template-property-search-results .property-search-filters-menu .icon::before,
.page-template-template-property-search-results .property-search-filters-menu-toggle .icon,
.page-template-template-property-search-results .property-search-filters-menu-toggle .icon::before,
.page-template-template-property-search-results .property-search-filters-menu-toggle::before,
.page-template-template-property-search-results .property-search-filters-menu-toggle::after,
.page-template-template-property-search-results .ruhl-dropdown .icon,
.page-template-template-property-search-results .ruhl-dropdown .icon::before,
.page-template-template-property-search-results .ruhl-dropdown::after,
.page-template-template-property-search-results .js-ruhl-dropdown .icon::before,
.page-template-template-property-search-results .property-search-filters-menu-section__header .icon,
.page-template-template-property-search-results .property-search-filters-menu-section__header .icon::before,
.page-template-template-property-search-results .search-result-option-sort .icon::before {
  color: var(--cire-charcoal);
}

/* uniform field heights across search box, dropdowns and buttons */
.page-template-template-property-search-results .property-search-filters-menu .ruhl-dropdown,
.page-template-template-property-search-results .property-search-filters-menu .js-ruhl-dropdown,
.page-template-template-property-search-results .property-search-filters-menu-section__range-selection,
.page-template-template-property-search-results .property-search-filters-menu input[type="text"],
.page-template-template-property-search-results .property-search-filters-menu select {
  min-height: 44px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background-color: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: 1rem;
  box-shadow: none;
}

/* Reset and Apply: full-strength, not washed out */
.page-template-template-property-search-results .property-search-filters-menu-submit__apply,
.page-template-template-property-search-results .property-search-filters-menu-submit__apply.button {
  opacity: 1;
  filter: none;
  background: var(--cire-gold);
  border: none;
  color: #2c3338;
  min-height: 44px;
}
.page-template-template-property-search-results .property-search-filters-menu-submit__reset {
  opacity: 1;
  filter: none;
  color: var(--cire-charcoal);
  min-height: 44px;
}

/* ---- map/grid toggle: a consistent pair --------------------------------
   app.css draws it as a hard black pair:
     .property-search-action-icon        { border: solid 1px #000000 }
     .property-search-action-icon:before { color: #000000 }
     .property-search-action-icon.active { background: #000000 }
   Reworked so the two boxes read as one control: identical hairline box,
   inactive = white ground + charcoal glyph, active = charcoal ground + white
   glyph.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-action-icon {
  height: 44px;
  width: 44px;
  margin-left: 8px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
}
.page-template-template-property-search-results .property-search-action-icon::before {
  color: var(--cire-charcoal);
  font-size: 1.1rem;
}
.page-template-template-property-search-results .property-search-action-icon:hover {
  border-color: var(--cire-gold);
}
.page-template-template-property-search-results .property-search-action-icon.active {
  background: var(--cire-charcoal);
  border-color: var(--cire-charcoal);
}
.page-template-template-property-search-results .property-search-action-icon.active::before {
  color: var(--cire-white);
}

/* ---- results grid: clipped leftmost card, uneven gutters ---------------
   The gallery sits inside Foundation .row/.columns, which carry negative
   side margins and gutter padding. Combined with the CSS grid from section
   08 that pulled the first column past the container edge in this band.
   Neutralised on the gallery's own ancestors only.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-gallery-container {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  overflow-x: clip; /* nothing may paint past the container edge */
}
.page-template-template-property-search-results .property-search-gallery {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.page-template-template-property-search-results .property-search-gallery > .property-search-gallery-card {
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 1024px) and (max-width: 1365px) {
  /* the band Nick is reviewing: verified column maths, even gutters */
  .page-template-template-property-search-results .property-search-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 28px;
    padding-left: 0;
    padding-right: 0;
  }
  .page-template-template-property-search-results .property-search-gallery-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ==========================================================================
   19 HEADER UTILITY ICONS  (CSS only - no header markup, logo or hamburger
   mechanics touched, per the standing logo rule)
   The search and account controls render as heavy solid-black boxes. Restyled
   to borderless charcoal glyphs on a consistent 44px touch target.
   ========================================================================== */
.navbar .navbar__search-submit,
.navbar .navbar__link-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 1.6vw, 0.82rem);
  letter-spacing: 0.08em;
  text-decoration: none;
}
.navbar .navbar__search-submit .icon,
.navbar .navbar__search-submit .icon::before,
.navbar .navbar__link-login .icon,
.navbar .navbar__link-login .icon::before {
  color: var(--cire-charcoal);
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
}
.navbar .navbar__search-submit:hover,
.navbar .navbar__link-login:hover,
.navbar .navbar__search-submit:hover .icon::before,
.navbar .navbar__link-login:hover .icon::before {
  color: var(--cire-gold);
  background: transparent;
}
.navbar .navbar__search-submit:focus-visible,
.navbar .navbar__link-login:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   20 HOMEPAGE REDLINES (screenshots #4-5)
   ========================================================================== */

/* ---- 1. hero headline rendered in the SANS -----------------------------
   Diagnosed, not guessed. app.css carries:

     .home-hero-slider-words .hp-hero-header__content .hp-hero-header__header
       { font-family: inherit; font-size:3rem; line-height:1.2; text-align:center }

   That is specificity 0,3,0 and beats the 0,2,0 rule in section 05, and
   `inherit` pulls the sans straight off body - so the serif never applied.
   Matched at 0,4,0 here so the cascade lands our way.

   Font availability: header.php loads the Google family "Playfair" (NOT
   "Playfair Display" - different families). The token stack lists
   "Playfair Display" first, which simply is not loaded, then "Playfair",
   which is. app.css itself uses font-family:"Playfair",sans-serif for the
   section-header dropdown, confirming that is the available face.
   ---------------------------------------------------------------------- */
.home .home-hero-slider-words .hp-hero-header__content .hp-hero-header__header {
  font-family: "Playfair", "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 5.4vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--cire-white);
  text-align: center;
  text-transform: none;
  text-wrap: balance;
}

/* ---- 2. hero carousel prev/next arrows: gone --------------------------- */
.home .home-hero-slider .slick-arrow,
.home .js-slider-home-featured > .slick-arrow,
.home .home-hero-slider-wrapper .slick-prev,
.home .home-hero-slider-wrapper .slick-next,
.home .home-hero-slider__content .js-slider-home-featured .slick-arrow.slick-prev,
.home .home-hero-slider__content .js-slider-home-featured .slick-arrow.slick-next {
  display: none;
}

/* ---- 4. "Featured in [the Caribbean]" section header -------------------
   One coherent serif display line. app.css sizes the select2 rendered text at
   2.25rem/47px against a 1.4-2.1rem heading, which is what read as a mistake.
   Any red underline is overridden to a gold hairline; carets go charcoal.
   ---------------------------------------------------------------------- */
.home .page-section-header__title-dropdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.25em;
  font-family: "Playfair", "Playfair Display", Georgia, serif;
}
.home .page-section-header__title-dropdown .page-section-header__title {
  font-family: "Playfair", "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.2;
  color: var(--cire-black);
}
.home .page-section-header__title-dropdown .select2-container .select2-selection {
  height: auto;
  min-height: 0;
  font-family: "Playfair", "Playfair Display", Georgia, serif;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cire-gold);
  border-radius: 0;
}
.home .page-section-header__title-dropdown .select2-container .select2-selection .select2-selection__rendered {
  font-family: "Playfair", "Playfair Display", Georgia, serif;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--cire-black);
  padding-left: 0;
  padding-right: 26px;
}
.home .page-section-header__title-dropdown .select2-container .select2-selection .select2-selection__arrow b {
  font-size: 18px;
  color: var(--cire-charcoal);
  margin-left: -18px;
  border-color: var(--cire-charcoal) transparent transparent transparent;
}
/* no red anywhere in the section header */
.home .page-section-header,
.home .page-section-header a,
.home .page-section-header .icon,
.home .page-section-header .icon::before,
.home .page-section-header__title-dropdown *,
.home .page-section-header__select {
  border-bottom-color: var(--cire-gold);
  text-decoration-color: currentColor;
}

/* ---- 5. "View all N" black boxes -> letterspaced gold-underlined link --- */
.home .page-section-header .button,
.home .page-section-header a.button,
.home .listing-grid .button--view-all,
.home .page-section-header__view-all,
.home .listing-grid__view-all,
.home .listing-grid a.button {
  display: inline-block;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cire-gold);
  border-radius: 0;
  padding: 0 0 3px;
  min-height: 0;
  color: var(--cire-charcoal);
  font-family: var(--cire-sans);
  font-size: clamp(0.72rem, 1.8vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}
.home .page-section-header .button:hover,
.home .listing-grid a.button:hover,
.home .page-section-header__view-all:hover {
  background: transparent;
  color: var(--cire-gold);
  border-bottom-color: var(--cire-gold);
}

/* ---- 6. consistent section header pattern ------------------------------
   eyebrow + serif display on the left, view-all on the right, on one line.
   ---------------------------------------------------------------------- */
.home .page-section-header,
.home .page-section-header--alt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  text-align: left;
  padding: 0 0 18px;
}
.home .page-section-header .col-title,
.home .page-section-header__title-dropdown {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  justify-content: flex-start;
}
.home .page-section-header__subtitle {
  display: block;
  width: 100%;
  font-family: var(--cire-sans);
  font-size: clamp(0.76rem, 1.9vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-black);
  margin-bottom: 4px;
}

/* ==========================================================================
   21 STICKY HEADER — STUCK STATE  (Nick's spec)
   One compact row: identity left, actions right, NO price and NO meta line.
   Those exist at the top of the page; the stuck bar is identity + actions.

   headroom.js toggles .headroom--not-top / .headroom--pinned on the element,
   so the stuck state is addressed through .headroom--not-top rather than any
   new markup or JS.
   ========================================================================== */
.property-detail-a-2col .property-detail-header.headroom--not-top {
  background: var(--cire-white);
  border-bottom: 1px solid var(--cire-hairline);
  box-shadow: none;
}
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 20px;
  row-gap: 0;
  min-height: 56px;
  padding: 8px 0;
}
/* identity: serif, single line, ellipsis when long */
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__title {
  display: block;
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__address {
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  line-height: 1.25;
  margin: 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* price and meta line are not part of the stuck state */
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-price,
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__details {
  display: none;
}
/* actions ride on the right of the same row */
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__actions {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
  gap: 10px;
  flex-wrap: nowrap;
}
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--save,
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button.a2a_dd {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--tools,
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__schedule,
.property-detail-a-2col .property-detail-header.headroom--not-top a.button.property-detail-header__schedule {
  height: 40px;
  min-height: 40px;
  padding: 0 18px;
}
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__content {
    min-height: 68px;
    padding: 10px 0;
  }
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--save,
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button.a2a_dd {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--tools,
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__schedule,
  .property-detail-a-2col .property-detail-header.headroom--not-top a.button.property-detail-header__schedule {
    height: 44px;
    min-height: 44px;
  }
}
/* phones: Tools is the first thing to go if the row runs out of room */
@media (max-width: 728px) {
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--tools {
    display: none;
  }
}

/* ==========================================================================
   22 PRE-FOOTER CONTACT BAR -> CHARCOAL  (sitewide)
   The full-width red band above the footer. Christie's red is a sparing
   accent per BRAND.md and must not be a full-bleed ground. Charcoal, so it
   and the charcoal footer read as one composed dark page-ending, separated
   by a single hairline.
   ========================================================================== */
.footer-callout {
  background: var(--cire-charcoal);
  color: var(--cire-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 34px 0;
  text-align: center;
}
.footer-callout__title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  line-height: 1.3;
  color: var(--cire-white);
  text-wrap: balance;
  margin: 0;
}
.footer-callout a:not(.footer-callout__button) {
  color: var(--cire-white);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.footer-callout a:not(.footer-callout__button):hover {
  color: var(--cire-gold);
}
/* white hairline ghost button, gold on hover */
.footer-callout__button,
.footer-callout .button,
.footer-callout .button--white-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 12px 30px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 0;
  color: var(--cire-white);
  font-family: var(--cire-sans);
  font-size: clamp(0.74rem, 1.9vw, 0.8rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-callout__button:hover,
.footer-callout .button:hover,
.footer-callout .button--white-outline:hover {
  background: transparent;
  border-color: var(--cire-gold);
  color: var(--cire-gold);
}
/* the footer picks up straight after it, as one dark ending */
.footer {
  background: var(--cire-charcoal);
  color: #c3c9cc;
}

/* ==========================================================================
   23 HEADER FIXTURES  (sitewide, CSS-only and fully reversible)
   ========================================================================== */

/* ---- 1. remove the top-right search control ----------------------------
   IMPORTANT: hide the FORM, not .navbar__search-wrapper. header.php nests
   BOTH controls inside that wrapper:

     <div class="navbar__search-wrapper">
       <form class="js-navbar__search navbar__search"> ... </form>
       ...href-login  ->  a.navbar__link-login
     </div>

   so display:none on the wrapper would take the account icon with it.

   Nothing orphans. The mobile drawer (.mobile-nav) carries only
   .mobile-nav__login and menu links - it has no search form of its own - and
   the nav "Search" link is untouched. The inline script at the foot of
   header.php binds document.querySelector("form"), which still resolves to
   this form because display:none keeps it in the DOM, so no listener is left
   dangling and no JS error is introduced.
   ---------------------------------------------------------------------- */
.navbar .navbar__search,
.navbar form.js-navbar__search,
.navbar .navbar__search-submit,
.navbar .navbar__search-input {
  display: none;
}
.navbar .navbar__search-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

/* ---- 2. account fixture: bare glyph, no box ---------------------------- */
.navbar .navbar__link-login,
.navbar a.navbar__link-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px tap target built from padding, not from a box */
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  background: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--cire-charcoal);
  text-decoration: none;
}
.navbar .navbar__link-login .icon,
.navbar .navbar__link-login .icon::before,
.navbar .navbar__link-login span {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--cire-charcoal);
  font-size: 1.1rem;
  line-height: 1;
}
.navbar .navbar__link-login:hover,
.navbar .navbar__link-login:hover .icon::before,
.navbar .navbar__link-login:hover span {
  color: var(--cire-gold);
  background: transparent;
}
.navbar .navbar__link-login:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   24 HOMEPAGE CAROUSEL ARROWS - BARE CHEVRONS
   Hero arrows stay hidden (section 20); these are the section carousels.
   ========================================================================== */
.home .slick-arrow,
.home .js-slider-home-featured-below .slick-arrow,
.home .listing-grid__cards .slick-arrow,
.home .js-slider-full-arrows .slick-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  background-image: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
}
.home .slick-arrow::before,
.home .js-slider-home-featured-below .slick-arrow::before,
.home .listing-grid__cards .slick-arrow::before,
.home .js-slider-full-arrows .slick-arrow::before {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--cire-charcoal);
  opacity: 1;
  text-shadow: none;
}
.home .slick-arrow:hover::before,
.home .js-slider-home-featured-below .slick-arrow:hover::before,
.home .listing-grid__cards .slick-arrow:hover::before {
  color: var(--cire-gold);
}
.home .slick-arrow:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}
/* hero arrows remain suppressed */
.home .home-hero-slider .slick-arrow,
.home .home-hero-slider-wrapper .slick-arrow {
  display: none;
}

/* ==========================================================================
   25 HOMEPAGE TYPE SCALE - RESTRAINT PASS
   "Still looks bulky and not luxury." Luxury reads as restraint: display
   sizes come down ~20-25%, small caps get lighter weight and wider tracking,
   and the space AROUND the smaller type goes up.

   Legibility floors held deliberately: no body-copy value resolves below
   0.9375rem (15px). Uppercase micro-labels are allowed below that, as labels
   rather than body copy.
   ========================================================================== */

/* --- display headings: ~2.1rem -> ~1.65rem upper bound ------------------ */
.home .community__header-title,
.home .page-section-header__title,
.home .page-section-header__title-dropdown .page-section-header__title,
.home .text-block-content h2 {
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: 0.005em;
  font-weight: 500;
}
.home .page-section-header__title-dropdown .select2-container .select2-selection,
.home .page-section-header__title-dropdown .select2-container .select2-selection .select2-selection__rendered {
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  line-height: 1.3;
}
.home .page-section-header__title-dropdown .select2-container .select2-selection .select2-selection__arrow b {
  font-size: 15px;
  margin-left: -15px;
}

/* --- hero headline: size stands, line-height tightens ------------------- */
.home .home-hero-slider-words .hp-hero-header__content .hp-hero-header__header {
  line-height: 1.08;
  letter-spacing: 0.005em;
}

/* --- small caps labels: lighter, wider, quieter ------------------------- */
.home .community__header-subtitle,
.home .page-section-header__subtitle {
  font-size: clamp(0.68rem, 1.5vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--cire-gray-med);
  margin-bottom: 10px;
}

/* --- view-all: smaller, wider tracking ---------------------------------- */
.home .page-section-header .button,
.home .listing-grid a.button,
.home .page-section-header__view-all,
.home .listing-grid__view-all {
  font-size: clamp(0.66rem, 1.5vw, 0.7rem);
  letter-spacing: 0.22em;
  padding-bottom: 4px;
}

/* --- cards: price down a step, address holds the 15px floor ------------- */
.home .listing-card__price,
.home .fuelidx_propsum_price {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  letter-spacing: 0.005em;
}
.home .listing-card__address,
.home .fuelidx_propsum_address {
  /* 0.9375rem = 15px: the body floor, held */
  font-size: clamp(0.9375rem, 2vw, 0.95rem);
  line-height: 1.5;
  margin-top: 6px;
}
.home .listing-card__specs,
.home .listing-card__meta {
  font-size: clamp(0.66rem, 1.6vw, 0.7rem);
  letter-spacing: 0.14em;
}
.home .listing-card__spec-figure {
  font-size: clamp(0.85rem, 2vw, 0.92rem);
}
.home .listing-card__spec-label {
  font-size: clamp(0.6rem, 1.5vw, 0.64rem);
  letter-spacing: 0.16em;
}
.home .listing-card__content {
  padding: 16px 2px 22px;
}

/* --- body copy in the text bands: floor held, measure tightened --------- */
.home .text-block-content p {
  font-size: clamp(0.9375rem, 2vw, 0.98rem);
  line-height: 1.8;
  color: var(--cire-gray-med);
}
.home .text-block-content {
  max-width: 54ch;
}

/* --- more air around the smaller type ----------------------------------- */
.home .community__header {
  padding: 64px 0 30px;
}
.home .page-section-header,
.home .page-section-header--alt {
  padding: 0 0 26px;
}
.home .text-block {
  padding: 64px 0;
}
@media (min-width: 729px) {
  .home .community__header {
    padding: 84px 0 36px;
  }
  .home .text-block {
    padding: 84px 0;
  }
}
@media (min-width: 1024px) {
  .home .community__header {
    padding: 104px 0 40px;
  }
  .home .text-block {
    padding: 104px 0;
  }
  .home .page-section-header,
  .home .page-section-header--alt {
    padding: 0 0 32px;
  }
}

/* ==========================================================================
   26 HERO ARROWS - CORRECTION
   They survived the previous pass. The boxes come from:

     .home-hero-slider-wrapper .slick-arrow { border:1px solid #f7f6f4;
                                              width:73px; height:73px }
     .home-hero-slider-wrapper .slick-arrow::before { font-size:2.1875rem;
                                                      color:#f7f6f4 }
     .home-hero-slider__content .js-slider-home-featured
       .slick-arrow.slick-prev { left:3rem }   /* and .slick-next right:3rem */

   Slick INJECTS these buttons at runtime, so they never appear in the served
   HTML and cannot be confirmed by grepping the page source - only the CSS
   contract above tells us where they land. Because the earlier attempt missed
   and the exact injection parent is not verifiable from static markup, this
   rule covers every container the theme's own selectors imply AND uses
   !important. That is a deliberate exception, not a habit: it is the one way
   to be certain without runtime access.

   Scoped so it cannot touch the section carousels: .js-slider-home-featured
   and .js-slider-home-featured-below are distinct class tokens, so the
   selectors below match the hero only.
   ========================================================================== */
.home .home-hero-slider-wrapper .slick-arrow,
.home .home-hero-slider-wrapper .slick-prev,
.home .home-hero-slider-wrapper .slick-next,
.home .home-hero-slider-wrapper button[class*="slick-arrow"],
.home .home-hero-slider .slick-arrow,
.home .home-hero-slider .slick-prev,
.home .home-hero-slider .slick-next,
.home .home-hero-slider__content .slick-arrow,
.home .home-hero-slider__content .js-slider-home-featured .slick-arrow,
.home .home-hero-slider__content .js-slider-home-featured .slick-arrow.slick-prev,
.home .home-hero-slider__content .js-slider-home-featured .slick-arrow.slick-next,
.home .js-slider-home-featured > .slick-arrow,
.home .js-slider-home-featured > .slick-prev,
.home .js-slider-home-featured > .slick-next {
  display: none !important;
}

/* ==========================================================================
   27 LEGACY RED SWEEP
   The theme's legacy red is #ED1C24 - the Christie's red - and app.css uses
   it 111 times. BRAND.md reserves it as a SPARING accent, so it must never be
   the default colour of a caret, glyph, underline or border in a front-end
   component.

   Swept here across the components that render it as chrome. Deliberately NOT
   a blanket * override: a global rule would also strip the colour from any
   genuinely intended accent, and from admin/editor surfaces.
   ========================================================================== */

/* --- select2 carets sitewide (hero quicksearch, filters, sort) ---------- */
.select2-container--default .select2-selection__arrow b,
.select2-container--default .select2-selection__arrow b::before,
.select2-selection__arrow b,
.select2-selection__arrow b::before,
.select2-container .select2-selection__arrow b::before {
  color: var(--cire-charcoal);
  border-top-color: var(--cire-charcoal);
}

/* --- hero quicksearch band: Island / Type / Price ----------------------- */
.home .hp-hero-rearch .select2-selection__arrow b,
.home .hp-hero-rearch .select2-selection__arrow b::before,
.home .hp-hero-rearch .icon,
.home .hp-hero-rearch .icon::before,
.home .hp-hero-rearch .property-search-filters-menu-section__header .icon::before,
.home .hp-hero-rearch .js-ruhl-dropdown .icon::before,
.home .hp-hero-rearch .ruhl-dropdown .icon::before,
.home .hp-hero-rearch .property-search-filters-menu-section__title,
.home .hp-hero-rearch .property-search-filters-menu-section__current-selection {
  color: var(--cire-charcoal);
  border-top-color: var(--cire-charcoal);
}

/* --- dropdown panels opened from the hero and the filter drawer --------- */
.ruhl-dropdown .icon,
.ruhl-dropdown .icon::before,
.js-ruhl-dropdown .icon,
.js-ruhl-dropdown .icon::before,
.ruhl-dropdown__toggle .icon::before {
  color: var(--cire-charcoal);
}

/* --- accordion / filter section chevrons -------------------------------- */
.property-search-filters-menu-section__header .icon,
.property-search-filters-menu-section__header .icon::before,
.js-filter-item-accordion-toggle .icon,
.js-filter-item-accordion-toggle .icon::before {
  color: var(--cire-charcoal);
}

/* --- navbar and mobile drawer glyphs ------------------------------------ */
.navbar .icon::before,
.mobile-nav .icon::before,
.navbar__mobile-menu-bars,
.mobile-nav__close .icon::before {
  color: var(--cire-charcoal);
}

/* --- red-flavoured buttons that are chrome, not accents ----------------- */
.button--red,
.button--red-outline,
.rental-app-button,
.button.button--red {
  background: transparent;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  color: var(--cire-charcoal);
}
.button--red:hover,
.button--red-outline:hover,
.rental-app-button:hover {
  border-color: var(--cire-gold);
  color: var(--cire-gold);
  background: transparent;
}

/* ==========================================================================
   28 SEARCH PAGE — ONE CONTAINER FOR THE WHOLE PAGE
   The headline problem: the page has no single container. The filter bar
   lives in .property-search-header, while the count row and the grid live in
   a completely separate .property-search-gallery-container, each inheriting
   different Foundation .row/.columns gutters. That is why the cards bleed to
   x=0 while the filter bar floats indented and the count row clips.

   Fixed as a system: one shared max-width and one identical horizontal
   gutter, applied to BOTH wrappers, so the filter bar, the count row and the
   grid all resolve to the same left and right edges at every width. The
   gutter is a single custom property, so the whole page realigns from one
   value.
   ========================================================================== */
:root {
  --cire-search-max: 1440px;
  --cire-search-gutter: 20px;
}
@media (min-width: 729px) {
  :root { --cire-search-gutter: 28px; }
}
@media (min-width: 1024px) {
  :root { --cire-search-gutter: 36px; }
}

/* both top-level wrappers share the identical box */
.page-template-template-property-search-results .property-search-header,
.page-template-template-property-search-results .property-search-gallery-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--cire-search-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cire-search-gutter);
  padding-right: var(--cire-search-gutter);
  overflow-x: clip;
}

/* neutralise the Foundation gutters INSIDE those wrappers so nothing
   double-pads or pulls out with a negative margin */
.page-template-template-property-search-results .property-search-header > .row,
.page-template-template-property-search-results .property-search-header .row,
.page-template-template-property-search-results .property-search-gallery-container > .row,
.page-template-template-property-search-results .property-search-gallery-container .row {
  max-width: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}
.page-template-template-property-search-results .property-search-header .columns,
.page-template-template-property-search-results .property-search-gallery-container .columns {
  padding-left: 0;
  padding-right: 0;
}

/* the three rows now all start and end on the same edges */
.page-template-template-property-search-results .property-search-gallery,
.page-template-template-property-search-results .search-result-options,
.page-template-template-property-search-results .property-search-gallery-filters {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- the carets that survived the select2 sweep -------------------------
   FOR SALE / LOCATION / PRICE / MORE are NOT select2 - they are
   .ruhl-dropdown--filter-menu / --checkboxes components whose caret is a
   ::after glyph. app.css colours them with the legacy red:
     .ruhl-dropdown-search .select2-selection--multiple:after { color:#ED1C24 }
   plus sibling rules on the ruhl-dropdown family. Swept here including the
   pseudo-elements, which the earlier pass did not reach.
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .ruhl-dropdown::after,
.page-template-template-property-search-results .ruhl-dropdown::before,
.page-template-template-property-search-results .ruhl-dropdown--filter-menu::after,
.page-template-template-property-search-results .ruhl-dropdown--checkboxes::after,
.page-template-template-property-search-results .ruhl-dropdown--mini::after,
.page-template-template-property-search-results .ruhl-dropdown-search .select2-selection--multiple::after,
.page-template-template-property-search-results .ruhl-dropdown-search .ruhl-dropdown-search__count,
.page-template-template-property-search-results .ruhl-dropdown .icon::before,
.page-template-template-property-search-results .property-search-header .icon::before,
.page-template-template-property-search-results .property-search-header [class*="ruhl-dropdown"]::after {
  color: var(--cire-charcoal);
  border-top-color: var(--cire-charcoal);
}
/* the red-bordered search field inside open dropdowns */
.page-template-template-property-search-results .select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--cire-gray-light);
}

/* --- map/grid toggle: one hairline pair --------------------------------- */
.page-template-template-property-search-results .property-search-action-icon {
  width: 48px;
  border: 1px solid var(--cire-gray-light);
  background: var(--cire-white);
  margin-left: 8px;
}
.page-template-template-property-search-results .property-search-action-icon::before {
  color: var(--cire-charcoal);
}
.page-template-template-property-search-results .property-search-action-icon.active {
  background: var(--cire-charcoal);
  border-color: var(--cire-charcoal);
}
.page-template-template-property-search-results .property-search-action-icon.active::before {
  color: var(--cire-white);
}

/* ==========================================================================
   30 RESULTS-COUNT ROW
   app.css paints the numerals with the legacy red:
     .property-search-results-indicator__total      { color:#ED1C24 }
     .search-result-option-results-indicator__total { color:#ED1C24 }
   ========================================================================== */
.page-template-template-property-search-results .search-result-options,
.page-template-template-property-search-results .property-search-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid var(--cire-hairline);
  border-bottom: 1px solid var(--cire-hairline);
}
.page-template-template-property-search-results .search-result-option-results {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: normal;
  overflow: visible;
  font-size: clamp(0.7rem, 1.7vw, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
.page-template-template-property-search-results .property-search-results-indicator,
.page-template-template-property-search-results .property-search-results-indicator__current,
.page-template-template-property-search-results .property-search-results-indicator__total,
.page-template-template-property-search-results .search-result-option-results-indicator__total,
.page-template-template-property-search-results .search-result-option-results-indicator__current {
  color: var(--cire-black);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* sort / show-N / pagination sit right, on the same baseline */
.page-template-template-property-search-results .search-result-option-sort,
.page-template-template-property-search-results .search-result-option-pagination--header,
.page-template-template-property-search-results .search-result-option-show {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ==========================================================================
   31 CARD PRICE COLOUR CONSISTENCY
   Prices are black; gold is a hover affordance only. The exclusive/featured
   card variants must not repaint the price.
   ========================================================================== */
.page-template-template-property-search-results .listing-card__price,
.page-template-template-property-search-results .listing-card--exclusive .listing-card__price,
.page-template-template-property-search-results .listing-card--gallery .listing-card__price,
.page-template-template-property-search-results .fuelidx_propsum_price,
.home .listing-card__price,
.home .listing-card--exclusive .listing-card__price,
.home .fuelidx_propsum_price {
  color: var(--cire-black);
}
.page-template-template-property-search-results .listing-card:hover .listing-card__price,
.home .listing-card:hover .listing-card__price {
  color: var(--cire-gold);
}

/* ==========================================================================
   32 ISLANDS ARCHIVE ("Discover the Islands" / areas we serve)
   Body class: post-type-archive-mrt_community

   WHY THE TILE LABELS VANISHED - and it is NOT a leak from this layer. The
   names are present in the HTML (20 .community-card__name elements with real
   text). app.css renders them invisible:

     .community-card__name    { color: inherit }
     .community-card__content { ... color:#363739 }   <- dark gray

   so the name inherits dark gray and sits on dark photography. Confirmed this
   layer is not the cause: every homepage island rule is scoped to .home, and
   this page is post-type-archive-mrt_community, which those selectors cannot
   match. What DID change is that the first draft styled .community-card__*
   unscoped, so this page briefly inherited the white-on-gradient treatment;
   narrowing that scope during the rebuild returned it to the theme's own
   dark-on-dark. Fixed properly here by giving the archive its own scoped
   treatment matching the approved homepage islands language.
   ========================================================================== */

/* ---- the tile itself --------------------------------------------------- */
.post-type-archive-mrt_community .community-card,
.post-type-archive-mrt_community .community-card--landing {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

/* ---- restore the name overlay: white serif on a gradient scrim --------- */
.post-type-archive-mrt_community .community-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  padding: 16px;
  text-align: left;
  /* the scrim that makes white type legible over photography */
  background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.62));
  color: var(--cire-white);
}
.post-type-archive-mrt_community .community-card__name {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  line-height: 1.2;
  /* the theme sets color:inherit, which resolved to #363739 */
  color: var(--cire-white);
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.post-type-archive-mrt_community .community-card__location {
  font-size: clamp(0.6rem, 1.6vw, 0.66rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #d9cfae;
  margin-bottom: 4px;
}
.post-type-archive-mrt_community .community-card:hover .community-card__name {
  color: var(--cire-gold);
}
/* the hover-reveal panel keeps its mechanism, restyled */
.post-type-archive-mrt_community .community-card__more-info {
  width: 100%;
}
.post-type-archive-mrt_community .community-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.post-type-archive-mrt_community .community-card__actions .button,
.post-type-archive-mrt_community .community-card__actions .button--white-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 0;
  color: var(--cire-white);
  font-size: clamp(0.64rem, 1.6vw, 0.7rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.post-type-archive-mrt_community .community-card__actions .button:hover {
  border-color: var(--cire-gold) !important;
  color: var(--cire-gold);
}

/* ==========================================================================
   33 ISLANDS ARCHIVE — SAME CONTAINER SYSTEM AS SEARCH
   Tiles were bleeding to the viewport edge with uneven gutters. Reuses the
   shared container tokens so this page and the search page align identically.
   ========================================================================== */
.post-type-archive-mrt_community .community-landing__featured-communities,
.post-type-archive-mrt_community .community-landing,
.post-type-archive-mrt_community .community__header {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--cire-search-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cire-search-gutter);
  padding-right: var(--cire-search-gutter);
}
.post-type-archive-mrt_community .community-landing__featured-communities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.post-type-archive-mrt_community .community-landing__featured-communities > * {
  width: auto;
  max-width: none;
  min-width: 0;
  float: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 729px) {
  .post-type-archive-mrt_community .community-landing__featured-communities {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  .post-type-archive-mrt_community .community-landing__featured-communities {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* ==========================================================================
   34 ISLANDS ARCHIVE — COLLAPSE THE DEAD SPACE ABOVE THE SECTION
   Roughly 2.5in of white above "Featured Islands". Rather than negative-
   margin over it, collapse the actual culprits: elements that render with no
   content but keep their margin/min-height. :empty matches only elements with
   no child nodes at all, i.e. exactly the "this block rendered nothing" case,
   so nothing with real content is affected.
   ========================================================================== */
.post-type-archive-mrt_community .community-landing-search:empty,
.post-type-archive-mrt_community .community__header:empty,
.post-type-archive-mrt_community .page-section-header:empty,
.post-type-archive-mrt_community .community-landing__map:empty,
.post-type-archive-mrt_community .row:empty,
.post-type-archive-mrt_community .columns:empty,
.post-type-archive-mrt_community section:empty {
  display: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: 0;
}
/* and bring the section's own leading space back to about an inch */
.post-type-archive-mrt_community .community__header {
  padding-top: 40px;
  padding-bottom: 24px;
  text-align: center;
}
.post-type-archive-mrt_community .community__header-title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  color: var(--cire-black);
  margin-top: 6px;
}
.post-type-archive-mrt_community .community__header-subtitle {
  font-size: clamp(0.68rem, 1.5vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
@media (min-width: 1024px) {
  .post-type-archive-mrt_community .community__header {
    padding-top: 56px; /* ~ one inch, not two and a half */
  }
}

/* ==========================================================================
   35 ISLANDS ARCHIVE — FOOT CTA
   "Need advice about the Caribbean?" was clipped, with a solid black button.
   ========================================================================== */
.post-type-archive-mrt_community .community-card--cta {
  aspect-ratio: auto;
  background: var(--cire-panel);
  align-items: center;
}
.post-type-archive-mrt_community .community-card--cta .community-card__content {
  position: relative;
  inset: auto;
  background: none;
  color: var(--cire-charcoal);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 34px 24px;
  height: auto;
  overflow: visible;
}
.post-type-archive-mrt_community .community-card--cta .community-card__name,
.post-type-archive-mrt_community .community-card--cta .community__header-title {
  color: var(--cire-black);
  text-shadow: none;
  line-height: 1.3;
  /* the clipping was a fixed height on the heading box */
  height: auto;
  max-height: none;
  overflow: visible;
  margin-bottom: 14px;
}
.post-type-archive-mrt_community .community-card--cta .button,
.post-type-archive-mrt_community .community-card--cta a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 13px 30px;
  background: transparent;
  border: 1px solid var(--cire-gray-light) !important;
  border-radius: 0;
  color: var(--cire-charcoal);
  font-size: clamp(0.7rem, 1.7vw, 0.76rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.post-type-archive-mrt_community .community-card--cta .button:hover {
  border-color: var(--cire-gold) !important;
  color: var(--cire-gold);
  background: transparent;
}

/* ==========================================================================
   36 HERO — CENTRE THE CONTENT GROUP ON THE PHOTO
   The headline, search band and MORE SEARCH OPTIONS behave as ONE flow unit
   centred on both axes of the visible hero, at every width down to 375px.

   Centring is applied to .home-hero-slider-words, which is the overlay layer
   stacked over the slick track - NOT to a slide. Centring on the track would
   follow the moving slides; the overlay spans the visible hero viewport.
   ========================================================================== */
.home .home-hero-slider-wrapper {
  position: relative;
}
.home .home-hero-slider-words {
  position: absolute;
  inset: 0;
  z-index: 56;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  pointer-events: none; /* the slider keeps its own drag behaviour */
}
.home .home-hero-slider-words > * {
  pointer-events: auto;
  width: 100%;
}
/* app.css pushes this block down with padding:18.75rem 0 2rem - that is what
   put the group below centre. Neutralised so flex centring can do its job. */
.home .home-hero-slider-words .hp-hero-header__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
}
.home .home-hero-slider-words .hp-hero-header__content .hp-hero-header__header {
  margin: 0 0 28px;
}
.home .hp-hero-rearch {
  margin-top: 0;
}
.home .hp-hero-rearch .button.button-white {
  margin-top: 24px;
}
/* the hero must be tall enough for the stacked mobile search band */
.home .home-hero-slider-wrapper,
.home .home-hero-slider {
  min-height: 560px;
}
@media (min-width: 729px) {
  .home .home-hero-slider-wrapper,
  .home .home-hero-slider {
    min-height: 600px;
  }
}
@media (min-width: 1024px) {
  .home .home-hero-slider-wrapper,
  .home .home-hero-slider {
    min-height: 660px;
  }
}

/* ==========================================================================
   37 HERO -> FEATURED: THE DEAD BAND
   Runtime check of the live homepage: between .mob-more-btn and
   #homepage-featured there are 116 characters and NO element. So nothing is
   collapsed and leaving a box behind - :empty was never going to match it,
   because there is nothing there to match. The band is box spacing on the
   junction itself: the hero overlay's trailing padding plus the featured
   section's leading padding, compounded by .mob-more-btn keeping its own
   block box on desktop where its button is not the one in use.
   ========================================================================== */
.home .mob-more-btn {
  padding: 0;
  margin: 0;
}
.home .mob-more-btn:empty {
  display: none;
}
/* on desktop the hero's own MORE SEARCH OPTIONS link is the live control, so
   the separate mobile block contributes nothing but height */
@media (min-width: 1024px) {
  .home .mob-more-btn {
    display: none;
  }
}
.home #homepage-featured {
  padding-top: 0;
  margin-top: 0;
}
.home #homepage-featured .listing-grid {
  padding-top: 40px;
}
@media (min-width: 1024px) {
  .home #homepage-featured .listing-grid {
    padding-top: 56px;
  }
}

/* ==========================================================================
   38 "FEATURED IN [ the Caribbean ]" — SECTION HEADER REBUILD
   NOTE: the root-cause claim that used to be in this comment was WRONG. The
   red underline is not a border and not an arrow colour. It is a generated
   pseudo-element with a red background. See section 44, which actually kills
   it. The border:none / gold border-bottom rules below are kept because they
   are still the correct treatment for the select2 box itself.
   ========================================================================== */
.home .page-section-header__title-dropdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline; /* the two sizes share one baseline */
  justify-content: flex-start;
  gap: 0.3em;
  font-family: var(--cire-serif);
}
.home .page-section-header__title-dropdown .page-section-header__title,
.home .page-section-header__title-dropdown .select2-container .select2-selection__rendered {
  font-family: var(--cire-serif);
  font-weight: 500;
  /* one size for both halves so nothing can sit off-baseline */
  font-size: clamp(1.2rem, 2.6vw, 1.65rem);
  line-height: 1.25;
  color: var(--cire-black);
  margin: 0;
  padding: 0 22px 0 0;
}
.home .page-section-header__title-dropdown .select2-container {
  top: 0;
  margin-left: 0;
  align-self: baseline;
}
/* the underline: remove the red border in every state */
.home .page-section-header__title-dropdown .select2-container .select2-selection,
.home .page-section-header__title-dropdown .select2-container--default .select2-selection,
.home .page-section-header__title-dropdown .select2-container--default .select2-selection--single,
.home .page-section-header__title-dropdown .select2-container--open .select2-selection {
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--cire-gold) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* caret: small, charcoal, centred on the text it belongs to */
.home .page-section-header__title-dropdown .select2-selection__arrow {
  height: auto;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
}
.home .page-section-header__title-dropdown .select2-selection__arrow b,
.home .page-section-header__title-dropdown .select2-selection__arrow b::before {
  font-size: 0.75rem;
  color: var(--cire-charcoal) !important;
  border-top-color: var(--cire-charcoal) !important;
  margin: 0;
}
/* VIEW ALL sits right on the same baseline */
.home .page-section-header,
.home .page-section-header--alt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
}

/* ==========================================================================
   39 CARD BODY GEOMETRY — LEVEL HAIRLINES ACROSS A ROW
   Titles vary wildly in length, so the bodies ran ragged and the bottom
   hairline sat at a different height on every card. Each body region is now
   given a fixed rhythm: title clamped to two lines, location to one, so the
   price row, title, location and hairline land on the same baseline in every
   card regardless of content.
   ========================================================================== */
.home .listing-card,
.page-template-template-property-search-results .listing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.home .listing-card__content,
.page-template-template-property-search-results .listing-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* title: exactly two lines' worth of space, ellipsised beyond */
.home .listing-card__address,
.page-template-template-property-search-results .listing-card__address {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 2 lines at 1.5 line-height, locked so short titles reserve the same box */
  min-height: calc(2 * 1.5em);
  max-height: calc(2 * 1.5em);
  line-height: 1.5;
}
/* the location half sits on its own single ellipsised line */
.home .listing-card__address br,
.page-template-template-property-search-results .listing-card__address br {
  display: none;
}
.home .listing-card__specs,
.page-template-template-property-search-results .listing-card__specs {
  margin-top: auto; /* facts pin to the bottom, so hairlines align */
}

/* ==========================================================================
   42 FOOTER — ONE CHARCOAL TREATMENT, TOP TO BOTTOM
   The footer was a sandwich. Measured from app.css:
     .footer-callout { background:#000000 }
     .footer-contact { background:#f3f3f3 }   <- the light gray middle band
   plus a stray red top hairline on the footer edge.

   The middle band's logo is the ACF-uploaded COLOUR lockup, which cannot
   survive on charcoal. CSS cannot rewrite an <img src>, so the image is
   replaced visually: the <img> is hidden and its anchor carries the theme's
   own reversed lockup (img/logo-white@2x.png) as a background. That keeps
   footer.php markup and its ACF conditional completely untouched, and uses
   the site's real white logo - no substitute, no recolouring of the sealed
   lockup.
   ========================================================================== */

/* kill the stray red hairline at the footer's top edge */
.footer,
.footer::before,
.footer-callout,
.footer-menu,
.footer-contact,
.disclaimer {
  border-top: none;
}

/* one ground for the whole footer */
.footer,
.footer-menu,
.footer-contact {
  background: var(--cire-charcoal) !important;
  background-image: none !important;
  color: #c3c9cc;
}
.footer-contact {
  padding: 40px 0;
}

/* the reversed lockup, without touching markup */
.footer .footer-contact__logo {
  display: inline-block;
  width: 186px;
  height: 48px;
  background-image: url("../img/logo-white@2x.png");
  background-repeat: no-repeat;
  background-position: center center; /* c52: lockup art contain-scales to 288px in the 372px box; left-pin sat 21px off the text axis (Nick redline 2026-08-16) */
  background-size: contain;
  padding: 0;
}
.footer .footer-contact__logo img {
  /* the ACF colour lockup is hidden, never recoloured */
  visibility: hidden;
  width: 186px;
  height: 48px;
  display: block;
}

/* type and links across the whole footer */
.footer,
.footer p,
.footer address,
.footer .footer-contact__address-location,
.footer .larger-blue-call {
  color: #c3c9cc;
}
.footer a,
.footer .footer-contact__phone,
.footer .footer-contact__email,
.footer .footer-menu__list ul a {
  color: #c3c9cc;
  text-decoration: none;
}
.footer a:hover,
.footer .footer-contact__phone:hover,
.footer .footer-contact__email:hover {
  color: var(--cire-gold);
}
.footer h3,
.footer .footer-menu__list > li > a,
.footer .footer-menu__title a {
  color: var(--cire-white);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}

/* social icons white, gold on hover */
.footer .footer-contact__social a,
.footer .footer-contact__social .icon,
.footer .footer-contact__social .icon::before,
.footer .footer-contact__social svg {
  color: var(--cire-white);
  fill: var(--cire-white);
}
.footer .footer-contact__social a:hover,
.footer .footer-contact__social a:hover .icon::before {
  color: var(--cire-gold);
  fill: var(--cire-gold);
}

/* legal band: slightly darker charcoal */
.footer .footer-disclosure {
  background: #2c3338;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #9aa3a8;
  padding: 20px 0;
  margin-top: 0;
}
.footer .footer-disclosure a {
  color: #9aa3a8;
}
.footer .footer-disclosure a:hover {
  color: var(--cire-gold);
}

/* the pre-footer MLS disclaimer must not reintroduce a light band */
.disclaimer {
  background: transparent;
  color: var(--cire-gray-light);
}

/* ==========================================================================
   43 FILTER BAR - REBUILD (supersedes sections 29 and 40, both deleted)

   Why the previous four attempts failed: they were all written against
   app.css. app.css does NOT lay out this bar. The theme's own style.css
   does, and it is enqueued on this page (verified in the live <head>).
   Baseline, verified from style.css:

     @media (min-width:1200px)
       .property-search-wide-expand .property-search-filters-menu--map form
                                            { display:flex; gap:8px;
                                              align-items:flex-start }
       .property-search-wide-expand .property-search-filters-menu-search
                                            { flex:1 }            <- search grows
       .js-filter-item-accordion-toggle     { display:flex; min-width:100px;
                                              padding:8px 10px; border:1px solid #000 }
       .property-filters-sale  ... toggle   { min-width:118px }
       .property-filters-more  ... toggler  { min-width:124px }
       price/islands/property toggles       { min-width:168px }
       .property-filters-up-level__reset    { height:46px; padding:9px 16px }
       .property-filters-up-level__apply    { width:115px }
       .js-filter-item-accordion-toggle .__title { flex:0; white-space:nowrap }
     and BOTH toggles are display:none at >=1200 (bar mode needs neither).

   So the theme already had one coherent bar. The regression came from our
   own blanket rules:
     - sec 40 put display:inline-flex !important on the SHARED toggle class,
       which beat style.css's display:none and app.css's per-variant
       display:none -> both "Filter by" and "Filters" reappeared at desktop.
     - sec 40 forced height/max-height 52px + justify-content:center onto
       .select2-container / .select2-selection -> the keyword search collapsed
       to a square showing only the magnifier.
     - sec 08's uppercase + 0.12em letter-spacing widened "For Sale" past its
       118px box; app.css's flex-wrap:wrap on __header then pushed the caret
       glyph onto a second line -> uneven heights.
     - sec 40 gave Reset a 52px bordered box it was never meant to have.

   This block therefore does the minimum: it never sets display on the shared
   toggle class, never touches select2 internals, and only equalises height on
   the controls that actually sit in the bar. Everything else is left to the
   theme.
   ========================================================================== */

/* --- brand colour only; no geometry, no widths ---------------------------
   style.css paints the bar with #B5121B (a second legacy red, distinct from
   app.css's #ED1C24 - both are swept here).
   ---------------------------------------------------------------------- */
.page-template-template-property-search-results .property-search-header.property-search-wide-expand {
  background: var(--cire-white);
  border-bottom: 1px solid var(--cire-hairline);
}
.page-template-template-property-search-results .js-filter-item-accordion-toggle.property-search-filters-menu-section__header::after,
.page-template-template-property-search-results .property-filters-more .more-drop-down-toggler::after,
.page-template-template-property-search-results .js-filter-item-accordion label.search-result-option__header {
  color: var(--cire-charcoal);
}
.page-template-template-property-search-results .js-filter-item-accordion .property-search-filters-menu-section__range + label.search-result-option__header {
  border-top-color: var(--cire-hairline);
}
.page-template-template-property-search-results .property-search-btn-holder {
  border-top-color: var(--cire-hairline);
}

/* --- THE BAR (only where the theme actually builds one) ------------------ */
@media (min-width: 1200px) {

  /* one row, one vertical centre. align-items:flex-start was the theme's;
     centre is the doctrine default for a control row. */
  .page-template-template-property-search-results .property-search-wide-expand .property-search-filters-menu--map form {
    align-items: center;
    gap: 8px;
  }

  /* the four dropdown toggles + MORE: one height, never wrap.
     flex-wrap:nowrap is the actual wrap fix - app.css sets flex-wrap:wrap on
     __header, which is what put the caret on its own line. */
  .page-template-template-property-search-results .property-search-wide-expand .property-filters-price .js-filter-item-accordion-toggle,
  .page-template-template-property-search-results .property-search-wide-expand .property-filters-islands .js-filter-item-accordion-toggle,
  .page-template-template-property-search-results .property-search-wide-expand .property-filters-property .js-filter-item-accordion-toggle,
  .page-template-template-property-search-results .property-search-wide-expand .property-filters-sale .js-filter-item-accordion-toggle,
  .page-template-template-property-search-results .property-filters-more .more-drop-down-toggler {
    box-sizing: border-box;
    height: 48px;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid var(--cire-gray-light);
    background: var(--cire-white);
    color: var(--cire-charcoal);
  }
  .page-template-template-property-search-results .property-search-wide-expand .property-filters-price .js-filter-item-accordion-toggle:hover,
  .page-template-template-property-search-results .property-search-wide-expand .property-filters-islands .js-filter-item-accordion-toggle:hover,
  .page-template-template-property-search-results .property-search-wide-expand .property-filters-property .js-filter-item-accordion-toggle:hover,
  .page-template-template-property-search-results .property-search-wide-expand .property-filters-sale .js-filter-item-accordion-toggle:hover,
  .page-template-template-property-search-results .property-filters-more .more-drop-down-toggler:hover {
    background: var(--cire-white);
    border-color: var(--cire-gold);
    color: var(--cire-charcoal);
  }

  /* label: sentence case at the theme's own size. The uppercase +0.12em
     tracking from section 08 is what overflowed the 118px box; it is
     cancelled here rather than compensated for with a wider box. */
  .page-template-template-property-search-results .js-filter-item-accordion-toggle .property-search-filters-menu-section__title {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.04em;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    color: inherit;
  }

  /* keyword search: keeps the theme's flex:1 and its own select2 sizing.
     Only the container box is aligned to 48px - select2 internals are NOT
     touched, which is what collapsed it last time. */
  .page-template-template-property-search-results .property-search-wide-expand .property-search-filters-menu-search {
    flex: 1 1 auto;
    min-width: 220px;
  }
  .page-template-template-property-search-results .property-search-wide-expand .property-search-filters-menu-section__search .select2-container {
    box-sizing: border-box;
    min-height: 48px;
    display: flex;
    align-items: center;
    border-color: var(--cire-gray-light);
  }

  /* Reset: a quiet text button, vertically centred on the 48px row.
     No box - it is not a peer of the dropdowns. */
  .page-template-template-property-search-results .property-search-filters-menu-submit__reset.property-filters-up-level__reset {
    box-sizing: border-box;
    height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: none;
    background: none;
    color: var(--cire-charcoal);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .page-template-template-property-search-results .property-search-filters-menu-submit__reset.property-filters-up-level__reset:hover,
  .page-template-template-property-search-results .property-search-filters-menu-submit__reset.property-filters-up-level__reset:focus {
    border: none;
    color: var(--cire-gold);
  }

  /* Apply: the single gold action. Keeps style.css's 115px width. */
  .page-template-template-property-search-results .property-search-filters-menu-submit__apply.property-filters-up-level__apply {
    box-sizing: border-box;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: none;
    border-radius: 0;
    background: var(--cire-gold);
    color: #2c3338;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
  }
  .page-template-template-property-search-results .property-search-filters-menu-submit__apply.property-filters-up-level__apply:hover {
    background: var(--cire-gold-dark);
    color: #2c3338;
  }
  /* style.css draws a red ::before wash on the .button-family Apply */
  .page-template-template-property-search-results .button.property-search-filters-menu-submit__apply::before {
    display: none;
  }
}

/* ==========================================================================
   44 THE RED LINE UNDER THE GEO DROPDOWN — IDENTIFIED AND KILLED

   Nick's redline, survived three attempts (a colour sweep, then a
   "select2 border" theory, then section 38's border:none + gold border-bottom).
   All three missed because none of them was looking at the right kind of
   thing. Enumerated from the runtime DOM (select2 replaces the native
   <select id="home-middle-geo-select"> at app.js:36, and re-runs on every geo
   AJAX swap), the box is:

     span.select2.select2-container.select2-container--default
       span.selection
         span.select2-selection.select2-selection--single   <- position:relative
           span.select2-selection__rendered                 <- "the Caribbean"
           span.select2-selection__arrow > b                <- caret

   The red thing, by name, from app.css:

     .page-section-header__title-dropdown .select2-container .select2-selection::before
       { content:""; position:absolute; bottom:0; left:5px; right:38px;
         height:4px; BACKGROUND:#ED1C24 }
     ...and a second rule immediately after narrowing it to left:8px; right:8px

   So it is a 4px-tall absolutely-positioned RED BLOCK generated by ::before -
   a background on a pseudo-element. That is why:
     - a colour sweep missed it: it sets no `color`, only `background`;
     - the border theory missed it: `border:none` cannot remove a ::before;
     - section 38's gold border-bottom missed it: the red block is painted at
       bottom:0 INSIDE the box, sitting directly on top of that new border.

   Killed with `content:none`, which removes the generated box entirely rather
   than trying to recolour or cover it. Unscoped (matching app.css's own reach)
   but one class deeper, and our sheet loads after app.css, so it wins twice
   over. No !important needed.
   ========================================================================== */
.page-section-header__title-dropdown .select2-container .select2-selection::before,
.page-section-header__title-dropdown .select2-container--default .select2-selection--single::before {
  content: none;
}

/* ==========================================================================
   45 SORT / PAGINATION ROW - REBUILD (supersedes section 41 and section 08's
   pagination block, both deleted)

   Section 41 said "ONE BASELINE" and changed nothing visible, for the same
   reason the red line survived three passes: it styled elements that are not
   on the page. Enumerated from the REAL runtime DOM:

     div.property-search-gallery-filters.search-result-options
       div.search-result-option-results          <- "N Listings"
       div.search-result-option-sort
         label.search-result-option__header       <- "Sort by :"
         div.property-search-gallery-sort__dropdown.ruhl-dropdown--mini
           select.js-ruhl-dropdown.mrt-prop-sort  <- select2'd => DISPLAY:NONE
           span.select2-container                 <- the box you actually see
       div.search-result-option-pagination--header
           (EMPTY on first paint - AJAX-injected by
            components/property-search/ajax-gallery-pager.php)
             div.search-result-option-pagination-pages
               a.search-result-prev-btn / label "Page" / a.page-numbers /
               span.page-numbers.current / a.search-result-next-btn
             div.search-result-option-pagination__dropdown.ruhl-dropdown--mini
               select.mrt-prop-num                <- select2'd => DISPLAY:NONE
               span.select2-container             <- the "Show 30" box

   Two misses, both now fixed:

   (a) Section 41 sized `.search-result-option-sort select` and
       `.search-result-option-show select`. Both are select2-enhanced, so the
       real <select> is display:none and every rule aimed at it was inert.
       That is why "Sort by :" sat low against a box we had never touched.
       We now size the .select2-container instead. Single-selects only - the
       container plus the rendered line-height, which is the normal select2
       pattern and NOT the blanket internal-forcing that collapsed the keyword
       search in section 40.

   (b) The stray commas are NOT text in the template. WP's paginate_links()
       joins with "\n" (verified in wp-includes/general-template.php:4663).
       They are generated content in app.css:
         .search-result-option-pagination-pages .page-numbers:before
           { content:",\00a0" }
       with a companion rule blanking it on the first item only. Killed with
       content:none so the numbers can become real, evenly-spaced controls.

   Page numbers become 44px minimum squares per the mockup pagination
   language: current is bordered, the rest are quiet until hover.
   ========================================================================== */

/* the comma generator */
.search-result-option-pagination__page::before,
.search-result-option-pagination-pages .page-numbers::before {
  content: none;
}

/* one row, one vertical centre */
.page-template-template-property-search-results .search-result-options,
.page-template-template-property-search-results .property-search-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.page-template-template-property-search-results .search-result-option-sort,
.page-template-template-property-search-results .search-result-option-pagination,
.page-template-template-property-search-results .search-result-option-pagination--header,
.page-template-template-property-search-results .search-result-option-pagination--footer,
.page-template-template-property-search-results .search-result-option-show,
.page-template-template-property-search-results .search-result-option-pagination-pages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* "Sort by :" / "Page" - centred against the control, not baselined to it.
   Doctrine D3: a row containing a form control is never baseline-aligned. */
.page-template-template-property-search-results .search-result-option__header {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  font-size: clamp(0.7rem, 1.7vw, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
  font-weight: 600;
}

/* the two select2 dropdowns (Sort by, Show N) - one box, centred text */
.page-template-template-property-search-results .search-result-option-sort .select2-container,
.page-template-template-property-search-results .search-result-option-pagination__dropdown .select2-container,
.page-template-template-property-search-results .property-search-gallery-sort__dropdown .select2-container {
  box-sizing: border-box;
  height: 44px;
  border: 1px solid var(--cire-gray-light);
  border-radius: 0;
  background: var(--cire-white);
}
.page-template-template-property-search-results .search-result-option-sort .select2-container .select2-selection--single,
.page-template-template-property-search-results .search-result-option-pagination__dropdown .select2-container .select2-selection--single,
.page-template-template-property-search-results .property-search-gallery-sort__dropdown .select2-container .select2-selection--single {
  box-sizing: border-box;
  height: 42px;
  border: none;
  border-radius: 0;
  background: transparent;
}
.page-template-template-property-search-results .search-result-option-sort .select2-selection__rendered,
.page-template-template-property-search-results .search-result-option-pagination__dropdown .select2-selection__rendered,
.page-template-template-property-search-results .property-search-gallery-sort__dropdown .select2-selection__rendered {
  line-height: 42px;
  padding-left: 12px;
  padding-right: 30px;
  color: var(--cire-charcoal);
  font-size: 0.9rem;
}
.page-template-template-property-search-results .search-result-option-sort .select2-selection__arrow,
.page-template-template-property-search-results .search-result-option-pagination__dropdown .select2-selection__arrow,
.page-template-template-property-search-results .property-search-gallery-sort__dropdown .select2-selection__arrow {
  height: 42px;
  right: 6px;
}
.page-template-template-property-search-results .search-result-option-sort .select2-container:hover,
.page-template-template-property-search-results .search-result-option-pagination__dropdown .select2-container:hover,
.page-template-template-property-search-results .property-search-gallery-sort__dropdown .select2-container:hover {
  border-color: var(--cire-gold);
}

/* page numbers: minimal squares, current bordered */
.page-template-template-property-search-results .search-result-option-pagination-pages .page-numbers,
.page-template-template-property-search-results .search-result-prev-btn,
.page-template-template-property-search-results .search-result-next-btn {
  box-sizing: border-box;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--cire-charcoal);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.page-template-template-property-search-results .search-result-option-pagination-pages a.page-numbers:hover,
.page-template-template-property-search-results .search-result-prev-btn:hover,
.page-template-template-property-search-results .search-result-next-btn:hover {
  border-color: var(--cire-gold);
  color: var(--cire-charcoal);
  font-weight: 400; /* app.css uses bold on hover, which reflows the row */
}
.page-template-template-property-search-results .search-result-option-pagination-pages .page-numbers.current {
  border-color: var(--cire-charcoal);
  color: var(--cire-black);
  font-weight: 600;
}

/* ==========================================================================
   46 QUICK-WINS BATCH  (specificity-proven items only)

   NOTE ON SCOPE: the 375px horizontal overflow is NOT fixed here. I had a
   theory (that section 36's align-items:center on a column flex container
   forced the h1 to max-content width) and DISPROVED it with a rendered
   minimal test - align-items:center resolves to fit-content, which is
   min(max-content, available), so it wraps and cannot overflow. An
   instrumented render instead points at .slick-track (4800px, apparently not
   clipped by .slick-list) and the CookieYes .cky-preference-center (845px).
   Neither is confirmed yet, so neither is patched. No overflow-x guard is
   shipped either: `overflow-x:clip` on .home would create a clipping context
   that eats the select2 and nav dropdown panels, which is a worse bug than
   the one it hides.
   ========================================================================== */

/* --- 46.1 THE RED PRE-FOOTER BAND (Nick's #1, every page) ----------------
   Our charcoal rule has been live since section 22 and never won:
     ours       .footer-callout          { background:#384249 }  (0,1,0)
     style.css  .footer .footer-callout  { background:#B5121B }  (0,2,0)
   style.css simply outranked it. Raised to equal specificity; our sheet loads
   after style.css, so this now wins on order.
   ---------------------------------------------------------------------- */
.footer .footer-callout {
  background: var(--cire-charcoal);
  color: var(--cire-white);
}
.footer .footer-callout__title,
.footer .footer-callout__title a {
  font-family: var(--cire-serif);
  color: var(--cire-white);
}
.footer .footer-callout p,
.footer .footer-callout span,
.footer .footer-callout li,
.footer .footer-callout a:not(.footer-callout__button) {
  color: var(--cire-white);
}
.footer .footer-callout a:not(.footer-callout__button):hover {
  color: var(--cire-gold);
}

/* --- 46.2 DARK-GROUND LAW: no dark background without light text ---------
   Nick's absolute rule. Footer column headings (SEARCH / ISLANDS / COMPANY
   INFO) rendered charcoal-on-charcoal, i.e. invisible, because:
     app.css  .footer-menu__list>li .footer-menu__title a {color:#000} (0,2,2)
     ours     .footer .footer-menu__title a                            (0,2,1)
   app.css outranked us. Raised above it. Every text role on our charcoal
   grounds is now declared light explicitly rather than left to inherit.
   ---------------------------------------------------------------------- */
.footer .footer-menu__list > li .footer-menu__title,
.footer .footer-menu__list > li .footer-menu__title a {
  color: var(--cire-white);
}
.footer .footer-menu__list > li .footer-menu__title a:hover,
.footer .footer-menu__list > li .footer-menu__title a:focus {
  color: var(--cire-gold);
}
.footer .footer-menu__list > li .footer-menu__links a,
.footer .footer-menu__list > li .footer-menu__links a:visited {
  color: var(--cire-gray-light);
}
.footer .footer-menu__list > li .footer-menu__links a:hover,
.footer .footer-menu__list > li .footer-menu__links a:focus {
  color: var(--cire-white);
}
/* the mobile accordion chevron sits on the same dark ground */
.footer .footer-menu__toggle,
.footer .footer-menu__toggle::before,
.footer .footer-menu__toggle::after {
  color: var(--cire-white);
}
/* legal / copyright strip */
.footer .footer-legal,
.footer .footer-legal a,
.footer .footer-copyright,
.footer .footer-copyright a {
  color: var(--cire-gray-light);
}
.footer .footer-legal a:hover,
.footer .footer-copyright a:hover {
  color: var(--cire-white);
}
/* the one dark control our layer created: the active grid/map toggle */
.page-template-template-property-search-results .property-search-action-icon.active,
.page-template-template-property-search-results .property-search-action-icon.active::before {
  color: var(--cire-white);
}

/* --- 46.3 MOBILE LOGO BELOW THE BRAND MINIMUM ---------------------------
   BRAND.md: the lockup must never render narrower than 120px. Audited at
   109px at 375px. Only the rendered box changes - the lockup itself is a
   sealed asset and is not touched.
   ---------------------------------------------------------------------- */
@media (max-width: 728px) {
  .navbar__logo img,
  .navbar__logo a img {
    width: 132px;
    height: auto;
    max-width: 132px;
  }
}

/* --- 46.4 LEGACY RED, ROUND 4 -------------------------------------------
   Earlier sweeps missed these because they searched for #ED1C24 in app.css.
   These are #B5121B in style.css - wrong hex AND wrong file.
   ---------------------------------------------------------------------- */
/* hero quicksearch chevrons (style.css:443-446, an ::after icon glyph) */
.home .hp-hero-rearch .property-search-filters-select .select2-selection--single::after,
.home .hp-hero-rearch .property-search-filters-select .select2-container--open .select2-selection--single .select2-selection__rendered::after,
.hp-hero-rearch .property-search-filters-select .select2-selection--single::after {
  color: var(--cire-charcoal);
}
/* primary nav active/hover underline (app.css, a red ::before block) */
.navbar__links--primary > li > a::before {
  background: var(--cire-gold);
}
/* select2 single-select carets sitewide */
.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b::before {
  color: var(--cire-charcoal);
  border-top-color: var(--cire-charcoal);
}

/* --- 46.5 DETAIL PAGE: 375px ACTION ROW WRAPPING ------------------------- */
.property-detail-a-2col .property-detail-header__mobile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.property-detail-a-2col .property-detail-header__mobile-actions > * {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

/* ==========================================================================
   47 MOBILE HERO QUICKSEARCH  (Nick, real iPhone at 375pt)

   Rendered DOM - the form's five direct children, in order:
     div.property-search-filters-menu-section__search      "Search" (select2 multi)
     div.property-search-filters-select                    "Island" (select2 single)
     div.property-search-filters-menu-section              "Type"
     div.property-search-filters-menu-section.property-search-filters-menu-section-prices
                                                           "Price"
     button[type=submit]                                   "Search"

   The theme's own mobile design (style.css, @media max-width:767px) is
   already correct for this:
     .search-input-container            { flex-wrap: wrap }
     .property-search-filters-select,
     .property-search-filters-menu-section__search  { width:100% }
     .property-search-filters-menu-section          { width:50% }
     button[type=submit]                            { width:100% }
   i.e. Search / Island full width, Type and Price sharing one row as halves.

   We broke it. Section 05 sets, with no media query:

     .home .hp-hero-rearch .quicksearch { display:flex; flex-direction:column }

   In COLUMN direction, the theme's width:50% no longer pairs the two sections
   on one line - it makes each of them a half-width block on its OWN row, with
   the other half left empty and the cell's border showing as a stray vertical
   rule. That is exactly what Nick photographed. Section 06 restores
   flex-direction:row at >=729px, which is why only mobile is affected.

   Fix: put mobile back into row+wrap and state each child's width explicitly
   rather than relying on the theme's, so the pairing cannot drift again.
   ========================================================================== */
@media (max-width: 728px) {
  .home .hp-hero-rearch .quicksearch {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  /* full-width rows */
  .home .hp-hero-rearch .quicksearch > .property-search-filters-menu-section__search,
  .home .hp-hero-rearch .quicksearch > .property-search-filters-select,
  .home .hp-hero-rearch .quicksearch > button[type="submit"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  /* the paired half-width cells: Type | Price */
  .home .hp-hero-rearch .quicksearch > .property-search-filters-menu-section {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 0;
  }

  /* one hairline system: a rule under each full-width row and under the pair,
     plus a single divider BETWEEN Type and Price. Section 05's blanket
     border-bottom on every child is what produced the orphan vertical rule. */
  .home .hp-hero-rearch .quicksearch > * {
    border-bottom: 1px solid var(--cire-hairline);
    border-right: none;
  }
  .home .hp-hero-rearch .quicksearch > .property-search-filters-menu-section:first-of-type {
    border-right: 1px solid var(--cire-hairline);
  }
  .home .hp-hero-rearch .quicksearch > button[type="submit"] {
    border-bottom: none;
  }

  /* labels read left inside their cell, per the mockup language. The Island
     select2 carries data-dropdown-css-class="hero-dropdown-center", which is
     what centred it. */
  .home .hp-hero-rearch .property-search-filters-menu-section__title,
  .home .hp-hero-rearch .property-search-filters-menu-section__header,
  .home .hp-hero-rearch .select2-selection__rendered,
  .home .hp-hero-rearch .select2-selection__placeholder {
    text-align: left;
    justify-content: flex-start;
  }
}

/* --- 47.2 THE BOX IS NOT CENTRED ----------------------------------------
   Section 05 sizes the panel with `width: min(980px, 92vw)`. 92vw is measured
   against the VIEWPORT, but the panel's containing block is
   .home-hero-slider-words minus its 16px side padding = 343px at a 375px
   viewport. 92vw = 345px, so the panel is 2px WIDER than the box it sits in
   and cannot centre within it - it reads as shifted/full-bleed-left.

   Sizing it to its container instead makes the side margins equal by
   construction at every width.
   ---------------------------------------------------------------------- */
.home .hp-hero-rearch {
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
}

/* --- 47.3 RED CARETS AT THE MOBILE BREAKPOINT ---------------------------
   The earlier kill hit the desktop selectors only. Type and Price draw their
   caret from app.css `.property-search-filters-menu-section__header:after
   { color:#ED1C24 }`, which our section 27 never covered because it targeted
   `.icon`/`.icon::before` rather than the header's own pseudo-element.
   Island draws from style.css `#B5121B`.
   ---------------------------------------------------------------------- */
.home .hp-hero-rearch .property-search-filters-menu-section__header::after,
.home .hp-hero-rearch .property-search-filters-menu-section__header::before,
.home .hp-hero-rearch .property-search-filters-select .select2-selection--single::after,
.home .hp-hero-rearch .select2-selection__arrow b,
.home .hp-hero-rearch .select2-selection__arrow b::before,
.hp-hero-rearch .property-search-filters-menu-section__header::after {
  color: var(--cire-charcoal);
  border-top-color: var(--cire-charcoal);
}

/* ==========================================================================
   48 MOBILE HERO - "ISLAND" LABEL LEFT-ALIGNED

   Section 47 left this one centred. The reason: I targeted
   `.select2-selection__rendered`, but that is a CHILD. The flex container
   doing the centring is its parent, from style.css:

     .hp-hero-rearch .property-search-filters-select .select2-selection--single
       { display:flex; align-items:center; justify-content:center; }   (0,3,0)

   Type and Price already read left because section 47 hit their real
   container, `.property-search-filters-menu-section__header`. This does the
   same for Island: flex-start on the container, and let the rendered text
   grow so the caret is pushed to the right edge exactly as it is on
   Type/Price.

   Mobile only - the desktop hero is a horizontal bar where the theme's
   centring is deliberate.
   ========================================================================== */
@media (max-width: 728px) {
  .home .hp-hero-rearch .property-search-filters-select .select2-selection--single {
    justify-content: flex-start;
  }
  .home .hp-hero-rearch .property-search-filters-select .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    text-align: left;
  }
}

/* ==========================================================================
   49 MOBILE DETAIL HEADER - DEDUPE AND DECLUTTER

   Rendered DOM (verified by curl of the live listing). The header ships TWO
   action containers plus a third copy inside the Tools dropdown:

     .property-detail-header__mobile-actions
         a.a2a_dd                      "Share"      <- duplicate
         button--map                   "View Map"
     ul.property-detail-header__actions
         li.save-property > a--save    "Save"  (heart)
         li > a.a2a_dd                 "Share"      <- duplicate
         li > a--tools                 "Tools"  (+ dropdown)
             .property-detail-tool.show-for-small-only.a2a_dd  "Share" (3rd, in-dropdown)

   The theme keeps exactly one of the two visible per breakpoint:
     app.css  @media (max-width:1023px) .property-detail-header__actions        {display:none}
     app.css  @media (min-width:1024px) .property-detail-header__mobile-actions {display:none}

   WE BROKE THAT. Section 02 sets, with no media query:

     .property-detail-a-2col .property-detail-header__actions { display:flex }   (0,2,0)

   which outranks app.css's (0,1,0) display:none at every width, so on a phone
   BOTH containers render - two Share buttons, at different heights, in a
   broken constellation. Identical in kind to the filter-toggle regression.

   DECISION, and it is a deliberate departure from the theme: Nick wants the
   heart and Tools available on mobile, and those exist only in __actions. So
   rather than restoring app.css's hide, __actions stays visible on mobile ON
   PURPOSE and the REDUNDANT Share in __mobile-actions is removed instead.
   Net mobile control set: heart, Share, Tools, Map - one row, equal boxes.
   The in-dropdown Share is left alone; it is inside a closed panel.
   ========================================================================== */
@media (max-width: 1023px) {
  /* the duplicate. __mobile-actions keeps its Map button only. */
  .property-detail-a-2col .property-detail-header__mobile-actions > a.a2a_dd {
    display: none;
  }

  /* one control strip: both containers sit on the same row, same geometry */
  .property-detail-a-2col .property-detail-header__mobile-actions,
  .property-detail-a-2col .property-detail-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .property-detail-a-2col .property-detail-header__mobile-actions {
    order: 4;
  }
  .property-detail-a-2col .property-detail-header__actions {
    order: 5;
    margin-top: 0;
  }

  /* equal boxes for every control in the strip */
  .property-detail-a-2col .property-detail-header__action-button {
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 12px;
    gap: 6px;
    line-height: 1;
  }
  .property-detail-a-2col .property-detail-header__mobile-actions .property-detail-header__action-button--map {
    margin: 0;
    font-size: 0.8125rem;
  }
  /* "View <br> Map" is two lines in the markup; make it read as one */
  .property-detail-a-2col .property-detail-header__mobile-actions-text br {
    display: none;
  }
  .property-detail-a-2col .property-detail-header__mobile-actions-text {
    padding-left: 4px;
    top: 0;
    white-space: nowrap;
  }

  /* meta on ONE line, smaller, city ellipsised rather than wrapped */
  .property-detail-a-2col .property-detail-header__details {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }
  .property-detail-a-2col .property-detail-header__detail {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .property-detail-a-2col .property-detail-header__detail--city {
    flex: 0 1 auto;
  }
  .property-detail-a-2col .property-detail-header__detail--size {
    flex: 0 1 auto;
  }
  .property-detail-a-2col .property-detail-header__detail--availability {
    flex: 0 0 auto;
  }
}

/* --- 49.2 STICKY HEADER: THE NAME COLLAPSING TO "D." --------------------
   In the stuck state the title cell is `flex: 1 1 auto; min-width: 0` and the
   action strip is `flex: 0 0 auto; flex-wrap: nowrap`. With four controls plus
   Request Info the strip claims the whole row, and because the title may
   shrink below its content it collapses to a single character before the
   ellipsis - "D.".

   Two changes: give the title a floor it cannot shrink past, and drop Tools
   and Map from the stuck strip on phones. Nick's spec for stuck mobile is
   name + heart/share + Request Info.
   ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__title {
    flex: 1 1 55%;
    min-width: 55%;
  }
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__mobile-actions {
    display: none;
  }
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--tools {
    display: none;
  }
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__actions {
    flex-wrap: nowrap;
    gap: 8px;
  }
}

/* ==========================================================================
   51 DETAIL PAGE — THE APPROVED MOCKUP, IMPLEMENTED (mobile + desktop)

   SPEC: mockups/cire-detail-mockup.html. Nick's verdict on 2.0c18 was that
   the listing pages "do NOT look like the mockup". This section implements
   the mockup's composition at every width instead of restyling the theme's
   own header/sidebar arrangement. Section 50 (the mobile-only summary that
   shipped in ea0af61) is superseded here and its divergent decisions — the
   gold eyebrow, the panel ground, the oversized serif price — are removed,
   because the mockup has none of them.

   THE MOCKUP, MEASURED (rendered at 1440 and 375, iframe method):
     .wrap        max-width 1240, padding 0 28            -> one container
     .gallery     grid 2.15fr 1fr 1fr x 3 rows, gap 10,
                  height min(58vh,540px), hero spans rows 1-3
                  <=729: 2 cols, hero full width, only 2 thumbs shown
     .listing-head  serif address (clamp 1.7-2.5rem, black, max 20ch)
                    price 1.25rem sans charcoal tabular
                    status line .7rem/.22em uppercase gray-med
     .facts       one row, hairline above and below, padding 20 0,
                  figure black bold + label gray-med, flex 1 1 130px
     .viewbar     outlined buttons, 12px 22px, gold on hover
     .main        grid minmax(0,1fr) / 380px, gap 70
     .seclabel    .85rem/700/.16em uppercase black, margin 44 0 16
     table.specs  th 46% gray-med regular, td charcoal, hairline per row
     .panel       #f6f7f7 ground, padding 32 30

   WHAT THE THEME GIVES US, VERIFIED IN THE RENDERED DOM (not from source):
     - .cire-gallery already contains the slick container + .cire-gallery__thumbs,
       so the mockup's 3-column grid is reachable by nesting a 2-column grid
       inside the thumb rail: outer 2.15fr / 2fr == mockup 2.15fr / 1fr / 1fr.
       NO gallery markup surgery is required.
     - The slick container carries a -35px inline-margin from app.css (measured:
       cell x=95 w=424, container x=60 w=494) so it escapes its grid cell, and
       the slide is 371px tall inside a 504px cell. Both are neutralised here.
     - .property-detail-main is flex (content 909 + sidebar 400 at 1444).
       Kept as flex on purpose: the sidebar is js-headroom and turning the row
       into a grid risks its sticky behaviour. Widths are set to the mockup's.
     - .property-detail-main__mobile-highlights is hidden by app.css at
       >=1366px ONLY. It is re-shown from inside that same breakpoint — never
       with a bare display declaration, which would defeat the theme's own
       media queries at every other width.
   ========================================================================== */

/* --- 51.1 one container ------------------------------------------------- */
.property-detail-a-2col .row.extended-width {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 28px;
}
.property-detail-a-2col .property-detail-main__content {
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
}

/* --- 51.2 the header at rest is reduced to its controls -----------------
   The mockup has no page header: breadcrumbs, then the photograph. The
   theme's .property-detail-header is ALSO the sticky bar (headroom--not-top),
   so it cannot be removed — the identity is hidden only while the header is
   at rest and the sticky bar keeps every control it has today.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-header:not(.headroom--not-top) .property-detail-header__title,
.property-detail-a-2col .property-detail-header:not(.headroom--not-top) .property-detail-price {
  display: none;
}
.property-detail-a-2col .property-detail-header:not(.headroom--not-top) .property-detail-header__content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--cire-hairline);
}
/* the theme prints a second, "mobile" action pair inside the same header;
   at rest one action row is enough at every width */
.property-detail-a-2col .property-detail-header:not(.headroom--not-top) .property-detail-header__mobile-actions {
  display: none;
}
.property-detail-a-2col .property-detail-header:not(.headroom--not-top) .property-detail-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: auto;
}
/* phones keep the sticky footer as the action surface — the at-rest header
   action constellation is removed from the flow entirely (verified: the
   rendered DOM carries .property-detail-mobile-footer with --save, --map,
   --tools, __schedule and the Request Info modal, so nothing is stranded) */
@media (max-width: 1023px) {
  .property-detail-a-2col .property-detail-header:not(.headroom--not-top) .property-detail-header__mobile-actions,
  .property-detail-a-2col .property-detail-header:not(.headroom--not-top) .property-detail-header__actions,
  .property-detail-a-2col .property-detail-header:not(.headroom--not-top) .property-detail-header__schedule {
    display: none;
  }
  .property-detail-a-2col .property-detail-header:not(.headroom--not-top) .property-detail-header__content {
    padding: 0;
    border-bottom: 0;
  }
}
/* the sticky bar's Request Info was clipping at 375 (measured: gold button
   cut by the bar's right edge). The sticky FOOTER already carries it. */
@media (max-width: 728px) {
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__schedule {
    display: none;
  }
}

/* --- 51.3 the gallery = the mockup grid --------------------------------- */
/* mobile: hero full width, two thumbs beneath it (mockup 52vw / 26vw) */
.property-detail-a-2col .cire-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
  height: auto;
}
.property-detail-a-2col .cire-gallery > .property-detail-slider__container {
  grid-column: 1 / 3;
  margin: 0;
  width: auto;
  max-width: none;
  height: 52vw;
  min-height: 0;
  min-width: 0;
}
.property-detail-a-2col .cire-gallery__thumbs {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 0;
  padding-bottom: 0;
  overflow: visible;
  min-width: 0;
}
.property-detail-a-2col .cire-gallery__thumb {
  flex: none;
  width: auto;
  min-height: 0;
  height: 26vw;
}
/* the mockup shows two thumbs on a phone; the rest are reachable through
   "View all photos", which is pinned to the hero at every width */
.property-detail-a-2col .cire-gallery__thumb:nth-of-type(n + 3) {
  display: none;
}
.property-detail-a-2col .cire-gallery__all {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 4;
  flex: none;
  align-self: auto;
  min-height: 0;
  border: none;
  border-radius: 999px;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  padding: 9px 18px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
/* the slick track has to fill the hero cell at every width */
.property-detail-a-2col .cire-gallery .property-detail-slider,
.property-detail-a-2col .cire-gallery .property-detail-slider .slick-list,
.property-detail-a-2col .cire-gallery .property-detail-slider .slick-track,
.property-detail-a-2col .cire-gallery .property-detail-slider .slick-slide,
.property-detail-a-2col .cire-gallery .property-detail-slider .slick-slide > div,
.property-detail-a-2col .cire-gallery .property-detail-slide,
.property-detail-a-2col .cire-gallery .property-detail-slider__image {
  height: 100%;
}

@media (min-width: 729px) {
  .property-detail-a-2col .cire-gallery > .property-detail-slider__container {
    height: 44vw;
  }
  .property-detail-a-2col .cire-gallery__thumb {
    height: 21vw;
  }
}

/* desktop: the mockup's 2.15fr / 1fr / 1fr x 3, expressed as a nested grid */
@media (min-width: 1024px) {
  .property-detail-a-2col .cire-gallery {
    grid-template-columns: 2.15fr 2fr;
    grid-template-rows: 1fr;
    height: min(58vh, 540px);
  }
  .property-detail-a-2col .cire-gallery > .property-detail-slider__container {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
  }
  .property-detail-a-2col .cire-gallery__thumbs {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    height: 100%;
  }
  .property-detail-a-2col .cire-gallery__thumb {
    height: auto;
  }
  .property-detail-a-2col .cire-gallery__thumb:nth-of-type(n + 3) {
    display: block;
  }
  .property-detail-a-2col .cire-gallery__thumb:nth-of-type(n + 7) {
    display: none;
  }
  .property-detail-a-2col .cire-gallery__all {
    right: 16px;
    top: auto;
    bottom: 16px;
  }
}

/* --- 51.4 the listing head ---------------------------------------------
   Shown at EVERY width. app.css hides this block at >=1366px, so it is
   re-shown from inside that same breakpoint (51.9).
   ---------------------------------------------------------------------- */
.property-detail-a-2col .cire-listing-summary {
  background: transparent;
  text-align: left;
  padding: 34px 0 0;
  margin: 0;
}
.property-detail-a-2col .cire-listing-summary__name {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.2;
  color: var(--cire-black);
  /* Nick's redline 2026-08-15: the band was already full width, but the
     address inside it was capped at 20ch - about 380px at 40px Playfair - so
     a long address ("Jungle Cove, Old Fort Bay, Nassau/New Providence,
     Bahamas") wrapped to three lines in the left third and the right half of
     the band read as dead space.  The cap came from the mockup, whose sample
     address is short.  The container in 51.1 (1240 max, 28px inset) is the
     only measure this line needs.  A short address is left-aligned and ends
     where it ends, so no max-width can stretch one. */
  max-width: none;
  text-wrap: balance;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.property-detail-a-2col .cire-listing-summary__place {
  font: inherit;
  color: inherit;
}
.property-detail-a-2col .cire-listing-summary .property-detail-price__price,
.property-detail-a-2col .cire-listing-summary .property-detail-price__price.fuelidx_price {
  display: block;
  font-family: var(--cire-sans);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
  margin: 10px 0 0;
}
.property-detail-a-2col .cire-listing-summary .property-detail-price__estimate {
  justify-content: flex-start;
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--cire-gray-med);
}
.property-detail-a-2col .cire-listing-summary .property-detail-price__estimate-amount {
  margin: 0 14px 0 0;
}
.property-detail-a-2col .cire-listing-summary__status {
  margin: 4px 0 0;
  font-family: var(--cire-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cire-gray-med);
}
.property-detail-a-2col .cire-listing-summary__status .cire-listing-summary__sep {
  margin: 0 0.5em;
}

/* --- 51.5 the facts row ------------------------------------------------- */
.property-detail-a-2col .cire-listing-summary .property-detail-sidebar__unit-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  row-gap: 12px;
  margin: 28px 0 0;
  padding: 20px 0;
  border-top: 1px solid var(--cire-hairline);
  border-bottom: 1px solid var(--cire-hairline);
  text-align: left;
}
.property-detail-a-2col .cire-listing-summary .property-detail-sidebar__unit-spec {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  flex: 1 1 46%;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.95rem;
}
.property-detail-a-2col .cire-listing-summary .property-detail-sidebar__unit-spec::before,
.property-detail-a-2col .cire-listing-summary .property-detail-sidebar__unit-spec::after {
  content: none;
  display: none;
}
.property-detail-a-2col .cire-listing-summary .property-detail-sidebar__unit-spec-figure {
  font-family: var(--cire-sans);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--cire-black);
  font-variant-numeric: tabular-nums;
}
.property-detail-a-2col .cire-listing-summary .property-detail-sidebar__unit-spec-label {
  font-family: var(--cire-sans);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cire-gray-med);
}
@media (min-width: 729px) {
  .property-detail-a-2col .cire-listing-summary .property-detail-sidebar__unit-spec {
    flex: 1 1 130px;
  }
}

/* --- 51.6 the view bar -------------------------------------------------- */
.property-detail-a-2col .cire-viewbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.property-detail-a-2col .cire-viewbar a {
  border: 1px solid var(--cire-gray-light);
  padding: 12px 22px;
  font-family: var(--cire-sans);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--cire-charcoal);
  text-decoration: none;
  background: var(--cire-white);
}
.property-detail-a-2col .cire-viewbar a:hover,
.property-detail-a-2col .cire-viewbar a:focus-visible {
  border-color: var(--cire-gold);
  color: var(--cire-charcoal);
}

/* --- 51.7 section labels, prose and spec tables -------------------------- */
.property-detail-a-2col .property-detail-main__content h2.property-detail-main__content-header,
.property-detail-a-2col .property-detail-main__description h2,
.property-detail-a-2col .property-detail-main__content .accordion__title,
.property-detail-a-2col .property-detail-main__content .accordion__title a,
.property-detail-a-2col .property-detail-location .page-section-header__title {
  font-family: var(--cire-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-black);
  text-align: left;
}
.property-detail-a-2col .property-detail-main__description h2,
.property-detail-a-2col .property-detail-main__content h2.property-detail-main__content-header {
  margin: 44px 0 16px;
}
.property-detail-a-2col .property-detail-main__description p,
.property-detail-a-2col #property-description {
  max-width: 68ch;
  text-align: left;         /* the theme justifies body copy; luxury does not */
  hyphens: none;
}
.property-detail-a-2col .property-detail-main__accordion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.property-detail-a-2col .property-detail-main__accordion-table tr {
  border-bottom: 1px solid var(--cire-hairline);
}
.property-detail-a-2col .property-detail-main__accordion-table tr:last-child {
  border-bottom: none;
}
.property-detail-a-2col .property-detail-main__accordion-table td {
  border: 0;
  padding: 11px 12px 11px 0;
  background: transparent;
  font-weight: 400;
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
}
.property-detail-a-2col .property-detail-main__accordion-table td:first-child {
  width: 46%;
  color: var(--cire-gray-med);
}
/* the Location band: left-aligned like everything else, and its directions
   link is charcoal — the theme shipped it in Christie's red, which the brand
   reserves for almost nothing */
.property-detail-a-2col .property-detail-location {
  text-align: left;
}
.property-detail-a-2col .property-detail-location__address {
  text-align: left;
}
.property-detail-a-2col .property-detail-location__directions {
  color: var(--cire-charcoal);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.property-detail-a-2col .property-detail-location__directions:hover {
  color: var(--cire-gold);
}

/* --- 51.8 the two-column main and the sidebar panel ---------------------- */
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-main__content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .property-detail-a-2col .property-detail-sidebar {
    flex: 0 0 380px;
    width: 380px;
    max-width: 380px;
    margin-left: 70px;
    padding-top: 44px;
  }
  /* the mockup's aside is one panel: Request Information, then the agent.
     The theme's sidebar is map / info / form, so the order is corrected and
     the two text blocks share one ground. No markup is moved. */
  .property-detail-a-2col .property-detail-sidebar {
    display: flex;
    flex-direction: column;
  }
  .property-detail-a-2col .property-detail-sidebar__form {
    order: 1;
    background: var(--cire-panel);
    padding: 32px 30px 8px;
    margin: 0;
  }
  .property-detail-a-2col .property-detail-sidebar__info {
    order: 2;
    background: var(--cire-panel);
    padding: 0 30px 32px;
    margin: 0;
    border: 0;
  }
  .property-detail-a-2col .property-detail-sidebar__map {
    order: 3;
    margin-top: 28px;
  }
  /* the facts already live under the photograph — the sidebar copy is a
     duplicate of the same numbers */
  .property-detail-a-2col .property-detail-sidebar__info > .property-detail-sidebar__unit-specs {
    display: none;
  }
  .property-detail-a-2col .property-detail-sidebar__agent {
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid var(--cire-hairline);
    background: transparent;
  }
}

/* --- 51.9 >=1366px: the theme hides the composed block; we put it back --- */
@media (min-width: 1366px) {
  .property-detail-a-2col .property-detail-main__mobile-highlights.cire-listing-summary {
    display: block;
  }
}

/* --- 51.10 the lede band ------------------------------------------------
   The mockup puts gallery / address / facts / viewbar across the FULL
   container and only splits into two columns for the sections beneath.
   The template now hoists those four blocks into .cire-lede, above
   .property-detail-main, so the photograph is 1184px wide at 1440 instead
   of being trapped in the 734px left column.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .cire-lede {
  margin-bottom: 8px;
}
@media (min-width: 1024px) {
  .property-detail-a-2col .cire-lede {
    margin-bottom: 26px;
  }
}

/* --- 51.11 the marketing title and body copy ---------------------------- */
.property-detail-a-2col .property-detail-main__content h1,
.property-detail-a-2col .property-detail-main__description h1 {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.25;
  color: var(--cire-charcoal);
  letter-spacing: 0;
  margin: 0 0 4px;
}
/* the theme justifies the description; justified rag is not a luxury texture */
.property-detail-a-2col .property-detail-main__content p,
.property-detail-a-2col .property-detail-main__content li {
  text-align: left;
}

/* --- 51.12 the sidebar panel is one ground, not two --------------------- */
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-sidebar__form {
    margin-bottom: 0;
    border: 0;
  }
  .property-detail-a-2col .property-detail-sidebar__info {
    margin-top: 0;
    border-top: 0;
  }
}

/* --- 51.13 corrections made after rendering at 1444 ----------------------
   Every one of these was measured, not guessed:
     .property-detail-main__description carries padding-left:30px, so the
     description started at x=160 while the photograph and the address
     started at x=130 — two left edges on the same page.
     Its paragraphs stayed text-align:justify: the theme's rule matches at
     the same specificity, so the scope is deepened rather than shouted at
     with !important.
     The marketing title is an unclassed <div> (28px, sans) — the first child
     of the description block.
     The sidebar's agent card is a SIBLING of __info, not a child, so it did
     not inherit the panel ground; __info itself renders empty (32px) once
     its duplicate facts row is hidden.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-main__description {
  padding-left: 0;
  padding-right: 0;
}
.property-detail-a-2col .property-detail-main__content .property-detail-main__description p,
.property-detail-a-2col .property-detail-main__content .property-detail-main__description li {
  text-align: left;
}
/* Until 2026-08-15 the marketing title carried a template-emitted inline
   style - font-size:1.75rem; font-weight:500; line-height:normal;
   margin-bottom:20px - so an inline declaration outranked this rule and the
   clamp below never applied at any width.  The template now emits
   .cire-listing-title and those four values live here instead: the rendered
   result is byte-for-byte what shipped in 2.0c22, and the size joins the
   nine-role type scale when that rolls out rather than in this unit. */
.property-detail-a-2col .property-detail-main__description > .cire-listing-title {
  font-family: var(--cire-serif);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: normal;
  color: var(--cire-charcoal);
  letter-spacing: 0;
  margin: 0 0 20px;
}
/* 504 of 1045 live listings carry a blank feed title, which rendered an empty
   div that still spent its 20px bottom margin. */
.property-detail-a-2col .property-detail-main__description > .cire-listing-title:empty {
  display: none;
}
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-sidebar .property-detail-sidebar__form {
    padding: 32px 30px 8px;
  }
  .property-detail-a-2col .property-detail-sidebar .property-detail-sidebar__info {
    padding: 0;
  }
  .property-detail-a-2col .property-detail-sidebar .property-detail-sidebar__agent {
    order: 2;
    background: var(--cire-panel);
    padding: 20px 30px 32px;
    margin: 0;
    border-top: 1px solid var(--cire-hairline);
  }
}

/* --- 51.14 the justified description ------------------------------------
   The rag is not coming from a stylesheet. The feed's own description HTML
   carries style="text-align: justify;" on EVERY paragraph, inline — verified
   in the rendered markup. An inline style outranks any selector, so this is
   the one place in this file where !important is the correct tool rather
   than a shortcut; the alternative is rewriting feed content in PHP, which
   is a data change, not a presentation change.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-main__description p[style],
.property-detail-a-2col .property-detail-main__description li[style] {
  text-align: left !important;
}

/* --- 51.15 a listing with no thumbnail rail ------------------------------
   The rail only prints when the listing has more than one photograph
   (template: count($cire_thumbs) > 1), but both gallery grids pin the slick
   hero to the first column, so a no-photo or single-photo listing rendered a
   half-width photograph against an empty half band.  Measured at 1440 on
   listing 446 (the mrt_photo.jpg placeholder): band w=1184, hero w=608.
   When the hero is the gallery's only child it takes the whole band at every
   width.  :only-child, not :has(), so there is no support question.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .cire-gallery > .property-detail-slider__container:only-child {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

/* --- 51.16 the open-house band ------------------------------------------
   app.css ships this band as black-on-black: background #000000 with
   __date, __add a and the calendar icon all at #000000, and its title takes
   51.7's var(--cire-black).  Measured contrast ratio 1.00 on five text
   nodes from inside the rendered page - the whole band reads as a solid
   black rectangle.  That is Nick's contrast law failing outright, and no
   band in the approved mockup is black, so the ground is retired instead of
   the text being recoloured: this becomes the same white, hairline-bounded
   facts strip the rest of the template uses (D4), with the section label
   51.7 already gives it.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-open-house {
  display: block;
  background: var(--cire-white);
  border: 0;
  border-top: 1px solid var(--cire-hairline);
  border-bottom: 1px solid var(--cire-hairline);
  margin: 0 0 32px;
  padding: 0;
}
.property-detail-a-2col .property-detail-open-house__title {
  max-width: none;
  padding: 20px 0 0;
  margin: 0;
  color: var(--cire-black);
}
.property-detail-a-2col .property-detail-open-house__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 40px;
  padding: 12px 0 20px;
}
.property-detail-a-2col .property-detail-open-house__date-container {
  position: relative;
  flex: 0 1 auto;
  padding: 0 0 0 26px;
  margin: 0;
}
.property-detail-a-2col .property-detail-open-house__date-container .icon {
  position: absolute;
  top: 2px;
  left: 0;
  font-size: 1rem;
  color: var(--cire-gray-med);
}
.property-detail-a-2col .property-detail-open-house__date {
  font-family: var(--cire-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cire-charcoal);
  font-variant-numeric: tabular-nums;
}
.property-detail-a-2col .property-detail-open-house__add a {
  font-family: var(--cire-sans);
  font-size: 0.8rem;
  color: var(--cire-charcoal);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.property-detail-a-2col .property-detail-open-house__add a:hover,
.property-detail-a-2col .property-detail-open-house__add a:focus-visible {
  color: var(--cire-gold);
}

/* --- 51.17 one left edge from 1024px up ---------------------------------
   Measured, not read: at 1008 the header's controls start at x=28 and the
   photograph at x=10; at 1350, x=83 and x=65.  They agree again at 1424 and
   1584.  51.1 insets every .row.extended-width in this scope by 28px, but
   app.css overrides the bands that also carry .no-padding-mobile - the lede
   and .property-detail-main - to 10px !important below 1366px
   (@media max-width: 85.3125em).  The header row does not carry that class,
   so the page has two left edges across the whole laptop band.
   The 10px inset is deliberate on phones (it is what takes the gallery
   nearly edge to edge, and 51.2 hides the header controls below 1024), so
   the correction starts at 1024.  !important only because the rule it has
   to outrank is !important.
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .property-detail-a-2col .row.extended-width.no-padding-mobile {
    padding-inline: 28px !important;
  }
}

/* --- 51.18 the pill row never runs under View all photos ----------------
   Rendered at 375 with all five tags RuhlProp::getTags can emit: the row
   wraps, but the third pill is clipped to "3D T" because
   .property-detail-slider__meta is absolutely positioned with no width
   limit while .cire-gallery__all is pinned to the same top-right corner.
   Two pills fit (the Sold + Price Reduced case verified in this pass);
   three do not, and three needs no virtual tour - open house + Sold +
   price reduced is enough.
   At >=1024 the View-all button sits at the bottom of the hero (51.3), so
   the row only has to clear the hero's own inset there.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-slider__meta {
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 170px);
}
.property-detail-a-2col .property-detail-slider__meta-tag + .property-detail-slider__meta-tag {
  margin-left: 0;
}
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-slider__meta {
    max-width: calc(100% - 32px);
  }
}

/* ==========================================================================
   52 NICK'S iPAD REDLINES ON 2.0c31  (2026-08-15)

   Three redlines, all on the live listing detail page (Jungle Cove, x-17448):

     1 "Please clean these buttons up" — the toolbar carried FOUR controls in
       THREE treatments (46px circles for Save and Share, a ~110px hairline
       rectangle for Tools, the gold Request Info rectangle), and once the bar
       stuck it grew a fifth and sixth on the LEFT: a second Share and a boxed
       "View Map" label.
     2 "Fix the box size in request info" — the message textarea clipped its
       own prefill.
     3 "I thought the request info box was also going to have a request
       showing option per your original designs?" — he is right; see 52.4.

   THE MOCKUP IS THE SPEC. mockups/cire-detail-mockup.html, verbatim:

     .save-share{display:flex;gap:14px}
     .roundbtn{width:48px;height:48px;border-radius:50%;
       border:1px solid var(--gray-light);background:var(--white);
       display:flex;align-items:center;justify-content:center;
       cursor:pointer;font-size:1rem;color:var(--charcoal)}
     .roundbtn:hover{border-color:var(--gold)}
     .roundbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

   The mockup's toolbar is ONE shape — an equal, uniformly bordered circle per
   icon control — beside exactly one solid-gold rectangle (.btn/.btn-contact)
   as the primary. It draws no Tools control and no boxed map label. So Tools
   joins the circles, and the stuck bar's left cluster is handed back to the
   platform's own breakpoint (Map already lives inside the Tools dropdown at
   every width >= 729, and the left Share was a duplicate of the right one).
   ========================================================================== */

/* --- 52.1 Tools joins the circle family --------------------------------
   Sizes mirror the ones Save and Share already use in each state, so the
   three controls are one row of equal circles: 46 at rest, 44 on phones,
   40 stuck, 44 stuck from 1024 up. The "Tools" text stays in the DOM at
   font-size:0 exactly as Share's does, so the accessible name survives.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-header__action-button--tools {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  gap: 0;
  border: 1px solid var(--cire-gray-light);
  border-radius: 50%;
  background: var(--cire-white);
  color: var(--cire-charcoal);
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.property-detail-a-2col .property-detail-header__action-button--tools .icon {
  font-size: 1.05rem;
  line-height: 1;
  color: inherit;
}
.property-detail-a-2col .property-detail-header__action-button--tools:hover {
  border-color: var(--cire-gold);
  background: var(--cire-white);
  color: var(--cire-charcoal);
}
.property-detail-a-2col .property-detail-header__action-button--tools:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 2px;
}
@media (max-width: 728px) {
  .property-detail-a-2col .property-detail-header__action-button--tools {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
}
/* stuck state: section 21 sized Tools as a rectangle (height 40 / padding
   0 18px) at (0,3,0), so the circle has to be restated at that weight. */
.property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--tools {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-header.headroom--not-top .property-detail-header__action-button--tools {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
}
/* section 49 gives every control in the mobile strip padding:0 12px, which
   would put 24px of padding inside a fixed-width circle. */
@media (max-width: 1023px) {
  .property-detail-a-2col .property-detail-header__action-button--save,
  .property-detail-a-2col .property-detail-header__action-button.a2a_dd,
  .property-detail-a-2col .property-detail-header__action-button--tools {
    padding: 0;
  }
}

/* One gap, measured. app.css puts margin-right:.625rem on every
   .property-detail-header__action-button and margin-left:10px on
   .property-detail-header__schedule, which rides on top of the strip's own
   14px flex gap: 24px between the circles and 34px before Request Info.
   The margins go, the mockup's single 14px gap stays (.save-share{gap:14px}).
   The <li> becomes a flex box only so it hugs its control; app.css sets no
   display on these items, so no platform breakpoint is being defeated. */
.property-detail-a-2col .property-detail-header__actions > li {
  display: flex;
  align-items: center;
}
.property-detail-a-2col .property-detail-header__actions > li > .property-detail-header__action-button,
.property-detail-a-2col .property-detail-header__actions > li > .property-detail-header__schedule,
.property-detail-a-2col .property-detail-header__actions > li > a.button.property-detail-header__schedule {
  margin: 0;
}

/* --- 52.2 the stuck bar's left cluster ---------------------------------
   .property-detail-header__mobile-actions is the platform's PHONE action
   pair (a duplicate Share + "View Map"). app.css hides it from 1024 up:

     @media (min-width:1024px){.property-detail-header__mobile-actions{display:none}}   (0,1,0)

   but section 46.5 sets `display:flex` on the same class with NO media query
   at (0,2,0), which outranks that hide at every width. At rest section 51.2
   hides the cluster again, so the leak only became visible once the bar
   stuck — which is exactly the state Nick screenshotted. This restores the
   platform's own rule INSIDE the platform's own breakpoint rather than
   removing 46.5's phone wrapping fix. Nothing is stranded: the Tools
   dropdown carries "Map" at >= 729, and Share is still in the strip.
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .property-detail-a-2col .property-detail-header__mobile-actions {
    display: none;
  }
}

/* --- 52.3 the inquiry panel: the message box, the rhythm, the turnstile --
   REDLINE 2. The prefill is one long sentence — "I want an expert to answer
   my questions on this property - <address>, MLS <n>" — and Gravity Forms'
   legacy stylesheet caps a `textarea.small` at 96px, about two and a half
   lines in a 320px column, so the sentence scrolled inside its own box on
   first paint. The floor below fits the longest live prefill at both widths;
   the template's script then sizes the box to its content on load and grows
   it as the visitor types (capped, so it can never eat the panel).
   ---------------------------------------------------------------------- */
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper textarea {
  min-height: 132px;
  line-height: 1.55;
  resize: vertical;
  overflow-y: auto;
}
/* the mockup's field rhythm: `form .field{margin-bottom:14px}` */
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper .gform_fields > li.gfield {
  margin-bottom: 14px;
}
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper .gform_fields > li.gfield.gform_hidden,
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper .gform_fields > li.gfield.gform_validation_container {
  margin-bottom: 0;
}
/* the two half-width selects share one row and had no gutter between them,
   so the right box's caret sat on the panel's field edge with the label
   running under it. 7px a side = the same 14px the fields use vertically. */
.property-detail-a-2col .property-detail-sidebar__form .gform_wrapper select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--cire-gold);
  border-radius: 0;
  background-color: var(--cire-white);
  padding: 11px 30px 11px 13px;
  font-family: var(--cire-sans);
  font-size: 1rem;
  color: var(--cire-charcoal);
}
/* NOT DONE, deliberately: the two half-width selects sit edge to edge with no
   gutter. Gravity Forms' own readyclass.min.css sizes gf_left/right_half from
   @media(min-width:641px) and prints after this file, so a 7px gutter needs
   !important on a width - not worth it for 7px. The caret clearance above is
   the part that was actually unreadable, and that is fixed. */
/* Cloudflare's widget ships its own <style> in the footer:
     #cf-turnstile-gf-3 { margin-left: -15px; }
   an ID selector printed after this file, so it takes (1,2,0) to unpick.
   The widget is a fixed 300px box; at the panel's 320px measure it fits
   exactly once it stops hanging 15px outside the field edge. */
.property-detail-a-2col .property-detail-sidebar__form .cf-turnstile,
.property-detail-a-2col .property-detail-sidebar__form #cf-turnstile-gf-3 {
  margin-left: 0;
  max-width: 100%;
}
.property-detail-a-2col .property-detail-sidebar__form .gform_footer {
  gap: 14px;
  padding-top: 4px;
}

/* PHONES: the panel was 35px wider than the viewport. app.css sizes the
   sidebar at a fixed 25rem (400px) and hides it below 1024 -
     @media (max-width:1023px){.property-detail-sidebar{display:none}}   (0,1,0)
   - but section 51.8 sets display:flex on the same element with no media
   query at (0,2,0), so on a phone the sidebar renders anyway, at its desktop
   width, and the page scrolls sideways (documentElement 410 vs 375).
   Removing that override would take the whole inquiry panel off phones and
   leave only the sticky footer's modal - a lead-surface change, not a redline
   fix, so it is written up for Nick rather than done here. What IS fixed is
   the width: the panel now fits the phone it is on.
   ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .property-detail-a-2col .property-detail-sidebar {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* --- 52.4 Request a Showing (REDLINE 3) --------------------------------
   The mockup has always drawn this, and it was never built:

     <div class="seclabel" style="font-size:.72rem;margin:18px 0 4px">Schedule a Property Tour</div>
     <div class="radio-row"><span class="dot"></span> In Person, On Site</div>
     <div class="radio-row"><span class="dot"></span> Virtual Online Tour</div>
     .radio-row{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:.92rem}
     .radio-row .dot{width:18px;height:18px;border-radius:50%;
                     border:1px solid var(--gold);flex:none}

   It is PRESENTATION ONLY. No Gravity Forms field is added, nothing new is
   posted, and the two rows are <button type="button"> so they cannot submit.
   Choosing one rewrites the message the form already prefills — the same
   mechanism the platform's own mobile "I would like to schedule a showing"
   toggle uses (js/mrt-prop-details.js:316), and the same opening phrase, so
   the two surfaces read alike downstream. The mockup draws no checked state;
   gold fill on the dot is the minimum needed to show which one is chosen.
   ---------------------------------------------------------------------- */
.property-detail-a-2col .cire-request-type[hidden] {
  display: none;
}
.property-detail-a-2col .cire-request-type-host {
  list-style: none;
  padding: 0;
}
.property-detail-a-2col .cire-request-type__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cire-black);
  margin: 18px 0 4px;
}
.property-detail-a-2col .cire-request-type__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 10px 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--cire-sans);
  font-size: 0.92rem;
  line-height: 1.4;
  letter-spacing: 0.015em;
  color: var(--cire-charcoal);
  text-align: left;
  cursor: pointer;
}
.property-detail-a-2col .cire-request-type__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--cire-gold);
  background: var(--cire-white);
  flex: none;
}
.property-detail-a-2col .cire-request-type__option:hover {
  color: var(--cire-black);
}
.property-detail-a-2col .cire-request-type__option:focus-visible {
  outline: 2px solid var(--cire-gold);
  outline-offset: 3px;
}
.property-detail-a-2col .cire-request-type__option[aria-checked="true"] {
  color: var(--cire-black);
}
.property-detail-a-2col .cire-request-type__option[aria-checked="true"] .cire-request-type__dot {
  background: var(--cire-gold);
  box-shadow: inset 0 0 0 3px var(--cire-white);
}


/* === Section 52: Nick evening redlines (2026-08-15) =======================
   1 Map jump button removed - the map already lives further down the page.
   2 Toolbar de-circled: the bordered circles read desktop-publishing, not
     luxury. Now quiet thin icons, charcoal, gold on hover - the BHS masthead
     treatment Nick chose this morning, applied to the listing toolbar.
   3 Results-card heart nudged up-right 2px to align with the NEW flag
     (Nick, by eye). */
.property-detail-a-2col .property-detail-view-bar { display: none !important; }
.property-detail-header__actions .property-detail-header__action-button,
.property-detail-header__mobile-actions .property-detail-header__action-button {
  border: none !important;
  background: transparent !important;
  border-radius: 0;
  color: #384249;
}
.property-detail-header__actions .property-detail-header__action-button:hover,
.property-detail-header__mobile-actions .property-detail-header__action-button:hover {
  color: #c9ac77;
  border: none !important;
}
.page-template-template-property-search-results .listing-card__actions .save-listing {
  transform: translate(2px, -2px);
}


/* ============================================================
   53. c52 redlines (2026-08-16 morning)
   Long single-crumb titles (sell-your-home) ran off the right
   edge of the viewport at 375 and overlapped the hero. Per Nick:
   do NOT hide the band - fix its spacing. Crumbs now wrap inside
   the band's own edges on every page; nothing else changes.
   ============================================================ */
.breadcrumb-container {
  overflow: hidden;
}
.breadcrumb-container .breadcrumb {
  white-space: normal;
  overflow-wrap: break-word;
  display: inline;
  max-width: 100%;
}