.config-page{padding-top:4.5rem;}

/* Aside */
.config-aside {position: sticky; top: 5.5rem; border: 1px solid var(--rule); padding: 1.6rem 1.6rem 1.4rem;}
.aside-title {font-size: 0.7rem; letter-spacing: 0.22em; color: var(--ink-soft); margin: 0 0 1.25rem;}
.sel-row.is-clickable.is-active {cursor: default;}
.sel-row.is-active .sel-num {background: var(--ink-deep); color: #fff; box-shadow: 0 0 0 3px rgba(155, 211, 221, 0.35);}
.sel-row.is-active .sel-label {color: var(--ink-deep);}
.sel-row:not(.is-filled) .sel-value {color: var(--ink-soft); font-style: italic;}
.sel-row.is-clickable {cursor: pointer; margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 4px; transition: background .15s ease;}
.sel-row.is-clickable:hover:not(.is-active) {background: rgba(0, 62, 81, 0.04);}
.sel-row {gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule);}
.sel-info {flex: 1; min-width: 0;}
.sel-num {flex-shrink: 0; width: 1.7rem; height: 1.7rem; background: var(--rule); color: var(--ink-soft); font-size: 0.72rem;}
.sel-label {font-size: 0.62rem; letter-spacing: 0.18em; color: var(--ink-soft); margin: 0 0 0.2rem;}
.sel-value {font-size: 0.88rem; color: var(--ink-deep); line-height: 1.4;}
.reset-link {font-size: 0.7rem; letter-spacing: 0.18em; color: var(--ink-soft); cursor: pointer; text-decoration: underline;}
.reset-link:hover { color: var(--ink-deep); }

.sel-row.is-filled .sel-num {background: var(--accent); color: var(--ink-deep);}



.config-layout {grid-template-columns:minmax(0, 1fr) 22rem; gap:3rem; max-width:var(--max-w); padding:2.5rem var(--pad-x) var(--pad-y);}
.config-main {min-width:0;}
.config-pane.active {display:block;}
.config-pane {display:none; animation:fadeIn .35s ease;}

.pane-intro {margin-bottom:2.5rem; max-width:50rem;}
.pane-intro .display {font-size:clamp(2rem, 3.4vw, 3rem);}
.community-controls {margin:0 0 1rem;}

.community-search {max-width:480px; margin:0 0 2rem;}
.community-controls .community-search {flex:1 1 320px; max-width:480px;}

.community-search-icon {left:1rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-soft); pointer-events:none;}
.community-search-input {padding:0.799rem 2.75rem; border:1.5px solid var(--rule); background:var(--canvas); font-family:var(--font-body); font-size:0.95rem; color:var(--ink-deep); transition:border-color .2s ease, box-shadow .2s ease;}
.community-search-clear {right:0.6rem; top:50%; transform:translateY(-50%); width:28px; height:28px; display:none; background:var(--canvas-soft); color:var(--ink-mute); cursor:pointer; transition:background .15s ease, color .15s ease;}
.community-search.has-value .community-search-clear {display:flex;}
.community-search-empty {grid-column: 1 / -1; padding: 3rem 2rem; text-align: center; background: var(--canvas-soft); border-radius: 4px; color: var(--ink-mute); font-family: var(--font-body);}
.community-search-empty strong {display: block; color: var(--ink-deep); font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.community-search-empty button {margin-top: 1rem; background: transparent; border: 0; padding: 0; font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--ink-deep); cursor: pointer; border-bottom: 1px solid var(--ink-deep); padding-bottom: 2px;}
.community-search-empty button:hover { color: var(--accent); border-bottom-color: var(--accent); }
.community-search-count {margin: -0.5rem 0 1.5rem; font-size: 0.7rem; letter-spacing: 0.22em; color: var(--ink-mute);}


.view-toggle {background:var(--canvas-soft); border:1.5px solid var(--rule); padding:4px; gap:2px; flex-shrink:0;}
.view-toggle button {appearance:none; background:transparent; font-family:var(--font-body); font-size:0.7rem; letter-spacing:0.22em;  color:var(--ink-mute); cursor:pointer; padding:0.6rem 1.1rem; min-height:40px; gap:0.45rem; transition:background .2s ease, color .2s ease;}
.view-toggle button svg { width:14px; height:14px; flex-shrink:0; }
.view-toggle button:hover:not(.is-active) { color:var(--ink-deep); }
.view-toggle button.is-active {background:var(--ink-deep); color:#fff; box-shadow:0 2px 6px rgba(0,62,81,0.15);}

.communities-grid {display: grid; grid-template-columns:repeat(3, 1fr); gap:2rem 1.75rem;}
.community-map-wrap {display:none; height:clamp(440px, 55vh, 620px); border:1px solid var(--rule); margin:0 0 2rem;}
.community-map-wrap.is-active {display:block;}
.community-map-empty {position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.95); z-index: 600; text-align: center; padding: 2rem; color: var(--ink-mute); font-family: var(--font-body);}
.community-map-empty.is-active { display: flex; }
.community-map-empty strong { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--ink-deep); margin-bottom: 0.4rem; letter-spacing: -0.01em; display: block; }


.frontage-clear {color: var(--ink-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px;}
.frontage-clear:hover {color: var(--ink-deep-hi);}

.plan-bed-filters {gap:0.6rem; margin:0 0 2rem;}
.plan-bed-filter.active {background:var(--ink-deep); color:#fff; border-color:var(--ink-deep);}
.plan-bed-filter {font-size:0.7rem; font-weight:600; letter-spacing:0.16em; padding:0.497rem 1.2rem; background:transparent;
color:var(--ink-deep); border:1px solid rgba(0, 62, 81, 0.25); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.plans-grid {grid-template-columns:repeat(auto-fill, minmax(16.5rem, 1fr)); gap:1.5rem 1.25rem;}
.plan-card {cursor:pointer; border:1px solid var(--rule); padding:1.4rem 1.4rem 1.5rem; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.plan-card:hover {border-color:var(--ink-deep); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0, 62, 81, 0.06);}

.plan-thumb {aspect-ratio:4 / 3; cursor:zoom-in; background:#fafbfb; border:1px solid var(--rule);}
.plan-card:hover .plan-thumb img {transform:scale(1.03);}
.plan-thumb img {transition:transform .35s ease;}
.plan-card:hover .plan-thumb::after {opacity:1;}
.plan-thumb::after{content:'⤢'; position:absolute; top:0.6rem; right:0.6rem; width:1.9rem; height:1.9rem; background:rgba(0, 62, 81, 0.92); color:#fff; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:0.95rem; font-weight:600; opacity:0; transition:opacity .2s ease; pointer-events:none;}

.plan-name {font-family:var(--font-display); font-size:1.5rem; color:var(--ink-deep); margin:0 0 0.2rem; line-height:1.55;}
.plan-stats {font-size:0.82rem; color:var(--ink-mute); margin:0 0 0.75rem;}
.plan-options {gap:0.4rem;}
.plan-tag {font-family:var(--font-body); font-size:0.6rem; letter-spacing:0.14em; padding:0.35rem 0.65rem; border-radius:3px; background:var(--ink-deep);
color:#fff;}
.plan-tag.is-accent {background:var(--accent); color:var(--ink-deep);}


/* ---------- Floor plan lightbox ---------- */

.lightbox {inset: 0; z-index: 9999; padding: 2rem; animation: fadeIn .2s ease;}
.lightbox[hidden] { display: none !important; }
.lightbox-backdrop {inset: 0; background: rgba(0, 30, 40, 0.82); backdrop-filter: blur(4px); cursor: pointer;}
.lightbox-card {max-width: 1200px; max-height: 92vh; grid-template-columns: 1.6fr 1fr; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);}

.lightbox-close {top: 0.8rem; right: 0.8rem; width: 2.4rem; height: 2.4rem; background: rgba(255, 255, 255, 0.96); color: var(--ink-deep); font-size: 1.4rem; line-height: 1;
cursor: pointer; border: 1px solid var(--rule); transition: background .2s ease, color .2s ease, border-color .2s ease;}
.lightbox-close:hover { background: var(--ink-deep); color: #fff; border-color: var(--ink-deep); }

.lightbox-image {background: #fafbfb; padding: 2.5rem; min-height: 0; min-width: 0;}
.lightbox-image img {max-width: 100%; max-height: 78vh; object-fit: contain; display: block;}

.lightbox-image .lb-swiper {width: 100%; height: 65vh;}
.lb-swiper .swiper-slide {display: flex; align-items: center; justify-content: center; height: 100%;}
.lb-swiper .swiper-slide img {max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 auto;}

.listing-carousel-nav {display:flex; gap:0.6rem; flex-shrink:0; margin-bottom:0.5rem;}
.listing-arrow:disabled {opacity:0.25; cursor:not-allowed;}
.listing-arrow {--size:44px; width:var(--size); height:var(--size); border:1.5px solid var(--ink-deep); background:transparent;
color:var(--ink-deep); cursor:pointer; transition:background .2s ease, color .2s ease, opacity .2s ease;}
.listing-arrow:hover:not(:disabled) {background:var(--ink-deep); color:#fff;}
.listing-arrow svg {--size:16px; width:var(--size); height:var(--size); display:block;}



.lightbox-info {padding: 2.6rem 2.5rem 2.2rem; border-left: 1px solid var(--rule); overflow-y: auto;}
.lightbox-info .eyebrow { margin-bottom: 0.6rem; }
.lightbox-info .display { font-size: clamp(1.8rem, 2.5vw, 2.4rem); margin: 0 0 0.5rem; }
.lightbox-info .body { margin-bottom: 1.25rem; }
.lightbox-info .plan-options { margin-bottom: 1.5rem; }
.lightbox-info .lb-actions { margin-top: auto; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
.lightbox-info .btn-primary { width: 100%; justify-content: center; }
.lightbox-info .btn-primary.is-selected { background: var(--accent); color: var(--ink-deep); border-color: var(--accent); }
.lightbox-info .lb-help {font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-soft); text-align: center; margin: 0.4rem 0 0;}


/* ---------- Sub-step bar (within elevation step) ---------- */
.sub-step-bar {display: inline-flex; gap: 0.4rem; padding: 0.3rem; border: 1px solid var(--rule); margin-bottom: 2rem;}
.sub-pill {padding: 0.5rem 1.1rem; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--ink-soft); cursor: not-allowed;}
.sub-pill.active { background: var(--ink-deep); color: #fff; cursor: default; }
.sub-pill.done { color: var(--ink-deep); cursor: pointer; }
.sub-pill.done:hover { background: rgba(155, 211, 221, 0.25); }

/* ---------- Facade selection ---------- */
.facade-grid {grid-template-columns: 1fr 1fr;}
.facade-card {border: 1px solid var(--rule); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.facade-card:hover { border-color: var(--ink-deep); transform: translateY(-2px); }
.facade-card.is-selected { border-color: var(--ink-deep); box-shadow: 0 0 0 1px var(--ink-deep); }
.facade-swatches { display: flex; height: 5rem; }
.facade-swatches > div { flex: 1; }
.facade-body { padding: 1.5rem 1.5rem 1.6rem; }
.facade-name {font-size: 1.6rem; color: var(--ink-deep); margin: 0 0 0.5rem;}
.facade-desc {font-size: 0.86rem; color: var(--ink-mute); line-height: 1.55; margin: 0 0 0.75rem;}
.facade-count {font-size: 0.7rem; letter-spacing: 0.18em; color: var(--ink-soft);}

.color-grid:has(.elev-gallery) {display: block; grid-template-columns: none; gap: 0;}
.elev-gallery {gap: 1.75rem; width: 100%; grid-column: 1 / -1;}
.elev-hero {aspect-ratio: 21 / 10; min-height: 540px; max-height: 78vh; background: #f4f1ec; border-radius: 8px; border: 1px solid var(--rule);
cursor: zoom-in; transition: box-shadow .25s ease, transform .25s ease;}
.elev-hero:hover {box-shadow: 0 18px 42px rgba(0, 62, 81, 0.12); transform: translateY(-2px);}
.elev-hero img {transition: opacity .35s ease;}
.elev-zoom-cue {top: 1rem; right: 1rem; background: rgba(0, 30, 40, 0.85); font-size: 0.65rem; letter-spacing: 0.16em; padding: 0.45rem 0.85rem; backdrop-filter: blur(6px); pointer-events: none; opacity: 0; transition: opacity .2s ease;}
.elev-hero:hover .elev-zoom-cue {opacity: 1;}

.elev-gallery.no-image .elev-hero::before {content: 'Preview not available — color shown on swatch below'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-mute);}
.elev-hero.no-image::before {content: 'Preview not available — color shown on swatch below'; position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-mute);}

.elev-gallery.no-image .elev-hero {cursor: default;}
.elev-gallery.no-image .elev-zoom-cue {display: none;}
.elev-hero:hover .elev-zoom-cue { opacity: 1; }

.elev-swatch-strip {gap: 0.75rem; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 0.6rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin;}
.elev-swatch.is-active {border-color: var(--ink-deep); outline-color: var(--ink-deep); box-shadow: 0 0 0 1px var(--ink-deep);}

.elev-swatch {flex: 0 0 auto; scroll-snap-align: start; border: 2px solid transparent; outline: 1px solid var(--rule); outline-offset: -1px; padding: 0.55rem 1.1rem 0.55rem 0.55rem; gap: 0.7rem; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; font: inherit;}
.elev-swatch:not(.is-active):hover{transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 62, 81, 0.1);}
.elev-swatch.is-active .elev-swatch-chip {box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 2px var(--ink-deep);}
.elev-swatch.is-confirmed::after {content: '✓'; margin-left: 0.4rem; color: var(--ink-deep); font-weight: 700;}
.elev-swatch-chip {--size:2.1rem; width:var(--size); height:var(--size); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 62, 81, 0.22); flex: 0 0 auto;}

.elev-swatch-label {font-size: 0.85rem; color: var(--ink-deep);}

.elev-confirm-bar {gap: 1.5rem; padding: 1.4rem 1.6rem; border: 1px solid var(--rule); border-radius: 8px;}
.elev-confirm-meta {min-width: 0;}
.elev-active-context {font-size: 0.65rem; letter-spacing: 0.22em; color: var(--ink-soft);}
.elev-active-name {margin: 0.2rem 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--ink-deep);}
.elev-confirm-btn {flex: 0 0 auto; padding:0.8rem 1.6rem; font-size: 0.78rem; letter-spacing: 0.18em;}


/* Package GRID */
.packages-grid:has(.pkg-gallery) {display: block; grid-template-columns: none; gap: 0;}
.pkg-gallery {gap: 1.75rem; grid-column: 1 / -1;}
.pkg-bundle-note {font-size: 0.78rem; color: var(--ink-mute); letter-spacing: 0.04em;}
.pkg-hero-split { grid-template-columns: 1fr 1fr; gap: 8px; aspect-ratio: 21 / 10; min-height: 460px; max-height: 70vh; background: #f4f1ec; border: 1px solid var(--rule);}
.pkg-hero-half {background: #f4f1ec;}
.pkg-room-label {background: rgba(255, 255, 255, 0.95); color: var(--ink-deep); font-size: 0.66rem; letter-spacing: 0.22em; padding: 0.45rem 0.9rem;
backdrop-filter: blur(6px);}
.pkg-swatch-strip {gap: 0.75rem; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 0.6rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin;}
.pkg-swatch.is-active {border-color: var(--ink-deep); outline-color: var(--ink-deep); box-shadow: 0 0 0 1px var(--ink-deep);}
.pkg-swatch {flex: 0 0 auto; scroll-snap-align: start; border: 2px solid transparent; outline: 1px solid var(--rule); outline-offset: -1px; padding: 0.55rem 1.1rem 0.55rem 0.55rem; gap: 0.7rem; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; font: inherit;}
.pkg-swatch:not(.is-active):hover {transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 62, 81, 0.1);}
.pkg-swatch-chip {--size:2.1rem; width:var(--size); height:var(--size); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 62, 81, 0.22);
flex: 0 0 auto;}
.pkg-swatch-label {font-size: 0.85rem; color: var(--ink-deep);}

.pkg-detail-card {border: 1px solid var(--rule); padding: 1.6rem;}
.pkg-detail-head {padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.4rem;}
.pkg-detail-context {font-size: 0.65rem; letter-spacing: 0.22em; color: var(--ink-soft);}
.pkg-detail-name {margin: 0.3rem 0 0.4rem; font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--ink-deep); line-height: 1.55;}
.pkg-detail-tagline {font-size: 0.92rem; color: var(--ink-mute); max-width: 38rem;}
.pkg-confirm-btn {flex: 0 0 auto; padding: 0.95rem 1.6rem; font-size: 0.78rem; letter-spacing: 0.18em;}
.pkg-spec-cols {grid-template-columns: 1fr 1fr; gap: 2.5rem;}
.pkg-spec-col{min-width: 0;}

.pkg-spec-room {margin: 0 0 0.9rem; font-size: 0.7rem; letter-spacing: 0.24em; color: var(--ink-deep); padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink-deep);}
.pkg-spec-row {grid-template-columns: 2.6rem 6rem 1fr; gap: 0.85rem; padding: 0.6rem 0; border-bottom: 1px dashed var(--rule);}
.pkg-spec-swatch.is-paint {border-radius: 50%!important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 62, 81, 0.22);}
.pkg-spec-swatch {--size:2.4rem; width:var(--size); height:var(--size); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 62, 81, 0.15);
background: #f4f1ec;}
.pkg-spec-row:last-child {border-bottom: none;}
.pkg-spec-key {font-size: 0.62rem; letter-spacing: 0.16em; color: var(--ink-soft);}
.pkg-spec-val {font-size: 0.86rem; color: var(--ink-deep); line-height: 1.45;}


/* Details form */
.config-layout.is-fullscreen {grid-template-columns: 1fr;}
.details-pane {padding: 0 var(--pad-x);}
.details-screen {max-width: 720px; margin: 2rem auto 4rem;}
.details-screen .eyebrow {color: var(--ink-deep); margin-bottom: 1rem;}
.details-screen .display {font-size: clamp(2.4rem, 4.6vw, 3.6rem); margin: 0 0 1.5rem;}
.details-lead {font-size: 1rem; color: var(--ink-mute); line-height: 1.6; margin: 0 0 2.5rem; max-width: 38rem;}

.details-row {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;}
.details-form input {width: 100%; padding:0.95rem 1.25rem; font-family: var(--font-body); font-size: 1rem; color: var(--ink-deep); background: #fff; border: 1px solid var(--rule); border-radius: 6px; transition: border-color .15s ease;}
.details-form input:focus {outline: none; border-color: var(--ink-deep);}
.details-form input::placeholder { color: rgba(0, 62, 81, 0.4); }
.details-consent {font-size: 0.78rem; color: var(--ink-mute); line-height: 1.55; margin: 0.5rem 0 0;}
.details-nav {margin-top: 1.5rem;}
.btn-text-link {padding: 0.5rem 0; font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.22em; color: var(--ink-deep); cursor: pointer; text-decoration: none;}
.btn-text-link:hover {color: var(--ink-deep-hi);}
.details-nav .btn-primary {padding:0.9rem 1.8rem; font-size: 0.78rem; letter-spacing: 0.2em;}

/* Brand-styled markers — sized for regional zoom (multiple communities clustered in Ocala) */
  .estela-comm-marker {
    width: 22px; height: 22px;
    background: var(--ink-deep);
    border: 2.5px solid var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(0,62,81,0.35);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .estela-comm-marker.is-disabled { background: #9aa7ad; border-color: #cfd9dd; }

/* Map legend — active vs coming-soon communities */
.community-map-legend {bottom: 1rem; left: 1rem; z-index: 600; background: rgba(255, 255, 255, 0.97); border: 1px solid var(--rule); padding: 0.7rem 0.95rem;
gap: 0.5rem; box-shadow: 0 4px 16px rgba(0, 62, 81, 0.15);}
.community-map-legend-title {font-family: var(--font-body); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--ink-mute); margin: 0 0 0.15rem;}
.community-map-legend-item {display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-deep);}
.community-map-legend-dot {width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px #fff;}
.community-map-legend-dot.active { background: var(--ink-deep); border: 2px solid var(--accent); }
.community-map-legend-dot.coming { background: #9aa7ad; border: 2px solid #cfd9dd; }
.estela-comm-marker:hover { transform: scale(1.35); z-index: 1000 !important; }
.estela-comm-marker.is-selected {transform: scale(1.35); z-index: 1000 !important; background: var(--accent); border-color: var(--ink-deep); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink-deep), 0 4px 14px rgba(0,62,81,0.4);}

/* Brand-styled popup — mirrors homepage .community-card design */
.leaflet-popup-content-wrapper { border-radius: 4px !important; padding: 0; box-shadow: 0 12px 32px rgba(0,62,81,0.22) !important; overflow: hidden; }
.leaflet-popup-content { margin: 0 !important; padding: 0 !important; font-family: var(--font-body) !important; width: 320px !important; }
.leaflet-popup-tip { background: #fff; }
.leaflet-container { background: var(--canvas-soft); font-family: var(--font-body); }
.leaflet-control-zoom a { color: var(--ink-deep) !important; border-color: var(--rule) !important; font-weight: 300 !important; }
.leaflet-control-zoom a:hover { background: var(--accent) !important; }
.leaflet-popup-close-button { width: 32px !important; height: 32px !important; font-size: 22px !important; line-height: 32px !important; color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.3); padding: 0 !important; right: 6px !important; top: 6px !important; }
.leaflet-popup-close-button:hover { color: var(--accent) !important; }

 /* Use homepage's .community-card pattern inside the popup */
  .estela-comm-popup-card { display: block; color: var(--ink-deep); cursor: pointer; }
  .estela-comm-popup-card.is-disabled { cursor: default; }
  .estela-comm-popup-card-image {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 16 / 10; background: var(--canvas-soft);
  }
  .estela-comm-popup-card-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease;
  }
  .estela-comm-popup-card:not(.is-disabled):hover .estela-comm-popup-card-image img { transform: scale(1.04); }
  .estela-comm-popup-card-image .status-pill {
    position: absolute; top: 0.85rem; left: 0.85rem;
    font-family: var(--font-body); font-size: 0.6rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    padding: 0.4rem 0.75rem; border-radius: 2px; z-index: 2;
  }
  .estela-comm-popup-card-image .status-pill.status-selling { background: var(--ink-deep); color: #fff; }
  .estela-comm-popup-card-image .status-pill.status-coming  { background: var(--accent); color: var(--ink-deep); }
  .estela-comm-popup-card-image h3 {
    position: absolute; left: 1rem; right: 1rem; bottom: 0.85rem;
    margin: 0; font-family: var(--font-display); font-size: 1.5rem;
    font-weight: 400; color: #fff; line-height: 1.1; letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  }
  .estela-comm-popup-meta {
    padding: 1rem 1.1rem 1.1rem;
    background: #fff;
  }
  .estela-comm-popup-meta .meta-address {
    font-family: var(--font-body); font-size: 0.8rem;
    color: var(--ink-mute); margin: 0 0 0.35rem; line-height: 1.4;
  }
  .estela-comm-popup-meta .meta-price {
    font-family: var(--font-body); font-size: 0.95rem;
    color: var(--ink-deep); margin: 0 0 0.85rem; font-weight: 500;
  }
  .estela-comm-popup-meta .meta-specs {
    display: flex; flex-wrap: wrap; gap: 0.85rem;
    list-style: none; padding: 0; margin: 0 0 1rem;
  }
  .estela-comm-popup-meta .meta-specs li {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-mute);
  }
  .estela-comm-popup-meta .meta-specs svg {
    width: 18px; height: 14px; color: var(--ink-deep); flex-shrink: 0;
  }
  .estela-comm-popup-cta {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.85rem 1rem;
    background: var(--ink-deep); color: #fff !important;
    font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    cursor: pointer; border: 0; border-radius: 3px;
    transition: background .2s ease;
    text-decoration: none;
  }
  .estela-comm-popup-cta:hover { background: var(--ink-deep-hi); }
  .estela-comm-popup-cta.is-disabled { background: var(--ink-soft); cursor: not-allowed; }
  .estela-comm-popup-cta.is-disabled:hover { background: var(--ink-soft); }
  .estela-comm-popup-cta .arrow { transition: transform .2s ease; }
  .estela-comm-popup-cta:not(.is-disabled):hover .arrow { transform: translateX(3px); }

  /* Instant brand-styled hover tooltip — replaces native title delay */
  .estela-comm-tooltip {
    background: var(--ink-deep) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 2px !important;
    padding: 0.45rem 0.8rem !important;
    font-family: var(--font-body) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(0,62,81,0.3) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
  .estela-comm-tooltip::before { display: none !important; }

/* Google Maps mode (Neighborhood Map setting = google) — same marker/tooltip/popup look */
.estela-comm-gpin { position: relative; transform: translateY(50%); }
.estela-comm-gpin .estela-comm-marker { display: block; }
.estela-comm-gpin .estela-comm-gtip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.estela-comm-gpin:hover .estela-comm-gtip { opacity: 1; }
#communityMap .gm-style-iw-c { border-radius: 4px !important; padding: 0 !important; box-shadow: 0 12px 32px rgba(0,62,81,0.22) !important; }
#communityMap .gm-style-iw-d { overflow: hidden !important; padding: 0 !important; max-height: none !important; }
#communityMap .gm-style-iw-d .estela-comm-popup-card { width: 320px; max-width: 100%; }
#communityMap .gm-style-iw-chr { position: absolute; top: 0; right: 0; z-index: 3; height: 0; }
#communityMap .gm-style-iw-chr button { opacity: 1 !important; }
#communityMap .gm-style-iw-chr button span { background-color: #fff !important; }
#communityMap .gm-style-iw-tc::after { background: #fff !important; }



@media (max-width: 1100px) {
    .config-layout {grid-template-columns: 1fr; gap: 2.5rem;}
    .communities-grid {grid-template-columns: 1fr 1fr;}
}

@media all and (max-width:960px){
   .lightbox-card { grid-template-columns: 1fr; max-height: 95vh; overflow-y: auto; }
   .facade-grid { grid-template-columns: 1fr; } 
}

@media (max-width: 800px) {
    .communities-grid {grid-template-columns: 1fr; gap: 2.5rem;}
}

@media (max-width: 720px) {
    .elev-hero {min-height: 320px; aspect-ratio: 4 / 3;}
    .elev-confirm-bar {flex-direction: column; align-items: stretch!important; gap: 1rem; padding: 1.2rem;}
    .pkg-hero-split {grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 5; min-height: 480px; max-height: none;}
    .pkg-detail-head {flex-direction: column; align-items: stretch!important; gap: 1rem;}
    .pkg-spec-cols {grid-template-columns: 1fr; gap: 2rem;}
    .details-row {grid-template-columns: 1fr;}

    .lightbox-image .lb-swiper{height: auto;}
    .lightbox-image{padding: 1rem;}
    .lightbox-info{padding: 1rem 1rem 2.2rem;}
}