/* Darna · an inviting, local home for finding your next place. */
:root {
  --green: #125d49;
  --green-deep: #104c3d;
  --green-soft: #e9f2ec;
  --ink: #20352d;
  --muted: #78827b;
  --line: #e5e9e1;
  --canvas: #f8f9f6;
  --white: #fff;
  --gold: #d3ae67;
  --shadow: 0 9px 28px rgba(32, 53, 45, .055);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 500 14px/1.8 Cairo, Tahoma, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { outline: none; }
:focus-visible { outline: 3px solid #bba05d; outline-offset: 4px; }
[hidden] { display: none !important; }
button { color: inherit; }
button svg, [data-icon] svg { display: block; width: 100%; height: 100%; }
.icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; flex: 0 0 auto; }
[data-icon] { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; align-items: center; justify-content: center; }
button[data-icon] { width: 40px; height: 40px; padding: 10px; }
.button { border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 45px; padding: 10px 21px; border-radius: 9px; font-weight: 700; font-size: 13px; line-height: 1.7; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; white-space: nowrap; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--green); color: white; box-shadow: 0 4px 8px rgba(18, 93, 73, .06); }
.button.primary:hover { background: var(--green-deep); box-shadow: 0 6px 15px rgba(18, 93, 73, .15); }
.button.outline { background: white; border-color: #dce3d9; color: var(--ink); }
.button.outline:hover { border-color: var(--green); background: #f4f8f3; }
.button.small { min-height: 35px; padding: 7px 14px; font-size: 12px; }
.button.danger { color: #a23735; border-color: #e9cdca; background: #fff7f5; }
.button.danger:hover { background: #fbece8; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--green); }
.icon-button:hover { background: var(--green-soft); }
.text-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none; border: 0; color: var(--green); font-size: 12px; font-weight: 700; }
.text-button:hover { color: #0c402f; text-decoration: underline; text-underline-offset: 4px; }
.text-button [data-icon] { width: 17px; height: 17px; }

/* A quiet, balanced masthead. */
.site-header { height: 87px; border-bottom: 1px solid #e9ece5; background: rgba(255, 255, 255, .98); }
.header-inner { width: calc(100% - 112px); max-width: 1328px; height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 157px; }
.brand-icon { width: 43px; height: 43px; padding: 9px; border-radius: 12px; background: var(--green); color: white; }
.brand strong { display: block; font-size: 29px; line-height: 1.12; letter-spacing: -.8px; font-weight: 800; }
.brand-dot { color: var(--gold); }
.brand small { display: block; margin-top: 4px; color: #7d877f; font-size: 9px; line-height: 1.6; }
.main-nav { display: flex; align-items: stretch; align-self: stretch; justify-content: center; gap: 28px; }
.nav-link { display: flex; align-items: center; gap: 7px; position: relative; background: none; border: 0; padding: 0 1px; font-size: 12px; color: #747e76; font-weight: 600; white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--green); }
.nav-link.active { font-weight: 800; }
.nav-link.active:after { content: ''; position: absolute; right: 0; bottom: 20px; height: 2px; width: 27px; background: var(--green); border-radius: 2px; }
.nav-count { display: inline-flex; width: 19px; height: 19px; align-items: center; justify-content: center; border-radius: 5px; background: #eef2eb; color: #798375; font-size: 10px; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-actions .button { min-height: 42px; padding: 9px 17px; font-size: 12px; }
.header-actions .button [data-icon] { width: 17px; height: 17px; }
.prototype-badge { display: inline-flex; align-items: center; gap: 7px; color: #7f887f; font-size: 10px; white-space: nowrap; }
.prototype-badge i { width: 6px; height: 6px; border-radius: 50%; background: #a5b398; }

/* The opening feels like a home, with the search box within easy reach. */
.hero { position: relative; background: #eef2e9; padding: 29px 0 60px; isolation: isolate; }
.hero-pattern { position: absolute; right: 0; top: 0; bottom: 0; width: 58%; overflow: hidden; z-index: -1; opacity: .5; background: radial-gradient(ellipse at 80% 85%, #e1e9d8 0, transparent 60%); }
.hero-pattern:before, .hero-pattern:after { content: ''; position: absolute; border: 1px solid rgba(18, 93, 73, .055); border-radius: 50%; width: 480px; height: 480px; right: -330px; top: -120px; }
.hero-pattern:after { width: 620px; height: 620px; right: -400px; top: -190px; }
.hero-inner { max-width: 1276px; width: calc(100% - 144px); margin: auto; display: grid; grid-template-columns: .98fr 1.02fr; align-items: center; gap: 78px; }
.hero-copy { padding: 0 0 4px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #52735b; font-size: 11px; font-weight: 700; }
.eyebrow [data-icon] { width: 15px; height: 15px; }
.hero h1 { margin: 9px 0 9px; font-weight: 800; font-size: clamp(28px, 2.95vw, 43px); line-height: 1.53; letter-spacing: -1.3px; color: #253b2f; }
.hero h1 em { font-style: normal; color: var(--green); position: relative; white-space: nowrap; }
.hero h1 em:after { content: ''; position: absolute; height: 6px; border-radius: 100%; background: #c7d4b2; right: 0; left: 0; bottom: 4px; z-index: -1; transform: rotate(-2deg); }
.hero p { margin: 0; font-size: 12px; line-height: 1.95; color: #74816f; }
.hero-points { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 18px; font-size: 10px; color: #64765e; }
.hero-points > span { display: inline-flex; align-items: center; gap: 6px; }
.hero-points [data-icon] { width: 15px; height: 15px; color: #67865d; }
.hero-visual { height: 268px; position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(24, 49, 24, .05); }
.hero-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero-image-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 35, 25, .65), transparent 65%); }
.hero-photo-label { position: absolute; bottom: 24px; right: 25px; display: flex; align-items: center; gap: 13px; color: white; font-size: 13px; line-height: 1.9; }
.hero-photo-label strong { font-size: 16px; font-weight: 700; }
.hero-photo-label .mini-icon { width: 41px; height: 41px; padding: 9px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(255, 255, 255, .06); }
.hero-floating { display: flex; align-items: center; gap: 7px; position: absolute; left: 18px; top: 18px; border-radius: 30px; padding: 7px 12px; background: rgba(255, 255, 255, .93); color: #49634b; font-size: 9px; box-shadow: 0 3px 8px rgba(20, 50, 30, .07); }
.floating-dot { height: 6px; width: 6px; border-radius: 50%; background: #6a9258; }
.search-bar { display: flex; align-items: center; gap: 0; position: absolute; z-index: 10; right: 50%; bottom: -42px; transform: translateX(50%); width: calc(100% - 144px); max-width: 1276px; padding: 17px 18px; border: 1px solid #e6eade; border-radius: 14px; background: white; box-shadow: 0 10px 26px rgba(50, 65, 36, .065); }
.search-field { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; border-left: 1px solid #e7eae2; padding: 0 21px; }
.search-field:first-child { flex: 1.2; padding-right: 7px; }
.search-field.query-field { flex: 1.4; border-left: none; }
.search-field > [data-icon] { width: 20px; height: 20px; color: #859377; }
.field-inner { flex: 1; min-width: 0; }
.field-label { display: block; color: #8c9588; font-size: 9px; font-weight: 600; line-height: 1.9; }
.search-field select, .search-field input { display: block; width: 100%; background: transparent; color: #334b37; border: 0; font-size: 11px; font-weight: 700; height: 27px; padding: 0; min-width: 0; }
.search-field input::placeholder { color: #8d9586; font-size: 10px; font-weight: 500; }
.search-field select { cursor: pointer; padding-left: 11px; }
.search-field select:focus-visible, .search-field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.search-button { margin-right: 6px; min-width: 157px; min-height: 49px; font-size: 12px; border-radius: 8px; }
.search-button [data-icon] { width: 17px; height: 17px; }

/* Results and the live map share one, clear visual rhythm. */
.explore-section { width: calc(100% - 144px); max-width: 1276px; margin: 0 auto; padding: 81px 0 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.section-kicker { color: #8a956e; font-size: 10px; font-weight: 600; margin-bottom: 3px; }
.section-heading h2 { font-size: 23px; line-height: 1.65; margin: 0; font-weight: 800; letter-spacing: -.4px; }
.section-heading p { font-size: 10px; color: #8a9287; margin: 3px 0 0; }
#result-count { color: #5a7255; font-weight: 700; }
.results-actions { display: flex; align-items: center; gap: 20px; }
.sort-control { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #939b8e; white-space: nowrap; }
.sort-control select { color: #596850; font-weight: 700; font-size: 10px; padding: 5px 0; background: transparent; border: 0; cursor: pointer; max-width: 160px; }
.view-toggle { padding: 3px; border: 1px solid #e2e7dd; border-radius: 8px; display: inline-flex; gap: 2px; background: #fff; }
.view-toggle button { height: 31px; width: 33px; padding: 8px; background: transparent; border: 0; border-radius: 5px; color: #9aa291; }
.view-toggle button.active { color: var(--green); background: #eaf1e7; }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 19px; margin-bottom: 14px; }
.type-chips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.type-chip { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 74px; height: 35px; padding: 6px 13px; border: 1px solid #e3e8dd; border-radius: 7px; background: #fff; font-size: 10px; font-weight: 600; color: #78836e; transition: .15s; }
.type-chip [data-icon] { height: 15px; width: 15px; }
.type-chip:hover { border-color: #8fa285; color: var(--green); }
.type-chip.active { background: var(--green); color: white; border-color: var(--green); }
.filter-button { min-height: 35px; padding: 6px 13px; font-size: 10px; border-radius: 7px; }
.filter-button [data-icon] { width: 15px; height: 15px; }
#filter-count:not(:empty) { min-width: 17px; height: 17px; border-radius: 50%; background: #e7efe2; color: var(--green); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.active-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.active-filters:empty { display: none; }
.active-filter, .filter-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; margin-bottom: 12px; border: 1px solid #dce5d5; border-radius: 5px; background: #edf3e7; color: #5e7752; font-size: 10px; }
.active-filter button, .filter-pill button { background: none; border: none; color: inherit; padding: 0 3px; font-size: 14px; line-height: 1.3; }
.prototype-notice { display: flex; align-items: center; gap: 7px; color: #8e947f; background: #f0f2e9; border-radius: 6px; padding: 8px 11px; font-size: 9px; line-height: 1.8; margin-bottom: 18px; }
.prototype-notice [data-icon] { width: 13px; height: 13px; color: #9aab86; }
.explore-layout { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr); gap: 25px; align-items: start; }
.listing-column { min-width: 0; }
.property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.property-card { background: white; overflow: hidden; border: 1px solid #e5e9df; border-radius: 13px; box-shadow: 0 3px 8px rgba(37, 52, 26, .02); transition: transform .2s, box-shadow .2s, border-color .2s; cursor: pointer; min-width: 0; }
.property-card:hover { transform: translateY(-3px); border-color: #cbd6c2; box-shadow: 0 12px 25px rgba(33, 55, 27, .085); }
.card-image-wrap { height: 200px; overflow: hidden; position: relative; background: #e4e9dd; }
.card-image-wrap > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card-image-button { display: block; border: 0; background: transparent; padding: 0; height: 100%; width: 100%; }
.card-image-button img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.property-card:hover .card-image-wrap > img { transform: scale(1.035); }
.property-card:hover .card-image-button img { transform: scale(1.035); }
.card-image-wrap:after { content: ''; position: absolute; inset: 55% 0 0; pointer-events: none; background: linear-gradient(0deg, rgba(20, 30, 20, .25), transparent); }
.card-badges { display: flex; flex-wrap: wrap; gap: 5px; position: absolute; right: 12px; top: 12px; max-width: calc(100% - 60px); z-index: 1; }
.badge { display: inline-flex; gap: 4px; align-items: center; border-radius: 5px; padding: 3px 8px; font-size: 9px; font-weight: 700; line-height: 1.8; background: white; color: var(--ink); }
.badge.sale { background: #fff; color: #345c3b; }
.badge.rent { background: #fff; color: #957448; }
.badge.featured { background: #d7b975; color: #443a20; }
.badge.stage { background: #f1eee4; color: #797258; }
.badge [data-icon] { width: 11px; height: 11px; }
.favorite-button { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; padding: 7px; border: 0; border-radius: 50%; background: rgba(255,255,255,.95); color: #5f6d5d; z-index: 2; transition: .2s; }
.favorite-button svg { height: 17px; width: 17px; }
.favorite-button:hover { background: white; transform: scale(1.08); }
.favorite-button.saved { background: #fff7ed; color: #b96c58; }
.favorite-button.saved svg { fill: currentColor; }
.image-count { position: absolute; bottom: 11px; left: 12px; color: white; border-radius: 4px; background: rgba(25, 39, 26, .45); font-size: 9px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; z-index: 1; direction: rtl; }
.image-count [data-icon] { width: 12px; height: 12px; }
.card-body { padding: 15px 16px 0; }
.card-price { color: var(--green); font-size: 19px; line-height: 1.5; font-weight: 800; letter-spacing: -.5px; }
.card-price small { color: #718367; font-size: 9px; font-weight: 500; letter-spacing: 0; margin-right: 4px; }
.card-title { display: block; font-size: 12px; font-weight: 700; color: #30432d; margin: 7px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.8; }
.card-title button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card-location { display: flex; gap: 5px; align-items: center; color: #8b9582; font-size: 9px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-location [data-icon] { width: 12px; height: 12px; }
.card-location .icon { width: 12px; height: 12px; }
.card-facts { display: flex; gap: 13px; align-items: center; flex-wrap: wrap; margin: 12px 0 14px; color: #65775c; font-size: 9px; }
.card-facts > span { display: inline-flex; align-items: center; gap: 5px; }
.card-facts [data-icon] { width: 14px; height: 14px; color: #99a38d; }
.card-facts .icon { width: 14px; height: 14px; color: #99a38d; }
.card-footer { display: flex; align-items: center; gap: 8px; border-top: 1px solid #edf0e9; padding: 10px 0; min-height: 57px; }
.advertiser-avatar { height: 29px; width: 29px; border-radius: 50%; background: #edf1e6; color: #7b8e6c; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.advertiser-avatar svg { width: 16px; height: 16px; }
.advertiser-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.7; }
.advertiser-info strong { color: #617257; font-size: 9px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.advertiser-info small { color: #a0a793; font-size: 8px; }
.arrow-link { margin-right: auto; display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 0; padding: 4px; background: transparent; border-radius: 50%; color: #839778; }
.arrow-link [data-icon], .arrow-link svg { width: 16px; height: 16px; }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 70px 25px; background: #fff; border: 1px dashed #d5dfcb; border-radius: 14px; min-height: 300px; }
.empty-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #eef3e8; color: #7c966d; margin: 0 auto 15px; }
.empty-icon svg, .empty-icon [data-icon] { width: 25px; height: 25px; }
.empty-state h3 { font-size: 18px; margin: 0 0 9px; }
.empty-state p { font-size: 12px; color: var(--muted); margin: 0 0 20px; }
.map-panel { position: sticky; top: 22px; overflow: hidden; border: 1px solid #e0e6d9; border-radius: 13px; background: #fff; box-shadow: 0 3px 8px rgba(37, 52, 26, .02); }
.map-heading { display: flex; align-items: center; justify-content: space-between; height: 53px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.map-heading > div { display: flex; align-items: center; gap: 7px; }
.map-heading [data-icon] { width: 16px; height: 16px; color: #819675; }
.map-heading strong { font-size: 11px; font-weight: 700; color: #566c4b; }
.map-heading .icon-button { width: 29px; height: 29px; padding: 6px; }
.property-map { height: 540px; width: 100%; background: #e7ecdd; z-index: 0; }
.map-footer { display: flex; align-items: center; gap: 13px; padding: 10px 14px; min-height: 40px; font-size: 8px; color: #88977b; }
.map-footer > span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.legend-dot.rent { background: #c49959; }
.map-hint { margin-right: auto; font-size: 8px; }
.leaflet-container { font-family: Cairo, Tahoma, sans-serif !important; }
.leaflet-container .leaflet-control-attribution { font-size: 8px; background: rgba(255,255,255,.8); }
.leaflet-container .leaflet-control-zoom { border: 1px solid #d5decf; border-radius: 8px; box-shadow: 0 2px 8px #36432d15; overflow: hidden; }
.leaflet-container .leaflet-control-zoom a { color: #5a6e4f; font-size: 21px; height: 30px; width: 30px; line-height: 29px; }
.price-marker { display: block; width: max-content; min-width: 64px; padding: 5px 10px; background: var(--green); border: 2px solid white; color: white; border-radius: 7px; font-family: Cairo, Tahoma, sans-serif; font-size: 10px; font-weight: 800; line-height: 1.5; text-align: center; white-space: nowrap; box-shadow: 0 3px 8px #1e39252b; transition: transform .15s; }
.price-marker:after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 7px; height: 7px; background: inherit; border-bottom: 2px solid white; border-right: 2px solid white; transform: translateX(-50%) rotate(45deg); }
.price-marker.rent { background: #a17e47; }
.price-marker.selected { background: #273a25; transform: scale(1.14); box-shadow: 0 0 0 4px #d5b96d88; z-index: 1000; }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { line-height: 1.8; text-align: right; font-size: 11px; margin: 13px 17px; }
.leaflet-popup-content h3 { font-size: 13px; margin: 0 0 3px; }
.leaflet-popup-content .button { font-size: 10px; min-height: 30px; padding: 6px 12px; }
.explore-layout.list-only { grid-template-columns: 1fr; }
.explore-layout.list-only .map-panel { display: none; }
.explore-layout.list-only .property-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.owner-banner { width: calc(100% - 144px); max-width: 1276px; margin: 42px auto 0; display: flex; align-items: center; gap: 20px; padding: 26px 30px; background: #edf2e6; border: 1px solid #e2e9d8; border-radius: 14px; }
.owner-icon { width: 50px; height: 50px; padding: 12px; border-radius: 13px; background: #e0e9d5; color: #6f865c; }
.owner-banner h2 { margin: 0 0 4px; font-weight: 800; font-size: 17px; }
.owner-banner p { margin: 0; color: #879278; font-size: 10px; }
.owner-banner .button { margin-right: auto; font-size: 11px; }
.site-footer { max-width: 1276px; width: calc(100% - 144px); margin: 0 auto; padding: 27px 0 24px; display: flex; align-items: center; gap: 19px; font-size: 9px; color: #9ba38f; }
.footer-brand { font-weight: 800; font-size: 22px; line-height: 1; color: var(--green); }
.footer-brand span { color: var(--gold); }
.site-footer > .text-button { margin-right: auto; font-size: 9px; color: #839275; }

/* Dialogs, forms and attachment review. */
dialog.dialog { position: fixed; inset: 0; margin: auto; padding: 28px; width: min(600px, calc(100vw - 36px)); max-height: 90vh; max-height: 90dvh; overflow: auto; border: 1px solid #dce4d5; border-radius: 19px; background: #fff; color: var(--ink); box-shadow: 0 25px 100px #142c2160; overscroll-behavior: contain; }
dialog.dialog::backdrop { background: rgba(17, 35, 25, .5); backdrop-filter: blur(4px); }
dialog.add-dialog { width: min(810px, calc(100vw - 36px)); }
dialog.detail-dialog { width: min(1050px, calc(100vw - 36px)); padding: 0; }
dialog.about-dialog { width: min(560px, calc(100vw - 36px)); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.dialog-heading h2 { font-size: 23px; margin: 0; line-height: 1.6; font-weight: 800; letter-spacing: -.4px; }
.dialog-heading > .icon-button { background: #f2f5ee; color: #718265; }
.dialog-close { position: absolute; z-index: 20; top: 16px; left: 16px; border: 1px solid rgba(224,229,218,.75); background: rgba(255,255,255,.94); box-shadow: 0 2px 10px #142c2110; color: var(--ink); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 20px; }
.form-grid label, .form-step > label { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 11px; font-weight: 700; color: #5c7054; min-width: 0; }
.span-2 { grid-column: span 2; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-width: 0; border: 1px solid #dfe6d8; border-radius: 8px; background: #fcfdfb; color: #30462f; padding: 10px 12px; min-height: 43px; font-size: 12px; font-weight: 500; transition: border-color .2s, box-shadow .2s; }
.form-grid select { cursor: pointer; }
.form-grid textarea { resize: vertical; min-height: 98px; line-height: 1.9; }
.form-grid input::placeholder, .form-grid textarea::placeholder { color: #a1aa98; font-size: 11px; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: #7f9d70; box-shadow: 0 0 0 3px #7f9d7018; outline: none; background: white; }
.form-grid input:invalid:not(:placeholder-shown):not(:focus) { border-color: #c8aa95; }
.form-hint { display: block; margin: 9px 0 0; color: #8d9881; font-size: 10px; line-height: 1.9; font-weight: 500; }
.form-stepper { display: flex; align-items: center; justify-content: space-between; position: relative; margin: 0 0 20px; padding: 0 0 19px; border-bottom: 1px solid var(--line); gap: 12px; }
.form-stepper > span { display: flex; align-items: center; gap: 8px; color: #98a28e; font-size: 11px; white-space: nowrap; }
.form-stepper b { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #dfe5d8; background: #f6f8f1; font-size: 11px; }
.form-stepper > span.active { color: var(--green); font-weight: 700; }
.form-stepper > span.active b { color: white; background: var(--green); border-color: var(--green); }
.form-stepper > span.done { color: #6e8e5f; }
.form-stepper > span.done b { background: #e6efe0; border-color: #c7d9bb; color: #537a42; }
.local-notice { display: flex; align-items: center; gap: 8px; font-size: 10px; line-height: 1.9; background: #f4f5ec; color: #899174; border-radius: 7px; padding: 9px 12px; margin-bottom: 21px; }
.local-notice [data-icon], .privacy-note [data-icon] { width: 15px; height: 15px; }
.form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 21px; border-top: 1px solid var(--line); margin-top: 25px; }
.form-bottom > span { color: #929d87; font-size: 10px; }
.form-bottom > div { display: flex; gap: 9px; }
.form-bottom .button { min-height: 40px; font-size: 11px; }
.form-bottom .button [data-icon] { width: 16px; height: 16px; }
.form-section-title { color: #49683e; margin: 22px 0 0; font-size: 14px; }
.form-section-title span { font-size: 9px; font-weight: 500; color: #98a18d; margin-right: 7px; }
.location-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 10px; }
.location-toolbar strong { font-size: 11px; font-weight: 700; color: #5b7350; }
.location-toolbar .text-button { font-size: 10px; }
.picker-map { width: 100%; height: 230px; border-radius: 9px; border: 1px solid #d9e2cf; background: #e5ecd9; z-index: 0; }
.coordinate-fields { margin-top: 13px; }
.upload-zone { position: relative; display: flex; flex-direction: column; align-items: center !important; justify-content: center; gap: 5px !important; border: 1px dashed #c6d4b8; border-radius: 10px; background: #fafcf6; padding: 23px 15px; text-align: center; margin-top: 21px; cursor: pointer; }
.upload-zone:hover { border-color: #7c9b67; background: #f6f9f0; }
.upload-zone > [data-icon] { width: 27px; height: 27px; color: #91a67d; margin-bottom: 4px; }
.upload-zone strong { color: #5f7852; font-size: 12px; }
.upload-zone > span:not([data-icon]):not(.button) { color: #98a18c; font-size: 9px; font-weight: 500; }
.upload-zone .button { margin-top: 7px; pointer-events: none; }
.upload-zone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-zone:focus-within { outline: 3px solid #bba05d; outline-offset: 3px; }
.upload-zone.compact { margin-top: 15px; padding: 18px; }
.attachment-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; }
.attachment-previews:empty, .document-previews:empty { display: none; }
.attachment-preview, .photo-preview { position: relative; width: 94px; height: 76px; overflow: hidden; border-radius: 8px; border: 1px solid #dce4d2; }
.attachment-preview img, .photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.attachment-preview button, .photo-preview button { position: absolute; top: 3px; left: 3px; display: flex; align-items: center; justify-content: center; border: 0; color: #734840; background: white; width: 20px; height: 20px; border-radius: 50%; padding: 4px; box-shadow: 0 1px 4px #1f321b20; }
.attachment-preview button svg, .photo-preview button svg { width: 12px; height: 12px; }
.document-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.file-chip { display: inline-flex; gap: 7px; align-items: center; max-width: 100%; padding: 7px 9px; background: #f1f5eb; border: 1px solid #e0e8d8; border-radius: 7px; color: #617551; font-size: 10px; }
.file-chip > span:not([data-icon]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.file-chip [data-icon] { height: 14px; width: 14px; }
.file-chip button { border: 0; background: transparent; color: #927a6b; padding: 0; display: inline-flex; }
.privacy-note { display: flex; align-items: flex-start; gap: 6px; color: #8c987f; font-size: 9px; line-height: 1.9; margin: 13px 0 18px; }
.privacy-note [data-icon] { margin-top: 2px; }
.form-step .checkbox-label { display: flex; flex-direction: row; gap: 8px; align-items: flex-start; font-size: 10px; color: #6e805f; line-height: 1.9; }
.checkbox-label input { accent-color: var(--green); width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.form-error { margin-top: 17px; border: 1px solid #edd2c9; color: #a35240; background: #fff6f0; border-radius: 7px; padding: 10px 13px; font-size: 11px; }
.about-dialog p { color: #79896c; font-size: 12px; line-height: 2; }
.about-dialog .button { margin-top: 10px; font-size: 11px; }

/* Property detail, photography and the advertiser's contact card. */
.detail-gallery { height: 340px; width: 100%; position: relative; background: #e5eadd; overflow: hidden; }
.detail-main-image { width: 100%; height: 100%; object-fit: cover; }
.detail-gallery:after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(0deg,#182e2544,transparent); pointer-events: none; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid #ffffff70; border-radius: 50%; width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; padding: 9px; background: #ffffffef; color: var(--ink); box-shadow: 0 2px 8px #18302420; z-index: 2; }
.gallery-arrow.prev { right: 17px; }
.gallery-arrow.next { left: 17px; }
.gallery-arrow:hover { background: white; }
.gallery-arrow svg { height: 18px; width: 18px; }
.gallery-counter { position: absolute; left: 20px; bottom: 17px; z-index: 2; border-radius: 6px; background: #152c2577; color: white; padding: 4px 12px; font-size: 11px; direction: ltr; }
.gallery-thumbs { display: flex; gap: 8px; padding: 13px 25px 0; overflow-x: auto; }
.gallery-thumbs button { flex: 0 0 69px; height: 49px; border-radius: 6px; border: 2px solid transparent; padding: 0; overflow: hidden; background: #e8ecdf; opacity: .65; }
.gallery-thumbs button.active { border-color: var(--green); opacity: 1; }
.gallery-thumbs button:hover { opacity: 1; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.detail-body { padding: 25px 30px 30px; }
.detail-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.detail-badges { display: flex; gap: 6px; align-items: center; margin-bottom: 9px; flex-wrap: wrap; }
.detail-badges .badge { font-size: 10px; border: 1px solid #e2e8db; }
.detail-badges .badge.sale { background: #eaf1e5; border-color: #d8e6cf; color: #5c7b4c; }
.detail-badges .badge.rent { background: #f5efdf; border-color: #e8dcc0; }
.detail-badges .badge.featured { border-color: #d8bf82; }
#detail-title { font-size: 24px; line-height: 1.6; font-weight: 800; margin: 0 0 4px; letter-spacing: -.5px; }
.detail-price { color: var(--green); font-size: 28px; font-weight: 800; line-height: 1.6; letter-spacing: -.5px; white-space: nowrap; }
.detail-price small { font-size: 11px; font-weight: 500; color: #8c9d7e; display: block; letter-spacing: 0; }
.detail-location { display: flex; align-items: center; gap: 6px; color: #8a9980; font-size: 11px; margin: 0; }
.detail-location [data-icon] { width: 15px; height: 15px; }
.detail-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 26px; padding: 17px 0; border-block: 1px solid var(--line); gap: 12px; }
.detail-facts > div { display: flex; align-items: center; justify-content: center; gap: 9px; border-left: 1px solid var(--line); font-size: 11px; color: #7a8b6d; }
.detail-facts > div:last-child { border: 0; }
.detail-facts [data-icon] { height: 22px; width: 22px; color: #8da87a; }
.detail-facts strong { font-size: 14px; color: #49673b; display: block; font-weight: 700; }
.detail-facts small { font-size: 9px; color: #93a087; }
.detail-columns { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,1fr); align-items: start; gap: 30px; }
.detail-main { min-width: 0; }
.detail-main h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.detail-main h3:not(:first-child) { margin-top: 25px; }
.description-text { color: #7c8d70; font-size: 11px; line-height: 2.1; white-space: pre-line; margin: 0 0 18px; }
.amenities { display: flex; gap: 8px; flex-wrap: wrap; }
.amenity { display: flex; align-items: center; gap: 5px; background: #f2f6ec; color: #7b9268; border: 1px solid #e5ecdc; border-radius: 6px; padding: 6px 10px; font-size: 10px; }
.amenity [data-icon] { width: 13px; height: 13px; }
.facts-table { width: 100%; font-size: 11px; border-collapse: collapse; }
.facts-table td, .facts-table th { padding: 10px 0; border-bottom: 1px solid #edf1e7; text-align: right; font-weight: 500; }
.facts-table td:first-child, .facts-table th { color: #93a086; }
.facts-table td:last-child { color: #5f7750; text-align: left; font-weight: 600; }
.advertiser-panel { padding: 21px; border: 1px solid #dfe7d6; background: #f9fbf5; border-radius: 12px; }
.advertiser-panel h3 { font-size: 12px; margin: 0 0 16px; font-weight: 700; color: #6c825b; }
.advertiser-panel .advertiser-avatar { width: 43px; height: 43px; font-size: 16px; background: #e6eddf; }
.advertiser-panel .advertiser-info { margin: 0; }
.advertiser-panel .advertiser-info strong { font-size: 12px; }
.advertiser-panel .advertiser-info small { font-size: 10px; }
.advertiser-header, .advertiser-profile { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.contact-buttons { display: flex; flex-direction: column; gap: 8px; margin: 17px 0 0; }
.contact-buttons .button { width: 100%; font-size: 11px; min-height: 40px; }
.contact-buttons .button [data-icon] { width: 16px; height: 16px; }
.contact-empty { color: #8f9a81; font-size: 10px; background: #eef3e6; border: 1px dashed #d9e3cd; padding: 13px; border-radius: 7px; line-height: 1.9; }
.detail-note { display: flex; align-items: flex-start; gap: 6px; color: #95a088; font-size: 9px; line-height: 1.9; margin: 17px 0 0; }
.detail-note [data-icon] { width: 14px; height: 14px; margin-top: 2px; }
.owner-tools { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.owner-tools h3 { margin: 0 0 12px; font-size: 13px; }
.owner-tools > .button { margin-top: 15px; min-height: 35px; font-size: 10px; }
.document-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f5f8ef; padding: 10px 12px; border-radius: 7px; margin-bottom: 7px; color: #728762; font-size: 10px; }
.document-item > span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.document-item [data-icon] { width: 15px; height: 15px; }
.document-item a { font-weight: 700; color: var(--green); flex-shrink: 0; }
.document-item a:hover { text-decoration: underline; }
.toast { position: fixed; bottom: 28px; right: 50%; transform: translate(50%, 25px); z-index: 10000; min-width: 220px; max-width: calc(100vw - 40px); text-align: center; padding: 12px 22px; background: #183e2f; color: white; border: 1px solid #ffffff30; border-radius: 10px; box-shadow: 0 8px 30px #17302530; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show, .toast.visible { transform: translate(50%, 0); opacity: 1; }

/* Dynamic components render their icons directly inside the component. */
.button > .icon { width: 18px; height: 18px; }
.button.small > .icon { width: 15px; height: 15px; }
.icon-button > .icon { width: 100%; height: 100%; }
.text-button > .icon { width: 14px; height: 14px; }
.price-marker { position: relative; margin: auto; }
.active-filters > span { color: #849676; font-size: 10px; margin-bottom: 12px; }
.active-filters > .text-button { font-size: 10px; margin-bottom: 12px; }
.active-filters .icon { width: 13px; height: 13px; }
.image-count > .icon { width: 12px; height: 12px; }
.picker-pin { display: flex; align-items: center; justify-content: center; width: 38px; height: 42px; color: var(--green); filter: drop-shadow(0 3px 3px #0d332c30); }
.picker-pin .icon { width: 36px; height: 40px; fill: #fff; stroke-width: 2; }
.attachment-preview > span { position: absolute; right: 0; left: 0; bottom: 0; padding: 2px 4px; background: #183e2fbf; color: white; font-size: 8px; text-align: center; line-height: 1.8; }
.gallery-counter .icon { height: 14px; width: 14px; margin-right: 4px; }
.gallery-arrow.prev > .icon { transform: rotate(180deg); }
.detail-id { color: #b1b9a7; font-size: 9px; margin-right: 5px; font-family: Arial, sans-serif; letter-spacing: .5px; }
.detail-price small { display: inline; }
.detail-body > .detail-price { margin-top: 10px; }
.detail-location > .icon { width: 15px; height: 15px; }
.detail-facts > div { display: grid; grid-template-columns: 25px auto; grid-template-rows: auto auto; align-items: center; justify-content: center; column-gap: 9px; }
.detail-facts .icon { grid-row: 1 / span 2; height: 22px; width: 22px; color: #8da87a; }
.detail-facts > div > span { font-size: 9px; color: #93a087; }
.amenity > .icon { width: 13px; height: 13px; }
.detail-main > .button { margin-top: 22px; font-size: 10px; min-height: 38px; }
.detail-main > .button .icon { height: 15px; width: 15px; }
.facts-table > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid #edf1e7; }
.facts-table dt { color: #93a086; font-weight: 500; }
.facts-table dd { color: #5f7750; margin: 0; font-weight: 600; }
.advertiser-panel .advertiser-avatar.large { width: 51px; height: 51px; margin-bottom: 12px; }
.advertiser-panel > small { display: block; color: #a0ad91; font-size: 9px; margin-bottom: 4px; }
.advertiser-panel > h3 { margin-bottom: 2px; font-size: 15px; line-height: 1.9; }
.advertiser-panel > p:not(.privacy-note) { font-size: 11px; color: #98a98b; margin: 0; }
.privacy-note > .icon { width: 14px; height: 14px; margin-top: 2px; }
.owner-tools h3 .icon { height: 17px; width: 17px; margin-left: 5px; }
.document-item > .icon { width: 17px; height: 17px; flex: 0 0 auto; }
.document-item > span { display: block; flex: 1; }
.document-item small { display: block; font-size: 8px; color: #9ba78d; }
.document-item .icon-button { width: 26px; height: 26px; padding: 6px; }
.document-item .text-button .icon { width: 14px; height: 14px; }

/* Adapt naturally from a broad desktop canvas to a small phone. */
@media (min-width: 1600px) {
  .hero-inner, .search-bar, .explore-section, .owner-banner, .site-footer { max-width: 1340px; }
  .header-inner { max-width: 1400px; }
  .hero-inner { gap: 100px; }
  .card-image-wrap { height: 220px; }
}
@media (max-width: 1200px) {
  .header-inner { width: calc(100% - 64px); gap: 20px; }
  .main-nav { gap: 20px; }
  .prototype-badge { display: none; }
  .hero-inner, .search-bar, .explore-section, .owner-banner, .site-footer { width: calc(100% - 80px); }
  .hero-inner { gap: 40px; }
  .hero h1 { font-size: 34px; }
  .hero-visual { height: 260px; }
  .search-field { gap: 8px; padding: 0 13px; }
  .search-field > [data-icon] { width: 17px; height: 17px; }
  .search-button { min-width: 139px; padding: 10px 14px; font-size: 11px; }
  .explore-layout { gap: 20px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .property-grid { gap: 14px; }
  .card-image-wrap { height: 175px; }
  .card-body { padding: 13px 12px 0; }
  .card-price { font-size: 17px; }
  .card-title { font-size: 11px; }
  .card-facts { gap: 9px; font-size: 8px; }
  .map-hint { display: none !important; }
  .property-map { height: 505px; }
}
@media (max-width: 1000px) {
  .header-inner { width: calc(100% - 48px); }
  .brand { min-width: 138px; }
  .main-nav { gap: 15px; }
  .nav-link { font-size: 10px; }
  .header-actions .button { padding: 8px 12px; font-size: 10px; }
  .hero-inner, .search-bar, .explore-section, .owner-banner, .site-footer { width: calc(100% - 48px); }
  .hero-inner { gap: 26px; }
  .hero h1 { font-size: 30px; }
  .hero-points { gap: 12px; font-size: 9px; }
  .hero-visual { height: 255px; }
  .hero p { font-size: 11px; }
  .search-bar { padding: 15px 13px; }
  .search-field { padding: 0 11px; }
  .search-field:first-child { flex: 1.15; padding-right: 2px; }
  .search-field select, .search-field input { font-size: 10px; }
  .search-field > [data-icon] { display: none; }
  .search-button { min-width: 126px; }
  .explore-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr); gap: 17px; }
  .property-grid { gap: 14px; }
  .card-image-wrap { height: 155px; }
  .card-price { font-size: 16px; }
  .card-body { padding: 12px 10px 0; }
  .card-badges { right: 9px; top: 9px; gap: 4px; }
  .card-badges .badge { padding: 3px 5px; font-size: 8px; }
  .favorite-button { top: 9px; left: 9px; width: 26px; height: 26px; padding: 6px; }
  .card-facts { gap: 8px; font-size: 8px; }
  .card-facts [data-icon] { width: 12px; height: 12px; }
  .card-footer { gap: 6px; }
  .advertiser-avatar { height: 25px; width: 25px; }
  .advertiser-info strong { font-size: 8px; }
  .advertiser-info small { font-size: 7px; }
  .property-map { height: 490px; }
  .sort-control { font-size: 9px; }
  .results-actions { gap: 10px; }
  .type-chips { gap: 6px; }
  .type-chip { min-width: 63px; padding: 6px 9px; }
}
@media (max-width: 800px) {
  .site-header { height: auto; min-height: 78px; }
  .header-inner { min-height: 78px; flex-wrap: wrap; gap: 0 15px; }
  .brand { flex: 1; }
  .brand-icon { width: 36px; height: 36px; padding: 7px; border-radius: 10px; }
  .brand strong { font-size: 26px; }
  .brand small { font-size: 8px; }
  .header-actions .button { min-height: 38px; font-size: 11px; padding: 8px 14px; }
  .main-nav { order: 3; width: 100%; height: 43px; gap: 29px; justify-content: flex-start; border-top: 1px solid #edf0e8; overflow-x: auto; }
  .nav-link { font-size: 11px; }
  .nav-link.active:after { bottom: 1px; }
  .hero { padding: 27px 0 68px; }
  .hero-inner { gap: 25px; grid-template-columns: 1fr .95fr; }
  .eyebrow { font-size: 9px; gap: 4px; }
  .eyebrow [data-icon] { width: 13px; height: 13px; }
  .hero h1 { font-size: 26px; line-height: 1.6; letter-spacing: -.8px; margin: 8px 0; }
  .hero p { font-size: 10px; }
  .hero-visual { height: 235px; border-radius: 14px; }
  .hero-floating { font-size: 7px; padding: 5px 8px; left: 12px; top: 12px; gap: 5px; }
  .hero-photo-label { bottom: 17px; right: 17px; font-size: 10px; gap: 9px; }
  .hero-photo-label strong { font-size: 12px; }
  .hero-photo-label .mini-icon { height: 33px; width: 33px; padding: 8px; }
  .hero-points { gap: 8px; font-size: 8px; margin-top: 13px; }
  .hero-points [data-icon] { width: 13px; height: 13px; }
  .search-bar { flex-wrap: wrap; row-gap: 12px; padding: 13px; bottom: -68px; }
  .search-field { flex: 1 1 30%; padding: 0 12px; }
  .search-field:first-child { flex: 1 1 30%; padding-right: 4px; }
  .search-field:nth-child(3) { border-left: 0; }
  .search-field.query-field { flex: 1 1 50%; border-top: 1px solid #eef0e8; padding-top: 10px; padding-right: 4px; }
  .search-button { flex: 0 0 156px; min-height: 41px; margin: 0; }
  .search-field select, .search-field input { font-size: 11px; }
  .search-field > [data-icon] { display: inline-flex; width: 15px; height: 15px; }
  .field-label { font-size: 8px; }
  .explore-section { padding-top: 102px; }
  .section-heading h2 { font-size: 22px; }
  .section-kicker { font-size: 9px; }
  .section-heading p { font-size: 9px; }
  .sort-control { display: none; }
  .filter-row { margin-top: 17px; margin-bottom: 13px; }
  .type-chips { gap: 6px; }
  .type-chip { min-width: 58px; padding: 6px 9px; font-size: 9px; }
  .type-chip [data-icon] { width: 13px; height: 13px; }
  .filter-button { font-size: 9px; padding: 6px 10px; }
  .prototype-notice { font-size: 8px; }
  .explore-layout { display: flex; flex-direction: column-reverse; gap: 20px; }
  .listing-column, .map-panel { width: 100%; }
  .map-panel { position: relative; top: 0; }
  .property-map { height: 300px; }
  .map-heading { height: 45px; }
  .map-footer { padding: 7px 13px; min-height: 32px; }
  .map-hint { display: inline-flex !important; }
  .property-grid { gap: 17px; }
  .card-image-wrap { height: 200px; }
  .card-body { padding: 15px 16px 0; }
  .card-price { font-size: 20px; }
  .card-title { font-size: 12px; }
  .card-location { font-size: 10px; }
  .card-facts { font-size: 10px; gap: 14px; }
  .card-facts [data-icon] { width: 14px; height: 14px; }
  .card-footer { gap: 8px; }
  .advertiser-avatar { height: 29px; width: 29px; }
  .advertiser-info strong { font-size: 9px; }
  .advertiser-info small { font-size: 8px; }
  .card-badges { top: 12px; right: 12px; }
  .card-badges .badge { padding: 3px 7px; font-size: 9px; }
  .favorite-button { top: 12px; left: 12px; width: 30px; height: 30px; padding: 7px; }
  .explore-layout.list-only .property-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-banner { margin-top: 30px; padding: 22px; gap: 15px; }
  .owner-banner h2 { font-size: 14px; }
  .owner-banner p { font-size: 9px; }
  .owner-icon { height: 42px; width: 42px; padding: 11px; }
  .owner-banner .button { font-size: 10px; padding: 9px 13px; }
  .detail-columns { grid-template-columns: minmax(0,1.4fr) minmax(230px,1fr); gap: 22px; }
  .detail-body { padding: 22px; }
  .detail-gallery { height: 290px; }
  #detail-title { font-size: 21px; }
  .detail-price { font-size: 23px; }
  .advertiser-panel { padding: 16px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 20px; }
  .header-inner { width: calc(100% - 34px); min-height: 74px; }
  .main-nav { gap: 23px; }
  .nav-link { font-size: 10px; }
  .nav-count { width: 17px; height: 17px; font-size: 9px; }
  .header-actions .button { min-height: 36px; font-size: 10px; padding: 7px 12px; gap: 6px; }
  .header-actions .button [data-icon] { height: 15px; width: 15px; }
  .brand-icon { height: 34px; width: 34px; }
  .brand { gap: 8px; }
  .brand strong { font-size: 25px; }
  .hero-inner, .search-bar, .explore-section, .owner-banner, .site-footer { width: calc(100% - 34px); }
  .hero { padding: 25px 0 140px; }
  .hero-inner { display: block; }
  .hero-copy { position: relative; z-index: 2; }
  .hero h1 { font-size: 31px; line-height: 1.5; margin: 8px 0 10px; }
  .hero p { font-size: 11px; max-width: 320px; line-height: 1.9; }
  .hero-points { font-size: 9px; gap: 16px; margin-top: 15px; }
  .eyebrow { font-size: 10px; }
  .hero-visual { height: 170px; margin-top: 23px; border-radius: 13px; }
  .hero-visual > img { object-position: 50% 58%; }
  .hero-photo-label { right: 18px; bottom: 16px; font-size: 10px; }
  .hero-photo-label strong { font-size: 13px; }
  .hero-floating { font-size: 8px; top: 13px; left: 13px; }
  .search-bar { bottom: -62px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; padding: 14px; border-radius: 12px; }
  .search-field, .search-field:first-child { padding: 0 5px 11px; border-left: 0; flex: initial; }
  .search-field:first-child { border-left: 1px solid #e9ede2; margin-left: 11px; }
  .search-field:nth-child(3) { padding-top: 11px; padding-bottom: 11px; border-top: 1px solid #e9ede2; border-left: 1px solid #e9ede2; margin-left: 11px; }
  .search-field.query-field { padding-top: 11px; padding-bottom: 11px; border-top: 1px solid #e9ede2; }
  .search-field select, .search-field input { font-size: 10px; height: 25px; }
  .search-field input::placeholder { font-size: 9px; }
  .field-label { font-size: 8px; }
  .search-button { grid-column: 1/-1; width: 100%; min-height: 40px; padding: 9px; font-size: 11px; }
  .explore-section { padding-top: 94px; }
  .section-heading { gap: 10px; }
  .section-kicker { font-size: 8px; }
  .section-heading h2 { font-size: 19px; }
  .section-heading p { margin-top: 2px; font-size: 9px; }
  .view-toggle { padding: 3px; }
  .view-toggle button { height: 28px; width: 29px; padding: 7px; }
  .filter-row { align-items: flex-start; gap: 8px; margin-top: 16px; }
  .type-chips { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 7px; scrollbar-width: none; }
  .type-chips::-webkit-scrollbar { display: none; }
  .type-chip { flex-shrink: 0; min-width: 54px; height: 32px; padding: 6px 8px; font-size: 9px; gap: 5px; }
  .type-chip [data-icon] { width: 12px; height: 12px; }
  .filter-button { height: 32px; min-height: 32px; padding: 6px 8px; gap: 5px; font-size: 8px; }
  .filter-button [data-icon] { width: 13px; height: 13px; }
  .prototype-notice { align-items: flex-start; font-size: 8px; line-height: 1.9; padding: 8px 10px; margin-bottom: 15px; }
  .prototype-notice [data-icon] { margin-top: 2px; width: 12px; height: 12px; }
  .explore-layout { gap: 17px; }
  .property-map { height: 235px; }
  .map-heading { padding: 0 12px; height: 43px; }
  .map-heading strong { font-size: 10px; }
  .map-heading [data-icon] { height: 14px; width: 14px; }
  .map-hint { font-size: 7px; }
  .property-grid, .explore-layout.list-only .property-grid { grid-template-columns: 1fr; gap: 18px; }
  .card-image-wrap { height: 224px; }
  .card-body { padding: 17px 17px 0; }
  .card-price { font-size: 22px; }
  .card-price small { font-size: 10px; }
  .card-title { font-size: 14px; margin: 6px 0; }
  .card-location { font-size: 10px; }
  .card-facts { font-size: 10px; gap: 20px; margin: 13px 0 15px; }
  .card-facts [data-icon] { height: 16px; width: 16px; }
  .card-footer { min-height: 61px; }
  .advertiser-info strong { font-size: 10px; }
  .advertiser-info small { font-size: 8px; }
  .advertiser-avatar { height: 32px; width: 32px; }
  .card-badges .badge { font-size: 10px; }
  .favorite-button { width: 33px; height: 33px; padding: 8px; }
  .image-count { font-size: 10px; }
  .owner-banner { flex-wrap: wrap; gap: 13px; padding: 21px 19px; }
  .owner-banner > div:nth-child(2) { flex: 1; }
  .owner-banner h2 { font-size: 14px; line-height: 1.7; }
  .owner-banner p { font-size: 9px; line-height: 1.9; }
  .owner-banner .button { width: 100%; margin-top: 2px; }
  .site-footer { gap: 10px 12px; flex-wrap: wrap; padding: 23px 0; font-size: 8px; }
  .footer-brand { font-size: 21px; }
  .site-footer > span { font-size: 8px; }
  .site-footer > .text-button { font-size: 8px; }
  dialog.dialog { padding: 20px; width: calc(100vw - 24px); max-height: 94vh; max-height: 94dvh; border-radius: 14px; }
  dialog.detail-dialog { padding: 0; width: calc(100vw - 20px); }
  .dialog-heading { gap: 12px; margin-bottom: 20px; }
  .dialog-heading h2 { font-size: 21px; }
  .dialog-heading > .icon-button { width: 32px; height: 32px; padding: 8px; }
  .form-grid { gap: 15px 12px; }
  .form-grid label { font-size: 10px; }
  .form-grid input, .form-grid select, .form-grid textarea { padding: 9px 10px; min-height: 42px; font-size: 11px; }
  .form-grid input::placeholder, .form-grid textarea::placeholder { font-size: 10px; }
  .form-stepper { gap: 9px; padding-bottom: 16px; margin-bottom: 16px; }
  .form-stepper > span { gap: 5px; font-size: 9px; }
  .form-stepper b { width: 23px; height: 23px; font-size: 10px; }
  .local-notice { font-size: 9px; padding: 8px 10px; align-items: flex-start; }
  .local-notice [data-icon] { margin-top: 2px; width: 13px; height: 13px; }
  .form-bottom { padding-top: 17px; margin-top: 21px; }
  .form-bottom > span { font-size: 9px; }
  .form-bottom > div { gap: 6px; }
  .form-bottom .button { font-size: 10px; padding: 9px 12px; }
  .form-bottom .button [data-icon] { height: 14px; width: 14px; }
  .form-section-title { font-size: 12px; }
  .form-section-title span { font-size: 8px; }
  .form-hint { font-size: 9px; }
  .location-toolbar { align-items: flex-start; }
  .location-toolbar strong { font-size: 10px; }
  .location-toolbar .text-button { font-size: 9px; }
  .picker-map { height: 205px; }
  .upload-zone { padding: 20px 10px; }
  .upload-zone > span:not([data-icon]):not(.button) { font-size: 8px; }
  .attachment-preview, .photo-preview { width: 78px; height: 65px; }
  .privacy-note { font-size: 8px; }
  .form-step .checkbox-label { font-size: 9px; }
  .dialog-actions .button { font-size: 11px; min-height: 40px; padding: 9px 15px; }
  .detail-gallery { height: 240px; }
  .dialog-close { top: 12px; left: 12px; width: 31px; height: 31px; padding: 8px; }
  .gallery-arrow { width: 31px; height: 31px; padding: 8px; }
  .gallery-arrow.prev { right: 12px; }
  .gallery-arrow.next { left: 12px; }
  .gallery-counter { left: 14px; bottom: 13px; font-size: 10px; }
  .gallery-thumbs { padding: 10px 17px 0; gap: 6px; }
  .gallery-thumbs button { flex-basis: 57px; height: 42px; }
  .detail-body { padding: 20px 17px; }
  .detail-topline { gap: 12px; flex-direction: column; }
  #detail-title { font-size: 21px; line-height: 1.65; }
  .detail-location { font-size: 10px; line-height: 1.9; }
  .detail-price { display: flex; align-items: baseline; gap: 8px; font-size: 25px; }
  .detail-price small { display: inline; font-size: 10px; }
  .detail-facts { gap: 8px; margin: 18px 0 22px; padding: 16px 0; }
  .detail-facts > div { gap: 6px; flex-direction: column; text-align: center; font-size: 9px; }
  .detail-facts > div { display: flex; }
  .detail-facts .icon { height: 19px; width: 19px; }
  .detail-facts [data-icon] { height: 19px; width: 19px; }
  .detail-facts strong { font-size: 12px; }
  .detail-facts small { font-size: 8px; }
  .detail-columns { grid-template-columns: 1fr; gap: 25px; }
  .detail-main h3 { font-size: 14px; margin-bottom: 10px; }
  .description-text { font-size: 11px; }
  .amenity { font-size: 9px; padding: 5px 8px; }
  .facts-table { font-size: 10px; }
  .advertiser-panel { padding: 19px; }
  .contact-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .contact-buttons .button { font-size: 10px; padding: 9px; }
  .contact-buttons .contact-empty, .contact-buttons .button:only-child { grid-column: 1/-1; }
  .detail-note { font-size: 9px; }
  .toast { font-size: 11px; bottom: 18px; padding: 11px 17px; }
}
@media (max-width: 360px) {
  .main-nav { gap: 17px; }
  .nav-link { font-size: 9px; }
  .hero h1 { font-size: 28px; }
  .hero-points { gap: 10px; font-size: 8px; }
  .section-heading h2 { font-size: 17px; }
  .filter-button { font-size: 0; gap: 0; padding: 7px; }
  .filter-button [data-icon] { height: 15px; width: 15px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .form-stepper > span { font-size: 8px; gap: 4px; }
  .form-stepper b { height: 21px; width: 21px; }
  .form-bottom { align-items: flex-end; }
  .form-bottom > span { max-width: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── v2 improvements ─────────────────────────────────────────── */
.mobile-link { gap: 6px; }
.mobile-link [data-icon] { width: 16px; height: 16px; }
.card-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.card-meter { margin-right: auto; color: #8a9682; font-size: 10px; font-weight: 600; letter-spacing: 0; background: #f3f6f0; border-radius: 5px; padding: 0 7px; line-height: 2; }
.detail-meter { display: inline-block; margin-right: 12px; color: #7b8b73; font-size: 12px; font-weight: 600; letter-spacing: 0; background: #f1f5ee; border-radius: 6px; padding: 1px 9px; vertical-align: middle; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-actions .is-saved { color: #b96c58; border-color: #efd5cc; background: #fff7f3; }
.detail-actions .is-saved svg { fill: currentColor; }
.filter-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d5e2d4; background: var(--green-soft); color: var(--green); border-radius: 30px; padding: 3px 12px 3px 8px; font-size: 10px; font-weight: 700; margin-bottom: 12px; transition: background .2s; }
.filter-pill:hover { background: #dcebe1; }
.filter-pill .icon { width: 12px; height: 12px; }
.detail-gallery { touch-action: pan-y; }
.site-footer > a.text-button { margin-right: auto; font-size: 9px; color: var(--green); font-weight: 700; }
.site-footer > a.text-button + .text-button { margin-right: 0; }
/* Sync status of the advertiser's own listing */
.sync-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 2px; }
.sync-pill { display: inline-flex; align-items: center; border-radius: 30px; padding: 2px 12px; font-size: 11px; font-weight: 700; background: #eef2ea; color: #64735c; }
.sync-pill.sent, .sync-pill.new { background: #eef5f0; color: var(--green); }
.sync-pill.approved { background: var(--green); color: white; }
.sync-pill.rejected, .sync-pill.failed { background: #fff3ef; color: #a23735; }
.sync-pill.sending { background: #f5efe2; color: #8a6d35; }