/**
 * community-property.css
 * INDEPENDENT CSS for Community Property Template
 * Version: 5.31 (v5.30 base + v5.31 search bar + video + FAQ additions inline)
 *
 * PREFIX: .spc- (Single Property Community)
 *
 * v5.31 CHANGES (from v5.30) — THREE NEW SCOPED BLOCKS (additive, inline at end):
 *   1. SEARCH BAR — `.spc-page` scoped pill (white box + brown call_made
 *      circle button) rendered right of the breadcrumb. ≤991px stacks
 *      full-width centered. Hover: button bg shifts to #928572 per Figma.
 *   2. VIDEO SECTION — `.spc-video-section` 16:9 responsive wrapper. The PHP
 *      ALSO carries inline defensive styles in `<style id="alh-video-embed-css">`
 *      — same cascade specificity, so either source winning is fine.
 *   3. FAQ SECTION — `.spc-faq-*` rules per Paul's Figma reference. v5.30
 *      had no FAQ rules defined (kaya siguro hindi maganda lumalabas dati).
 *      Sofia Pro 36px heading, 867px max item width, 1000px hairline divider,
 *      "( 01 )" numbering 18px Afacad Flux, 24px question, 18px light answer.
 *      Responsive 1439 / 1199 / 1023 / 767 / 480 / 375.
 *
 * v5.30 CHANGES (from v5.29) — BULLETPROOF ACTIVE TAB STATE (HOTFIX):
 *
 * Per client (Paul) screenshot after v5.29 deployment: the active tab pill
 * (e.g., "Living Connected" sa Strategic Vitality panel) was rendering with
 * an EMPTY brown outline — no fill, no visible text. Root cause: parent
 * theme (Hello Biz / Elementor / Hello Theme parent) has a button rule that
 * strips background-color and re-colors text on focused buttons, AND the
 * `.active` class collides with some plugin/theme nav-state styling that
 * forces transparent bg + inherit color. The visible outline was browser
 * default `:focus-visible` on the most-recently-clicked button.
 *
 *  THIS IS A PURE CSS HOTFIX — ZERO PHP CHANGES.
 *  ZERO v5.29 RULES MODIFIED — only APPENDS stronger overrides at the end
 *  of the file. v5.29 markup, JS, and ACF flow are 100% untouched.
 *  Wala tayong binawasan, wala tayong binago — bulletproofed lang.
 *
 *  WHAT'S ADDED (at the very end of this file, BELOW v5.29 responsive):
 *
 *  1. NUCLEAR ACTIVE TAB OVERRIDE — `.spc-home-features-v2 .spc-hf-tab.active`
 *     - background: #5A4F42 !important (literal hex, NOT var — survives
 *       any deeper scope re-definition of --spc-primary)
 *     - background-color: #5A4F42 !important (explicit second declaration
 *       for stubborn themes that target one or the other)
 *     - color: #FFFFFF !important
 *     - border: none !important + outline: none !important
 *     - -webkit/-moz/appearance: none !important (kills native button look)
 *
 *  2. PSEUDO-CLASS COVERAGE — same brown+white on:
 *     :hover / :focus / :focus-visible / :active
 *     Prevents any "press" or "tab key" state from flashing back to
 *     theme defaults.
 *
 *  3. INACTIVE TAB BULLETPROOFING — defensive override for the non-active
 *     state too, in case theme touches them: #EFEDEB bg + #766C61 text.
 *     Hover state: #E8E5DF bg + #2A2A2A text.
 *
 *  4. TEXT VISIBILITY FORCE — `.spc-hf-tab *` gets `opacity: 1`,
 *     `visibility: visible`, `text-shadow: none`. Some themes use these
 *     to fade out button text on certain states.
 *
 *  5. UNITS PHASE TAB COVERAGE — same pattern applied to
 *     `.spc-units-section-v2 .spc-phase-tab.active` (All Units / floor
 *     plan filter tabs), since they share the same theme-stripped risk.
 *
 *  6. SPECIFICITY LADDER — selectors written 4 ways for maximum coverage:
 *     - `.spc-home-features-v2 button.spc-hf-tab.active`
 *     - `.spc-home-features-v2 .spc-hf-tab.active`
 *     - `section.spc-home-features-v2 button.spc-hf-tab.active`
 *     - `section.spc-home-features-v2 .spc-hf-tab.active`
 *     Catches `button` selector targeting AND class-only selectors.
 *
 *  ZERO CHANGES to:
 *    - v5.29 home features v2 base rules (still in effect)
 *    - v5.29 unit cards v2 rules (still in effect)
 *    - All v5.28 base rules and responsive breakpoints
 *    - Property info, gallery, hero, lightbox, map, FAQ, CTA, etc.
 *
 *  DEPLOY NOTES:
 *    - Drop-in CSS replacement. No PHP touch needed.
 *    - Purge Kinsta cache + CDN + hard refresh after upload.
 *    - If still showing empty pill after this fix, the issue is browser-
 *      side cached CSS — append ?v=530 to the stylesheet URL or bump
 *      theme version in style.css to bust cache.
 *
 * v5.29 CHANGES (from v5.28) — HOME FEATURES V2 (3-TAB STATIC) + UNITS CARDS V2:
 *
 * Pair release with single-property-community.php v6.20. Adds two new
 * design systems via tightly scoped selectors so v5.28 base rules stay
 * UNTOUCHED. Wala tayong babawasan — all old rules preserved verbatim.
 *
 *  1. HOME FEATURES V2 — scoped to `.spc-home-features-v2`
 *     Mirrors the single-property.php v8.13.3 / property-single-v8.css v8.8.4
 *     home features redesign. Replaces v6.18.1 2-tab (Home Details + Features)
 *     with 3-tab static structure: Living Well / Living Smart / Living
 *     Connected, each with hardcoded title + tagline + dynamic gallery
 *     slider + dynamic long description from home_description_featues_tab_curr.
 *
 *     NEW SELECTORS:
 *       .spc-home-features-v2 .section-title           — HIDDEN (display: none)
 *       .spc-home-features-v2 .spc-hf-heading          — also hidden (alias)
 *       .spc-home-features-v2 .spc-hf-tabs             — tab pills row
 *       .spc-home-features-v2 .spc-hf-tab              — pill: bg-200 / brown
 *                                                        active states
 *       .spc-home-features-v2 .spc-hf-panel            — hidden by default
 *       .spc-home-features-v2 .spc-hf-panel.active     — shown
 *       .spc-home-features-v2 .spc-hd-tab-header       — title + tagline group
 *       .spc-home-features-v2 .spc-hd-tab-title        — Sofia Pro 30px static
 *       .spc-home-features-v2 .spc-hd-tab-tagline      — Afacad Flux 18px 300
 *       .spc-home-features-v2 .spc-hd-slider           — 16:9 max-height 700px
 *       .spc-home-features-v2 .spc-hd-slide            — absolute layer
 *       .spc-home-features-v2 .spc-hd-slide.active     — visible
 *       .spc-home-features-v2 .spc-hd-slide-img        — bg-image + <img> tag
 *       .spc-home-features-v2 .spc-hd-arrow            — white circle (v8.7
 *                                                        base inherited)
 *       .spc-home-features-v2 .spc-hd-arrow:active     — flips brown bg +
 *                                                        white chevron
 *       .spc-home-features-v2 .spc-hd-dots             — bottom-center row
 *       .spc-home-features-v2 .spc-hd-dot              — 8px white circles
 *       .spc-home-features-v2 .spc-hd-dot.active       — solid white
 *       .spc-home-features-v2 .spc-hd-long-desc        — #2A2A2A 18px paragraph
 *       .spc-home-features-v2 .spc-hd-long-desc p      — INNER OVERRIDE with
 *                                                        !important to beat
 *                                                        parent theme
 *                                                        p { color: brown }
 *
 *  2. UNITS SECTION V2 — scoped to `.spc-units-section-v2` and `.spc-unit-card-v2`
 *     Replaces v6.2 white-card design with full-bleed gradient overlay cards.
 *     320px tall, full-width-of-grid-cell, image as background + linear
 *     gradient bottom + white text content.
 *
 *     NEW SELECTORS:
 *       .spc-units-section-v2 .spc-phase-title-row    — H2 + count pill row
 *       .spc-units-section-v2 .spc-phase-heading      — 30px Sofia Pro 400
 *       .spc-units-section-v2 .spc-phase-count-pill   — "N Available Units"
 *       .spc-units-section-v2 .spc-phase-tabs         — pill row
 *       .spc-units-section-v2 .spc-phase-tab          — bg-200 / brown active
 *       .spc-units-section-v2 .spc-units-grid-v2      — column flex, 24px gap
 *       .spc-units-section-v2 .spc-units-row          — 2-col grid, 24px gap
 *       .spc-unit-card-v2                              — 320px tall, relative
 *       .spc-unit-card-v2 .spc-unit-card-img          — absolute full-bleed
 *       .spc-unit-card-v2 .spc-unit-card-img img      — object-fit cover
 *                                                       + hover scale
 *       .spc-unit-card-v2 .spc-unit-card-img-empty    — placeholder bg
 *       .spc-unit-card-v2 .spc-unit-card-overlay      — gradient overlay
 *       .spc-unit-card-no-image .spc-unit-card-overlay — deeper gradient
 *       .spc-unit-card-v2 .spc-unit-card-badges       — top badge row
 *       .spc-unit-card-v2 .spc-unit-badge             — white pill dark text
 *       .spc-unit-card-v2 .spc-unit-badge-frosted     — translucent variant
 *       .spc-unit-card-v2 .spc-unit-card-body         — bottom content
 *       .spc-unit-card-v2 .spc-unit-card-name-row     — name + price split
 *       .spc-unit-card-v2 .spc-unit-card-name         — 20px white
 *       .spc-unit-card-v2 .spc-unit-card-price        — flex baseline
 *       .spc-unit-card-v2 .spc-unit-card-price-from   — "From" prefix
 *       .spc-unit-card-v2 .spc-unit-card-price-value  — value 20px medium
 *       .spc-unit-card-v2 .spc-unit-card-divider      — 1px white/30 line
 *       .spc-unit-card-v2 .spc-unit-card-specs        — beds/baths/sqft row
 *       .spc-unit-card-v2 .spc-unit-card-spec         — single spec group
 *       .spc-unit-card-v2 .spc-unit-card-spec-icon    — Material Symbol
 *       .spc-unit-card-v2 .spc-unit-card-spec-value   — numeric
 *       .spc-unit-card-v2 .spc-unit-card-spec-label   — "beds" etc.
 *       .spc-unit-card-v2 .spc-unit-hover-overlay     — fades in on hover
 *       .spc-unit-card-v2 .spc-unit-view-home-btn     — white pill →
 *                                                       brown on hover
 *       .spc-units-section-v2 .spc-phase-dots         — pagination row
 *       .spc-units-section-v2 .spc-phase-dot          — 8px gray circle
 *       .spc-units-section-v2 .spc-phase-dot.active   — brown circle
 *
 * RESPONSIVE: All v5.28 breakpoints (1439 / 1199 / 1023 / 767 / 600 / 480 /
 * 375) keep their existing rules. v5.29 ADDS new scoped rules INTO the same
 * media queries for the v2 selectors (mostly card height + padding + font
 * scaling). Mobile 2-col → 1-col collapse at ≤1023px for units grid.
 *
 * DORMANT v5.x RULES (kept per wala-tayong-babawasan):
 *   .spc-unit-card base (without -v2) — old white-card design rules
 *   .spc-unit-image, .spc-unit-content, .spc-unit-title, .spc-unit-specs,
 *   .spc-unit-spec, .spc-unit-spec-inner — old class names no longer
 *   rendered by v6.20 PHP but kept in CSS for any future variant /
 *   other consumer
 *
 * ZERO CHANGES to:
 *   - Breadcrumb, hero/coming-soon, gallery grid + See All Photos overlay
 *   - Property info section + responsive stacking (v5.28 strategy intact)
 *   - Portfolio / Custom Note plain-text styles (v5.25 intact)
 *   - Hero / coming-soon badges
 *   - About community + key features + features grid
 *   - Lightbox, sitemap, map V3, CTA banner
 *   - All existing media query rules keep their v5.28 contents verbatim
 *
 * v5.28 CHANGES (from v5.27) — STACK AT ≤1199px (TRUE DESKTOP-ONLY SIDE-BY-SIDE):
 *
 * Per client (Paul) feedback after v5.27 deployment: at 1198px viewport
 * (just below the 1200px content max-width), the price + Schedule A Tour +
 * Download Brochure were STILL dropping below the address. Width math:
 *
 *   Viewport: 1198px
 *   Padding (1199px breakpoint): 0 60px → −120px
 *   Container available: 1078px
 *   Right column needs: ~400px (locked by flex-shrink: 0)
 *   Left column needs: ~380px minimum
 *   Total minimum: 380 + 40 (gap) + 400 = 820px
 *
 * Decision: Just stack at ≤1199px. Side-by-side ONLY at true desktop
 * (≥1200px content-width). Cleaner, more predictable.
 *
 * v5.27/v5.26 (deprecated by v5.28).
 *
 * v5.25 CHANGES (preserved) — PORTFOLIO NOTE PLAIN TEXT REDESIGN:
 * Plain text styling, no background pill, matches address.
 *
 * v5.24 CHANGES (preserved) — Portfolio styles + stack breakpoint.
 *
 * v5.23 CHANGES (preserved) — See All Photos button 1:1 copy of single property.
 *
 * Paul Y. 20260506
 */

@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@300;400;500;600&display=swap');

/* ========================================
   CSS CUSTOM PROPERTIES
======================================== */
.spc-page {
    --spc-primary: #5A4F42;
    --spc-dark-text: #2A2A2A;
    --spc-light-text: #766C61;
    --spc-100: #F5F3F0;
    --spc-200: #EFEDEB;
    --spc-300: #E8E5DF;
    --spc-400: #CCC8C0;
    --spc-white: #FFFFFF;
    --spc-complimentary-1: #6A8375;
    --spc-complimentary-2: #6B6D80;
    --spc-marker-green: #778869;
    --spc-font-heading: 'Sofia Pro', 'Sofia Sans', 'Roboto', sans-serif;
    --spc-font-body: 'Afacad Flux', sans-serif;
    --spc-content-width: 1200px;
    --spc-gap-map-cta: 54px;
}

.spc-page {
    width: 100%;
    background: var(--spc-white);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========================================
   BREADCRUMB
======================================== */
.spc-breadcrumb {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: var(--spc-200);
    display: flex;
    justify-content: center;
}

.spc-breadcrumb-inner {
    width: 100%;
    max-width: var(--spc-content-width);
    padding: 14px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.spc-breadcrumb-link {
    color: var(--spc-dark-text);
    font-family: var(--spc-font-body);
    font-size: 14px;
    font-weight: 300;
    text-decoration: none;
}

.spc-breadcrumb-link:hover { opacity: 0.7; }

.spc-breadcrumb-separator,
.spc-breadcrumb-current {
    color: var(--spc-dark-text);
    font-family: var(--spc-font-body);
    font-size: 14px;
    font-weight: 300;
}

.spc-breadcrumb-current { font-weight: 400; }

/* ========================================
   v5.13 - COMING SOON SECTIONS
======================================== */

.spc-coming-soon-info {
    width: 100%;
    background: var(--spc-white);
    display: flex;
    justify-content: center;
    padding: 40px 0 32px 0;
}

.spc-coming-soon-info-inner {
    width: 100%;
    max-width: var(--spc-content-width);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spc-coming-soon-badges {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
}

.spc-coming-soon-title {
    color: var(--spc-dark-text);
    font-size: 28px;
    font-family: var(--spc-font-heading);
    font-weight: 400;
    margin: 0;
    line-height: 1.3;
}

.spc-coming-soon-location {
    color: var(--spc-light-text);
    font-size: 18px;
    font-family: var(--spc-font-body);
    font-weight: 300;
    margin: 0;
}

.spc-coming-soon-illustration {
    width: 100%;
    padding: 60px 101px 80px;
    background: transparent;
    display: flex;
    justify-content: center;
}

.spc-coming-soon-illustration-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spc-coming-soon-img {
    width: 288px;
    height: auto;
    max-width: 100%;
    margin-bottom: 16px;
}

.spc-coming-soon-heading {
    font-family: var(--spc-font-heading);
    font-size: 36px;
    font-weight: 400;
    color: var(--spc-dark-text);
    margin: 0;
    text-align: center;
}

.spc-coming-soon-description {
    font-family: var(--spc-font-body);
    font-size: 20px;
    font-weight: 300;
    color: var(--spc-dark-text);
    margin: 0;
    line-height: 1.5;
    text-align: center;
}

.spc-featured-homes-section {
    width: 100%;
    padding: 0;
    background: var(--spc-white);
}

/* ========================================
   v5.20 - GALLERY GRID (CSS GRID - RELIABLE 2x2)
======================================== */

.spc-gallery-grid-section {
    width: 100%;
    background: var(--spc-white);
    display: flex;
    justify-content: center;
    padding: 20px 0 0 0;
}

.spc-gallery-grid-container {
    width: 100%;
    max-width: var(--spc-content-width);
    margin: 0 auto;
    box-sizing: border-box;
}

.spc-gallery-grid {
    display: grid;
    grid-template-columns: 1.44fr 1fr;
    gap: 15px;
    height: 500px;
    overflow: hidden;
}

.spc-gallery-grid-main {
    overflow: hidden;
    cursor: pointer;
    border-radius: 0;
}

.spc-gallery-grid-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.spc-gallery-grid-main:hover img {
    transform: scale(1.02);
    opacity: 0.95;
}

.spc-gallery-grid-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    overflow: hidden;
}

.spc-gallery-grid-thumb {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
}

.spc-gallery-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.spc-gallery-grid-thumb:hover img {
    transform: scale(1.02);
    opacity: 0.95;
}

.spc-gallery-grid-last {
    position: relative !important;
    overflow: hidden !important;
}

/* ========================================
   v5.19 - SEE ALL PHOTOS OVERLAY + BUTTON
======================================== */

.spc-gallery-see-all-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    padding: 14px !important;
    pointer-events: none !important;
}

.spc-gallery-see-all-btn {
    padding: 8px 16px !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #2A2A2A !important;
    border: none !important;
    border-radius: 50px !important;
    outline: 0.5px solid #5A4F42 !important;
    font-size: 14px !important;
    font-family: 'Afacad Flux', sans-serif !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    pointer-events: all !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.spc-gallery-see-all-btn:hover,
.spc-gallery-see-all-btn:focus,
.spc-gallery-see-all-btn:active,
button.spc-gallery-see-all-btn:hover,
button.spc-gallery-see-all-btn:focus,
.spc-gallery-see-all-overlay .spc-gallery-see-all-btn:hover,
.spc-gallery-grid .spc-gallery-see-all-overlay .spc-gallery-see-all-btn:hover {
    background: #5A4F42 !important;
    background-color: #5A4F42 !important;
    color: #FFFFFF !important;
    outline: 0.5px solid #5A4F42 !important;
    opacity: 1 !important;
}

.spc-gallery-btn-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    background: #5A4F42 !important;
    color: #FFFFFF !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-family: 'Afacad Flux', sans-serif !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.spc-gallery-see-all-btn:hover .spc-gallery-btn-count,
button.spc-gallery-see-all-btn:hover .spc-gallery-btn-count {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #5A4F42 !important;
}

.spc-gallery-see-all-btn:hover .spc-gallery-btn-text,
button.spc-gallery-see-all-btn:hover .spc-gallery-btn-text {
    color: #FFFFFF !important;
}

.spc-gallery-btn-text {
    font-size: 14px !important;
    font-family: 'Afacad Flux', sans-serif !important;
    font-weight: 400 !important;
}

.spc-gallery-grid-placeholder {
    background: var(--spc-100);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.spc-gallery-grid-placeholder-inner { opacity: 0.4; }

.spc-gallery-grid-empty {
    width: 100%;
    height: 500px;
    background: var(--spc-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spc-gallery-grid-empty svg { opacity: 0.4; }

/* ========================================
   v5.15 - PROPERTY INFO SECTION
======================================== */

.spc-property-info-section {
    width: 100%;
    background: var(--spc-white);
    display: flex;
    justify-content: center;
    padding: 30px 0 48px 0;
}

.spc-property-info-container {
    width: 100%;
    max-width: var(--spc-content-width);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.spc-property-info-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.spc-property-badges-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.spc-property-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spc-property-name-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
}

.spc-property-name {
    font-family: var(--spc-font-heading);
    font-size: 30px;
    font-weight: 400;
    color: var(--spc-dark-text);
    margin: 0;
    line-height: 1.3;
    display: inline;
}

.spc-property-category-dot {
    font-family: var(--spc-font-body);
    font-size: 20px;
    font-weight: 300;
    color: var(--spc-light-text);
    display: inline;
}

.spc-property-address {
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    color: var(--spc-light-text);
    margin: 4px 0 0 0;
}

.spc-property-info-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex-shrink: 0;
}

.spc-property-price-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.spc-price-label { font-family: var(--spc-font-body); font-size: 14px; font-weight: 300; color: var(--spc-light-text); text-transform: lowercase; }
.spc-price-amount { font-family: var(--spc-font-heading); font-size: 30px; font-weight: 400; color: var(--spc-dark-text); }

.spc-property-actions { display: flex; gap: 12px; align-items: center; }

.spc-action-btn {
    height: 45px;
    padding: 0 24px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--spc-font-body);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

.spc-action-primary { background: var(--spc-primary); color: #FFFFFF; border: none; }
.spc-action-primary:hover { 
    background: #928572!important;
    color: #FFFFFF!important;
}
.spc-action-primary .spc-action-btn-icon { display: flex; align-items: center; }
.spc-action-primary .material-symbols-outlined { font-size: 20px; color: #FFFFFF; }
.spc-action-secondary { background: transparent; color: var(--spc-primary); border: 1px solid var(--spc-primary); }
.spc-action-secondary:hover { background: var(--spc-primary); color: #FFFFFF; }

/* ========================================
   v5.25 - PORTFOLIO / CUSTOM NOTE (PLAIN TEXT)
======================================== */
.spc-portfolio-note {
    display: block;
    box-sizing: border-box;
    background: transparent;
    color: var(--spc-light-text);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.45;
    padding: 0;
    margin: 4px 0 0 0;
    border: 0;
    border-radius: 0;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.spc-portfolio-note br { display: block; content: ""; margin-top: 2px; }

.spc-portfolio-note-hero {
    color: var(--spc-white);
    margin-top: 10px;
}

.spc-portfolio-note-coming-soon {
    margin-top: 8px;
}

/* ========================================
   HERO SECTION - Still used by Coming Soon Scenario 2
======================================== */
.spc-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 70vh;
    min-height: 500px;
    max-height: 800px;
    overflow: hidden;
}

.spc-hero-image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.spc-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.spc-hero-overlay {
    width: 100%;
    height: auto;
    min-height: 180px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(63, 63, 70, 0.70);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    padding: 28px 0;
}

.spc-hero-overlay-content {
    width: 100%;
    max-width: var(--spc-content-width);
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.spc-hero-info-group { display: flex; align-items: center; gap: 112px; justify-content: flex-start; }
.spc-hero-info, .spc-hero-details { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.spc-hero-info-inner, .spc-hero-details-inner { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left; }

.spc-hero-badge { padding: 5px 20px; border-radius: 50px; display: inline-flex; justify-content: center; align-items: center; font-family: var(--spc-font-body); font-size: 16px; font-weight: 400; white-space: nowrap; margin-bottom: 0; }
.spc-hero-badge-move-in-ready { background: #6A8375 !important; color: #FFFFFF !important; }
.spc-hero-badge-plan-ready { background: #6B6D80 !important; color: #FFFFFF !important; }
.spc-hero-badge-in-construction { background: #FFFFFF !important; color: #5A4F42 !important; outline: 1px solid #5A4F42 !important; outline-offset: -1px !important; }
.spc-hero-badge-in-contract { background: #666666 !important; color: #FFFFFF !important; }
.spc-hero-badge-sold { background: #EEEEEE !important; color: #5A4F42 !important; }
.spc-hero-badge-coming-soon { background: transparent !important; border: 1px solid #2A2A2A !important; color: #2A2A2A !important; }
.spc-hero-badge-estimated { background: #E6E2DD !important; color: #5A4F42 !important; }
.spc-hero-badge-promo { background: #FFFFFF !important; border: 1px solid #E8E5DF !important; color: #2A2A2A !important; }
.spc-hero-badge-default { background: #EEEEEE !important; color: #5A4F42 !important; }

.spc-hero-title { color: var(--spc-white); font-family: var(--spc-font-body); font-size: 36px; font-weight: 400; line-height: 1.2; margin: 0; text-align: left; }
.spc-hero-address { color: var(--spc-white); font-family: var(--spc-font-body); font-size: 18px; font-weight: 300; margin: 0; text-align: left; }
.spc-hero-category { color: var(--spc-white); font-family: var(--spc-font-body); font-size: 24px; font-weight: 300; margin: 0; text-align: left; }
.spc-hero-price { color: var(--spc-white); font-family: var(--spc-font-body); font-size: 18px; font-weight: 300; margin: 0; text-align: left; }
.spc-hero-cta { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 14px; }

/* ========================================
   BUTTONS
======================================== */
.spc-btn {
    height: 45px;
    padding: 0 24px;
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 400;
    text-transform: capitalize;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    white-space: nowrap;
}

.spc-btn-primary { background: var(--spc-white); color: var(--spc-primary); }
.spc-btn-primary:hover { background: var(--spc-100); transform: translateY(-1px); }
.spc-btn-tertiary { background: transparent; color: var(--spc-white); outline: 1px solid var(--spc-white); outline-offset: -1px; }
.spc-btn-tertiary:hover { background: rgba(255, 255, 255, 0.1); }
.spc-btn-secondary { background: var(--spc-white); color: var(--spc-primary); outline: 1px solid var(--spc-primary); outline-offset: -1px; width: auto; align-self: flex-start; }
.spc-btn-secondary:hover { background: #5A4F42; color: #FFFFFF; transform: translateY(-1px); }
.spc-btn-secondary:hover .spc-btn-icon svg, .spc-btn-secondary:hover .spc-btn-icon svg path { fill: #FFFFFF; }
.spc-btn-secondary:hover .material-symbols-outlined { color: #FFFFFF; }
.spc-btn-icon { width: 14px; height: 10px; display: inline-flex; align-items: center; justify-content: center; }
.spc-btn-icon svg { width: 100%; height: auto; }
.spc-btn .material-symbols-outlined { font-size: 20px; line-height: 1; }

/* ========================================
   v5.18 - ABOUT COMMUNITY + KEY FEATURES
======================================== */
.spc-about-features {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 80px 0;
    background: transparent;
}

.spc-about-features-inner {
    width: 100%;
    max-width: var(--spc-content-width);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 96px;
    padding-top: 80px;
    border-top: 1px solid var(--spc-300);
}

.spc-about-column { width: 550px; display: flex; flex-direction: column; gap: 28px; }
.spc-features-column { flex: 1; display: flex; flex-direction: column; gap: 28px; }

.spc-section-title { color: var(--spc-dark-text); font-family: var(--spc-font-heading); font-size: 32px; font-weight: 400; line-height: normal; margin: 0; }
.spc-about-text { color: var(--spc-dark-text); font-family: var(--spc-font-body); font-size: 18px; font-weight: 300; line-height: normal; margin: 0; }
.spc-about-text p { margin: 0 0 16px 0; }
.spc-about-text p:last-child { margin-bottom: 0; }

.spc-features-grid { display: flex; justify-content: space-between; align-items: flex-start; }
.spc-features-col { flex: 1; display: flex; flex-direction: column; gap: 28px; }
.spc-feature-item { display: flex; align-items: center; gap: 14px; }
.spc-feature-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--spc-primary); }
.spc-feature-icon .material-symbols-outlined { font-size: 24px; color: var(--spc-primary); }
.spc-feature-text { color: var(--spc-dark-text); font-family: var(--spc-font-body); font-size: 18px; font-weight: 300; line-height: 1.4; }

/* ========================================
   CONTENT CONTAINER
======================================== */
.spc-content { width: 100%; max-width: var(--spc-content-width); margin: 0 auto; }
.spc-divider { width: 100%; height: 1px; background: var(--spc-300); }

/* ========================================
   LIGHTBOX
======================================== */
.spc-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--spc-white); z-index: 99999; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 40px; padding: 40px; }
.spc-lightbox.active { display: flex; }
.spc-lightbox-close { position: absolute; top: 40px; right: 40px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.spc-lightbox-close:hover { transform: scale(1.1); }
.spc-lightbox-close .material-symbols-outlined { font-size: 40px; color: var(--spc-primary); }
.spc-lightbox-image { max-width: 1200px; max-height: 800px; width: 100%; display: flex; justify-content: center; align-items: center; }
.spc-lightbox-image img { max-width: 100%; max-height: 800px; object-fit: contain; }
.spc-lightbox-controls { display: flex; justify-content: center; align-items: center; gap: 60px; }
.spc-lightbox-nav { width: 40px; height: 40px; background: none; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.spc-lightbox-nav:hover:not(:disabled) { transform: scale(1.1); }
.spc-lightbox-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.spc-lightbox-nav .material-symbols-outlined { font-size: 40px; color: var(--spc-primary); }
.spc-lightbox-counter { display: flex; justify-content: center; align-items: center; gap: 15px; }
.spc-lightbox-counter span { color: var(--spc-primary); font-family: var(--spc-font-body); font-size: 18px; font-weight: 400; }

/* ========================================
   UNITS SECTION (v5.x BASE — DORMANT FOR v6.20)
   Kept for backward compat / future variants. Not matched by v6.20 markup
   which adds .spc-unit-card-v2 modifier. Wala tayong babawasan.
======================================== */
.spc-units-section { padding: 80px 0; border-top: 1px solid var(--spc-300); }
.spc-units-section .spc-section-title { margin-bottom: 28px; }
.spc-units-grid { display: flex; flex-direction: column; gap: 28px; }
.spc-units-row { display: flex; justify-content: flex-start; gap: 28px; }
.spc-unit-card { width: calc(50% - 14px); display: flex; flex-direction: column; transition: transform 0.3s ease; }
.spc-unit-card:hover { transform: translateY(-4px); }
.spc-unit-card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.spc-unit-image { width: 100%; height: 329px; overflow: hidden; }
.spc-unit-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.spc-unit-card:hover .spc-unit-image img { transform: scale(1.05); }

.spc-unit-placeholder {
    width: 100%;
    height: 100%;
    background: #FAF9F7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spc-unit-placeholder svg {
    width: 30px;
    height: 30px;
    opacity: 1;
}
.spc-unit-content { padding: 20px; background: var(--spc-white); border-left: 1px solid var(--spc-300); border-right: 1px solid var(--spc-300); display: flex; flex-direction: column; gap: 10px; }
.spc-unit-badges { display: flex; justify-content: flex-start; gap: 5px; flex-wrap: wrap; }

.spc-badge { padding: 5px 14px; border-radius: 50px; display: inline-flex; justify-content: center; align-items: center; font-family: var(--spc-font-body); font-size: 12px; font-weight: 400; white-space: nowrap; }
.spc-badge-move-in-ready { background: #6A8375 !important; color: #FFFFFF !important; }
.spc-badge-plan-ready-lot { background: #6B6D80 !important; color: #FFFFFF !important; }
.spc-badge-in-construction { background: transparent !important; outline: 1px solid var(--spc-primary) !important; color: var(--spc-primary) !important; }
.spc-badge-estimated { background: var(--spc-100) !important; color: var(--spc-primary) !important; }
.spc-badge-in-contract { background: #666666 !important; color: #FFFFFF !important; }
.spc-badge-sold { background: #EEEEEE !important; color: #5A4F42 !important; }
.spc-badge-coming-soon { background: transparent !important; border: 1px solid #2A2A2A !important; color: #2A2A2A !important; }
.spc-badge-default { background: #EEEEEE !important; color: #5A4F42 !important; }
.spc-badge-promo { background: var(--spc-white) !important; outline: 1px solid var(--spc-300) !important; color: var(--spc-primary) !important; }

.spc-unit-title { color: var(--spc-dark-text); font-family: var(--spc-font-body); font-size: 20px; font-weight: 400; margin: 0; }
.spc-unit-specs { display: flex; align-items: stretch; height: 80px; }
.spc-unit-spec { flex: 1; padding: 12px 24px; background: var(--spc-white); border-left: 1px solid var(--spc-300); border-top: 1px solid var(--spc-300); border-bottom: 1px solid var(--spc-300); display: flex; justify-content: center; align-items: center; }
.spc-unit-spec:last-child { border-right: 1px solid var(--spc-300); }
.spc-unit-spec-beds, .spc-unit-spec-baths { flex: 0 1 112px; min-width: 80px; }
.spc-unit-spec-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
.spc-unit-spec-label { color: var(--spc-light-text); font-family: var(--spc-font-body); font-size: 12px; font-weight: 300; text-transform: uppercase; }
.spc-unit-spec-value { color: var(--spc-dark-text); font-family: var(--spc-font-body); font-size: 20px; font-weight: 400; }
.spc-no-units { text-align: center; padding: 60px 20px; color: var(--spc-light-text); font-family: var(--spc-font-body); font-size: 18px; }

/* SITEMAP */
.spc-sitemap-section { padding: 80px 0; }
.spc-sitemap-section .spc-section-title { margin-bottom: 28px; }
.spc-sitemap-wrapper { width: 100%; padding: 14px 240px; background: var(--spc-white); outline: 1px solid var(--spc-400); }
.spc-sitemap-inner { width: 766px; display: flex; flex-direction: column; gap: 14px; }
.spc-sitemap-image img { width: 100%; height: auto; display: block; }

/* MAP SECTION */
.spc-map-section { padding: 80px 0; padding-bottom: var(--spc-gap-map-cta); }
.spc-map-section .spc-section-title { margin-bottom: 28px; }
.spc-map-container { width: 100%; height: 500px; position: relative; overflow: hidden; z-index: 1; }
.spc-map-leaflet { width: 100%; height: 100%; z-index: 1; }
.spc-map-zoom { width: 40px; height: 80px; position: absolute; right: 20px; bottom: 20px; background: var(--spc-white); border-radius: 4px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10); display: flex; flex-direction: column; z-index: 10; }
.spc-map-zoom-btn { flex: 1; display: flex; justify-content: center; align-items: center; background: none; border: none; cursor: pointer; }
.spc-map-zoom-btn:hover { background: var(--spc-100); }
.spc-map-zoom-btn:first-child { border-radius: 4px 4px 0 0; }
.spc-map-zoom-btn:last-child { border-radius: 0 0 4px 4px; }
.spc-map-zoom-divider { width: 28px; height: 1px; background: #E5E5E5; margin: 0 6px; }
.spc-map-zoom-btn .material-symbols-outlined { font-size: 24px; color: var(--spc-primary); }

/* CTA BANNER */
.spc-cta-section { padding-top: 0; padding-bottom: 80px; position: relative; z-index: 2; }
.spc-cta-banner { width: 100%; height: 320px; background: var(--spc-200); display: flex; justify-content: flex-start; align-items: center; }
.spc-cta-accent { width: 10px; height: 100%; background: var(--spc-primary); flex-shrink: 0; }
.spc-cta-content { flex: 1; padding: 0 56px; display: flex; justify-content: flex-start; align-items: center; gap: 80px; }
.spc-cta-text { flex: 1; display: flex; flex-direction: column; gap: 56px; }
.spc-cta-text-inner { display: flex; flex-direction: column; gap: 14px; }
.spc-cta-title { color: var(--spc-dark-text); font-family: var(--spc-font-heading); font-size: 30px; font-weight: 400; line-height: 1.2; margin: 0; }
.spc-cta-description { color: var(--spc-dark-text); font-family: var(--spc-font-body); font-size: 18px; font-weight: 300; line-height: 1.6; margin: 0; }
.spc-cta-image { flex: 1; height: 270px; }
.spc-cta-image img { width: 100%; height: 100%; object-fit: cover; }
.spc-footer-spacer { height: 80px; background: var(--spc-white); }

/* LEAFLET */
.spc-map-leaflet .leaflet-control-zoom { display: none !important; }
.spc-map-leaflet .leaflet-control-attribution { display: none !important; }
.spc-leaflet-marker { width: 28px !important; height: 28px !important; background: #778869 !important; border-radius: 50% !important; border: 3px solid #FFFFFF !important; box-shadow: 3px 5px 6px 2px rgba(0, 0, 0, 0.40) !important; }

/* ========================================
   RESPONSIVE - 1200px - 1439px
======================================== */
@media (max-width: 1439px) {
    .spc-breadcrumb-inner { padding: 14px 80px; }
    .spc-hero-overlay-content { padding: 0 80px; }
    .spc-hero-info-group { gap: 80px; }
    .spc-about-features-inner { padding: 80px 80px 0 80px; gap: 60px; }
    .spc-about-column { width: 480px; }
    .spc-content { padding: 0 80px; }
    .spc-sitemap-wrapper { padding: 14px 120px; }
    .spc-hero-badge { font-size: 14px; padding: 4px 16px; }

    /* v5.20 Gallery Grid + Info */
    .spc-gallery-grid-container { padding: 0 80px; }
    .spc-gallery-grid { height: 460px; }
    .spc-property-info-container { padding: 0 80px; }

    /* Coming Soon */
    .spc-coming-soon-info-inner { padding: 0 80px; }
    .spc-coming-soon-illustration { padding: 60px 80px 80px; }
}

/* ========================================
   RESPONSIVE - 1024px - 1199px (MacBook)
======================================== */
@media (max-width: 1199px) {
    .spc-breadcrumb-inner { padding: 14px 60px; }

    .spc-hero { height: 65vh; min-height: 450px; max-height: 750px; }
    .spc-hero-overlay { min-height: auto; padding: 24px 0; }
    .spc-hero-overlay-content { padding: 0 60px; flex-wrap: wrap; gap: 24px; }
    .spc-hero-info-group { width: 100%; gap: 60px; justify-content: flex-start; align-items: flex-start; }
    .spc-hero-cta { width: 100%; flex-direction: row; justify-content: flex-start; gap: 16px; }
    .spc-hero-title { font-size: 30px; }
    .spc-hero-address { font-size: 16px; }
    .spc-hero-category { font-size: 20px; }
    .spc-hero-price { font-size: 16px; }
    .spc-hero-badge { font-size: 13px; padding: 4px 14px; }

    .spc-about-features { padding: 60px 0; }
    .spc-about-features-inner { padding: 60px 60px 0 60px; flex-direction: column; gap: 50px; }
    .spc-about-column { width: 100%; }
    .spc-features-column { width: 100%; }
    .spc-content { padding: 0 60px; }
    .spc-units-section, .spc-sitemap-section { padding: 60px 0; }
    .spc-map-section { padding: 60px 0; padding-bottom: 48px; }
    .spc-cta-section { padding-bottom: 60px; }
    .spc-unit-image { height: 280px; }
    .spc-sitemap-wrapper { padding: 14px 60px; }
    .spc-sitemap-inner { width: 100%; }
    .spc-map-container { height: 400px; }
    .spc-cta-banner { height: auto; flex-direction: column; }
    .spc-cta-accent { width: 100%; height: 10px; }
    .spc-cta-content { flex-direction: column; padding: 40px; gap: 40px; }
    .spc-cta-text { gap: 40px; }
    .spc-cta-image { width: 100%; height: 250px; }

    /* v5.20 Gallery Grid - MacBook */
    .spc-gallery-grid-container { padding: 0 60px; }
    .spc-gallery-grid { height: 420px; }

    /* v5.28: Property info container — STACK at this breakpoint and below. */
    .spc-property-info-container {
        padding: 0 60px;
        flex-direction: column;
        gap: 24px;
    }
    .spc-property-info-right {
        align-items: flex-start;
        width: 100%;
    }
    .spc-property-price-section {
        align-items: flex-start;
    }
    .spc-property-actions {
        flex-direction: column;
        width: 100%;
    }
    .spc-action-btn {
        width: 100%;
        justify-content: center;
    }
    .spc-property-name { font-size: 26px; }
    .spc-price-amount { font-size: 26px; }

    /* Section title responsive */
    .spc-section-title { font-size: 28px; }

    /* Coming Soon */
    .spc-coming-soon-info-inner { padding: 0 60px; }
    .spc-coming-soon-illustration { padding: 50px 60px 70px; }
    .spc-coming-soon-heading { font-size: 32px; }
    .spc-coming-soon-description { font-size: 18px; }
}

/* ========================================
   RESPONSIVE - 768px - 1023px
======================================== */
@media (max-width: 1023px) {
    .spc-breadcrumb-inner { padding: 12px 40px; }

    .spc-hero { height: auto; min-height: 560px; max-height: none; }
    .spc-hero-overlay { min-height: auto; padding: 20px 0; }
    .spc-hero-overlay-content { padding: 0 40px; flex-direction: column; align-items: flex-start; }
    .spc-hero-info-group { flex-direction: column; gap: 20px; width: 100%; align-items: flex-start; }
    .spc-hero-info, .spc-hero-info-inner, .spc-hero-details, .spc-hero-details-inner { align-items: flex-start; text-align: left; width: 100%; }
    .spc-hero-title { font-size: 26px; text-align: left; }
    .spc-hero-address, .spc-hero-price { font-size: 16px; text-align: left; }
    .spc-hero-category { font-size: 18px; text-align: left; }
    .spc-hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
    .spc-btn:not(.spc-btn-secondary) { width: 100%; justify-content: center; }
    .spc-hero-badge { font-size: 12px; padding: 4px 12px; }

    .spc-about-features { padding: 50px 0; }
    .spc-about-features-inner { padding: 50px 40px 0 40px; }
    .spc-section-title { font-size: 26px; }
    .spc-about-text, .spc-feature-text { font-size: 16px; }
    .spc-features-grid { flex-direction: column; gap: 20px; }
    .spc-content { padding: 0 40px; }
    .spc-units-section, .spc-sitemap-section { padding: 60px 0; }
    .spc-map-section { padding: 60px 0; padding-bottom: 40px; }
    .spc-cta-section { padding-bottom: 60px; }
    .spc-units-row { flex-direction: column; }
    .spc-unit-card { width: 100%; }
    .spc-unit-image { height: 250px; }
    .spc-unit-specs { height: auto; flex-wrap: nowrap; }
    .spc-unit-spec { flex: 1; padding: 12px 16px; min-width: 0; }
    .spc-unit-spec-beds, .spc-unit-spec-baths { flex: 1; width: auto; min-width: 0; }
    .spc-unit-spec-inner { gap: 8px; }
    .spc-unit-spec-label { font-size: 11px; }
    .spc-unit-spec-value { font-size: 18px; }
    .spc-sitemap-wrapper { padding: 14px 20px; }
    .spc-map-container { height: 350px; }
    .spc-cta-content { padding: 40px; gap: 40px; }
    .spc-cta-text { gap: 40px; }
    .spc-cta-text-inner { gap: 14px; }
    .spc-cta-title { font-size: 26px; }
    .spc-cta-image { height: 200px; }

    /* v5.20 Gallery Grid - tablet stacked */
    .spc-gallery-grid { grid-template-columns: 1fr; height: auto; }
    .spc-gallery-grid-container { padding: 0 40px; }
    .spc-gallery-grid-main { height: 400px; }
    .spc-gallery-grid-side { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height: 120px; }

    /* v5.28: Property info container — already stacked at 1199px breakpoint */
    .spc-property-info-container { padding: 0 40px; }
    .spc-property-name { font-size: 24px; }

    /* v5.23 See All Photos button - tablet */
    .spc-gallery-see-all-overlay { padding: 12px !important; }
    .spc-gallery-see-all-btn { font-size: 13px !important; padding: 6px 14px !important; gap: 7px !important; }
    .spc-gallery-see-all-btn:hover, button.spc-gallery-see-all-btn:hover, .spc-gallery-see-all-overlay .spc-gallery-see-all-btn:hover { background: #5A4F42 !important; background-color: #5A4F42 !important; color: #FFFFFF !important; }
    .spc-gallery-btn-count { min-width: 20px !important; height: 20px !important; font-size: 11px !important; padding: 0 5px !important; }
    .spc-gallery-btn-text { font-size: 13px !important; }
    .spc-see-all-photos-btn { bottom: 12px !important; right: 12px !important; font-size: 14px !important; padding: 5px 16px !important; }

    /* v5.25 Portfolio note — match scaled address at this breakpoint */
    .spc-portfolio-note { font-size: 16px; }

    /* Coming Soon */
    .spc-coming-soon-info-inner { padding: 0 40px; }
    .spc-coming-soon-illustration { padding: 40px 40px 60px; }
    .spc-coming-soon-img { width: 240px; }
    .spc-coming-soon-heading { font-size: 28px; }
    .spc-coming-soon-description { font-size: 16px; }
}

/* ========================================
   RESPONSIVE - 481px - 767px (Mobile)
======================================== */
@media (max-width: 767px) {
    .spc-breadcrumb-inner { padding: 10px 20px; gap: 4px; }
    .spc-breadcrumb-link, .spc-breadcrumb-separator, .spc-breadcrumb-current { font-size: 12px; }

    .spc-hero { min-height: 520px; }
    .spc-hero-overlay { padding: 16px 0; }
    .spc-hero-overlay-content { padding: 0 20px; gap: 16px; }
    .spc-hero-info-group { gap: 16px; }
    .spc-hero-info-inner, .spc-hero-details-inner { gap: 8px; }
    .spc-hero-title { font-size: 22px; }
    .spc-hero-address, .spc-hero-price { font-size: 14px; }
    .spc-hero-category { font-size: 16px; }
    .spc-hero-cta { gap: 10px; }
    .spc-btn:not(.spc-btn-secondary) { width: 100%; height: 42px; font-size: 16px; }
    .spc-btn-secondary { width: 100%; height: 42px; font-size: 14px; justify-content: center; }
    .spc-hero-badge { font-size: 11px; padding: 3px 10px; }

    .spc-about-features { padding: 40px 0; }
    .spc-about-features-inner { padding: 40px 20px 0 20px; gap: 30px; }
    .spc-section-title { font-size: 22px; }
    .spc-about-text, .spc-feature-text { font-size: 14px; }
    .spc-content { padding: 0 20px; }
    .spc-units-section, .spc-sitemap-section { padding: 40px 0; }
    .spc-map-section { padding: 40px 0; padding-bottom: 32px; }
    .spc-cta-section { padding-bottom: 40px; }
    .spc-unit-image { height: 200px; }
    .spc-unit-content { padding: 14px; }
    .spc-unit-title { font-size: 18px; }
    .spc-unit-specs { flex-wrap: nowrap; }
    .spc-unit-spec { flex: 1; padding: 10px 12px; min-width: 0; }
    .spc-unit-spec-beds, .spc-unit-spec-baths { flex: 1; width: auto; min-width: 0; }
    .spc-unit-spec-inner { gap: 6px; }
    .spc-unit-spec-label { font-size: 10px; }
    .spc-unit-spec-value { font-size: 16px; }
    .spc-sitemap-wrapper { padding: 14px 12px; }
    .spc-map-container { height: 300px; }
    .spc-cta-content { padding: 24px; gap: 24px; }
    .spc-cta-text { gap: 24px; }
    .spc-cta-text-inner { gap: 10px; }
    .spc-cta-title { font-size: 22px; }
    .spc-cta-description { font-size: 14px; }
    .spc-cta-image { height: 160px; }
    .spc-footer-spacer { height: 40px; }

    /* v5.20 Gallery Grid - mobile */
    .spc-gallery-grid-container { padding: 0 20px; }
    .spc-gallery-grid-main { height: 280px; }
    .spc-gallery-grid-side { height: 90px; }

    /* v5.28: Property info container — already stacked at 1199px breakpoint */
    .spc-property-info-container { padding: 0 20px; gap: 16px; }
    .spc-property-name { font-size: 20px; }
    .spc-property-address { font-size: 14px; }
    .spc-price-amount { font-size: 22px; }
    .spc-price-label { font-size: 12px; }
    .spc-action-btn { height: 40px; font-size: 14px; padding: 0 18px; }

    /* v5.23 See All Photos button - mobile */
    .spc-gallery-see-all-overlay { padding: 10px !important; }
    .spc-gallery-see-all-btn { font-size: 12px !important; padding: 5px 12px !important; gap: 6px !important; }
    .spc-gallery-btn-count { min-width: 18px !important; height: 18px !important; font-size: 10px !important; padding: 0 4px !important; }
    .spc-gallery-btn-text { font-size: 12px !important; }
    .spc-see-all-photos-btn { bottom: 10px !important; right: 10px !important; font-size: 13px !important; padding: 4px 14px !important; }

    /* v5.25 Portfolio note — mobile */
    .spc-portfolio-note { font-size: 14px; line-height: 1.45; }

    /* Coming Soon */
    .spc-coming-soon-info { padding: 24px 0 24px 0; }
    .spc-coming-soon-info-inner { padding: 0 20px; gap: 12px; }
    .spc-coming-soon-title { font-size: 22px; }
    .spc-coming-soon-location { font-size: 14px; }
    .spc-coming-soon-illustration { padding: 30px 20px 40px; }
    .spc-coming-soon-illustration-inner { gap: 12px; }
    .spc-coming-soon-img { width: 200px; margin-bottom: 12px; }
    .spc-coming-soon-heading { font-size: 24px; }
    .spc-coming-soon-description { font-size: 14px; }
}

/* ========================================
   RESPONSIVE - 600px (v5.24 TRUE MOBILE STACK)
======================================== */
@media (max-width: 600px) {
    /* Spacing collapse for very narrow viewports */
    .spc-property-info-section { padding: 20px 0 32px 0; }
}

/* ========================================
   RESPONSIVE - 480px (Small Mobile)
======================================== */
@media (max-width: 480px) {
    .spc-breadcrumb-inner { padding: 8px 16px; gap: 3px; flex-wrap: wrap; }
    .spc-breadcrumb-link, .spc-breadcrumb-separator, .spc-breadcrumb-current { font-size: 11px; }

    .spc-hero { min-height: 480px; }
    .spc-hero-overlay-content { padding: 0 16px; gap: 14px; }
    .spc-hero-info-group { gap: 14px; }
    .spc-hero-title { font-size: 20px; }
    .spc-hero-category { font-size: 15px; }
    .spc-hero-address, .spc-hero-price { font-size: 13px; }
    .spc-hero-cta { gap: 8px; }
    .spc-btn:not(.spc-btn-secondary) { height: 40px; font-size: 14px; padding: 0 16px; }
    .spc-btn-secondary { height: 40px; font-size: 13px; padding: 0 16px; }
    .spc-hero-badge { font-size: 10px; padding: 3px 8px; }

    .spc-about-features-inner { padding: 32px 16px 0 16px; }
    .spc-section-title { font-size: 20px; }
    .spc-about-text, .spc-feature-text { font-size: 13px; }
    .spc-content { padding: 0 16px; }
    .spc-unit-image { height: 180px; }
    .spc-unit-title { font-size: 16px; }
    .spc-unit-specs { flex-wrap: nowrap; }
    .spc-unit-spec { padding: 8px 10px; flex: 1; min-width: 0; }
    .spc-unit-spec-beds, .spc-unit-spec-baths { flex: 1; width: auto; min-width: 0; }
    .spc-unit-spec-inner { gap: 4px; }
    .spc-unit-spec-label { font-size: 9px; }
    .spc-unit-spec-value { font-size: 14px; }
    .spc-cta-title { font-size: 20px; }
    .spc-cta-description { font-size: 13px; }
    .spc-cta-image { height: 140px; }

    /* v5.20 Gallery Grid - small mobile */
    .spc-gallery-grid-container { padding: 0 16px; }
    .spc-gallery-grid-main { height: 220px; }
    .spc-gallery-grid-side { height: 70px; }

    /* Property info — small mobile */
    .spc-property-info-container { padding: 0 16px; gap: 14px; }
    .spc-property-name { font-size: 18px; }
    .spc-property-address { font-size: 13px; }
    .spc-price-amount { font-size: 20px; }
    .spc-price-label { font-size: 11px; }
    .spc-action-btn { height: 38px; font-size: 13px; padding: 0 16px; }

    /* v5.23 See All Photos button - small mobile */
    .spc-gallery-see-all-overlay { padding: 8px !important; }
    .spc-gallery-see-all-btn { font-size: 11px !important; padding: 4px 10px !important; gap: 5px !important; }
    .spc-gallery-btn-count { min-width: 16px !important; height: 16px !important; font-size: 9px !important; padding: 0 4px !important; }
    .spc-gallery-btn-text { font-size: 11px !important; }
    .spc-see-all-photos-btn { bottom: 8px !important; right: 8px !important; font-size: 12px !important; padding: 4px 12px !important; }

    /* v5.25 Portfolio note — small mobile */
    .spc-portfolio-note { font-size: 13px; }

    /* Coming Soon */
    .spc-coming-soon-info-inner { padding: 0 16px; }
    .spc-coming-soon-title { font-size: 20px; }
    .spc-coming-soon-location { font-size: 13px; }
    .spc-coming-soon-illustration { padding: 24px 16px 32px; }
    .spc-coming-soon-img { width: 170px; }
    .spc-coming-soon-heading { font-size: 20px; }
    .spc-coming-soon-description { font-size: 13px; }
}

/* ========================================
   RESPONSIVE - 375px (iPhone SE / Smallest)
======================================== */
@media (max-width: 375px) {
    .spc-breadcrumb-inner { padding: 6px 12px; gap: 2px; }
    .spc-breadcrumb-link, .spc-breadcrumb-separator, .spc-breadcrumb-current { font-size: 10px; }

    .spc-hero { min-height: 460px; }
    .spc-hero-overlay-content { padding: 0 12px; }
    .spc-hero-title { font-size: 18px; }
    .spc-hero-category { font-size: 14px; }
    .spc-hero-address, .spc-hero-price { font-size: 12px; }
    .spc-btn:not(.spc-btn-secondary) { height: 38px; font-size: 13px; padding: 0 14px; }
    .spc-btn-secondary { height: 38px; font-size: 12px; padding: 0 14px; }

    .spc-about-features-inner { padding: 24px 12px 0 12px; }
    .spc-section-title { font-size: 18px; }
    .spc-about-text, .spc-feature-text { font-size: 12px; }
    .spc-content { padding: 0 12px; }
    .spc-unit-image { height: 160px; }
    .spc-unit-title { font-size: 15px; }

    /* v5.20 Gallery Grid - smallest */
    .spc-gallery-grid-container { padding: 0 12px; }
    .spc-gallery-grid-main { height: 180px; }
    .spc-gallery-grid-side { height: 60px; gap: 8px; }
    .spc-gallery-grid { gap: 8px; }

    /* Property info — smallest */
    .spc-property-info-container { padding: 0 12px; gap: 12px; }
    .spc-property-name { font-size: 16px; }
    .spc-property-address { font-size: 12px; }
    .spc-price-amount { font-size: 18px; }
    .spc-price-label { font-size: 10px; }
    .spc-action-btn { height: 36px; font-size: 12px; padding: 0 14px; }

    /* v5.25 Portfolio note — smallest */
    .spc-portfolio-note { font-size: 12px; }

    /* Coming Soon */
    .spc-coming-soon-info-inner { padding: 0 12px; }
    .spc-coming-soon-title { font-size: 18px; }
    .spc-coming-soon-location { font-size: 12px; }
    .spc-coming-soon-img { width: 140px; }
    .spc-coming-soon-heading { font-size: 18px; }
    .spc-coming-soon-description { font-size: 12px; }
}

/* ============================================================
   v5.29 NEW RULES — HOME FEATURES V2 (3-TAB STATIC) +
                       UNIT CARDS V2 (GRADIENT OVERLAY)
   All rules below are tightly scoped to v2 sections to keep
   the old v5.x rules above 100% untouched. Wala tayong babawasan.
============================================================ */

/* ---------- HOME FEATURES V2 — scoped to .spc-home-features-v2 ---------- */
.spc-home-features-v2 .section-title,
.spc-home-features-v2 .spc-hf-heading {
    display: none;
}

.spc-home-features-v2 {
    width: 100%;
    padding: 80px 0;
   /* border-top: 1px solid var(--spc-300);*/
    background: var(--spc-white);
}

.spc-home-features-v2 .spc-hf-inner {
    width: 100%;
    max-width: var(--spc-content-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.spc-home-features-v2 .spc-hf-tabs {
   /* display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;*/
    display: flex;
    gap: 8px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-300);
    margin-bottom: 28px;
}

.spc-home-features-v2 .spc-hf-tab {
    padding: 10px 24px;
    background: var(--spc-200);
    color: var(--spc-light-text);
    border: 0;
    border-radius: 50px;
    font-family: var(--spc-font-body);
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.spc-home-features-v2 .spc-hf-tab:hover {
    background: var(--spc-300);
    color: var(--spc-dark-text);
}

.spc-home-features-v2 .spc-hf-tab.active {
    background: var(--spc-primary);
    color: var(--spc-white);
}

.spc-home-features-v2 .spc-hf-panels {
    position: relative;
    width: 100%;
}

.spc-home-features-v2 .spc-hf-panel {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 28px;
}

.spc-home-features-v2 .spc-hf-panel.active {
    display: flex;
}

.spc-home-features-v2 .spc-hd-tab-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.spc-home-features-v2 .spc-hd-tab-title {
    font-family: var(--spc-font-heading);
    font-size: 30px;
    font-weight: 400;
    color: var(--spc-dark-text);
    margin: 0;
    line-height: 1.2;
}

.spc-home-features-v2 .spc-hd-tab-tagline {
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    color: var(--spc-light-text);
    margin: 0;
}

.spc-home-features-v2 .spc-hd-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 700px;
    overflow: hidden;
    background: var(--spc-200);
}

.spc-home-features-v2 .spc-hd-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.spc-home-features-v2 .spc-hd-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.spc-home-features-v2 .spc-hd-slide-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

.spc-home-features-v2 .spc-hd-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.spc-home-features-v2 .spc-hd-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--spc-white);
    border: 0;
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, color 0.2s ease;
    color: var(--spc-primary);
    -webkit-appearance: none;
    appearance: none;
}

.spc-home-features-v2 .spc-hd-arrow:hover {
    background: var(--spc-100);
}

.spc-home-features-v2 .spc-hd-arrow:active {
    background: var(--spc-primary);
    color: var(--spc-white);
}

.spc-home-features-v2 .spc-hd-arrow-prev { left: 16px; }
.spc-home-features-v2 .spc-hd-arrow-next { right: 16px; }

.spc-home-features-v2 .spc-hd-arrow .material-symbols-outlined {
    font-size: 24px;
    color: inherit;
}

.spc-home-features-v2 .spc-hd-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.spc-home-features-v2 .spc-hd-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.spc-home-features-v2 .spc-hd-dot.active {
    background: var(--spc-white);
}

.spc-home-features-v2 .spc-hd-long-desc {
    width: 100%;
    color: var(--spc-dark-text);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

/* Defensive override — some parent themes set `p { color: <brand> }` which
   would re-color the long description. Force back to spec. */
.spc-home-features-v2 .spc-hd-long-desc p {
    color: var(--spc-dark-text) !important;
    font-family: var(--spc-font-body) !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    margin: 0 0 12px 0;
}

.spc-home-features-v2 .spc-hd-long-desc p:last-child {
    margin-bottom: 0;
}

/* ---------- UNITS SECTION V2 — scoped to .spc-units-section-v2 ---------- */
.spc-units-section-v2 {
    width: 100%;
    padding: 80px 0;
    border-top: 1px solid var(--spc-300);
    background: var(--spc-white);
}

.spc-units-section-v2 .spc-units-inner {
    width: 100%;
    max-width: var(--spc-content-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.spc-units-section-v2 .spc-phase-title-row {
   /* display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;*/
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
}

.spc-units-section-v2 .spc-phase-heading {
    font-family: var(--spc-font-heading);
    font-size: 30px;
    font-weight: 400;
    color: var(--spc-dark-text);
    margin: 0;
    line-height: 1.2;
}

.spc-units-section-v2 .spc-phase-count-pill {
    padding: 5px 16px;
    background: var(--spc-200);
    color: var(--spc-primary);
    border-radius: 50px;
    font-family: var(--spc-font-body);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    margin-left:0 !important;
}

.spc-units-section-v2 .spc-phase-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.spc-units-section-v2 .spc-phase-tab {
    padding: 8px 20px;
    background: var(--spc-200);
    color: var(--spc-light-text);
    border: 0;
    border-radius: 50px;
    font-family: var(--spc-font-body);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.spc-units-section-v2 .spc-phase-tab:hover {
    background: var(--spc-300);
    color: var(--spc-dark-text);
}

.spc-units-section-v2 .spc-phase-tab.active {
    background: var(--spc-primary);
    color: var(--spc-white);
}

.spc-units-section-v2 .spc-units-grid-v2 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.spc-units-section-v2 .spc-units-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.spc-unit-card-v2 {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    background: var(--spc-200);
}

.spc-unit-card-v2:hover {
    transform: translateY(-2px);
}

.spc-unit-card-v2 .spc-unit-card-link {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: inherit;
    z-index: 5;
}

.spc-unit-card-v2 .spc-unit-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.spc-unit-card-v2 .spc-unit-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.spc-unit-card-v2:hover .spc-unit-card-img img {
    transform: scale(1.04);
}

.spc-unit-card-v2 .spc-unit-card-img-empty {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #C9C2B6, #A8A095);
}

.spc-unit-card-v2 .spc-unit-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
    z-index: 2;
    pointer-events: none;
}

.spc-unit-card-v2.spc-unit-card-no-image .spc-unit-card-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.spc-unit-card-v2 .spc-unit-card-badges {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    z-index: 6;
}

.spc-unit-card-v2 .spc-unit-badge {
    padding: 4px 12px;
    background: var(--spc-white);
    color: var(--spc-dark-text);
    border-radius: 50px;
    font-family: var(--spc-font-body);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

.spc-unit-card-v2 .spc-unit-badge-frosted {
    background: rgba(255, 255, 255, 0.25);
    color: var(--spc-white);
    backdrop-filter: blur(4px);
}

.spc-unit-card-v2 .spc-unit-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 20px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--spc-white);
}

.spc-unit-card-v2 .spc-unit-card-name-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.spc-unit-card-v2 .spc-unit-card-name {
    font-family: var(--spc-font-body);
    font-size: 20px;
    font-weight: 400;
    color: var(--spc-white);
    margin: 0;
    line-height: 1.2;
}

.spc-unit-card-v2 .spc-unit-card-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--spc-white);
}

.spc-unit-card-v2 .spc-unit-card-price-from {
    font-family: var(--spc-font-body);
    font-size: 12px;
    font-weight: 300;
    text-transform: lowercase;
    opacity: 0.85;
}

.spc-unit-card-v2 .spc-unit-card-price-value {
    font-family: var(--spc-font-body);
    font-size: 20px;
    font-weight: 500;
}

.spc-unit-card-v2 .spc-unit-card-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.spc-unit-card-v2 .spc-unit-card-specs {
    display: flex;
    align-items: center;
    gap: 14px;
}

.spc-unit-card-v2 .spc-unit-card-spec {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--spc-white);
}

.spc-unit-card-v2 .spc-unit-card-spec-icon {
    font-size: 18px;
    color: var(--spc-white);
}

.spc-unit-card-v2 .spc-unit-card-spec-icon .material-symbols-outlined {
    font-size: 18px;
    color: var(--spc-white);
}

.spc-unit-card-v2 .spc-unit-card-spec-value {
    font-family: var(--spc-font-body);
    font-size: 15px;
    font-weight: 500;
}

.spc-unit-card-v2 .spc-unit-card-spec-label {
    font-family: var(--spc-font-body);
    font-size: 13px;
    font-weight: 300;
    opacity: 0.9;
}

.spc-unit-card-v2 .spc-unit-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 2, 2, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.spc-unit-card-v2:hover .spc-unit-hover-overlay {
    opacity: 1;
}

.spc-unit-card-v2 .spc-unit-view-home-btn {
    padding: 10px 24px;
    background: var(--spc-white);
    color: var(--spc-primary);
    border: 0;
    border-radius: 50px;
    font-family: var(--spc-font-body);
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    pointer-events: auto;
}

.spc-unit-card-v2 .spc-unit-view-home-btn:hover {
    background: var(--spc-primary);
    color: var(--spc-white);
    outline: 1px solid var(--spc-white);
}

.spc-units-section-v2 .spc-phase-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.spc-units-section-v2 .spc-phase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--spc-300);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.spc-units-section-v2 .spc-phase-dot.active {
    background: var(--spc-primary);
}

/* ---------- v5.29 RESPONSIVE for Home Features V2 + Units V2 ---------- */
@media (max-width: 1439px) {
    .spc-home-features-v2 .spc-hf-inner,
    .spc-units-section-v2 .spc-units-inner {
        padding: 0 80px;
    }
}

@media (max-width: 1199px) {
    .spc-home-features-v2,
    .spc-units-section-v2 { padding: 60px 0; }

    .spc-home-features-v2 .spc-hf-inner,
    .spc-units-section-v2 .spc-units-inner { padding: 0 60px; }

    .spc-home-features-v2 .spc-hd-tab-title,
    .spc-units-section-v2 .spc-phase-heading { font-size: 26px; }
}

@media (max-width: 1023px) {
    .spc-home-features-v2,
    .spc-units-section-v2 { padding: 50px 0; }

    .spc-home-features-v2 .spc-hf-inner,
    .spc-units-section-v2 .spc-units-inner { padding: 0 40px; }

    .spc-home-features-v2 .spc-hd-tab-title,
    .spc-units-section-v2 .spc-phase-heading { font-size: 24px; }

    .spc-units-section-v2 .spc-units-row {
        grid-template-columns: 1fr;
    }

    .spc-unit-card-v2 { height: 300px; }

    .spc-home-features-v2 .spc-hd-arrow { width: 38px; height: 38px; }
    .spc-home-features-v2 .spc-hd-arrow-prev { left: 12px; }
    .spc-home-features-v2 .spc-hd-arrow-next { right: 12px; }
}

@media (max-width: 767px) {
    .spc-home-features-v2,
    .spc-units-section-v2 { padding: 40px 0; }

    .spc-home-features-v2 .spc-hf-inner,
    .spc-units-section-v2 .spc-units-inner { padding: 0 20px; gap: 24px; }

    .spc-home-features-v2 .spc-hf-tab { padding: 8px 18px; font-size: 14px; }
    .spc-home-features-v2 .spc-hd-tab-title { font-size: 22px; }
    .spc-home-features-v2 .spc-hd-tab-tagline { font-size: 15px; }
    .spc-home-features-v2 .spc-hd-long-desc,
    .spc-home-features-v2 .spc-hd-long-desc p { font-size: 15px !important; }
    .spc-home-features-v2 .spc-hd-arrow { width: 34px; height: 34px; }
    .spc-home-features-v2 .spc-hd-arrow .material-symbols-outlined { font-size: 20px; }

    .spc-units-section-v2 .spc-phase-heading { font-size: 22px; }
    .spc-units-section-v2 .spc-phase-count-pill { font-size: 12px; padding: 4px 12px; }
    .spc-units-section-v2 .spc-phase-tab { padding: 6px 14px; font-size: 13px; }
    .spc-unit-card-v2 { height: 280px; }
    .spc-unit-card-v2 .spc-unit-card-name { font-size: 18px; }
    .spc-unit-card-v2 .spc-unit-card-price-value { font-size: 18px; }
    .spc-unit-card-v2 .spc-unit-card-spec-value { font-size: 14px; }
    .spc-unit-card-v2 .spc-unit-card-spec-label { font-size: 12px; }
    .spc-unit-card-v2 .spc-unit-card-body { padding: 14px 16px; }
}

@media (max-width: 480px) {
    .spc-home-features-v2 .spc-hf-inner,
    .spc-units-section-v2 .spc-units-inner { padding: 0 16px; gap: 20px; }

    .spc-home-features-v2 .spc-hf-tab { padding: 7px 14px; font-size: 13px; }
    .spc-home-features-v2 .spc-hd-tab-title { font-size: 20px; }
    .spc-units-section-v2 .spc-phase-heading { font-size: 20px; }
    .spc-unit-card-v2 { height: 250px; }
    .spc-unit-card-v2 .spc-unit-card-name { font-size: 16px; }
    .spc-unit-card-v2 .spc-unit-card-price-value { font-size: 16px; }
}

@media (max-width: 375px) {
    .spc-home-features-v2 .spc-hf-inner,
    .spc-units-section-v2 .spc-units-inner { padding: 0 12px; }
    .spc-unit-card-v2 { height: 230px; }
}

/* ============================================================
   v5.30 HOTFIX — BULLETPROOF ACTIVE TAB STATE
   APPENDED ONLY — no v5.29 rule modified.
   See header docblock for full rationale. Nuclear-grade override
   for parent-theme button stripping that was eating the active
   tab pill bg + text.
============================================================ */

/* ---- HOME FEATURES V2 — ACTIVE TAB NUCLEAR OVERRIDE ---- */
.spc-home-features-v2 .spc-hf-tab.active,
.spc-home-features-v2 button.spc-hf-tab.active,
section.spc-home-features-v2 .spc-hf-tab.active,
section.spc-home-features-v2 button.spc-hf-tab.active {
    background: #5A4F42 !important;
    background-color: #5A4F42 !important;
    color: #FFFFFF !important;
    border: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.spc-home-features-v2 .spc-hf-tab.active:hover,
.spc-home-features-v2 .spc-hf-tab.active:focus,
.spc-home-features-v2 .spc-hf-tab.active:focus-visible,
.spc-home-features-v2 .spc-hf-tab.active:active,
.spc-home-features-v2 button.spc-hf-tab.active:hover,
.spc-home-features-v2 button.spc-hf-tab.active:focus,
.spc-home-features-v2 button.spc-hf-tab.active:focus-visible,
.spc-home-features-v2 button.spc-hf-tab.active:active {
    background: #5A4F42 !important;
    background-color: #5A4F42 !important;
    color: #FFFFFF !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Force visibility of inner text spans against theme fade rules */
.spc-home-features-v2 .spc-hf-tab,
.spc-home-features-v2 .spc-hf-tab *,
.spc-home-features-v2 .spc-hf-tab.active,
.spc-home-features-v2 .spc-hf-tab.active * {
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

/* ---- HOME FEATURES V2 — INACTIVE TAB DEFENSIVE BG ---- */
.spc-home-features-v2 .spc-hf-tab,
.spc-home-features-v2 button.spc-hf-tab {
    background: #EFEDEB !important;
    background-color: #EFEDEB !important;
    color: #766C61 !important;
    border: none !important;
    outline: none !important;
}

.spc-home-features-v2 .spc-hf-tab:hover,
.spc-home-features-v2 button.spc-hf-tab:hover {
    background: #E8E5DF !important;
    background-color: #E8E5DF !important;
    color: #2A2A2A !important;
}

/* Re-apply active OVER hover (specificity ladder: hover comes first, then
   .active overrides) */
.spc-home-features-v2 .spc-hf-tab.active,
.spc-home-features-v2 button.spc-hf-tab.active,
.spc-home-features-v2 .spc-hf-tab.active:hover,
.spc-home-features-v2 button.spc-hf-tab.active:hover {
    background: #5A4F42 !important;
    background-color: #5A4F42 !important;
    color: #FFFFFF !important;
}

/* ---- UNITS SECTION V2 — PHASE TAB NUCLEAR OVERRIDE ---- */
.spc-units-section-v2 .spc-phase-tab.active,
.spc-units-section-v2 button.spc-phase-tab.active,
section.spc-units-section-v2 .spc-phase-tab.active,
section.spc-units-section-v2 button.spc-phase-tab.active {
    background: #5A4F42 !important;
    background-color: #5A4F42 !important;
    color: #FFFFFF !important;
    border: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.spc-units-section-v2 .spc-phase-tab.active:hover,
.spc-units-section-v2 .spc-phase-tab.active:focus,
.spc-units-section-v2 .spc-phase-tab.active:focus-visible,
.spc-units-section-v2 .spc-phase-tab.active:active,
.spc-units-section-v2 button.spc-phase-tab.active:hover,
.spc-units-section-v2 button.spc-phase-tab.active:focus,
.spc-units-section-v2 button.spc-phase-tab.active:focus-visible,
.spc-units-section-v2 button.spc-phase-tab.active:active {
    background: #5A4F42 !important;
    background-color: #5A4F42 !important;
    color: #FFFFFF !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Inner-text force for phase tabs */
.spc-units-section-v2 .spc-phase-tab,
.spc-units-section-v2 .spc-phase-tab *,
.spc-units-section-v2 .spc-phase-tab.active,
.spc-units-section-v2 .spc-phase-tab.active * {
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
}

/* Inactive phase tab defensive bg */
.spc-units-section-v2 .spc-phase-tab,
.spc-units-section-v2 button.spc-phase-tab {
    background: #EFEDEB !important;
    background-color: #EFEDEB !important;
    color: #766C61 !important;
    border: none !important;
    outline: none !important;
}

.spc-units-section-v2 .spc-phase-tab:hover,
.spc-units-section-v2 button.spc-phase-tab:hover {
    background: #E8E5DF !important;
    background-color: #E8E5DF !important;
    color: #2A2A2A !important;
}

.spc-units-section-v2 .spc-phase-tab.active,
.spc-units-section-v2 button.spc-phase-tab.active,
.spc-units-section-v2 .spc-phase-tab.active:hover,
.spc-units-section-v2 button.spc-phase-tab.active:hover {
    background: #5A4F42 !important;
    background-color: #5A4F42 !important;
    color: #FFFFFF !important;
}

/* ============================================================================
   ============================================================================
   v5.31 NEW RULES — SEARCH BAR + VIDEO + FAQ
   ============================================================================
   ============================================================================ */

/* ============================================================================
   1. SEARCH BAR — "Search for more communities" pill (.spc-page scope)
   ============================================================================ */

/* Section band — full-width with `display: flex; justify-content: center`
   so the inner `.spc-breadcrumb-inner` is centered just like the breadcrumb.
   We reuse `.spc-breadcrumb-inner` in the markup so it inherits the v5.30
   responsive padding (14/80/60/40/20/16/12px) automatically — zero new
   media-query writes for horizontal alignment. */
.spc-page .alh-home-search-section {
    width: 100%;
    background: var(--spc-white);
    display: flex;
    justify-content: center;
    padding: 18px 0 0 0;
}

.spc-page .alh-home-search-section .spc-breadcrumb-inner.alh-home-search-inner {
    /* Override v5.30 .spc-breadcrumb-inner padding-top so the search bar
       sits closer to the breadcrumb (we don't need the 14px vertical
       breadcrumb spacing here). */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.spc-page .alh-home-search {
    position: relative;
    width: 340px;
    max-width: 100%;
    margin-left: auto;
}

.spc-page .alh-home-search-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    background: var(--spc-white);
    border: 1px solid var(--spc-primary);
    border-radius: 50px;
    padding: 4px 4px 4px 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.spc-page .alh-home-search-box:focus-within {
    border-color: var(--spc-dark-text);
    box-shadow: 0 2px 10px rgba(90, 79, 66, 0.12);
}

.spc-page .alh-home-search-input {
    flex: 1;
    height: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--spc-dark-text);
    font-family: var(--spc-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.spc-page .alh-home-search-input::placeholder {
    color: var(--spc-light-text);
    opacity: 1;
    font-weight: 300;
}

.spc-page .alh-home-search-input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.spc-page .alh-home-search-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--spc-primary);
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    transition: background 0.15s ease, transform 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
}

.spc-page .alh-home-search-btn:hover {
    background: #928572;
    transform: translateY(-1px);
}

.spc-page .alh-home-search-btn:active {
    transform: translateY(0);
}

.spc-page .alh-home-search-btn svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* Dropdown — absolutely positioned under the input box */
.spc-page .alh-home-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 100%;
    min-width: 320px;
    max-width: 420px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--spc-white);
    border: 1px solid var(--spc-300);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 100;
    padding: 6px;
}

.spc-page .alh-home-search-dropdown.is-open {
    display: block;
}

.spc-page .alh-home-search-empty {
    padding: 16px;
    color: var(--spc-light-text);
    font-family: var(--spc-font-body);
    font-size: 14px;
    text-align: center;
}

.spc-page .alh-home-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--spc-dark-text);
    transition: background 0.12s ease;
}

.spc-page .alh-home-search-result:hover {
    background: var(--spc-100);
}

.spc-page .alh-home-search-result-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 42px;
    border-radius: 4px;
    background-color: var(--spc-200);
    background-size: cover;
    background-position: center;
}

.spc-page .alh-home-search-result-thumb-empty {
    background-color: var(--spc-200);
    background-image: none;
}

.spc-page .alh-home-search-result-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spc-page .alh-home-search-result-name {
    color: var(--spc-dark-text);
    font-family: var(--spc-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spc-page .alh-home-search-result-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--spc-light-text);
    font-family: var(--spc-font-body);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.3;
}

.spc-page .alh-home-search-result-addr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.spc-page .alh-home-search-result-price {
    color: var(--spc-primary);
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

.spc-page .alh-home-search-result-sold {
    color: var(--spc-dark-text);
    background: var(--spc-200);
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Search bar responsive — match v5.30 breadcrumb breakpoints
   At ≤991px (between 992 tablet and 1023 mobile-tablet boundary),
   stack full-width and center so thumb-reach is comfortable. */
@media (max-width: 991px) {
    .spc-page .alh-home-search-section { padding-top: 14px; }
    .spc-page .alh-home-search-section .spc-breadcrumb-inner.alh-home-search-inner {
        justify-content: center;
    }
    .spc-page .alh-home-search { width: 100%; margin-left: 0; }
}

@media (max-width: 767px) {
    .spc-page .alh-home-search-box { height: 40px; padding-left: 16px; }
    .spc-page .alh-home-search-input { font-size: 13px; }
    .spc-page .alh-home-search-btn { width: 32px; height: 32px; }
}

@media (max-width: 480px) {
    .spc-page .alh-home-search-section { padding-top: 12px; }
    .spc-page .alh-home-search-box { height: 38px; padding-left: 14px; }
    .spc-page .alh-home-search-input { font-size: 12px; }
    .spc-page .alh-home-search-btn { width: 30px; height: 30px; margin-left: 6px; }
}

@media (max-width: 375px) {
    .spc-page .alh-home-search-section { padding-top: 10px; }
    .spc-page .alh-home-search-box { height: 36px; padding-left: 12px; }
    .spc-page .alh-home-search-input::placeholder { font-size: 11px; }
}

/* ============================================================================
   2. VIDEO SECTION — `.spc-video-section`
   
   These rules duplicate the inline `<style id="alh-video-embed-css">` block
   in the PHP. The inline block is defense-in-depth (works even with stale
   cache); these external rules are the canonical reference once v5.31 is
   deployed. Specificity is the same — both apply via .spc-video-section
   scope. Either source winning is fine since both define identical values.
   ============================================================================ */
.spc-page .spc-video-section {
    width: 100%;
    padding: 40px 0;
    background: var(--spc-white);
    display: flex;
    justify-content: center;
}

.spc-page .spc-video-section .spc-video-inner {
    width: 100%;
    max-width: var(--spc-content-width);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.spc-page .spc-video-section .spc-section-heading {
    color: var(--spc-dark-text);
    font-family: var(--spc-font-heading);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.spc-page .spc-video-section .spc-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.spc-page .spc-video-section .spc-video-embed iframe,
.spc-page .spc-video-section .spc-video-embed video,
.spc-page .spc-video-section .spc-video-embed embed,
.spc-page .spc-video-section .spc-video-embed object {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

@supports not (aspect-ratio: 16 / 9) {
    .spc-page .spc-video-section .spc-video-embed {
        height: 0;
        padding-bottom: 56.25%;
    }
}

@media (max-width: 1439px) {
    .spc-page .spc-video-section .spc-video-inner { padding: 0 80px; }
}

@media (max-width: 1199px) {
    .spc-page .spc-video-section .spc-video-inner { padding: 0 60px; }
    .spc-page .spc-video-section .spc-section-heading { font-size: 28px; }
}

@media (max-width: 1023px) {
    .spc-page .spc-video-section .spc-video-inner { padding: 0 40px; }
    .spc-page .spc-video-section .spc-section-heading { font-size: 26px; }
}

@media (max-width: 767px) {
    .spc-page .spc-video-section { padding: 32px 0; }
    .spc-page .spc-video-section .spc-video-inner { padding: 0 20px; gap: 20px; }
    .spc-page .spc-video-section .spc-section-heading { font-size: 22px; }
}

@media (max-width: 480px) {
    .spc-page .spc-video-section { padding: 28px 0; }
    .spc-page .spc-video-section .spc-video-inner { padding: 0 16px; }
    .spc-page .spc-video-section .spc-section-heading { font-size: 20px; }
}

@media (max-width: 375px) {
    .spc-page .spc-video-section { padding: 24px 0; }
    .spc-page .spc-video-section .spc-video-inner { padding: 0 12px; }
    .spc-page .spc-video-section .spc-section-heading { font-size: 18px; }
}

/* ============================================================================
   3. FAQ SECTION — `.spc-faq-*` (per Paul's Figma reference)
   
   v5.30 CSS had no FAQ rules. The PHP has been writing the markup for a
   while (v5.42-era PHP comment) so FAQs were rendering unstyled. v5.31 adds
   the full Figma spec: Sofia Pro 36px heading, 867px max item width, 1000px
   hairline divider, "( 01 )" numbering 18px Afacad Flux, 24px question,
   18px light answer.
   ============================================================================ */
.spc-page .spc-faq-section {
    width: 100%;
    padding: 80px 0;
    background: var(--spc-white);
    display: flex;
    justify-content: center;
}

.spc-page .spc-faq-inner {
    width: 100%;
    max-width: var(--spc-content-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.spc-page .spc-faq-heading {
    color: var(--spc-dark-text);
    font-family: var(--spc-font-heading);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    margin: 0;
}

.spc-page .spc-faq-list {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.spc-page .spc-faq-divider {
    width: 100%;
    max-width: 1000px;
    height: 1px;
    background: var(--spc-300);
    margin: 0;
}

.spc-page .spc-faq-item {
    width: 100%;
    max-width: 867px;
    padding: 28px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.spc-page .spc-faq-question-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.spc-page .spc-faq-number {
    flex-shrink: 0;
    color: var(--spc-dark-text);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.spc-page .spc-faq-question {
    flex: 1;
    color: var(--spc-dark-text);
    font-family: var(--spc-font-body);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.35;
}

.spc-page .spc-faq-answer {
    color: var(--spc-light-text);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.55;
    padding-left: 50px;  /* aligns with question, offset for the "( 01 )" gutter */
}

.spc-page .spc-faq-answer p {
    color: var(--spc-light-text) !important;   /* parent theme override defense */
    font-family: var(--spc-font-body) !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1.55 !important;
    margin: 0 0 14px 0 !important;
}

.spc-page .spc-faq-answer p:last-child {
    margin-bottom: 0 !important;
}

.spc-page .spc-faq-answer ul,
.spc-page .spc-faq-answer ol {
    margin: 0 0 14px 0;
    padding-left: 20px;
}

.spc-page .spc-faq-answer ul li,
.spc-page .spc-faq-answer ol li {
    color: var(--spc-light-text);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.55;
}

.spc-page .spc-faq-answer a {
    color: var(--spc-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.spc-page .spc-faq-answer a:hover {
    color: #483F35;
}

/* FAQ responsive — matches v5.30 breakpoint ladder */
@media (max-width: 1439px) {
    .spc-page .spc-faq-section { padding: 70px 0; }
    .spc-page .spc-faq-inner { padding: 0 80px; gap: 48px; }
}

@media (max-width: 1199px) {
    .spc-page .spc-faq-section { padding: 60px 0; }
    .spc-page .spc-faq-inner { padding: 0 60px; gap: 40px; }
    .spc-page .spc-faq-heading { font-size: 32px; }
    .spc-page .spc-faq-question { font-size: 22px; }
}

@media (max-width: 1023px) {
    .spc-page .spc-faq-section { padding: 50px 0; }
    .spc-page .spc-faq-inner { padding: 0 40px; gap: 36px; }
    .spc-page .spc-faq-heading { font-size: 28px; }
    .spc-page .spc-faq-item { padding: 24px 0; }
    .spc-page .spc-faq-number { font-size: 16px; }
    .spc-page .spc-faq-question { font-size: 20px; }
    .spc-page .spc-faq-answer,
    .spc-page .spc-faq-answer p { font-size: 16px !important; }
    .spc-page .spc-faq-answer { padding-left: 44px; }
}

@media (max-width: 767px) {
    .spc-page .spc-faq-section { padding: 40px 0; }
    .spc-page .spc-faq-inner { padding: 0 20px; gap: 28px; }
    .spc-page .spc-faq-heading { font-size: 24px; }
    .spc-page .spc-faq-item { padding: 20px 0; gap: 12px; }
    .spc-page .spc-faq-question-row { gap: 12px; }
    .spc-page .spc-faq-number { font-size: 14px; }
    .spc-page .spc-faq-question { font-size: 18px; }
    .spc-page .spc-faq-answer,
    .spc-page .spc-faq-answer p,
    .spc-page .spc-faq-answer li { font-size: 15px !important; line-height: 1.5 !important; }
    .spc-page .spc-faq-answer { padding-left: 0; }   /* drop the gutter on phones */
}

@media (max-width: 480px) {
    .spc-page .spc-faq-section { padding: 32px 0; }
    .spc-page .spc-faq-inner { padding: 0 16px; gap: 24px; }
    .spc-page .spc-faq-heading { font-size: 22px; }
    .spc-page .spc-faq-item { padding: 18px 0; }
    .spc-page .spc-faq-number { font-size: 13px; }
    .spc-page .spc-faq-question { font-size: 17px; }
}

@media (max-width: 375px) {
    .spc-page .spc-faq-section { padding: 28px 0; }
    .spc-page .spc-faq-inner { padding: 0 12px; gap: 20px; }
    .spc-page .spc-faq-heading { font-size: 20px; }
    .spc-page .spc-faq-item { padding: 16px 0; gap: 10px; }
    .spc-page .spc-faq-question-row { gap: 10px; }
    .spc-page .spc-faq-number { font-size: 12px; }
    .spc-page .spc-faq-question { font-size: 16px; line-height: 1.3; }
    .spc-page .spc-faq-answer,
    .spc-page .spc-faq-answer p,
    .spc-page .spc-faq-answer li { font-size: 14px !important; }
}

/* ============================================================================
   END v5.31 PATCH — Wala tayong binawasan sa v5.30, additive lang lahat.
   ============================================================================ */


   /* =========================================================================
   community-property.css — v5.32 PATCH (APPEND-ONLY)
   =========================================================================
   FILE TO APPEND TO: community-property.css (currently at v5.31 in production)
   APPEND LOCATION:   At the VERY END of the existing file, AFTER the
                      "END v5.31 PATCH" comment marker. Do NOT touch
                      anything above.

   HOW TO APPLY:
   Option A (CLI):  cat community-property.css.v5.32-PATCH.css >> community-property.css
   Option B (IDE):  Open community-property.css, scroll to the very bottom,
                    paste this entire file's contents after the last
                    existing rule.

   PAIRS WITH:      single-property-community.php v6.23.3 (or v6.23.4 — see
                    "OPTIONAL PHP TWEAK" section at the bottom of this header).

   WALA TAYONG BINAWASAN:
   Purely additive. ZERO v5.x rules above are modified or removed.
   The v5.31 `.alh-home-search-result*` rules stay dormant (no markup matches
   them since v6.23.3 PHP renders `.alh-home-search-item*` instead) — pwedeng
   i-cleanup someday, pero hindi urgent. Wala tayong binura.

   ============================================================================
   v5.32 — SEARCH BAR + DROPDOWN 1:1 MIRROR OF property-single-v8.css v8.9
   ============================================================================

   ROOT CAUSE (Paul's "san na yun button arrow?" question):
   Yung search BAR ng community page ay hindi tumugma sa single-property
   kahit sabi natin "tumugma na" sa v6.23.3 docblock. Actual diff:

     ELEMENT             v5.31 (community)        v8.9 (single-property)
     ─────────────────────────────────────────────────────────────────────
     Pill width          340px                    500px
     Pill height         42px                     44px
     Pill outline        1px var(--spc-primary)   1px var(--spc-400)
                         (brown!)                  (#CCC8C0, neutral)
     Pill padding        4px 4px 4px 18px         7px 10px 7px 20px
     Input font-size     14px                     16px
     Input font-family   var(--spc-font-body)     inherit
     Placeholder color   var(--spc-light-text)    #969696
     Button size         34×34                    30×30
     Button SVG render   14×14 (HTML, no CSS)     9×9 (CSS forces)
     Button margin-left  8px                      0
     Button hover xform  translateY(-1px)         none
     Section background  var(--spc-white)         transparent

   Yung "san na yun button arrow" mo, dahil nag-iba yung sizing at the CSS
   level — sa community 34×34 pa rin, sa single-property 30×30 na. Kaya
   visually nag-mi-mismatch. Itong v5.32 ay nag-aalis ng diff na yan.

   DROPDOWN DIFF:
     v5.31: 340px-wide max, .alh-home-search-result* rules (56×42 thumb)
     v8.9 : 500px-wide, .alh-home-search-item* rules (142×80 landscape thumb,
            20px capitalized address line, "From $price" dual-weight format)

   The v6.23.3 PHP JS render() ALREADY emits `.alh-home-search-item*` markup,
   so v5.31's `.alh-home-search-result*` rules are dormant na. v5.32 just adds
   the matching item-level rules. Old `.alh-home-search-result*` rules are
   left intact in v5.31 — additive, wala tayong binawasan.

   SPECIFICITY:
   All v5.32 selectors use `.spc-page .alh-home-search-section .X` (3 classes)
   vs v5.31's `.spc-page .X` (2 classes). The v5.32 rules win by specificity
   alone. !important added per v8.9 verbatim, as extra defense against any
   parent-theme `button {}` / `input {}` stripping.

   MOBILE BREAKPOINTS:
     ≤991px: full-width pill + centered (mirrors v5.31 behavior, parity intact)
     ≤767px: smaller 110×64 thumbnail + smaller addr/price font

   OPTIONAL PHP TWEAK (single-property-community.php v6.23.3 → v6.23.4):
   The PHP currently has an inline <style id="alh-home-search-result-css">
   block na nag-define ng dropdown width = 480px (guessed from Figma). Yung
   v5.32 above ay 500px (actual v8.9 spec). Since both have same specificity
   (3 classes) and inline <style> loads after external CSS, inline wins ng
   480px. Para tumugma exactly sa single-property:
     - Easiest fix:  Change `width: 480px;` to `width: 500px;` sa inline block
     - Cleanest fix: Remove the entire inline <style id="alh-home-search-
                     result-css"> block from PHP since v5.32 CSS handles it
   Either way, deploy v5.32 CSS FIRST, then update PHP. If PHP is updated
   first while v5.31 CSS still in production, the old dropdown design will
   resurface.

   ============================================================================ */

/* ---- SECTION WRAPPER (mirrors v5.31 but stricter — transparent bg, both-side
        padding, !important per v8.9) ---- */
.spc-page .alh-home-search-section {
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    padding: 18px 0 !important;
}

/* ---- INNER OVERRIDE — push pill to the right (desktop) ---- */
.spc-page .alh-home-search-section .spc-breadcrumb-inner.alh-home-search-inner,
.spc-page .alh-home-search-section .alh-home-search-inner {
    justify-content: flex-end !important;
    gap: 0 !important;
}

/* ---- PILL WRAPPER — 500px (was 340px), right-anchored ---- */
.spc-page .alh-home-search-section .alh-home-search {
    position: relative !important;
    width: 500px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    text-align: left !important;
    font-family: var(--spc-font-body) !important;
}

/* ---- PILL BOX — 44px tall, outline (NOT border), Figma neutral color ---- */
.spc-page .alh-home-search-section .alh-home-search-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 44px !important;
    padding: 7px 10px 7px 20px !important;
    background: var(--spc-white) !important;
    border: none !important;
    border-radius: 50px !important;
    outline: 1px solid var(--spc-400) !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* v5.31 had a :focus-within box-shadow. v8.9 does not. Neutralize. */
.spc-page .alh-home-search-section .alh-home-search-box:focus-within {
    border: none !important;
    outline: 1px solid var(--spc-400) !important;
    box-shadow: none !important;
}

/* ---- INPUT — 16px (was 14px), inherits font-family from .alh-home-search ---- */
.spc-page .alh-home-search-section .alh-home-search-input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    color: var(--spc-dark-text) !important;
    line-height: 1.2 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.spc-page .alh-home-search-section .alh-home-search-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.spc-page .alh-home-search-section .alh-home-search-input::placeholder {
    color: #969696 !important;
    font-weight: 300 !important;
    opacity: 1 !important;
}

/* ---- BUTTON — 30×30 brand-brown circle (was 34×34), no margin-left ---- */
.spc-page .alh-home-search-section .alh-home-search-btn {
    flex-shrink: 0 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--spc-primary) !important;
    border: none !important;
    border-radius: 32px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.spc-page .alh-home-search-section .alh-home-search-btn:hover {
    background: #928572 !important;
    transform: none !important;
    box-shadow: none !important;
}
.spc-page .alh-home-search-section .alh-home-search-btn:active {
    transform: none !important;
}

/* ---- BUTTON SVG — force 9×9 (HTML markup is still 14×14, CSS resizes) ----
   ITONG ANG SAGOT SA "san na yun button arrow?" — yung v5.31 ay walang
   SVG sizing rule, kaya yung 14×14 width/height attribute mula sa PHP
   markup ang naga-prevail. Sa v5.32, force natin to 9×9 para tumugma exactly
   sa single-property visual. */
.spc-page .alh-home-search-section .alh-home-search-btn svg {
    width: 9px !important;
    height: 9px !important;
    display: block !important;
}

/* ---- DROPDOWN — 500px (matches pill), Figma shadow + radius ---- */
.spc-page .alh-home-search-section .alh-home-search-dropdown {
    display: none;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 500px !important;
    min-width: 320px !important;
    max-width: 92vw !important;
    max-height: 440px !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: var(--spc-white) !important;
    border: 1px solid #D9D4CC !important;
    border-radius: 5px !important;
    box-shadow: -3px 5px 8.8px rgba(72, 72, 72, 0.25) !important;
    z-index: 1000 !important;
}
.spc-page .alh-home-search-section .alh-home-search-dropdown.is-open {
    display: block !important;
}

/* ---- RESULT ITEM — .alh-home-search-item (replaces dormant
        .alh-home-search-result from v5.31) ---- */
.spc-page .alh-home-search-section .alh-home-search-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 25px;
    text-decoration: none;
    color: var(--spc-dark-text);
    border-bottom: 1px solid var(--spc-300);
    transition: background 0.15s ease;
}
.spc-page .alh-home-search-section .alh-home-search-item:last-child {
    border-bottom: none;
}
.spc-page .alh-home-search-section .alh-home-search-item:hover,
.spc-page .alh-home-search-section .alh-home-search-item.is-active {
    background: #F5F5F5;
}

/* ---- THUMBNAIL — 142×80 landscape (was 56×42 portrait in v5.31) ---- */
.spc-page .alh-home-search-section .alh-home-search-thumb {
    flex-shrink: 0;
    width: 142px;
    height: 80px;
    border-radius: 3px;
    overflow: hidden;
    background: #EDEAE4;
}
.spc-page .alh-home-search-section .alh-home-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- INFO COLUMN ---- */
.spc-page .alh-home-search-section .alh-home-search-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ---- ADDRESS LINE — 20px capitalized, 2-line clamp ---- */
.spc-page .alh-home-search-section .alh-home-search-addr {
    color: var(--spc-dark-text);
    font-family: var(--spc-font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---- PRICE — "From $price" dual-weight (16 + 18) ---- */
.spc-page .alh-home-search-section .alh-home-search-price {
    color: var(--spc-dark-text);
    font-family: var(--spc-font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}
.spc-page .alh-home-search-section .alh-home-search-price .from {
    font-size: 16px;
    font-weight: 400;
}
.spc-page .alh-home-search-section .alh-home-search-price.contact {
    font-weight: 400;
}

/* ---- EMPTY STATE ---- */
.spc-page .alh-home-search-section .alh-home-search-empty {
    padding: 18px 25px;
    color: var(--spc-light-text);
    font-family: var(--spc-font-body);
    font-size: 16px;
}

/* ---- MOBILE — full-width centered (≤991px), smaller thumb (≤767px) ---- */
@media (max-width: 991px) {
    .spc-page .alh-home-search-section .spc-breadcrumb-inner.alh-home-search-inner,
    .spc-page .alh-home-search-section .alh-home-search-inner {
        justify-content: center !important;
    }
    .spc-page .alh-home-search-section .alh-home-search {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .spc-page .alh-home-search-section .alh-home-search-dropdown {
        width: 100% !important;
        right: auto !important;
        left: 0 !important;
    }
}
@media (max-width: 767px) {
    .spc-page .alh-home-search-section .alh-home-search-thumb {
        width: 110px;
        height: 64px;
    }
    .spc-page .alh-home-search-section .alh-home-search-addr {
        font-size: 17px;
    }
    .spc-page .alh-home-search-section .alh-home-search-price {
        font-size: 16px;
    }
    .spc-page .alh-home-search-section .alh-home-search-item {
        padding: 12px 16px;
        gap: 12px;
    }
}

/* ============================================================================
   END v5.32 — Wala tayong binawasan sa v5.31, additive lang itong block.
   Old .alh-home-search-result* rules sa v5.31 ay nag-iiwan as dormant
   (walang matching markup) — pwedeng cleanup someday, hindi urgent.
   ============================================================================ */



.spc-community-faqs {
    padding: 60px 0;
    background: #fff;
}

.spc-community-faqs-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.spc-community-faqs-title {
    margin: 0 0 56px;
    color: #2A2A2A;
    font-family: "Sofia Pro", sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
}

.spc-community-faqs-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.spc-community-faq-item {
    width: 867px;
}

.spc-community-faq-question-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.spc-community-faq-number {
    color: #2A2A2A;
    font-family: "Afacad Flux", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
}

.spc-community-faq-question {
    margin: 0;
    color: #2A2A2A;
    font-family: "Afacad Flux", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}

.spc-community-faq-answer {
    color: #2A2A2A;
    font-family: "Afacad Flux", sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
}

.spc-community-faq-divider {
    width: 1000px;
    height: 1px;
    background: #CCC8C0;
}

@media (max-width: 1024px) {

    .spc-community-faq-item,
    .spc-community-faq-divider {
        width: 100%;
    }

    .spc-community-faq-question-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .spc-community-faqs-title {
        font-size: 28px;
    }

    .spc-community-faq-question {
        font-size: 20px;
    }

    .spc-community-faq-answer {
        font-size: 16px;
    }
}