/* ============================================================
   SECTION: FLOORPLAN FILTERS + FLOOR PICKER — START
   Ported from live-html-css-lvl29. Hero-style band with a photo
   background and a dark diagonal gradient: intro copy on the left, the
   building render with its 29-floor clickable SVG overlay, and the select
   filters. Floors are invisible until hover/active, then fill bronze.
   ============================================================ */
.special-floorplan-filters {
  position: relative;
  display: flex;
  flex-flow: wrap;
  padding: 135px 70px 0;
  background-size: cover;
  background-position: center center;
}

.custom-filters-gradient {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    130deg,
    rgba(56, 47, 45, 0.75),
    rgba(0, 0, 0, 0.9) 80%
  );
}

.flp-image-container {
  position: relative;
  width: 60%;
}

.flp-intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 64%;
}

.flp-intro h2.section-heading {
  margin: -10px 0 20px;
}

/* --- Building render + floor picker overlay --- */
.special-floor-picker {
  position: relative;
  width: 56.66%;
  margin-left: 43.33%;
}

.special-floor-picker .property-sitemap-img {
  display: block;
  width: 100%;
  height: auto;
}

.special-floor-picker svg#floors {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.special-floor-picker svg#floors g.floor {
  cursor: pointer;
}

.special-floor-picker svg#floors g.floor path {
  opacity: 0;
  fill: #9f662d;
}

.special-floor-picker svg#floors g.floor:hover path,
.special-floor-picker svg#floors g.floor.active path {
  opacity: 0.6;
}

.special-floor-picker svg#floors g.floor text {
  fill: #ffffff;
  font-weight: 100;
  opacity: 0.5;
}

.special-floor-picker svg#floors g.floor:hover text,
.special-floor-picker svg#floors g.floor.active text {
  opacity: 1;
}

/* --- Select filters --- */
.flp-filter-container {
  position: relative;
  width: 40%;
  padding: 10px;
  font-size: 0;
}

.flp-filter-container .filter-box {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 12px);
  margin: 15px 6px;
  border-bottom: 2px solid;
  font-size: 0.778rem;
  font-weight: 500;
}

.flp-filter-container .filter-box .nice-select {
  width: 100%;
  padding: 8px;
  background-color: transparent;
  border: none;
  float: none;
  line-height: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
}

.flp-filter-container .filter-box .nice-select > span {
  color: #ffffff;
}

.flp-filter-container .filter-box .nice-select ul.list {
  width: 100%;
  max-height: 440px;
  overflow: auto;
}

/* ===== Move-in-date filter — START =====
   The date field is a bare <input>, so without this it renders as a white
   browser textbox next to five transparent underlined selects. v1 strips it
   back to match (v1 style.css .flp-date-selector). The placeholder inherits
   its colour from the text-color-light class already on the input rather
   than hardcoding #fff, so the backend can still re-theme it. */
.flp-filter-container .filter-box .flp-date-selector {
  width: 100%;
  padding: 0 10px;
  /* inputs do not inherit type styling, so the label would sit a couple of
     px smaller than the five nice-select labels beside it */
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  border: none;
  line-height: 42px;
  font-weight: 700;
  text-transform: uppercase;
}

.flp-filter-container .filter-box .date-dropdown {
  width: 100%;
}

.flp-filter-container .filter-box .flp-date-selector {
  border-radius: 0;
  cursor: pointer;
}
.flp-filter-container .filter-box .flp-date-selector::placeholder {
  color: inherit;
  opacity: 1;
}
/* ===== Move-in-date filter — END ===== */

/* --- View selector tabs --- */
/* ===== View selector tabs — START =====
   The tab sits on the beige ground between the filter hero and the first
   plan row and needs breathing room on both sides, or it reads as part of
   the listing. */
.flp-views {
  padding: 60px 0 0;
  text-align: center;
}

.flp-views .view-selectors {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ===== View selector tabs — END ===== */

li.view-selector {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1px;
  padding: 12px 25px;
  line-height: 1;
  cursor: pointer;
}
/* ============================================================
   SECTION: FLOORPLAN FILTERS + FLOOR PICKER — END
   ============================================================ */

/* ============================================================
   SECTION: FLOORPLAN LISTING — START
   Matches live-html-css-lvl29's floorplans listing: each plan is one
   full-width ROW on a beige ground, split into five 20% columns divided by
   2px rules — image | title | bed/bath+sqft | price/availability | button.
   This markup ships the same pieces as a stacked card, so the card is
   turned back into a row here and the parts are reordered with flex.
   component-common.css's .new-section.floorplan-page card rules are
   overridden where they conflict.
   ============================================================ */
/* The beige ground comes from bg-accent on the wrapper in the markup and the
   card's white from bg-light, so both stay backend-controllable.

   IMPORTANT: every selector below is written .new-section.floorplan-page — the
   same three-class shape component-common.css uses for its stacked-card rules.
   style.css loads last, so equal specificity means these win. Written as plain
   .floorplan-page they LOSE, the framework's repeat(4, 1fr) grid and
   flex-direction: column card take back over, and each row collapses into
   five ~70px columns that wrap one word per line. */
.new-section.floorplan-page .card-container {
  padding-top: 40px;
  /* NOTE: this padding is also what stops the last .flp-row bottom margin
     collapsing out through the section. Take it to 0 and the margin escapes,
     pushing the footer down over 80px of white body background. */
  padding-bottom: 80px;
}

/* one plan = one full-width row, overriding the framework's 4-up grid */
.new-section.floorplan-page .flp-row {
  display: flex;
  flex-flow: column;
  /* no gap: the alternating bands have to meet edge to edge, or the beige
     ground shows through between them and every row looks striped */
  gap: 0;
  /* the space under the list belongs to .card-container padding; as a margin
     here it collapses out of the section instead */
  margin-bottom: 0;
}

/* separates the available list from the "Unavailable Floor Plans" heading */
.new-section.floorplan-page .available_flp {
  margin-bottom: 60px;
}

/* ===== Alternating row bands — START =====
   Odd rows are the white card, even rows fall through to the section own
   bg-accent ground. Done with :nth-child rather than the .odd/.even classes
   in the markup because the backend emits the same parity class on every
   row, so those cannot be relied on. No colour is named here: the white
   still comes from bg-light on the card, and the beige from the section, so
   both stay backend-controllable. */
.new-section.floorplan-page .flp-row > .single-floorplan:nth-child(even) .flp-card {
  background-color: transparent;
}
/* ===== Alternating row bands — END ===== */

/* ===== Five-row scroll cap — START =====
   Past five plans the list scrolls inside itself instead of pushing the
   footer off the page. --flp-row-h is one row: 140px of plan image plus the
   card 20px top and bottom padding. With five or fewer rows the content is
   shorter than the cap, so no scrollbar appears at all. */
.new-section.floorplan-page .flp-row {
  --flp-row-h: 180px;
  max-height: calc(var(--flp-row-h) * 5);
  overflow-y: auto;
}

.new-section.floorplan-page .flp-row::-webkit-scrollbar {
  width: 6px;
}

.new-section.floorplan-page .flp-row::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}
/* ===== Five-row scroll cap — END ===== */

.new-section.floorplan-page .single-floorplan {
  width: 100%;
  padding: 0;
}

/* the card is the row itself, so it must be laid out across, not down */
.new-section.floorplan-page .flp-card {
  position: relative;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  height: auto;
  padding: 20px;
}

/* --- 1. Image column (DOM order 2, pulled first) --- */
.new-section.floorplan-page .flp-card-body {
  order: 1;
  flex: 0 0 18%;
  max-width: 18%;
  height: 140px;
  padding: 0;
  border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.new-section.floorplan-page .flp-card-body .card-img-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.new-section.floorplan-page .flp-card-body .flp-single-page-img-blk {
  display: block;
  width: 100%;
  height: 100%;
}

/* plans are line art — contain, never crop */
.new-section.floorplan-page .flp-card-body img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The framework leaves the offer badge in normal flow, where it would stack
   above the plan and eat the fixed row height. Float it over the image. */
.new-section.floorplan-page .flp-discount-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: 100%;
}
.new-section.floorplan-page .flp-discount-wrap .discount-on {
      display: flex;
    gap: 6px;
    align-items: center;
}

.new-section.floorplan-page .discount-on {
  min-height: 0;
  padding: 4px 8px;
  font-size: 0.611rem;
  line-height: 1.2;
}

/* --- 2 + 3. Title and bed/bath columns --- */
.new-section.floorplan-page .flp-card-header {
  order: 2;
  flex: 0 0 42%;
  max-width: 42%;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

/* .flp-details is nested INSIDE .flp-title-wrap in the Swifty markup, not a
   sibling of it, so the title/bed-bath split has to happen one level down —
   title-wrap is the two-column container, not itself a column. */
.new-section.floorplan-page .flp-card-header .flp-title-wrap {
  display: flex;
  flex-flow: row;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.new-section.floorplan-page .flp-card-header .flp-title-wrap > .flp-more-details {
  display: flex;
  flex-flow: column;
  justify-content: center;
  width: 50%;
  padding: 0 30px;
}

/* v1: .flp-primary-info h2 { font-size: 30px } */
.new-section.floorplan-page .flp-card-header .flp-title {
  margin: 0;
  
}

.new-section.floorplan-page .flp-card-header .flp-details {
  display: flex;
  flex-flow: column;
  justify-content: center;
  width: 50%;
  padding: 0 30px;
  font-weight: 300;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
}

/* the status dot must hold the first line when the date wraps to two */
.new-section.floorplan-page .availability-dot {
  align-items: flex-start;
}

.new-section.floorplan-page .availability-dot::before {
  flex: 0 0 8px;
  margin-top: 0.45em;
}

/* The 360 and favourite icons have no column of their own in a five-column
   row, so they sit over the foot of the plan image instead. */
.new-section.floorplan-page .flp-icon-wrap {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 3;
  gap: 10px;
}

/* --- 4 + 5. Price/availability and button --- */
.new-section.floorplan-page .flp-card-footer {
  order: 3;
  flex: 0 0 40%;
  max-width: 40%;
  flex-wrap: nowrap;
  align-items: stretch;
  padding: 0;
}

.new-section.floorplan-page .flp-card-footer .flp-card-meta {
  display: flex;
  flex-flow: column;
  justify-content: center;
  width: 58%;
  padding: 0 30px;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
  border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.new-section.floorplan-page .flp-card-footer .flp-text-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.new-section.floorplan-page .flp-card-footer .flp-disc-price {
  font-weight: 700;
}

.new-section.floorplan-page .flp-card-footer p {
  margin: 5px 0;
  font-weight: 300;
}

.new-section.floorplan-page .flp-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42%;
  padding: 0 20px;
}

/* v1: a.flp-leasing-btn — solid button with a soft drop shadow */
.new-section.floorplan-page .flp-btn-wrap .flp-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-weight: 700;
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.new-section.floorplan-page .flp-btn-wrap .flp-next-btn:hover {
  opacity: 0.7;
}
/* ============================================================
   SECTION: FLOORPLAN LISTING — END
   ============================================================ */

/* ============================================================
   SECTION: FLOORPLAN FILTER — START
   The filter bar on floorplan.html. Structure, the dropdown buttons and
   the card grid come from component-common.css's .new-section.floorplan-page
   rules — the wrapper carries both classes so those apply. Everything below
   is the v2 theme layer for the parts that file does not define: the open
   panel, clear button, active-filter chips, histogram, range slider and
   datepicker shells.
   ============================================================ */
.floorplan-page .filter-container {
  padding: 30px 0;
}

.floorplan-page .floorplan-filter-filters {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  gap: 12px;
}

.floorplan-page .flp-button-group {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  gap: 12px;
}

/* --- Dropdown shell --- */
.floorplan-page .flp-dropdown {
  position: relative;
}

.floorplan-page .flp-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 40px 12px 18px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* caret */
.floorplan-page .flp-dropdown-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}

.floorplan-page .flp-dropdown.open .flp-dropdown-btn::after {
  transform: translateY(-30%) rotate(-135deg);
}

.floorplan-page .flp-filter-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}

/* --- Open panel --- */
.floorplan-page .flp-dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 280px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid rgba(80, 44, 30, 0.15);
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.floorplan-page .flp-dropdown.open .flp-dropdown-content {
  display: block;
}

.floorplan-page .flp-dropdown-content label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #502c1e;
  cursor: pointer;
}

.floorplan-page .flp-dropdown-content input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #9f662d;
}

/* --- Clear --- */
.floorplan-page .flp-clear-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 0;
  background: none;
  border: 0;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: underline;
  color: #9f662d;
  cursor: pointer;
}

/* --- Active filter chips --- */
.floorplan-page .selected-filters-container,
.floorplan-page .active-filters {
  display: flex;
  flex-flow: wrap;
  gap: 8px;
}

.floorplan-page .selected-filters-container:empty,
.floorplan-page .active-filters:empty {
  display: none;
}

.floorplan-page .selected-filters-container > *,
.floorplan-page .active-filters > * {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #9f662d;
  border-radius: 30px;
  font-size: 0.778rem;
  color: #9f662d;
}

/* --- Histogram behind the sliders --- */
.floorplan-page .histogram-container {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 60px;
  margin-bottom: 10px;
}

.floorplan-page .histogram-container > * {
  flex: 1 1 auto;
  background: rgba(159, 102, 45, 0.25);
}

.floorplan-page .histogram-container > .in-range {
  background: #9f662d;
}

/* --- Range slider shell (the library draws the handles) --- */
.floorplan-page .slider-container {
  position: relative;
  height: 4px;
  margin: 18px 6px;
  background: rgba(80, 44, 30, 0.2);
  border-radius: 2px;
}

.floorplan-page .slider-range-output {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-weight: 600;
  color: #502c1e;
}

/* --- Datepicker shell --- */
.floorplan-page .datepicker-container {
  min-width: 260px;
}

/* --- Favourites toggle --- */
.floorplan-page .swifty-favorite-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}

.floorplan-page .swifty-favorite-filter-btn[hidden] {
  display: none;
}
/* ============================================================
   SECTION: FLOORPLAN FILTER — END
   ============================================================ */

/* The revised hero owns the visible filters; retain the AJAX listing and cards. */
.floorplan-filter-wrapper .filter-container,
.floorplan-filter-wrapper .floorplan-filter {
  display: none;
}
.new-section.floorplan-page .floorplan-filter__wrap{
  display: none;
}
.special-floorplan-filters .filter-box select.nice-one {
  display: block;
  width: 100%;
  padding: 8px 10px;
  /* `appearance: auto` drew the native OS arrow on top of the white SVG chevron
     that gallery-5.css paints via `.text-color-light select` (!important), giving
     every filter two carets. Suppressing the native one keeps the themed chevron. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
}

.special-floorplan-filters .filter-box select.nice-one option {
  color: #000000;
  background: #ffffff;
}
/* Hide the legacy listing filter bar; the revised hero renders the visible filters. */
.new-section.floorplan-page .floorplan-filter {
  display: none;
}

.new-section.floorplan-page .view-selectors + .swifty-favorite-filter-btn {
  display: inline-flex;
  margin: 20px 0 0;
}

/* ============================================================
   SECTION: RESPONSIVE — START
   Ported from the v1 static build's floorplan rules, style.css:5470-5744
   (html-themes/lvl29life-rebuild/lvl29-v2/assets/css/style.css), which this
   file had no equivalent of — floorplan-page-8.css shipped with no media
   queries at all, so the five-column row and the two-up filter grid held
   their desktop shape all the way down to phone widths.

   Every selector is restated at .new-section.floorplan-page for the same
   reason the base rules above are: written as plain .floorplan-page they lose
   to component-common.css's own three-class card rules.
   ============================================================ */
/* --- Tablet: the hero band drops to intro copy only. This is where the live
   site switches (it reads as one column well before 767), so the treatment
   belongs here rather than in the phone block below. --- */
@media (max-width: 1024px) {
  /* Listing rows keep their five columns at this width — just tighten the
     gutters so the text stops touching the dividers. */
  .new-section.floorplan-page .flp-card-header .flp-title-wrap > .flp-more-details,
  .new-section.floorplan-page .flp-card-header .flp-details,
  .new-section.floorplan-page .flp-card-footer .flp-card-meta {
    padding: 0 15px;
  }

  .new-section.floorplan-page .flp-btn-wrap {
    padding: 0 10px;
  }

  /* The building render and its 29-floor SVG overlay go: the floor hotspots
     are only a few pixels tall here, so the picker is unusable, and the render
     overlaps the copy. The filter selects go with it, per the design. */
  .special-floorplan-filters {
    padding: 100px 15px 40px;
  }

  .special-floorplan-filters .special-floor-picker,
  .special-floorplan-filters .flp-filter-container {
    display: none;
  }

  /* THE FIX for the copy disappearing: .flp-intro is position:absolute at 64%
     width, overlaid on the render. With the render hidden its container has no
     height, so the copy collapsed out of the band entirely. Both go back into
     normal flow at full width — top/left are cleared explicitly because the
     base rule sets them to 0. */
  .special-floorplan-filters .flp-image-container {
    width: 100%;
  }

  .special-floorplan-filters .flp-intro {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  /* --- Listing rows: the five 20% columns have no width left here, so the
     row becomes a stacked card and its vertical dividers turn horizontal. --- */
  .new-section.floorplan-page .flp-card {
    flex-flow: column;
    align-items: stretch;
    text-align: center;
  }

  .new-section.floorplan-page .flp-card-body,
  .new-section.floorplan-page .flp-card-header,
  .new-section.floorplan-page .flp-card-footer {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .new-section.floorplan-page .flp-card-body {
    height: 180px;
    border-right: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  }

  .new-section.floorplan-page .flp-card-header {
    flex-flow: column;
  }

  .new-section.floorplan-page .flp-card-header .flp-title-wrap {
    flex-flow: column;
  }

  .new-section.floorplan-page .flp-card-header .flp-title-wrap > .flp-more-details,
  .new-section.floorplan-page .flp-card-header .flp-details,
  .new-section.floorplan-page .flp-card-footer .flp-card-meta {
    width: 100%;
    padding: 15px 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  }

  .new-section.floorplan-page .flp-card-footer {
    flex-flow: column;
  }

  .new-section.floorplan-page .flp-card-footer .flp-text-wrap {
    justify-content: center;
  }

  .new-section.floorplan-page .flp-btn-wrap {
    justify-content: center;
    width: 100%;
    padding: 15px 0 0;
  }

  /* back into the flow — there is no image column left to float over */
  .new-section.floorplan-page .flp-icon-wrap {
    position: static;
    padding-top: 10px;
  }

  /* Centring the stacked card needs align-items, not just text-align: every
     block here is a column flex container, and text-align does not move flex
     items — which is why the title, bed/bath line, deposit and availability
     all still sat hard left while .flp-text-wrap (a flex ROW with
     justify-content: center) was the only part that looked right. */
  .new-section.floorplan-page .flp-card-header,
  .new-section.floorplan-page .flp-card-header .flp-title-wrap,
  .new-section.floorplan-page .flp-card-header .flp-title-wrap > .flp-more-details,
  .new-section.floorplan-page .flp-card-header .flp-details,
  .new-section.floorplan-page .flp-card-footer,
  .new-section.floorplan-page .flp-card-footer .flp-card-meta,
  .new-section.floorplan-page .flp-icon-wrap {
    align-items: center;
    text-align: center;
  }

  /* the meta children are anchors and paragraphs, not flex items of a row */
  .new-section.floorplan-page .flp-card-footer .flp-card-meta > * {
    width: 100%;
    text-align: center;
  }

  /* the availability dot is a flex row; base CSS pins it left for the
     two-line date case, which is not a risk once the block is full width */
  .new-section.floorplan-page .availability-dot {
    justify-content: center;
  }

  /* ===== Five-row scroll cap — released =====
     Stacked rows are roughly three times taller here, so the
     calc(var(--flp-row-h) * 5) cap set above would cut the first row in half.
     The page scrolls normally instead. */
  .new-section.floorplan-page .flp-row {
    max-height: none;
    overflow-y: visible;
    gap: 20px;
  }

  /* Filter hero: the 1024 block above already drops the render and the filters
     and puts the copy back in the flow. Only the band padding tightens here. */
  .special-floorplan-filters {
    padding: 90px 15px 40px;
  }

  /* --- Plan View / Map View tabs: the spacing around them was desktop-sized.
     Above: wrapper pt-50 (50px) + .flp-views padding-top 60px = 110px.
     Below: an INLINE margin-bottom:30px on the <ul> (swifty-frontend.php:8308)
     + .card-container padding-top 40px = 70px of empty beige before the first
     card. Trimmed to roughly a third on a phone. --- */
  .flp-views {
    padding-top: 24px;
  }

  /* The base `.flp-views .view-selectors { margin: 0 }` above was meant to kill
     that 30px but never could: a stylesheet rule cannot outrank an inline
     declaration without !important. This is the one place it is warranted. */
  .flp-views .view-selectors {
    margin-bottom: 0 !important;
  }

  .new-section.floorplan-page .card-container {
    padding-top: 20px;
    margin-top: 20px !important;
  }
}
/* ============================================================
   SECTION: RESPONSIVE — END
   ============================================================ */
/* ============================================================
   SECTION: MAP VIEW CARD (RESPONSIVE) — START
   This is NOT the .flp-card listing row styled above. It is the Map View
   card rendered by swifty-interactive-sitemaps/templates/floorplans.php
   (.single-floorplan > .floorplan-inner), identifiable by its "1 Bed/1 Bath"
   slash format, the 2D / 3D / Virtual Tour swaps and the "Lease Now" button.

   That plugin's sitemap-styles.css defines nothing for .flp-primary-info,
   .flp-swaps, .flp-more-details, .flp-price-availability or .flp-leasing, and
   its narrowest breakpoint is 992 — so on a phone the card renders very
   nearly unstyled. Theme 8 overrides belong here because floorplan-page-8.css
   is pushed onto $styles_array after sitemap-styles.css, so equal-specificity
   rules win. Matched to the listing card's look: centred stack, blocks
   separated by the same 2px hairline, full-width action button.
   ============================================================ */
@media (max-width: 767px) {
  .floorplan-inner {
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 14px;
    padding: 20px;
    text-align: center;
  }

  .floorplan-inner .flp-img {
    width: 100%;
    max-width: 240px;
  }

  .floorplan-inner .flp-img img {
    width: 100%;
    height: auto;
  }

  .floorplan-inner .flp-primary-info h2 {
    margin: 0 0 10px;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.714rem;
    line-height: 1.2;
  }

  /* 2D / 3D / Virtual Tour / Floorplan PDF share one centred, wrapping row
     instead of stacking one per line. */
  .floorplan-inner .flp-swaps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
  }

  .floorplan-inner .flp-swaps > span,
  .floorplan-inner .flp-swaps .vr-tour,
  .floorplan-inner .flp-swaps .download-flp {
    cursor: pointer;
  }

  .floorplan-inner .flp-more-details {
    display: flex;
    flex-flow: column;
    gap: 4px;
    width: 100%;
    padding: 12px 0;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  }

  /* The template prints the price and the availability as two sibling spans in
     one <p>, so they ran together as "Starting at $2,626 Available Now". */
  .floorplan-inner .flp-price-availability .price-box {
    display: flex;
    flex-flow: column;
    gap: 4px;
    margin: 0;
  }

  .floorplan-inner .flp-leasing {
    width: 100%;
  }

  .floorplan-inner .flp-leasing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 240px;
    padding: 12px 20px;
  }
  .new-section.floorplan-page .flp-row > .single-floorplan:nth-child(even) .flp-card{
    background-color: #ffffff;
  }
}
/* ============================================================
   SECTION: MAP VIEW CARD (RESPONSIVE) — END
   ============================================================ */