/*
 * New-UI brand LAYER for the property list (.unit-card) and unit detail
 * (.unit-info) pages. Every rule here is scoped under `.new-ui-branded`, a class
 * added by <Layout> to the routed content wrapper (`<main id="middle">`) ONLY for
 * flagged projects (UseNewLandingPage → useNewLanding.brandingActive). The
 * design-system tokens arrive as inline CSS vars on that same wrapper
 * (tokensToCssVars(withDefaults(tokens), customFonts)); this file re-points a set
 * of PURPOSE-SPECIFIC brand spots of those two pages onto the design-system
 * tokens (+ heading/body fonts).
 *
 * This is a targeted LAYER on top of the static /assets/styles/<slug>.css (still
 * loaded at runtime by template.tsx). Non-flagged projects never get the
 * `.new-ui-branded` class or the `--ls-*` vars, so their pages are byte-for-byte
 * unchanged. Each colour uses the base sheet's ORIGINAL value as the
 * `var(..., <fallback>)`, so an unset token changes nothing.
 *
 * COMPANION FILE: unit-details-newui.css is the BASE-POLISH layer (imported just
 * before this one in Layout.tsx). Division of labour — that file FILLS styling
 * vacuums globals.css leaves for the unit-detail page (size/weight/surface),
 * changing the look even with tokens unset; THIS file
 * only RE-POINTS colour/fonts onto tokens with an original-value fallback. A few
 * selectors appear in both with DISJOINT properties (colour here, structure there).
 *
 * ── Specificity contract ──
 * Both globals.css AND the per-project static sheet key their real property-list
 * / unit-detail rules off `#root …` selectors (the id `root` is on <body>) and
 * use `!important` in a handful of spots. A plain `.new-ui-branded .x` (0,2,0)
 * LOSES to a base `#root .x` (1,1,0). So every override below is prefixed
 * `#root .new-ui-branded …` to out-rank the base by one class at equal id count,
 * and carries `!important` ONLY where the confirmed base rule uses it:
 *   - `.block-btn:hover`                                    (globals.css:1994)
 *   - `#root .sold-unit-card .card-tag-text`                (globals.css:5554)
 *   - bedroom checked pill `input:checked~label`            (globals.css:4023)
 *   - active status tabs (`.btn.active`/`:active` base uses `!important`;
 *     the static sheet's own `.sold-status-active` is unverified in-repo — see
 *     the KNOWN LIMITATION note further below).
 *
 * The token → target map below mirrors the design-system tokens emitted by
 * designTokens.ts (tokensToCssVars): --ls-primary-btn / --ls-primary-btn-text,
 * --ls-badge-available / --ls-badge-reserved / --ls-badge-sold, --ls-filter,
 * --ls-card-accent.
 */

/*
 * ── Fonts ──
 * The property-list card and unit-detail markup come from shared React
 * components, so these class names are identical across all project sheets. The
 * static sheets set the brand display/body faces on these same elements; the
 * `.new-ui-branded` prefix out-specifies them so the design-system fonts take
 * over when set (else `inherit` → no visible change).
 */

/* Heading font — titles / section headings on both pages. */
.new-ui-branded .unit-card .head-icon h2,
.new-ui-branded .unit-card .card-heading .head-icon .left h3,
.new-ui-branded .unit-card .feature-box h3,
.new-ui-branded .unit-card .details h4,
.new-ui-branded .unit-info .price-guide h5,
.new-ui-branded .description-container .description-heading {
  font-family: var(--ls-heading-font, inherit);
}

/* Body font — labels / copy / button text on both pages. */
.new-ui-branded .unit-card .card-heading .card-tag p,
.new-ui-branded .unit-card .feature-box p,
.new-ui-branded .unit-card .details .data-list .data-item .item-label,
.new-ui-branded .unit-card .details .data-list .data-item .item-input,
.new-ui-branded .unit-card .block-btn,
.new-ui-branded .unit-info .btn-box .block-btn,
.new-ui-branded .description-container .description {
  font-family: var(--ls-body-font, inherit);
}

/*
 * ── PRIMARY BUTTON — --ls-primary-btn (bg) / --ls-primary-btn-text (text) ──
 * The unit-detail card carries BOTH `unit-card` and `unit-info`, so both CTA
 * selectors are listed explicitly.
 */
#root .new-ui-branded .unit-card .btn-box .block-btn,
#root .new-ui-branded .unit-info .btn-box .block-btn {
  background-color: var(--ls-card-btn-bg, var(--ls-primary-btn, #050705));
  color: var(--ls-card-btn-text, var(--ls-primary-btn-text, #FFFFFF));
}

/* Hover: darken the (card) button token 15% toward black. Base `.block-btn:hover`
 * uses `!important` (globals.css:1994), so this must too. `.unit-list
 * .unit-card:hover .block-btn` (globals.css:1997) does NOT — no `!important`
 * there. The darkened colour flows through the SAME card-btn → primary-btn chain,
 * so an unset card token leaves the hover identical to before. */
#root .new-ui-branded .block-btn:hover {
  background-color: color-mix(in srgb, var(--ls-card-btn-bg, var(--ls-primary-btn, #050705)) 85%, #000) !important;
}

#root .new-ui-branded .unit-list .unit-card:hover .block-btn {
  background-color: color-mix(in srgb, var(--ls-card-btn-bg, var(--ls-primary-btn, #050705)) 85%, #000);
}

/* Home & Land list navigation CTAs live outside `.unit-card .btn-box`, so they
 * do not inherit the card-button chain above. They intentionally use the
 * general primary-button tokens (not per-card button tokens): Featured Lots'
 * “View All Lots”, Home Designs' “View all designs”, and the similar/trending
 * “View all Lots” links must match the project-wide primary action. */
#root .new-ui-branded .home-land-listing-primary-btn {
  background-color: var(--ls-primary-btn, #050705) !important;
  border-color: var(--ls-primary-btn, #050705) !important;
  color: var(--ls-primary-btn-text, #FFFFFF) !important;
}

#root .new-ui-branded .home-land-listing-primary-btn:hover,
#root .new-ui-branded .home-land-listing-primary-btn:focus,
#root .new-ui-branded .home-land-listing-primary-btn:active {
  background-color: color-mix(in srgb, var(--ls-primary-btn, #050705) 85%, #000) !important;
  border-color: color-mix(in srgb, var(--ls-primary-btn, #050705) 85%, #000) !important;
  color: var(--ls-primary-btn-text, #FFFFFF) !important;
}

/* Form primary button (auth / contact forms), incl. hover + active states. */
#root .new-ui-branded .form-box .btn-primary,
#root .new-ui-branded .form-box .btn-primary:hover,
#root .new-ui-branded .form-box .btn-primary:active {
  background-color: var(--ls-primary-btn, #050705);
  color: var(--ls-primary-btn-text, #fff);
}

/* Register-interest / appointment CTA (`.button-email`) + the register off-canvas
 * header bar (`.header-register`) — the per-project sheets (e.g. celinechatswood)
 * paint BOTH with the FILTER accent (`--filter-boder-color`), which is DISTINCT
 * from their primary button (`--primary`), so map them onto --ls-filter (not
 * --ls-primary-btn). `.button-email` renders both as a react-bootstrap `.btn`
 * (FormButtonField → reads `--bs-btn-*`) and as a plain <button> (reads only a flat
 * background), so set the flat fill/border AND the `--bs-btn-*` vars. Special-case
 * buttons that ship `.bg-transparent`/`.border-0`/`.text-dark` keep those (bootstrap
 * utilities carry `!important`), so only the default CTA is recoloured. White text
 * on the saturated accent, matching the static sheets.
 *
 * NOTE: the register off-canvas + these buttons PORTAL to <body> (outside the
 * `.new-ui-branded` <main>), so RegisterInterest self-brands its Offcanvas root
 * (adds `.new-ui-branded` + the `--ls-*` vars) — mirroring NewSignupPopup — which
 * is what lets these app-wide rules reach them. */
#root .new-ui-branded .button-email {
  background-color: var(--ls-filter, #050705);
  border-color: var(--ls-filter, #050705);
  color: #fff;
  --bs-btn-bg: var(--ls-filter, #050705);
  --bs-btn-border-color: var(--ls-filter, #050705);
  --bs-btn-hover-bg: var(--ls-filter, #050705);
  --bs-btn-hover-border-color: var(--ls-filter, #050705);
  --bs-btn-active-bg: var(--ls-filter, #050705);
  --bs-btn-active-border-color: var(--ls-filter, #050705);
  --bs-btn-color: #fff;
}
#root .new-ui-branded .button-email:hover,
#root .new-ui-branded .button-email:active {
  background-color: var(--ls-filter, #050705);
  border-color: var(--ls-filter, #050705);
  color: #fff;
}

/* Register-interest off-canvas header bar — filter-accent fill (celine:
 * `.header-register { background: var(--filter-boder-color) }`). The base header
 * already ships white title text + an inverted (white) close icon, so the dark
 * accent reads correctly. */
#root .new-ui-branded .header-register {
  background: var(--ls-filter, #050705);
}

/* Mortgage "Calculate" button — a FILLED PRIMARY button, same treatment as the
 * unit CTA (.block-btn). The element ships `border-0 rounded-pill fw-600` in its
 * JSX, so only the fill + text colour are set here; hover darkens like .block-btn. */
#root .new-ui-branded .button-mortgage-calc {
  background-color: var(--ls-primary-btn, #050705);
  color: var(--ls-primary-btn-text, #fff);
}
#root .new-ui-branded .button-mortgage-calc:hover,
#root .new-ui-branded .button-mortgage-calc:active {
  background-color: color-mix(in srgb, var(--ls-primary-btn, #050705) 85%, #000);
  color: var(--ls-primary-btn-text, #fff);
}

/*
 * ── BADGES (status chip only) — --ls-badge-* with readable text ──
 * Only the chip is recoloured; the surrounding card tint / border is left as the
 * static sheet defines it. `unavailable-*` and `launching-soon-*` are left alone.
 */

/* Available — light chip, so DARK text. Card token overrides the badge token,
 * which in turn falls back to today's value (byte-identical when both unset). */
#root .new-ui-branded .card-tag-text.available-bg,
#root .new-ui-branded .available-label {
  background: var(--ls-card-badge-available-bg, var(--ls-badge-available, #B7E6C8));
  color: var(--ls-card-badge-available-text, #050705);
}

/* Reserved — saturated chip, white text. Base (globals.css:4791/4917) has no
 * `!important`. */
#root .new-ui-branded .reserved-label,
#root .new-ui-branded .reserved-unit-card .card-tag-text,
#root .new-ui-branded .smiliar-trending-card.reserved-unit-card .card-tag-text {
  background: var(--ls-card-badge-reserved-bg, var(--ls-badge-reserved, #FF5F2C));
  color: var(--ls-card-badge-reserved-text, #fff);
}

/* Sold — saturated chip, white text. Base `#root .sold-unit-card .card-tag-text`
 * uses `!important` (globals.css:5554), so this must too. */
#root .new-ui-branded .sold-label,
#root .new-ui-branded .sold-unit-card .card-tag-text,
#root .new-ui-branded .smiliar-trending-card.sold-unit-card .card-tag-text {
  background: var(--ls-card-badge-sold-bg, var(--ls-badge-sold, #DC0606)) !important;
  color: var(--ls-card-badge-sold-text, #fff) !important;
}

/*
 * ── FILTERS — --ls-filter ──
 */

/* Bedroom pills — checked state. Base uses `#root … !important` on both border
 * and background (globals.css:4023), so match it. */
#root .new-ui-branded .filter-box .bedroom-filters-div .form-check-inline input:checked~label {
  background-color: var(--ls-filter, #050705) !important;
  border-color: var(--ls-filter, #050705) !important;
}

/* Keep the token colour on a checked pill while hovered. */
#root .new-ui-branded .filter-box .bedroom-filters-div .form-check-inline input:checked:hover~label {
  border-color: var(--ls-filter, #050705) !important;
}

/* Multi-select checkboxes — checked box + checked label. Base has no
 * `!important` (globals.css:1542/1552). */
#root .new-ui-branded .filter-box .multi-select-grp .form-check-input:checked {
  background-color: var(--ls-filter, #394150);
  border-color: var(--ls-filter, #394150);
}

#root .new-ui-branded .filter-box .multi-select-grp .form-check-input:checked~label {
  color: var(--ls-filter, #394150);
}

/* Price-range "Go" button — active/hover/focus fill. Base has no `!important`
 * (globals.css:1414-1430). */
#root .new-ui-branded .filter-box .price-range .go-btn:hover,
#root .new-ui-branded .filter-box .price-range .go-btn:focus,
#root .new-ui-branded .filter-box .price-range .go-btn:active {
  background: var(--ls-filter, #050705);
  border-color: var(--ls-filter, #050705);
}

/* Filter-head "clear/reset" text button. */
#root .new-ui-branded .filter-box .filter-head .filter-btn {
  color: var(--ls-filter, #5c6a7a);
}

/* Sold-status tab pills (Show All / Available / Sold / …) — active state uses the
 * PRIMARY-BUTTON token (fill + text), matching the main CTA. `!important` is
 * defensive: the base button family uses it on active states and the static
 * sheet's own `.sold-status-active` colours are unverified in-repo. */
#root .new-ui-branded .tabs-button .sold-status-active,
#root .new-ui-branded .tabs-button .show-all-bg.sold-status-active,
#root .new-ui-branded .tabs-button .sold-status-active:hover,
#root .new-ui-branded .tabs-button .show-all-bg.sold-status-active:hover {
  background-color: var(--ls-primary-btn, #050705) !important;
  border-color: var(--ls-primary-btn, #050705) !important;
  color: var(--ls-primary-btn-text, #fff) !important;
}

/* Sold-status tab pills — NOT-selected (inactive) state: a consistent OUTLINE
 * look (transparent fill, token border + token text). Every inactive pill carries
 * `.btn.rounded-pill`; the per-status inactive classes are listed so they match
 * even if the static sheet recolours them. Base globals only sets
 * `.tabs-button button { background:white; border:0 }` (globals.css:594, NO
 * `!important`), so these carry no `!important` either — which is exactly what
 * makes the ACTIVE rule above WIN: an active button is also `.btn.rounded-pill`,
 * but the `.sold-status-active` rule's `!important` beats this un-important one
 * (filled fill + white text), regardless of source order. (Real per-project
 * static-sheet colours are out of scope — see KNOWN LIMITATION at foot.) */
#root .new-ui-branded .tabs-button .btn.rounded-pill,
#root .new-ui-branded .tabs-button .sold-not-active,
#root .new-ui-branded .tabs-button .reserved-not-active,
#root .new-ui-branded .tabs-button .coming-not-active,
#root .new-ui-branded .tabs-button .launching-soon-not-active {
  background: transparent;
  border: 1px solid var(--ls-filter, #050705);
  color: var(--ls-filter, #050705);
}

#root .new-ui-branded .tabs-button .btn.rounded-pill:hover,
#root .new-ui-branded .tabs-button .sold-not-active:hover,
#root .new-ui-branded .tabs-button .reserved-not-active:hover,
#root .new-ui-branded .tabs-button .coming-not-active:hover,
#root .new-ui-branded .tabs-button .launching-soon-not-active:hover {
  background: color-mix(in srgb, var(--ls-filter, #050705) 10%, #fff);
}

/* Panel + dropdown accordion titles → heading token (base #050705, so an unset
 * token leaves them unchanged). The `.filter-box .accordion-button` carries base
 * `!important`, so match it. */
#root .new-ui-branded .filter-box .filter-head h2 {
  color: var(--ls-heading, #050705);
}
#root .new-ui-branded .filter-box .accordion-button,
#root .new-ui-branded .dropdown-filter-box .accordion-button {
  color: var(--ls-heading, #050705) !important;
}
/* Dropdown bedroom pills — brand the CHECKED (selected) state → --ls-filter fill +
 * white text. The UNCHECKED state is kept NEUTRAL grey in unit-details-newui.css
 * (not brand-derived). Base keys the pill off `#root … !important`, so match it. */
#root .new-ui-branded .dropdown-filter-box .bedroom-filters-div .form-check-inline input:checked~label {
  background-color: var(--ls-filter, #050705) !important;
  border-color: var(--ls-filter, #050705) !important;
  color: #fff !important;
}

/*
 * ── SORT CONTROL — text on --ls-filter, border on --ls-border ──
 * Base: `.unit-sort .sort-box span` #050705 (globals.css:1693),
 * `.unit-sort .form-select` text #6c727f (globals.css:1668), focus border
 * #dee2e6 (globals.css:1681) — none use `!important`. Fallbacks = those originals
 * so an unset token leaves the control unchanged.
 */
#root .new-ui-branded .unit-sort .sort-box span {
  color: var(--ls-filter, #050705);
}

#root .new-ui-branded .unit-sort .form-select {
  border-color: var(--ls-border, #dee2e6);
  color: var(--ls-filter, #6c727f);
}

#root .new-ui-branded .unit-sort .form-select:focus {
  border-color: var(--ls-border, #dee2e6);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ── PER-PROJECT CARD STRUCTURE (Phase 4/5) — --ls-card-* METRICS + surfaces ──
 *
 * GATED behind `.new-ui-card-overrides`, added by <Layout> ONLY when the project
 * set at least one card token (hasCardOverrides). A branded project that never
 * touches a card control never gets this class, so NONE of these rules apply and
 * its property cards render byte-identically. Within an overrides project every
 * var falls back to today's value (verified against globals.css + the developer
 * designPanel.css `.ds-card-mock*` chains) so an UNSET control changes nothing.
 *
 * Three card families participate in this layer:
 *   • property-list    `.unit-list .unit-card`
 *   • Home & Land      `.unit-card.land` / `.unit-card.homedesign`
 *   • similar/trending `.smiliar-trending-card`
 * A token is applied only where its target element exists on a family (the
 * similar/trending card has no CTA, so the button tokens are property-list +
 * unit-detail only; the single inner-padding control maps onto the property-list
 * card whose inner padding is a uniform 15px, not the similar card's non-uniform
 * paddings). This block sits BEFORE the `--ls-card-accent` hover rule below, so
 * the hover border-accent still wins on `:hover` (equal specificity → the later
 * rule in source wins).
 *
 * STATUS TINTS: each of the FIVE unit statuses keeps its OWN card background +
 * border as an independent control, so a status card renders its verbatim today
 * tint by default and a developer can retint each status separately. The status
 * class is added ALONGSIDE `.unit-card` by getUnitCardBackgroundColor
 * (e.g. `<div class="unit-card sold-unit-card">`; similar/trending cards carry it
 * alongside `.smiliar-trending-card`). Because a status card matches BOTH the
 * available/base rule and its status rule at EQUAL specificity, the status rules
 * are emitted AFTER the base one so the later rule wins — a sold/reserved/etc.
 * card resolves to its own tint, never the available surface. Only `border-width`
 * stays a GLOBAL metric; every colour is per-status. (Non-flagged / no-override
 * projects keep today's tints from globals.css, since the gate class is absent
 * and none of these rules apply.)
 * ══════════════════════════════════════════════════════════════════════════ */

/* AVAILABLE / base surface + shared frame geometry (both families). Bases:
 * `.unit-card { border:1px solid #d4cec6; margin-bottom:20px }`
 * (globals.css:1740-1742); the resting shadow mirrors the hover shadow
 * `0 8px 28px rgb(0 0 0 / .06)` (globals.css:1759); the available surface is the
 * base card #ffffff (developer designPanel.css:370). `border-width` +
 * `border-style` + shadow + margin are status-agnostic and set once here so
 * every status inherits them (border-width is a single global metric). Corner
 * radius is per-family (below) because the two families differ. On
 * `.smiliar-trending-card` the BACKGROUND cannot win — bootstrap `.bg-white`
 * (`!important`) pins the similar card white for every status; its today bg is
 * white too, so that is back-compat — but its per-status border-colour DOES take. */
#root .new-ui-branded.new-ui-card-overrides .unit-list .unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.land,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign,
#root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card {
  background-color: var(--ls-card-bg-available, transparent);
  border-style: solid;
  border-width: var(--ls-card-border-width, 1px);
  border-color: var(--ls-card-border-available, #d4cec6);
  /* Resting shadow OFF by default — today both families are hover-only, so an
   * unset shadow token must add nothing at rest. A set token turns it on at
   * rest; the paired :hover rule below preserves today's hover shadow. */
  box-shadow: 0 var(--ls-card-shadow-y, 0) var(--ls-card-shadow-blur, 0) var(--ls-card-shadow-color, transparent);
  margin-bottom: var(--ls-card-margin-bottom, 20px);
}

/* Arbour Estate's Home & Land baseline. Keep this before the status rules so
 * reserved/sold/unavailable surfaces below remain the winning declarations. */
#root .new-ui-branded.new-ui-card-overrides .unit-card.land {
  background-color: var(--ls-card-bg-available, #F2F3F0);
  border-style: solid !important;
  border-width: var(--ls-card-border-width, 1px) !important;
  border-color: var(--ls-card-border-available, #C1C7CC) !important;
}
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign {
  background-color: var(--ls-card-bg-available, #fff);
  border-style: solid !important;
  border-width: var(--ls-card-border-width, 1px) !important;
  border-color: var(--ls-card-border-available, #C1C7CC) !important;
}

/* HOVER shadow — preserves today's hover-only shadow (globals.css:1757;
 * unit-details-newui.css:218). Needed because the higher-specificity base rule
 * above would otherwise win on hover too and flatten the hover shadow. Unset →
 * today's 0 8px 28px on hover; set → the chosen shadow (resting + hover match). */
#root .new-ui-branded.new-ui-card-overrides .unit-list .unit-card:hover,
#root .new-ui-branded.new-ui-card-overrides .unit-card.land:hover,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign:hover,
#root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card:hover {
  box-shadow: 0 var(--ls-card-shadow-y, 8px) var(--ls-card-shadow-blur, 28px) var(--ls-card-shadow-color, rgba(0,0,0,.06));
}
/* Keep casa's ≤991.98px touch rule (no lift/shadow) for similar/trending. */
@media (max-width: 991.98px) {
  #root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card:hover {
    box-shadow: none;
  }
}

/* PER-STATUS surfaces — bg + border-colour only (geometry stays from the base
 * rule above). Each falls back to that status's VERBATIM today tint. MUST stay
 * AFTER the available/base rule: on a status card the base rule and the status
 * rule match at equal specificity, so source order decides and the later status
 * rule must win. Property-list uses the descendant status class (`.unit-list
 * .sold-unit-card`, mirroring globals.css `#root .sold-unit-card`); the similar
 * family compounds it on one element (`.smiliar-trending-card.sold-unit-card`).
 * Launching Soon bg #FFFCEF (globals.css:4806); Reserved / Sold / Unavailable
 * bg+border (globals.css:4692-4710). Launching-soon has no today border of its
 * own, so it defaults to the base card #d4cec6. */

/* Launching Soon. */
#root .new-ui-branded.new-ui-card-overrides .unit-list .launching-soon-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.land.launching-soon-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign.launching-soon-unit-card,
#root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card.launching-soon-unit-card {
  background-color: var(--ls-card-bg-launching-soon, #FFFCEF);
  border-color: var(--ls-card-border-launching-soon, #d4cec6);
}

/* Reserved. */
#root .new-ui-branded.new-ui-card-overrides .unit-list .reserved-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.land.reserved-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign.reserved-unit-card,
#root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card.reserved-unit-card {
  background-color: var(--ls-card-bg-reserved, rgb(255,231,210));
  border-color: var(--ls-card-border-reserved, rgb(255,207,191));
}

/* Sold. */
#root .new-ui-branded.new-ui-card-overrides .unit-list .sold-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.land.sold-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign.sold-unit-card,
#root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card.sold-unit-card {
  background-color: var(--ls-card-bg-sold, rgb(255,236,236));
  border-color: var(--ls-card-border-sold, rgb(255,200,200));
}

/* Unavailable (Held for next release). */
#root .new-ui-branded.new-ui-card-overrides .unit-list .unavailable-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.land.unavailable-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign.unavailable-unit-card,
#root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card.unavailable-unit-card {
  background-color: var(--ls-card-bg-unavailable, rgb(227,227,227));
  border-color: var(--ls-card-border-unavailable, rgb(194,194,194));
}

/* The Arbour baseline uses an important border declaration on these cards.
 * Keep the status border token above that baseline without changing the
 * residential selectors' existing cascade. */
#root .new-ui-branded.new-ui-card-overrides .unit-card.land.launching-soon-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign.launching-soon-unit-card {
  border-color: var(--ls-card-border-launching-soon, #d4cec6) !important;
}
#root .new-ui-branded.new-ui-card-overrides .unit-card.land.reserved-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign.reserved-unit-card {
  border-color: var(--ls-card-border-reserved, rgb(255,207,191)) !important;
}
#root .new-ui-branded.new-ui-card-overrides .unit-card.land.sold-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign.sold-unit-card {
  border-color: var(--ls-card-border-sold, rgb(255,200,200)) !important;
}
#root .new-ui-branded.new-ui-card-overrides .unit-card.land.unavailable-unit-card,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign.unavailable-unit-card {
  border-color: var(--ls-card-border-unavailable, rgb(194,194,194)) !important;
}

/* Corner radius — per-family fallback so an UNSET --ls-card-radius keeps each
 * family's own today-value: the property-list card is 16px (globals.css:1741),
 * but the FLAGGED similar/trending card is rounded to 20px by the base-polish
 * layer (unit-details-newui.css `#root .new-ui-branded .smiliar-trending-card`).
 * When the token IS set, both families take it. */
#root .new-ui-branded.new-ui-card-overrides .unit-list .unit-card {
  border-radius: var(--ls-card-radius, 16px);
}
#root .new-ui-branded.new-ui-card-overrides .unit-card.land,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign {
  border-radius: var(--ls-card-radius, 12px) !important;
}
#root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card {
  border-radius: var(--ls-card-radius, 20px);
}

/* Inner content padding — the property-list card's `.card-heading` (base 15px,
 * globals.css:1762), which is a uniform 15px. The similar/trending card's inner
 * paddings are non-uniform (15px 15px 5px, etc.) so the single control is not
 * mapped onto it. */
#root .new-ui-branded.new-ui-card-overrides .unit-list .unit-card .card-heading,
#root .new-ui-branded.new-ui-card-overrides .unit-card.land .card-heading,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .card-heading {
  padding: var(--ls-card-padding, 15px);
}

/* Title size — the unit-number heading. Base `.head-icon .left h3` 20px
 * (globals.css:1839); applied to the property-list `.card-tag h3` and the
 * similar/trending + unit-detail `.head-icon .left h3`. */
/* Title size — two title elements with DIFFERENT today-sizes, so each keeps its
 * own value when the token is unset:
 *  - property-list `.card-tag h3` = Bootstrap h3 (calc(1.3rem + .6vw), 1.75rem
 *    at ≥1200px; bootstrap.min.css is imported globally, no app override).
 *  - similar/trending + unit-detail `.head-icon .left h3` = 20px (globals.css:1839).
 * A SET token applies to both. */
#root .new-ui-branded.new-ui-card-overrides .unit-card .card-tag h3,
#root .new-ui-branded.new-ui-card-overrides .unit-card.land .card-heading .head-icon .left h2,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .card-heading .head-icon .left h2 {
  font-size: var(--ls-card-title-size, calc(1.3rem + 0.6vw));
}
@media (min-width: 1200px) {
  #root .new-ui-branded.new-ui-card-overrides .unit-card .card-tag h3,
  #root .new-ui-branded.new-ui-card-overrides .unit-card.land .card-heading .head-icon .left h2,
  #root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .card-heading .head-icon .left h2 {
    font-size: var(--ls-card-title-size, 1.75rem);
  }
}
#root .new-ui-branded.new-ui-card-overrides .unit-card .card-heading .head-icon .left h3 {
  font-size: var(--ls-card-title-size, 20px);
}

/* Meta text — the level / aspect line under the title. Base muted grey #6f6a63
 * (developer designPanel.css:431; globals.css:1868 uses #6c727f on the
 * similar/trending `.card-heading .card-tag p`). */
/* Meta text — the level / aspect line under the title. Two families, two today-
 * colours, so the fallback is split (the old single #6f6a63 was a preview-mock
 * value that matched neither):
 *  - property-list `.padding-15 .card-p p` inherits body #050705 (globals.css:458-460).
 *  - similar/trending + unit-detail `.card-heading .card-tag p` = #6c727f (globals.css:1868). */
#root .new-ui-branded.new-ui-card-overrides .unit-list .unit-card .padding-15 .card-p p {
  color: var(--ls-card-text-color, #050705);
}
#root .new-ui-branded.new-ui-card-overrides .unit-card .card-heading .card-tag p {
  color: var(--ls-card-text-color, #6c727f);
}

/* Home & Land cards use h2 titles and a direct CTA instead of the residential
 * `.btn-box .block-btn` structure. These rules intentionally live in the gated
 * token layer: existing projects keep their own per-project stylesheet until a
 * developer explicitly configures card tokens. Fallbacks are the Arbour Estate
 * Home & Land values from arbourestate.css. */
#root .new-ui-branded.new-ui-card-overrides .unit-card.land .card-heading .head-icon .left h2,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .card-heading .head-icon .left h2 {
  color: var(--ls-card-title-color, #00212D);
  font-family: var(--ls-heading-font, 'Inter', sans-serif);
  font-weight: 600;
  margin: 0;
}
#root .new-ui-branded.new-ui-card-overrides .unit-card.land .card-heading .head-icon .left h2 {
  font-size: var(--ls-card-title-size, 32px);
}
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .card-heading .head-icon .left h2 {
  font-size: var(--ls-card-title-size, 24px);
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land .card-heading .card-tag p,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .card-heading .card-tag p {
  color: var(--ls-card-text-color, #000000);
  font-size: 14px;
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land .aiminities .icon i,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .aiminities .icon i {
  color: var(--ls-card-icon-color, #003B49);
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land .aiminities .item span,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .aiminities .item span {
  color: var(--ls-card-text-color, #003B49) !important;
}

#root main.new-ui-branded.new-ui-card-overrides:not(.unit-card-image-ratio) .unit-card.land .card-img,
#root main.new-ui-branded.new-ui-card-overrides:not(.unit-card-image-ratio) .unit-card.homedesign .card-img {
  height: 200px;
  overflow: hidden;
}

#root main.new-ui-branded.new-ui-card-overrides:not(.unit-card-image-ratio) .unit-card.land .card-img .card-image,
#root main.new-ui-branded.new-ui-card-overrides:not(.unit-card-image-ratio) .unit-card.homedesign .card-img .card-image {
  height: 200px !important;
  object-fit: cover;
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .padding-homedesign {
  padding: 10px 16px 0;
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land .aiminities {
  padding: 15px 10px 10px 18px;
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign {
  display: flex;
  flex-direction: column;
  min-height: auto !important;
  overflow: hidden;
}

#root .new-ui-branded .unit-card.land,
#root .new-ui-branded .unit-card.homedesign {
  padding-bottom: 18px;
}

/* Arbour's Home & Land amenities are a distinct card treatment from the
 * residential unit-list grid: equal-width, centred tiles with the card's
 * single-row spacing and wrapped labels. */
#root .new-ui-branded .unit-card.land .aiminities,
#root .new-ui-branded .unit-card.homedesign .aiminities {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  gap: 10px;
}

#root .new-ui-branded .unit-card.land .aiminities {
  padding: 15px 10px 10px 18px;
}

#root .new-ui-branded .unit-card.land .aiminities .item,
#root .new-ui-branded .unit-card.homedesign .aiminities .item {
  flex: 1;
  text-align: center;
  min-width: 0;
  justify-content: center !important;
}

#root .new-ui-branded .unit-card.land .aiminities .item {
  padding: 5px 0;
}

#root .new-ui-branded .unit-card.land .aiminities .item .icon,
#root .new-ui-branded .unit-card.homedesign .aiminities .item .icon {
  margin-bottom: 5px;
}

#root .new-ui-branded .unit-card.land .aiminities .item span,
#root .new-ui-branded .unit-card.homedesign .aiminities .item span {
  font-size: 14px !important;
  line-height: 1.2;
  word-wrap: break-word;
}

#root .new-ui-branded .unit-card.homedesign .aiminities .item span {
  font-size: 15px !important;
}

#root .new-ui-branded .unit-card.land .aiminities .item span {
  color: #003B49 !important;
  font-weight: 600;
}

#root .new-ui-branded .unit-card.land .aiminities .icon {
  background-color: #fff;
}

#root .new-ui-branded .unit-card.homedesign .aiminities .icon {
  width: 44px;
  height: 44px;
}

#root .new-ui-branded .unit-card.land .aiminities .icon i {
  color: #003B49;
  font-size: 20px !important;
}

#root .new-ui-branded .unit-card.homedesign .aiminities .icon i {
  font-size: 16px !important;
}

/* Home Design listing baseline. This is intentionally outside the generic
 * card-token gate: a branded Home & Land project must keep the Arbour card
 * layout even when the developer has not customised a card token yet. */
#root .new-ui-branded .unit-card.homedesign {
  background-color: var(--ls-card-bg-available, #fff);
  border: var(--ls-card-border-width, 1px) solid var(--ls-card-border-available, #C1C7CC) !important;
  border-radius: var(--ls-card-radius, 12px) !important;
  display: flex;
  flex-direction: column;
  min-height: auto !important;
  overflow: hidden;
  padding-bottom: 18px;
}

#root .new-ui-branded .unit-card.homedesign:hover {
  box-shadow: 0 var(--ls-card-shadow-y, 8px) var(--ls-card-shadow-blur, 28px) var(--ls-card-shadow-color, rgba(0, 0, 0, .06));
}

#root .new-ui-branded .unit-card.homedesign > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

#root .new-ui-branded .unit-card.homedesign .card-heading {
  padding: var(--ls-card-padding, 15px);
}

#root .new-ui-branded .unit-card.homedesign .card-heading .head-icon .left h2 {
  color: var(--ls-card-title-color, #00212D);
  font-family: var(--ls-heading-font, 'Inter', sans-serif);
  font-size: var(--ls-card-title-size, 24px);
  font-weight: 600;
  margin: 0;
}

#root .new-ui-branded .unit-card.homedesign .card-heading .card-tag p {
  color: var(--ls-card-text-color, #000);
  font-size: 14px;
}

/* Arbour's shared Home & Land heading rhythm. The existing global card rules
 * supply the flex layout; these are the Home & Land-specific refinements for
 * both lot and home-design cards. Text values deliberately keep their token
 * chains so a developer card design overrides the baseline. */
#root .new-ui-branded .unit-card.land .card-heading .head-icon,
#root .new-ui-branded .unit-card.homedesign .card-heading .head-icon {
  margin-bottom: 5px;
}

#root .new-ui-branded .unit-card.land .card-heading .card-tag,
#root .new-ui-branded .unit-card.homedesign .card-heading .card-tag {
  margin-bottom: 8px;
}

#root .new-ui-branded .unit-card.land .card-heading .card-tag p,
#root .new-ui-branded .unit-card.homedesign .card-heading .card-tag p {
  margin-bottom: 2px;
  color: var(--ls-card-text-color, #000);
  font-size: 14px;
}

/* Home & Land surfaces availability in the dedicated card labels below the
 * tag line, so do not repeat the Available chip in this metadata row. */
#root .new-ui-branded .unit-card.land .card-tag .available-label,
#root .new-ui-branded .unit-card.homedesign .card-tag .available-label {
  display: none !important;
}

@media (min-width: 992.98px) {
  #root .new-ui-branded .unit-card.land .card-heading .head-icon .left,
  #root .new-ui-branded .unit-card.homedesign .card-heading .head-icon .left {
    height: 30px;
  }
}

#root .new-ui-branded .unit-card.homedesign .padding-homedesign {
  padding: 10px 16px 0;
}

#root main.new-ui-branded:not(.unit-card-image-ratio) .unit-card.homedesign .card-img,
#root main.new-ui-branded:not(.unit-card-image-ratio) .unit-card.homedesign .card-img .card-image {
  height: 200px;
}

#root main.new-ui-branded:not(.unit-card-image-ratio) .unit-card.homedesign .card-img .card-image {
  height: 200px !important;
  object-fit: cover;
}

#root .new-ui-branded .unit-card.homedesign .aiminities {
  flex-grow: 1;
}

/* Land/Lot card heading — Arbour Estate's Home & Land baseline. The JSX uses
 * an h2 where the original sheet used h3, so map the same title treatment onto
 * that element without letting it reach residential `.unit-card` headings. */
#root .new-ui-branded .unit-card.land .card-heading {
  padding: 22px 15px 8px;
}

#root .new-ui-branded .unit-card.land .card-heading .head-icon .left h2 {
  margin: 0 0 4px;
  color: #B7CDC2;
  font-family: var(--ls-heading-font, 'Inter', sans-serif);
  font-size: 32px;
  font-weight: 500;
}

#root .new-ui-branded .unit-card.land .card-heading .card-tag {
  margin-bottom: 8px;
}

#root .new-ui-branded .unit-card.land .card-heading .card-tag p {
  margin-bottom: 2px;
  color: #000;
  font-size: 14px;
}

#root .new-ui-branded .unit-card.land .card-heading .trending-text {
  color: #050705;
}

#root .new-ui-branded .unit-card.land .card-heading .h-land {
  height: 31px;
}

#root .new-ui-branded .unit-card.land .card-heading .bg-reg {
  background-color: #F4F2E9;
  color: #5D383C;
  font-weight: 300;
}

#root .new-ui-branded .unit-card.land .card-heading .bg-viewed {
  font-weight: 300;
}

/* Keep customised card settings above the Arbour heading baseline immediately
 * above. This final pass is gated, so an untouched Home & Land project keeps
 * the exact Arbour values. */
#root .new-ui-branded.new-ui-card-overrides .unit-card.land .card-heading .head-icon .left h2 {
  color: var(--ls-card-title-color, #B7CDC2);
  font-family: var(--ls-heading-font, 'Inter', sans-serif);
  font-size: var(--ls-card-title-size, 32px);
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land .card-heading .card-tag p {
  color: var(--ls-card-text-color, #000);
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land .card-heading .trending-text {
  color: var(--ls-card-accent, #050705);
}

/* Home & Land featured-lot carousel. The shared SlickSlider is also used by
 * unit-detail views, so these spacing and navigation rules are isolated to its
 * explicit Home & Land variant. */
#root .new-ui-branded .homeland-slick-slider-container {
  position: relative;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-list {
  margin: 0 -10px;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-track {
  display: flex;
  align-items: stretch;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-slide {
  height: auto;
  display: flex;
  padding: 0 10px;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-slide > div {
  width: 100%;
  height: 100%;
  display: flex;
}

#root .new-ui-branded .homeland-slick-slider-container .unit-slide {
  padding: 0;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-prev,
#root .new-ui-branded .homeland-slick-slider-container .slick-next {
  display: none !important;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-nav {
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: 0;
  pointer-events: none;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  color: #050705;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-nav .bg-unit-arrow-left {
  left: 34px;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-nav .bg-unit-arrow-right {
  right: 34px;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-nav button:hover:not(:disabled) {
  background: #050705;
  color: #fff;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-nav button:disabled {
  opacity: 0.9;
  cursor: not-allowed;
}

#root .new-ui-branded .homeland-slick-slider-container .slick-nav button i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#root .new-ui-branded .unit-card.land .right,
#root .new-ui-branded .unit-card.land .right i,
#root .new-ui-branded .unit-card.homedesign .right,
#root .new-ui-branded .unit-card.homedesign .right i {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
}

#root .new-ui-branded .unit-card.land .right,
#root .new-ui-branded .unit-card.homedesign .right {
  align-items: center;
  justify-content: center;
}

@media (max-width: 991.98px) {
  #root .new-ui-branded .homeland-slick-slider-container .slick-nav button {
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
  }

  #root .new-ui-branded .homeland-slick-slider-container .slick-nav .bg-unit-arrow-left {
    left: 12px;
  }

  #root .new-ui-branded .homeland-slick-slider-container .slick-nav .bg-unit-arrow-right {
    right: 12px;
  }
}

@media (max-width: 575.98px) {
  #root .new-ui-branded .homeland-slick-slider-container .slick-nav button {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }

  #root .new-ui-branded .homeland-slick-slider-container .slick-nav button i {
    font-size: 12px;
  }
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land > div,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land .aiminities,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .aiminities {
  flex-grow: 1;
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land .h-land,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .h-land {
  min-height: 31px;
}

#root .new-ui-branded .unit-card.land .view-lot-btn,
#root .new-ui-branded .unit-card.homedesign .view-lot-btn,
#root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card .view-lot-btn {
  width: calc(100% - 30px);
  margin: auto 15px 5px;
  padding: var(--ls-card-btn-pad-y, 16px) var(--ls-card-btn-pad-x, 24px);
  background: var(--ls-card-btn-bg, #003849);
  color: var(--ls-card-btn-text, #F4F2E9);
  border: 0;
  border-radius: var(--ls-card-btn-radius, 12px);
  font-size: var(--ls-card-btn-size, 18px);
  font-weight: 500;
  transition: all 0.3s ease;
  display: block;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#root .new-ui-branded .unit-card.land .view-lot-btn:hover,
#root .new-ui-branded .unit-card.homedesign .view-lot-btn:hover,
#root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card .view-lot-btn:hover {
  background: color-mix(in srgb, var(--ls-card-btn-bg, #003849) 80%, #000);
  color: var(--ls-card-btn-text, #fff);
  transform: translateY(-2px);
}

#root .new-ui-branded.new-ui-card-overrides .unit-card.land .right,
#root .new-ui-branded.new-ui-card-overrides .unit-card.homedesign .right {
  border: 1px solid var(--ls-card-border-available, #C1C7CC);
  border-radius: 50%;
}

/* Home & Land unit-detail "Home Designs Available" cards inherit the Arbour
 * baseline from unit-details-newui.css. Once a developer changes any card
 * setting, map the same card tokens onto that separate markup too. */
#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-card {
  background-color: var(--ls-card-bg-available, #F2F3F0);
  border-color: var(--ls-card-border-available, #2E474233);
  border-width: var(--ls-card-border-width, 1px);
  border-radius: var(--ls-card-radius, 12px) !important;
}

#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-card .name-available {
  color: var(--ls-card-title-color, #00212D) !important;
  font-family: var(--ls-heading-font, 'Inter', sans-serif) !important;
  font-size: var(--ls-card-title-size, 20px);
}

#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-card .available-span,
#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-card .font-15,
#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-card .available-span span {
  color: var(--ls-card-text-color, #41484B) !important;
}

#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-card .icon-available {
  color: var(--ls-card-icon-color, #003B49);
}

#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-card .btn-available {
  background-color: var(--ls-card-btn-bg, #003849);
  color: var(--ls-card-btn-text, #F4F2E9);
  border-radius: var(--ls-card-btn-radius, 50px);
  padding: var(--ls-card-btn-pad-y, 12px) var(--ls-card-btn-pad-x, 24px);
  font-size: var(--ls-card-btn-size, 16px);
}

#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-card .btn-available:hover {
  background-color: color-mix(in srgb, var(--ls-card-btn-bg, #003849) 80%, #000);
  color: var(--ls-card-btn-text, #F4F2E9);
}

/* The expanded Home Design view shares the card's title, icon and CTA controls.
 * Preserve its Arbour layout from unit-details-newui.css, while letting card
 * branding replace the presentational values. */
#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-expanded {
  background-color: var(--ls-card-bg-available, #F2F3F0);
}

#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-expanded .name-available,
#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-expanded .details-box h5,
#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-expanded .home-land-available-back {
  color: var(--ls-card-title-color, #00212D) !important;
}

#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-expanded .icon-available {
  color: var(--ls-card-icon-color, #003B49);
}

#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-expanded .details-box {
  border-color: var(--ls-card-border-available, #C1C7CC);
}

#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-expanded .btn-available {
  background-color: var(--ls-card-btn-bg, #B6CCC1);
  color: var(--ls-card-btn-text, #00212D);
  border-radius: var(--ls-card-btn-radius, 50px);
  padding: var(--ls-card-btn-pad-y, 15px) var(--ls-card-btn-pad-x, 24px);
  font-size: var(--ls-card-btn-size, 16px);
}

#root .new-ui-branded.new-ui-card-overrides .home-land-available-unit-expanded .btn-available:hover {
  background-color: color-mix(in srgb, var(--ls-card-btn-bg, #B6CCC1) 80%, #000);
  color: var(--ls-card-btn-text, #00212D);
}

/* Feature icons — the amenity glyphs. Base near-black #050705 (developer
 * designPanel.css:467; the icon font otherwise inherits the app text colour). */
#root .new-ui-branded.new-ui-card-overrides .unit-card .aiminities .icon i {
  color: var(--ls-card-icon-color, #050705);
}

/* Badge radius — the status chip corner. Base `#root .card-tag-text {
 * border-radius:50px }` (globals.css:4730). */
#root .new-ui-branded.new-ui-card-overrides .unit-list .unit-card .card-tag-text,
#root .new-ui-branded.new-ui-card-overrides .smiliar-trending-card .card-tag-text {
  border-radius: var(--ls-card-badge-radius, 50px);
}

/* Button geometry — radius / padding / text size of the CTA. Bases
 * `.unit-card .btn-box .block-btn { padding:12px 24px; border-radius:50px;
 * font-size:14px }` (globals.css:1979-1985). Property-list + unit-detail only
 * (the similar/trending card has no CTA). */
#root .new-ui-branded.new-ui-card-overrides .unit-list .unit-card .btn-box .block-btn,
#root .new-ui-branded.new-ui-card-overrides .unit-info .btn-box .block-btn {
  border-radius: var(--ls-card-btn-radius, 50px);
  padding: var(--ls-card-btn-pad-y, 12px) var(--ls-card-btn-pad-x, 24px);
  font-size: var(--ls-card-btn-size, 14px);
}

/*
 * ── CARD ACCENT — --ls-card-accent ──
 */

/* Card TITLE — the unit-number heading (property-list `.card-tag h3` + the
 * similar/trending + unit-detail `.head-icon .left h3`). Card-title token wins,
 * else the shared card accent (today's value), so an unset token is identical. */
#root .new-ui-branded .unit-card .card-tag h3,
#root .new-ui-branded .unit-card .card-heading .head-icon .left h3 {
  color: var(--ls-card-title-color, var(--ls-card-accent, #050705));
}

/* Card PRICE — the headline figure on the unit-detail price guide. */
#root .new-ui-branded .price-guide h5,
#root .new-ui-branded .price-guide .title {
  color: var(--ls-card-price-color, var(--ls-card-accent, #050705));
}

/* Trend glyph — a decorative accent (not the title), so it stays on the shared
 * card accent. Base `.trand-icon` (globals.css:1774) sets only width; original
 * inherits (~#050705), so the fallback keeps the current look when unset. */
#root .new-ui-branded .unit-card .card-heading .head-icon .trand-icon {
  color: var(--ls-card-accent, #050705);
}

/* Registration / waitlist chip (`.lables .reg`). Base hardcodes an off-brand tan
 * `#e7ae7969` (globals.css:1883); its label text is #050705 (globals.css:1895)
 * and the icon inherits. Retint the chip to a subtle card-accent wash and follow
 * text/icon onto the token. NOTE: unlike the other spots this deliberately
 * replaces the tan even when the token is unset (fallback #050705 → a near-white
 * accent tint), because the tan is off-brand; non-flagged is still untouched. */
#root .new-ui-branded .unit-card .card-heading .lables .reg {
  background: color-mix(in srgb, var(--ls-card-accent, #050705) 12%, #fff);
}

#root .new-ui-branded .unit-card .card-heading .lables .reg span,
#root .new-ui-branded .unit-card .card-heading .lables .reg i {
  color: var(--ls-card-accent, #050705);
}

/* Inline text links (excluding the CTA button, which is primary-btn themed). */
#root .new-ui-branded .unit-card a:not(.block-btn),
#root .new-ui-branded .unit-info a:not(.block-btn),
#root .new-ui-branded .description-container a {
  color: var(--ls-card-accent, #050705);
}

/* Card hover accent — the plain `.unit-card` already has a 1px border
 * (globals.css:1740), and its `:hover` only adds a box-shadow (globals.css:1757),
 * so tint the existing border on hover. */
#root .new-ui-branded .unit-list .unit-card:hover {
  border-color: var(--ls-card-accent, #d4cec6);
}

/*
 * KNOWN LIMITATION (report, do not fix here): the e2e mock env does not load a
 * real per-project static <slug>.css, so the specs verify these overrides beat
 * globals.css but NOT the real static sheet. The static sheet's own
 * `.sold-status-active` / `available-bg` / `card-tag h3` colours (and any
 * `!important` on them) need visual confirmation on a real flagged project.
 */

/*
 * ── "SAME APARTMENT, DIFFERENT LEVEL" box — --ls-card-accent / --ls-primary-btn ──
 * The base layer (unit-details-newui.css) draws the animated ring structure + the
 * namespaced nu-* keyframes; here we re-point globals' rainbow gradient to a
 * brand shimmer (background-IMAGE only, so globals' background-size:300% — which
 * nu-move-gradient animates — is preserved), and fill the level control with the
 * primary-button PAIR so its label/arrows stay readable on the fill.
 */
/* Shimmer gradient, all derived from the brand: primary for the dark stops, the
 * available-badge token for the green stop (its default #B7E6C8 == the requested
 * green), and a light primary tint for the third stop. (The requested bright blue
 * #8BE4FF has no design token, so it's a light primary tint here — for the exact
 * blue, use a per-project customCss override or add a token.) */
#root .new-ui-branded .box-level::after {
  background-image: linear-gradient(90deg,
    var(--ls-primary-btn, #050705) 0%,
    var(--ls-badge-available, #b7e6c8) 18%,
    color-mix(in srgb, var(--ls-primary-btn, #050705) 30%, #fff) 36%,
    var(--ls-primary-btn, #050705) 54%,
    var(--ls-badge-available, #b7e6c8) 72%,
    var(--ls-primary-btn, #050705) 100%);
}
/* Control: dark brand fill; label + arrows readable on it. */
#root .new-ui-branded .box-level .filter-level-arrow {
  background-color: var(--ls-primary-btn, #050705);
}
#root .new-ui-branded .box-level .filter-level-arrow span,
#root .new-ui-branded .box-level .filter-level-arrow button,
#root .new-ui-branded .box-level .filter-level-arrow i {
  color: var(--ls-primary-btn-text, #fff);
}


.tabs-button button:hover,
.tabs-button .sold-status-active {
  background-color: var(--ls-primary-btn, #050705) !important;
  border-color: var(--ls-primary-btn, #050705) !important;
  color: var(--ls-primary-btn-text, #fff) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ── PER-PROJECT UNIT-DETAIL PAGE — --ls-ud-* COLOURS + METRICS ──
 *
 * The unit-detail sibling of the card block above. Every colour/size a developer
 * can set on the unit-detail page is emitted as a --ls-ud-* CSS var on the branded
 * wrapper (tokensToCssVars → a var ONLY when set). SPLIT: the old shared "Info
 * panels" set was replaced by FOUR groups — sidebar + section-title (top level,
 * --ls-ud-sidebar-* / --ls-ud-section-title-*) and two nested per-card groups,
 * MORTGAGE (--ls-ud-mortgage-*) and DETAILS (--ls-ud-details-*). Two families of
 * rule, mirroring the card layer's always-on/gated split:
 *
 *   1. ALWAYS-ON var-chain REWRITES — for COLOURS (and the header sizes) that
 *      ALREADY have a value on today's flagged unit-detail page (sidebar bg; each
 *      card's header colour/size + header-line colour + content colour; the
 *      mortgage repayment surface/text; the section headings). Each is
 *      `var(--ls-ud-*, <exact today value>)`, so an UNSET token resolves to today's
 *      value → byte-identical. `!important` is carried ONLY where the confirmed base
 *      rule uses it (sidebar bg + repayment text in unit-details-newui.css; the
 *      mortgage accordion header, whose colour the FILTERS `.filter-box
 *      .accordion-button` rule above paints with `!important`; each card's
 *      header-line, a bootstrap `.border-top` `!important` utility). Bases DIFFER
 *      per card (measured against globals.css + unit-details-newui.css in the
 *      hermetic env): mortgage header 25px (20px ≤575) / heading colour, details
 *      header 20px / inherit; mortgage header-line #dee2e6, details header-line
 *      #d3d5da; the detail label #050705, the value #6c727f; the section heading
 *      26/22/18px across breakpoints.
 *
 *   2. GATED GEOMETRY + content SIZE — per-card FRAME (bg / border / radius /
 *      padding) + content font-size, plus the sidebar geometry (border / radius /
 *      shadow / padding-top). The sidebar geometry has no value today; the card
 *      frame is MOVED here from always-on so a gate-off page renders from the pure
 *      base CSS. All live ONLY inside
 *      `#root .new-ui-branded.new-ui-unit-detail-overrides …`, a class <Layout>
 *      adds solely when the project set ≥1 unit-detail token (hasUnitDetailOverrides).
 *      A branded project that never touches a unit-detail control gets ZERO new
 *      declarations → its unit-detail page is byte-identical.
 *
 * NON-flagged projects never get `.new-ui-branded` / the vars, so their pages are
 * untouched. This block is appended AFTER the FILTERS `.accordion-button` rule so
 * the mortgage-header colour rewrite (equal specificity, both `!important`) wins by
 * source order. Same KNOWN LIMITATION as the card block: the hermetic env loads
 * globals.css but not a per-project static <slug>.css.
 * ══════════════════════════════════════════════════════════════════════════ */

/* SIDEBAR surface — base-polish greys `.unit-info` to #f5f5f7 `!important`; rewrite
 * onto the token, keeping `!important`. */
#root .new-ui-branded .unit-info {
  background-color: var(--ls-ud-sidebar-bg, #f5f5f7) !important;
}

/* ── SPLIT: the shared "Info panels" (--ls-ud-panel-*) + standalone
 * --ls-ud-repayment-* / --ls-ud-detail-text-* set is now TWO independent per-card
 * groups — MORTGAGE (`--ls-ud-mortgage-*`, the `.filter-box.bg-mortgage-box`
 * accordion card) and DETAILS (`--ls-ud-details-*`, the `.details .bg-mortgage-box`
 * card). Each card owns its own frame + header + header-line + content controls.
 * The frame (bg / border / radius / padding) is GATED (see the GATED block below);
 * the header/content COLOUR + the header-line colour are always-on var-chains with
 * today's fallback (byte-identical when unset). Content SIZE is gated (avoids
 * always-on per-breakpoint font-size declarations). ── */

/* ═══ MORTGAGE-CALCULATOR CARD — always-on colour rewrites ═══ */

/* Header — the "Mortgage Calculator" accordion button. Base-polish colours it
 * `var(--ls-heading,#000)` + 25px (20px ≤575); the FILTERS `.accordion-button`
 * rule above also paints its colour `!important`, so keep `!important` here and
 * rely on later source order to win. Unset → `var(--ls-heading,#000)` + 25/20px
 * → byte-identical to today. */
#root .new-ui-branded .bg-mortgage-box .accordion-button {
  color: var(--ls-ud-mortgage-header-color, var(--ls-heading, #000)) !important;
  font-size: var(--ls-ud-mortgage-header-size, 25px);
  /* Header title font — unset inherits today's heading font (byte-identical). */
  font-family: var(--ls-ud-mortgage-header-font, inherit);
}
@media (max-width: 575px) {
  #root .new-ui-branded .bg-mortgage-box .accordion-button {
    font-size: var(--ls-ud-mortgage-header-size, 20px);
  }
}

/* Header line — the divider under the header = the accordion body's bootstrap
 * `.border-top` (1px solid #dee2e6 `!important`). Recolour only (width/style stay
 * from bootstrap); `!important` to beat the bootstrap utility. Unset → #dee2e6
 * (byte-identical; on a card with no accordion body it is simply inert). */
#root .new-ui-branded .bg-mortgage-box .accordion-body {
  border-top-color: var(--ls-ud-mortgage-header-line-color, #dee2e6) !important;
}

/* Content — the calculator's field labels (`.mortgage-calc`). Their colour is
 * UNDECLARED today (inherit body), so the fallback is `inherit` (byte-identical,
 * project-safe). Content SIZE is gated (see below). */
#root .new-ui-branded .filter-box.bg-mortgage-box .mortgage-calc {
  color: var(--ls-ud-mortgage-content-color, inherit);
}

/* Repayment result strip — base-polish paints the surface #394150 and the p/h1
 * text #fff `!important`. */
#root .new-ui-branded .bg-mortgage {
  background-color: var(--ls-ud-mortgage-repayment-bg, #394150);
}
#root .new-ui-branded .bg-mortgage p,
#root .new-ui-branded .bg-mortgage h1 {
  color: var(--ls-ud-mortgage-repayment-text, #fff) !important;
}

/* ═══ DETAILS CARD — always-on colour rewrites ═══ */

/* Header — the details `<h4>`. globals sizes it 20px at every breakpoint; its
 * colour is UNDECLARED today (bootstrap `h4` → inherits body #050705), so the
 * fallback is `inherit` (byte-identical AND project-safe — never a hardcoded
 * colour). */
#root .new-ui-branded .details h4 {
  color: var(--ls-ud-details-header-color, inherit);
  font-size: var(--ls-ud-details-header-size, 20px);
  /* Header title font — the details `<h4>` already uses the DRAWER's heading font
   * today (the line-60 heading-font list includes `.details h4`), so an unset
   * header-font must chain to `--ls-heading-font`, not plain `inherit` — otherwise
   * this higher-specificity rule would drop it to the inherited body font and the
   * General-design heading font would stop reaching the Details title. */
  font-family: var(--ls-ud-details-header-font, var(--ls-heading-font, inherit));
}

/* Header line — the divider under the header = the `.data-list` top border
 * (globals `.unit-card .details .data-list { border-top:1px solid #d3d5da }`).
 * Recolour only; the id-prefixed selector wins without `!important`. The base
 * #d3d5da is consistent across breakpoints (mobile globals change only the
 * data-list margin/padding). */
#root .new-ui-branded .details .data-list {
  border-top-color: var(--ls-ud-details-header-line-color, #d3d5da);
}

/* Content — the detail rows. globals colours the label #050705 and the value
 * #6c727f (the per-selector-base trap): one content-colour control unifies both
 * when set, else each keeps its own today colour. One class deeper than globals'
 * 5-class base rule. Content SIZE is gated (see below). */
#root .new-ui-branded .details .data-list .data-item .item-label {
  color: var(--ls-ud-details-content-color, #050705);
}
#root .new-ui-branded .details .data-list .data-item .item-input {
  color: var(--ls-ud-details-content-color, #6c727f);
}

/* SECTION HEADINGS `.listing-heading` — globals colours #000000 (desktop only) and
 * sizes 26px, dropping to 22px ≤991 and 18px ≤575 (per-breakpoint fallbacks). The
 * colour rewrite lives only on the base rule (the mobile rules change size only);
 * a set size token collapses every breakpoint onto that one value. */
#root .new-ui-branded .listing-heading {
  color: var(--ls-ud-section-title-color, #000000);
  font-size: var(--ls-ud-section-title-size, 26px);
}
@media (max-width: 991px) {
  #root .new-ui-branded .listing-heading {
    font-size: var(--ls-ud-section-title-size, 22px);
  }
}
@media (max-width: 575px) {
  #root .new-ui-branded .listing-heading {
    font-size: var(--ls-ud-section-title-size, 18px);
  }
}

/* ── GATED sidebar geometry (properties that do NOT exist today) ──
 * Only inside `.new-ui-unit-detail-overrides`, so a project that never sets a
 * unit-detail token gets ZERO new declarations (byte-identical). `border` beats
 * base-polish's `.unit-info{border:none}` (one class deeper); `padding-top` carries
 * `!important` to out-rank bootstrap `pt-3`'s `!important` (same as the base). When
 * the token is unset each falls back to today's geometry (no border, 16px radius,
 * no shadow, 16px top padding). */
#root .new-ui-branded.new-ui-unit-detail-overrides .unit-info {
  border: var(--ls-ud-sidebar-border-width, 0) solid var(--ls-ud-sidebar-border-color, transparent);
  border-radius: var(--ls-ud-sidebar-radius, 16px);
  box-shadow: 0 var(--ls-ud-sidebar-shadow-y, 0) var(--ls-ud-sidebar-shadow-blur, 0) var(--ls-ud-sidebar-shadow-color, rgba(0, 0, 0, 0.06));
  padding-bottom: var(--ls-ud-sidebar-padding-bottom, 0px) !important;
}

/* Top padding is PER-VARIANT: only the apartment sidebar carries `pt-3` (16px,
 * UnitInfo.tsx:636). The Home&Land / Commercial variants (`.work-detail`, no
 * pt-3) have 0 top padding today, so each keeps its own value when the token is
 * unset; a SET token applies to all variants. */
#root .new-ui-branded.new-ui-unit-detail-overrides .unit-info.pt-3 {
  padding-top: var(--ls-ud-sidebar-padding, 16px) !important;
}
#root .new-ui-branded.new-ui-unit-detail-overrides .unit-info:not(.pt-3) {
  padding-top: var(--ls-ud-sidebar-padding, 0px) !important;
}

/* ── SIDEBAR TEXT + ICON colours (emission-gated var rewrites, like sidebar-bg
 * above: apply on any flagged page but each falls back to today's exact value,
 * so an unset control is byte-identical). The unit-page token wins when set. ── */

/* Unit number heading — today inherits body #050705 (globals.css:459). */
#root .new-ui-branded .unit-info .head-icon .left h2 {
  color: var(--ls-ud-sidebar-unit-color, #050705);
}

/* Price figure + label — today via the card-accent chain (see :482-485). Keep
 * that chain as the fallback so an unset unit-page price colour is identical. */
#root .new-ui-branded .unit-info .price-guide h5,
#root .new-ui-branded .unit-info .price-guide .title {
  color: var(--ls-ud-sidebar-price-color, var(--ls-card-price-color, var(--ls-card-accent, #050705)));
}

/* Feature/amenity icon glyphs (icon-font <i>) — today #050705, else the card
 * icon colour when that (separate) control is set. Equal specificity to the card
 * rule at :447; source order (this is later) makes the unit-page token win. */
#root .new-ui-branded .unit-info .aiminities .icon i {
  color: var(--ls-ud-sidebar-icon-color, var(--ls-card-icon-color, #050705));
}

/* Amenity value text (bed/bath/car/m²) — today #4d5461 (globals.css:1962). */
#root .new-ui-branded .unit-info .aiminities .item span {
  color: var(--ls-ud-sidebar-body-color, #4d5461);
}

/* Level / aspect line ("LEVEL | Aspect") — the sidebar `.card-tag` is a SIBLING
 * of `.card-heading` (UnitInfo.tsx:637 vs :780), so no `.card-heading .card-tag p`
 * rule reaches it; today it simply INHERITS. `inherit` as the fallback keeps that
 * exactly when unset, while letting the Detail-text colour drive it when set. */
#root .new-ui-branded .unit-info .card-tag p,
#root .new-ui-branded .unit-info .card-tag .d-level-none {
  color: var(--ls-ud-sidebar-body-color, inherit);
}

/* ── SIDEBAR TEXT sizes (class-gated: only a customised project gets these, and
 * each falls back to today's value so an untouched size is byte-identical). ── */
#root .new-ui-branded.new-ui-unit-detail-overrides .unit-info .head-icon .left h2 {
  font-size: var(--ls-ud-sidebar-unit-size, 32px);
}
#root .new-ui-branded.new-ui-unit-detail-overrides .unit-info .price-guide h5 {
  font-size: var(--ls-ud-sidebar-price-size, 30px);
}
#root .new-ui-branded.new-ui-unit-detail-overrides .unit-info .aiminities .item span {
  font-size: var(--ls-ud-sidebar-body-size, 14px);
}

/* ── GATED per-card FRAME (bg / border / radius / padding) + content SIZE ──
 * Same gating rationale as the sidebar geometry above: these live ONLY inside
 * `.new-ui-unit-detail-overrides`, so a flagged project that never sets a
 * unit-detail token gets ZERO frame/size declarations → its cards render from the
 * pure base CSS (byte-identical). Every property falls back to today's value when
 * its token is unset, so even a project that set SOME OTHER unit-detail token keeps
 * an untouched card byte-identical too. Bases measured against globals.css +
 * unit-details-newui.css in the hermetic env. */

/* MORTGAGE frame. bg/border/radius win over base-polish `.filter-box` (#f7f7f7,
 * 1px #f7f7f7) + `.bg-mortgage-box` (16px radius) by class depth — no `!important`.
 * `padding` needs `!important` to beat the card's bootstrap `pt-0 px-0 pb-2`
 * utilities; its fallback reproduces that asymmetric 0/0/8px today padding. */
#root .new-ui-branded.new-ui-unit-detail-overrides .filter-box.bg-mortgage-box {
  background-color: var(--ls-ud-mortgage-bg, #f7f7f7);
  border: var(--ls-ud-mortgage-border-width, 1px) solid var(--ls-ud-mortgage-border-color, #f7f7f7);
  border-radius: var(--ls-ud-mortgage-radius, 16px);
  padding: var(--ls-ud-mortgage-padding, 0 0 8px) !important;
}

/* MORTGAGE content size — the field labels (`.mortgage-calc`, sized by
 * `.label-size`: 14px, 13px ≤1499, 11px ≤575). Per-breakpoint fallbacks keep an
 * unset token byte-identical at every viewport; a set token collapses them onto
 * it — DOWN TO 576px ONLY.
 *
 * EXCEPTION, ≤575px: that breakpoint is pinned to a hard 11px `!important` and
 * does NOT read the token, so `--ls-ud-mortgage-content-size` (the Mortgage
 * "content size" control) has no effect on phones. A project that sets it sees
 * its value on desktop and tablet and 11px below 576px. Deliberate — small
 * phones are kept on a fixed label size regardless of what a project asks for.
 *
 * Note this makes the rule a no-op for projects on the default: globals.css's
 * own `≤575px` block already sizes `.label-size` to 11px, which is where the
 * fallback came from. Its only remaining effect is to override a set token, and
 * the `!important` additionally blocks the usual escape hatches (a per-project
 * /assets/styles/<slug>.css and sanitized customCss). If a project ever needs a
 * different phone size, the fix is a separate mobile token here — the pattern
 * `--nu-logo-height-mobile` uses in header-newui.css — not relaxing this rule,
 * which would change every project at once. */
#root .new-ui-branded.new-ui-unit-detail-overrides .filter-box.bg-mortgage-box .mortgage-calc {
  font-size: var(--ls-ud-mortgage-content-size, 14px);
}
@media (max-width: 1499px) {
  #root .new-ui-branded.new-ui-unit-detail-overrides .filter-box.bg-mortgage-box .mortgage-calc {
    font-size: var(--ls-ud-mortgage-content-size, 13px);
  }
}
@media (max-width: 575px) {
  #root .new-ui-branded.new-ui-unit-detail-overrides .filter-box.bg-mortgage-box .mortgage-calc {
    font-size: 11px !important;
  }
}

/* DETAILS frame. bg needs `!important` to beat bootstrap `.bg-white` (which pins
 * #fff on the card) — so the details bg token is now functional (it was inert
 * under the old shared control). border/radius win on specificity; `padding` base
 * is 0 (the `.bg-mortgage-box` div carries no padding today). */
#root .new-ui-branded.new-ui-unit-detail-overrides .details .bg-mortgage-box {
  background-color: var(--ls-ud-details-bg, #fff) !important;
  border: var(--ls-ud-details-border-width, 1px) solid var(--ls-ud-details-border-color, rgba(0, 0, 0, 0.06));
  border-radius: var(--ls-ud-details-radius, 16px);
  padding: var(--ls-ud-details-padding, 0);
}

/* DETAILS content size — the detail rows. Base 15px, 14px 320–1399 (globals tiles
 * that range at 14px; `max-width:1399px` covers it). */
#root .new-ui-branded.new-ui-unit-detail-overrides .details .data-list .data-item .item-label,
#root .new-ui-branded.new-ui-unit-detail-overrides .details .data-list .data-item .item-input {
  font-size: var(--ls-ud-details-content-size, 15px);
}

/* Home & Land listing spacing from the Arbour base. The marker is emitted only
 * for `ProjectType === 'HomeAndLand'`, keeping residential and commercial
 * listing layouts on their existing spacing. */
@media (min-width: 992.98px) {
  .home-land-unit-listing.mt-desktop {
    margin-top: 102px;
  }
}

@media (max-width: 991.98px) {
  .home-land-unit-listing .mobile-section {
    margin-top: 138px;
    padding-top: 10px !important;
  }
}

@media (max-width: 1399px) {
  #root .new-ui-branded.new-ui-unit-detail-overrides .details .data-list .data-item .item-label,
  #root .new-ui-branded.new-ui-unit-detail-overrides .details .data-list .data-item .item-input {
    font-size: var(--ls-ud-details-content-size, 14px);
  }
}