/* SaraHome — Listing detail (gallery / facilities / report / hero / sticky CTA / share / lightbox) page-specific CSS (extracted from style.css 2026-08-20, Plan B)
   分拆規則: 必須 link 喺 style.css 之後、mobile.css 之前 (對位 §R-N+146 後寫後贏).
   來源 style.css ranges: L3951-4043 + L4151-4767 + L5074-5142 + L7387-7461 + L7723-7838 + L7839-7912 + L7939-8217 + L8218-8364  exclusions (留 style.css): 4433-4453, 4493-4501, 7913-7937
   0 老 rule 內容改動 (byte-exact extraction), 對位 2026-08-11 5-file precedent. */

/* §R-N+118 (2026-07-17) 相片 gallery */
.listing-gallery {
    margin-bottom: 0.5rem;  /* §R-N+135.10 v2 — 0.75rem → 0.5rem */
    padding-bottom: 0.5rem;  /* §R-N+135.10 v2 — 0.75rem → 0.5rem */
    border-bottom: 1px solid var(--sarahome-v3-border);
}

.listing-photo-main {
    width: 100%;
    max-width: 100%;  /* §R-N+135.9 — 720px → 100% (對應 listing-detail 1100px) */
    margin: 0 auto;
    aspect-ratio: 16 / 9;  /* §R-N+135.9 — 4/3 → 16/9 (Task 1: 圖片加大更 cinematic) */
    background: linear-gradient(135deg, var(--sarahome-v3-surface-section-alt) 0%, var(--sarahome-v3-border) 100%);
    border-radius: var(--sarahome-v3-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listing-photo-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listing-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sarahome-v3-space-2);
    color: var(--sarahome-v3-color-text-secondary);
    font-size: 0.875rem;
    text-align: center;
}

.listing-photo-placeholder strong {
    color: var(--sarahome-v3-color-fg);
    font-size: 1.125rem;
}

.listing-gallery-empty {
    display: grid;
    min-height: 320px;
    aspect-ratio: 16 / 9;
    margin-bottom: 0.5rem;
    padding: var(--sarahome-v3-space-8);
    background: linear-gradient(135deg, #F8FAFC 0%, #E8F2FC 100%);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-md);
}

@media (max-width: 768px) {
    .listing-gallery-empty {
        min-height: 0;
        padding: var(--sarahome-v3-space-6);
    }
}

.listing-photo-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--sarahome-v3-space-2);
    list-style: none;
    margin: var(--sarahome-v3-space-3) 0 0 0;
    padding: 0;
}

.listing-photo-strip li {
    aspect-ratio: 1;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--sarahome-v3-surface-section-alt);
}

/* §R-N+414+2 (2026-08-07) — 移除 dead CSS .listing-photo-thumb (line 3372-3382)
   Plan H 已將 thumb 取代為 .gallery-thumb-btn, 0 根因 hit HTML/Python/JS (P131-G11 silent fail chain).
   對位 §R-N+79 selective narrative YAGNI: dead CSS rules 移除後 history 保留喺 git log + §R-N+414+2 comment.
   對位 P131-G11 CSS dead class silent fail chain catch (2026-08-07 §R-N+414 verifier tier T6). */

.listing-photo-strip li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.listing-photo-strip li img:hover {
    transform: scale(1.05);
}

/* --- §R-N+132.5 三行大字廣告 block (對位 MaliMali 起價/售價/呎價 ref)
   HK$ primary + MOP$ secondary 折算, §R-N+135 HKD/MOP 雙幣 pattern --- */
.listing-price-block-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--sarahome-v3-space-1);
    padding: var(--sarahome-v3-space-4) 0;
    border-top: 1px solid var(--sarahome-v3-border);
    border-bottom: 1px solid var(--sarahome-v3-border);
    margin-bottom: 1rem;
}
.listing-price-block-v2 .price-primary {
    font-family: var(--sarahome-v3-font-en);
    font-size: 2rem;
    font-weight: 800;
    color: var(--sarahome-v3-color-cta);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.listing-price-block-v2 .price-secondary {
    font-family: var(--sarahome-v3-font-en);
    font-size: var(--sarahome-v3-font-base);
    font-weight: 600;
    color: var(--sarahome-v3-color-text-secondary);
    line-height: 1.2;
}
.listing-price-block-v2 .price-per-sqft {
    font-family: var(--sarahome-v3-font-en);
    font-size: var(--sarahome-v3-font-sm);
    font-weight: 500;
    color: var(--sarahome-v3-color-text-secondary);
    line-height: 1.2;
}

/* R-N+XXX price_display_mode 對位澳門議價慣例 (可議價 badge)
   用 accent indigo + 琥珀 (對位 §R-N+286 semantic color scheme, WCAG 4.5:1) */
.price-negotiable-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sarahome-v3-space-1);
    margin-top: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--sarahome-v3-shadow-color-warning);
    color: var(--sarahome-v3-status-warning-text);
    border: 1px solid rgba(217, 119, 6, 0.35);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.listing-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sarahome-v3-color-fg);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--sarahome-v3-border);
}

.listing-meta-section {
    padding: var(--sarahome-v3-space-4) 0;
}

.listing-specs-v2 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 6fr 6fr;
    gap: 0;
}

.listing-specs-v2 {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-sm);
    overflow: hidden;
}

.listing-specs-v2 li {
    display: grid;
    grid-template-columns: 5rem 2.5rem 1fr;
    gap: var(--sarahome-v3-space-2);
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--sarahome-v3-border);
    align-items: center;
    min-height: 2.5rem;
    background: var(--sarahome-v3-surface-card);
}

.listing-specs-v2 .spec-label {
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-muted);
    font-weight: 400;
    text-align: right;
}

.listing-specs-v2 .spec-icon {
    font-size: var(--sarahome-v3-font-md);
    color: var(--sarahome-v3-color-accent);
    font-weight: 500;
    text-align: center;
    line-height: 1;
}

.listing-specs-v2 .spec-value {
    font-size: 0.9375rem;
    color: var(--sarahome-v3-color-fg);
    font-weight: 500;
    line-height: 1.3;
    word-break: break-word;
    min-width: 0;
}

/* 對位 MaliMali 2-column grid (12 列), 單列跨 full-width 對應 full-row class */
.listing-specs-v2 li.full-row {
    grid-column: 1 / -1;
    grid-template-columns: 5rem 2.5rem 1fr;
}

.listing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sarahome-v3-space-2);
    padding: var(--sarahome-v3-space-4) 0;
    border-top: 1px solid var(--sarahome-v3-border);
    border-bottom: 1px solid var(--sarahome-v3-border);
    margin-bottom: 1rem;
}

.listing-chip {
    display: inline-block;
    padding: var(--sarahome-v3-space-1) var(--sarahome-v3-space-3);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--sarahome-v3-surface-card);
    color: var(--sarahome-v3-color-fg);
}

.listing-description {
    padding: var(--sarahome-v3-space-4) 0;
}

.listing-description p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--sarahome-v3-color-fg);
    margin: 0.5rem 0 0;
}

/* §R-N+341 (2026-08-04) — Facilities (設施配套) + Location (位置) section 樣式
   對位 GM audit 8/4 #3: 之前 2 個 section 完全唔見, 1 commit 1 concern 補返. */
.listing-facilities {
    padding: var(--sarahome-v3-space-4) 0;
    border-top: 1px solid var(--sarahome-v3-border);
}

.listing-facilities-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sarahome-v3-space-2);
    margin-top: 0.75rem;
}

.listing-facility-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(255, 140, 66, 0.08);
    border: 1px solid rgba(255, 140, 66, 0.25);
    border-radius: 999px;
    color: var(--sarahome-v3-color-fg);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    line-height: 1.2;
}

.listing-facility-chip:hover,
.listing-facility-chip:focus {
    background: var(--sarahome-v3-shadow-color-accent-medium);
    border-color: rgba(255, 140, 66, 0.5);
    outline: none;
}

.listing-facility-chip-icon {
    font-size: 1rem;
    line-height: 1;
}

.listing-facility-chip-label {
    white-space: nowrap;
}

.listing-location {
    padding: var(--sarahome-v3-space-4) 0;
    border-top: 1px solid var(--sarahome-v3-border);
}

.listing-location-address {
    display: flex;
    align-items: flex-start;
    gap: var(--sarahome-v3-space-2);
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--sarahome-v3-color-fg);
}

.listing-location-private {
    color: var(--sarahome-v3-color-text-secondary);
    font-style: italic;
}

.listing-location-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.listing-location-text {
    flex: 1;
    word-break: break-word;
}

.listing-location-map {
    margin-top: 0.75rem;
    border-radius: var(--sarahome-v3-radius-sm);
    overflow: hidden;
    border: 1px solid var(--sarahome-v3-border);
    background: var(--sarahome-v3-surface-section-alt);
}

.listing-location-map iframe {
    display: block;
    width: 100%;
    height: 240px;
    border: none;
}

/* 2026-09-14 (CEO 拍板「地圖改為 Google Map」) — Google Maps embed iframe
   (替代 2026-08-31 §R-N+33xx 嘅 OSM link card: .listing-location-map-card* dead 删除).
   iframe 規則喺上方 .listing-location-map (240px). */
.listing-location-map-foot {
    margin-top: 0.375rem;
    display: flex;
    justify-content: flex-end;
}
.listing-location-map-link {
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-accent);
    text-decoration: none;
}


.listing-location-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-accent);
    text-decoration: none;
    font-weight: 500;
}

.listing-location-link:hover,
.listing-location-link:focus {
    text-decoration: underline;
    outline: none;
}

.listing-vr {
    padding: var(--sarahome-v3-space-4) 0;
}

.listing-vr iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: var(--sarahome-v3-radius-sm);
}

.listing-vr-placeholder {
    padding: var(--sarahome-v3-space-8) var(--sarahome-v3-space-4);
    text-align: center;
    background: var(--sarahome-v3-color-bg);
    border: 1px dashed var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-sm);
    color: var(--sarahome-v3-color-text-secondary);
}


.sold-info {
    padding: var(--sarahome-v3-space-4);
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: var(--sarahome-v3-radius-sm);
    margin-bottom: 1rem;
}

.sold-info p {
    font-size: 0.9375rem;
    color: var(--sarahome-v3-color-fg);
    margin: 0.25rem 0;
}

.disclaimer-note {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sarahome-v3-border);
}

.disclaimer-note small {
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-text-secondary);
    line-height: 1.5;
}

.disclaimer-note a {
    color: var(--sarahome-v3-color-accent);
    text-decoration: underline;
}

/* §R-N+136 — 假盤檢舉區塊 (對位 UIUX 研究 §4) */
.report-listing-section {
    margin-top: 1rem;
    border-top: 1px solid var(--sarahome-v3-border);
    padding-top: 1rem;
}


.report-listing-toggle:hover {
    color: #DC2626;
}

.report-listing-form {
    margin-top: 0.75rem;
    max-width: 480px;
}

.report-listing-form .form-group {
    margin-bottom: 0.75rem;
}

.report-listing-form label {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: block;
}

/* §R-N+137 — 關鍵字自動補完 (對位 UIUX 研究 §1) */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sarahome-v3-surface-section-alt);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-sm);
    box-shadow: var(--sarahome-v3-shadow-card);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: var(--sarahome-v3-space-2);
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-smooth);
    font-size: 0.875rem;
}

.autocomplete-item:hover {
    background: var(--sarahome-v3-surface-section-alt);
}

.autocomplete-type {
    font-size: 0.6875rem;
    color: var(--sarahome-v3-color-text-secondary);
    background: var(--sarahome-v3-surface-section-alt);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    flex-shrink: 0;
}

/* §R-N+137 Airbnb 資訊行格式 (對位 UIUX 研究 §2 簡潔精煉) */
.listing-card-v2 .listing-location {
    font-size: var(--sarahome-v3-font-xs);
    color: var(--sarahome-v3-color-text-secondary);
    margin-top: 0.125rem;
    font-weight: 400;
}

.listing-card-v2 .listing-spec-line {
    font-size: var(--sarahome-v3-font-sm);
    color: var(--sarahome-v3-color-text-secondary);
    margin-bottom: 0.25rem;
}

/* §R-N+137 卡片內相片 carousel (對位 UIUX 研究 §2 圓角大圖輪播) */
.listing-card-v2 .listing-thumb-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.listing-card-v2 .listing-thumb-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.listing-card-v2 .listing-thumb-track img,
.listing-card-v2 .listing-thumb-track > div {
    flex: 0 0 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.listing-card-v2 .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: opacity 0.2s;
    z-index: 5;
    padding: 0;
}

.listing-card-v2 .carousel-btn:hover {
    background: var(--sarahome-v3-surface-card);
}

.listing-card-v2 .carousel-btn-prev { left: 0.5rem; }
.listing-card-v2 .carousel-btn-next { right: 0.5rem; }

.listing-card-v2 .carousel-dots {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    /* §R-N+442 (2026-08-11) P2.3: 4px → var(--sarahome-v3-space-1) 等價 token 化
       對位 §R-N+400 space token + §R-N+62 KISS 1 commit 1 根因
       4px = --sarahome-v3-space-1 完全等價, 0 視覺變動 (P2.3 audit closure). */
    gap: var(--sarahome-v3-space-1);
    z-index: 5;
}

.listing-card-v2 .carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.listing-card-v2 .carousel-dot.active {
    background: var(--sarahome-v3-surface-card);
}

/* §R-N+137 Gallery Grid (1 大 + 4 小) (對位 UIUX 研究 §4 大圖拼貼)
   §R-N+413 (2026-08-07) — 拼貼加大: 2fr 1fr → 3fr 2fr (主圖 60% 寬),
   主圖 aspect-ratio 4/3 → 16/9 (cinematic), 對位 §R-N+62 KISS + §R-N+79 selective narrative
   守住: 細圖保持 4/3 (因右 column 加闊自然變大), mobile @media 唔改 (768px 維持單 column stack)
   §R-N+414 (2026-08-07) — Plan H 重設計 (對位 Zillow 2023 redesign 根因):
   - 結構改為 .gallery-hero (主圖跨全幅 16/9) + .gallery-thumbs (細圖 row 排列)
   - 主圖加 .gallery-hero-counter overlay (1/12 counter, 對位 heatmap insight)
   - 細圖改為 button (.gallery-thumb-btn) + 16/9 aspect-ratio 統一
   - ⚠️ §R-N+79 selective narrative: .gallery-grid / .gallery-grid .gallery-main / .gallery-grid .gallery-thumb selector
     完整移除 (對位 P131-G11 CSS dead class silent fail chain), history 保留喺 §R-N+414 comment audit trail
   - mobile @media: 768px 維持 hero + thumbs stack, 不變 */

/* §R-N+414 Plan H — .gallery-hero 主圖跨全幅 */
.gallery-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--sarahome-v3-radius-lg);
    background: linear-gradient(135deg, var(--sarahome-v3-surface-section-alt) 0%, var(--sarahome-v3-border) 100%);
}

.gallery-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: opacity 0.2s;
}

.gallery-hero-img:hover {
    opacity: 0.92;
}

.gallery-hero-img:focus-visible {
    outline: 3px solid var(--sarahome-v3-color-accent);
    outline-offset: 2px;
}

/* §R-N+414 — Hero counter overlay (1/12) */
.gallery-hero-counter {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    border-radius: 999px;
    font-family: var(--sarahome-v3-font-en);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;  /* 不阻擋 click */
}

/* §R-N+414 — .gallery-thumbs 細圖 row (auto-fill, 統一 16/9) */
.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--sarahome-v3-space-2);
    list-style: none;
    margin: var(--sarahome-v3-space-3) 0 0 0;
    padding: 0;
}

.gallery-thumb-btn {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;  /* §R-N+414 — 統一 16/9 (對位 Rightmove 3:2 主圖比例 + Zillow 統一比例 chain) */
    overflow: hidden;
    border-radius: 0.375rem;
    cursor: pointer;
    border: 2px solid transparent;
    background: var(--sarahome-v3-surface-section-alt);
    padding: 0;
    transition: border-color var(--transition-smooth), opacity var(--transition-smooth);
}

.gallery-thumb-btn:hover {
    opacity: 0.85;
}

.gallery-thumb-btn.is-active {
    border-color: var(--sarahome-v3-color-accent);
}

.gallery-thumb-btn:focus-visible {
    outline: 3px solid var(--sarahome-v3-color-accent);
    outline-offset: 2px;
}

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

.gallery-thumb-btn:hover img {
    transform: scale(1.03);
}

/* Mobile §R-N+414 — .gallery-hero + .gallery-thumbs 維持 stack, 不變 768px breakpoint */
@media (max-width: 768px) {
    .gallery-hero {
        aspect-ratio: 4 / 3;  /* §R-N+414 — mobile 改 4/3 (對位 §R-N+342 mobile chain) */
    }
    .gallery-thumbs {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.375rem;
    }
}

/* §R-N+15xx+2 (2026-08-18, CEO verdict D) — 高級篩選 inline 展開, drawer 概念移除
   之前 (§R-N+137, 2026-08-02): .filter-drawer floating panel top:1rem width:360px z:1001
   根因 (CEO 圖片 audit 2026-08-18): drawer 同 site header (h=67) / toolbar (h=49) /
   panel (h=169) / listings stacking conflict, listing-card-v2 嘅 transform stacking
   context 後寫後贏擊敗 drawer z=1001, listing 售價徽章穿過 drawer body.
   修法: 全部高級篩選 fields (景觀/裝修/座向) 搬入 main filter row inline 展開,
   .filter-drawer / overlay / drawer-open / drawer-close / drawer-header / drawer-body
   / @keyframes slideIn 全部清除, 0 template / 0 JS toggle 概念. */

@media (max-width: 768px) {
    .listing-detail {
        margin: 1rem 0.5rem;
        padding: var(--sarahome-v3-space-3);
        padding-bottom: 96px;
    }
    .listing-price-large {
        font-size: 1.5rem;
    }
    /* §R-N+342 mobile layout fix (2026-08-04):
       audit — mobile 舊版 grid-template-columns: 2rem 1fr (只有 2 col)
       對住 <li> 入面 3 個 span, Grid auto-placement 將 spec-icon + spec-value
       collapse 落同一 fr cell, icon 直接被 value 文字蓋住, 37 row 全部混亂.
       Fix: 1.6rem spacer + label + value 兩段式 (label right-align + value 主體)
       icon 嵌入 label 後 (KISS — 純 CSS, 唔郁 template). */
    .listing-specs-v2 {
        grid-template-columns: 1fr;
    }
    .listing-specs-v2 li {
        display: grid;
        grid-template-columns: minmax(5.5rem, 0.8fr) minmax(0, 1.2fr);
        gap: var(--sarahome-v3-space-2);
        padding: var(--sarahome-v3-space-2);
        align-items: center;
        min-height: 0;
    }
    .listing-specs-v2 .spec-label {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: var(--sarahome-v3-font-xs);
        text-transform: none;
        letter-spacing: 0;
    }
    .listing-specs-v2 .spec-label::after {
        content: "";
        display: none;
    }
    .listing-specs-v2 .spec-icon {
        display: none;
    }
    .listing-specs-v2 .spec-value {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--sarahome-v3-color-fg);
        padding-left: 0;
        line-height: 1.35;
        margin-top: 0;
    }
    .listing-specs-v2 li.full-row {
        grid-template-columns: minmax(5.5rem, 0.8fr) minmax(0, 1.2fr);
    }
    .listing-specs-v2 li.full-row .spec-label,
    .listing-specs-v2 li.full-row .spec-icon,
    .listing-specs-v2 li.full-row .spec-value {
        grid-column: auto;
    }
}

/* === P87-A Listing Detail Sticky Bottom Action Bar (mobile-first)
   對位 MaliMali mobile ref + §R-N+131 mobile-first + §R-N+99 a11y
   mobile (≤768px): position fixed bottom; 避開 mobile-bottom-nav (≈82px, 真值 audit 8/4 13:50 nav 81.4px)
   desktop (≥769px): display none, 桌面用原生 page-level CTA .listing-actions

   §R-N+341.1 (2026-08-04 t_p1_l1_detail_v2) — fix 17px overlap launch blocker:
   舊 cssBottom=calc(65px + env(safe-area-inset-bottom)) 太低 (real nav=81.4px, 重疊 16.4px),
   改用 calc(82px + env(safe-area-inset-bottom)) 確保 sticky CTA bottom edge 喺 nav top 之上.
   對位 P1-1 L2 edit submit bar pattern (§R-N+62 KISS: 1 commit 1 concern, 純 CSS). */
.listing-sticky-cta {
    display: none;
}

input[type="number"].input-xl,
input[type="search"].input-xl,
input[type="password"].input-xl,
textarea.input-xl,
select.input-xl {
    width: 100%;
    min-height: 48px;
    padding: var(--sarahome-v3-space-3) var(--sarahome-v3-space-4);
    font-size: var(--sarahome-v3-font-base);            /* 16px iOS 不 zoom (對位 §R-N+99 a11y) */
    line-height: 1.5;
    border: 1.5px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-sm);
    background: #fff;
    color: var(--sarahome-v3-color-fg);
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-xl:focus {
    outline: none;
    border-color: var(--sarahome-v3-color-accent);
    box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.18);  /* 3px focus ring WCAG 2.1 */
}

textarea.input-xl {
    min-height: 96px;
    resize: vertical;
    line-height: 1.6;
}

select.input-xl {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%23888' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 40px;
}

.btn-xl {
    min-height: 52px;
    padding: 0.875rem 1.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    border-radius: 0.625rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .input-xl,
    input[type="text"].input-xl,
    input[type="email"].input-xl,
    input[type="tel"].input-xl,
    input[type="number"].input-xl,
    input[type="search"].input-xl,
    input[type="password"].input-xl,
    select.input-xl {
        font-size: var(--sarahome-v3-font-base);       /* 16px lock, iOS Safari 不 zoom */
    }
}
/* §R-N+341 (2026-08-04) — 統一處理: published 同 updated 都係灰色, 對位 metadata 視覺一致性.
   根因: 之前 updated 顯示橙色 #FF8C42, 似 error state (warning 橙), 與 metadata 灰色不合. */
.listing-date-updated {
    color: var(--sarahome-v3-color-text-secondary);
    font-weight: 400;
}

/* ============================================================
   §R-N+135.7 (2026-07-22) — Inline Hero CTA Strip
   樓盤詳情頁 price block 之後嘅高顯眼 inline CTA strip,
   對位 CEO 「聯絡經紀可以設計在更顯眼的地方」需求.
   設計: 暖橙 #FF8C42 背景 + 「即時聯絡經紀」label + 3 個並排 button
   mobile: 100% width, button 仍可 wrap (KISS)
   desktop: flex row, label 左 / buttons 右
   對位 §R-N+62 KISS + §R-N+70 正式書面語 + §R-N+138 ownership guard
   ============================================================ */
.listing-cta-strip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
    margin: 0.75rem 0 1.5rem 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(255, 140, 66, 0.10) 0%, rgba(255, 107, 53, 0.10) 100%);
    border: 1px solid rgba(255, 140, 66, 0.32);
    border-left: 4px solid var(--sarahome-v3-color-warm);
    border-radius: 0.625rem;
}

.listing-cta-strip-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sarahome-v3-color-warm);
    line-height: 1.4;
}

.listing-cta-strip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sarahome-v3-space-2);
}

.listing-cta-strip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.625rem 1.125rem;
    border-radius: var(--sarahome-v3-radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    border: 1px solid transparent;
    white-space: nowrap;
}

.listing-cta-strip-btn:hover {
    opacity: 0.9;
}

.listing-cta-strip-btn:active {
    transform: scale(0.98);
}

.listing-cta-strip-btn-primary {
    background: var(--sarahome-v3-color-cta);
    color: #FFFFFF;
    border-color: var(--sarahome-v3-color-cta);
    flex: 1;
}

.listing-cta-strip-btn-whatsapp {
    background: var(--sarahome-v3-color-whatsapp);
    color: #FFFFFF;
    border-color: var(--sarahome-v3-color-whatsapp);
}

.listing-cta-strip-btn-tel {
    background: var(--sarahome-v3-color-accent);
    color: #FFFFFF;
    border-color: var(--sarahome-v3-color-accent);
}

/* Desktop ≥769px: label + buttons inline row, label 唔佔 full width */
@media (min-width: 769px) {
    .listing-cta-strip {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--sarahome-v3-space-4);
        padding: var(--sarahome-v3-space-4) var(--sarahome-v3-space-6);
    }
    .listing-cta-strip-label {
        flex-shrink: 0;
    }
    .listing-cta-strip-actions {
        flex-shrink: 0;
    }
    .listing-cta-strip-btn-primary {
        flex: 0 1 auto;
    }
}

/* Mobile ≤768px: 3 button 1-col full-width stacked (對位 §R-N+99 form a11y 44px +  text) */
@media (max-width: 768px) {
    .listing-cta-strip-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sarahome-v3-space-2);
    }
    .listing-cta-strip-btn-primary {
        flex: initial;
    }
}

/* ============================================================
   §R-N+135.8 (2026-07-22) — 12-dimension audit 重設計 listing-detail hero
   對位 CEO Path D (4 entry 重複 → 1 entry )
   Selective narrative YAGNI: 對位 V6-A/E/F ship pattern.
   ============================================================ */

/* §R-N+341 (2026-08-04) — Mobile-first hero layout
   根因: 之前 mobile = 2fr 1fr 強制 60/40 grid, 390px 視窗下右 column 僅 ~130px 闊,
   經紀卡文字 (姓名/公司/牌照/評分) 全部「單字分行」截斷, 圖片亦被擠到 0 闊.
   改成: mobile (≤768px): 1-col 流動, 圖片/資訊/CTA 全寬, desktop (≥769px): 2-col 保留.
   對位 §R-N+62 KISS: 純 CSS 1 個 media query 翻轉, 0 改 template HTML. */
.listing-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sarahome-v3-space-3);
    margin-bottom: 1rem;
}

.listing-hero-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sarahome-v3-space-3);
}

.listing-hero-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sarahome-v3-space-3);
}

@media (min-width: 769px) {
    .listing-hero-grid {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        gap: var(--sarahome-v3-space-8);
        align-items: start;
    }
    /* Desktop: 邊 contact CTA 邊睇相 (sticky right column) */
    .listing-hero-right {
        position: sticky;
        top: 1rem;
    }
}

/* Hero CTA button group (取代 §R-N+135.7 listing-cta-strip)
   2026-09-15 排版優化 (CEO 拍板): 3fr 9fr (4-button 時代 legacy) → 1fr 1fr 等寬 2×2.
   根因: WhatsApp(110px) vs 致電(276px) 2.5:1 寬度失衡 + WeChat/Email 各孤島喺 3fr 窄欄, 右側 ~276px dead space.
   對位 §R-N+416 結構性反饋: grid 必須跟 button 數量演化 (v0.83 加 WeChat 後 3fr 9fr 已失效). */
.listing-hero-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sarahome-v3-space-2);
}

.listing-hero-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--sarahome-v3-space-3) var(--sarahome-v3-space-4);
    border-radius: var(--sarahome-v3-radius-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
    border: 1px solid transparent;
    white-space: nowrap;
}

.listing-hero-cta-btn:hover {
    opacity: 0.9;
}

.listing-hero-cta-btn:active {
    transform: scale(0.98);
}
/* R-N+XXX (2026-08-01) — D-A5 Mortgage calc deep-link (sales only)
   對位 §R-N+288 brand refresh accent=warm orange #FF8C42 */
.listing-mortgage-cta {
    margin: 0.75rem 0;
}
.listing-mortgage-cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sarahome-v3-space-2);
    padding: 0.625rem 1rem;
    border: 1px solid var(--sarahome-v3-color-accent);
    border-radius: var(--sarahome-v3-radius-sm);
    color: var(--sarahome-v3-color-accent);
    background: rgba(255, 140, 66, 0.08);
    font-size: var(--sarahome-v3-font-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.listing-mortgage-cta-link:hover,
.listing-mortgage-cta-link:focus {
    background: var(--sarahome-v3-color-accent);
    color: #fff;
    outline: 2px solid var(--sarahome-v3-color-accent);
    outline-offset: 1px;
}
.listing-mortgage-cta-link:active {
    transform: translateY(1px);
}

/* §R-N+398 (2026-08-07) — 澳門物業登記查冊 (CRP) sidebar card
   對位 §R-N+288 brand refresh accent=warm orange + §R-N+140 dark var system
   對位 §R-N+342 mobile : 375px viewport auto stack 落 mortgage-cta 後 */
.land-registry-card {
    margin: 0.75rem 0;
    padding: 0.875rem 1rem;
    border: 1px solid #2D7DD2;
    border-radius: var(--sarahome-v3-radius-sm);
    background: rgba(45, 125, 210, 0.04);
}
.land-registry-card-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2D7DD2;
    display: flex;
    align-items: center;
    gap: var(--sarahome-v3-space-2);
}
.land-registry-card-title-text {
    flex: 1;
    min-width: 0;
}
/* §R-N+4xxx+6 (2026-09-04) — 經紀專用 badge 標示 + stale var closure
   根因 (CEO verdict 「這個區域只可以L2以上的用戶才能夠看見, 並標示經紀專用」+
   「順便 fix 埋舊有 .land-registry-card border + 其它 stale --sarahome-v3-color-primary reference」):
   registry_card macro 已被 RBAC gate (§R-N+401 `_hero_right.html:100` `session.role
   in ('L2','L3','L4')`) 限制 L2+ 先見到, 但缺少視覺標示用戶呢個 card 只供經紀
   使用, 公眾用戶/L1 唔可見. 對位 §R-N+73 anti-fraud: UI transparency.
   修法: title 內加 badge (lock icon + 「經紀專用」文字), 視覺顏色對齊 existing
   land-registry-card bg (rgba(45,125,210,0.04)) 使用 #2D7DD2 hex (5:1 contrast
   on white, 對位 WCAG 2.1.1/4.1.2).

   §R-N+4xxx+6b (CEO 拍板 follow-up 「順便 fix 埋舊有 .land-registry-card border +
   其它 stale --sarahome-v3-color-primary reference」):
   §R-N+26xx Wave 6.1 (91ffcbb3) + c2089b9 stale-cluster closure 已 audit 確認
   --sarahome-v3-color-primary 從未喺 tokens.css :root 定義 (4 file selector 用
   but 0 definition), 引用 fall back 0px none. 本 commit 順手 sweep 7 個 stale
   reference (L1115 .land-registry-card border + L1123 .land-registry-card-title
   color + L1180/1182/1191/1193 .land-registry-card-link border/color/bg/outline
   + L1221 .land-registry-card-offices-summary/.land-registry-card-cadastre-summary
   color) → 一律 byte-exact swap var(--sarahome-v3-color-primary) → #2D7DD2,
   對位 existing rgba(45,125,210,0.04) bg 嘅視覺 intent (藍系, 唔係品牌橙).
   對位 §R-N+62 KISS: 1 closure sweep 7 hit, 0 selector 拆. */
.land-registry-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    margin-left: auto;
    background: rgba(45, 125, 210, 0.08);
    color: #2D7DD2;
    border: 1px solid #2D7DD2;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}
.land-registry-card-status {
    margin: 0 0 0.625rem 0;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.land-registry-card-status-ok {
    color: var(--sarahome-v3-color-success);
}
.land-registry-card-status-ok code {
    background: var(--sarahome-v3-shadow-color-success);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-success);
}
.land-registry-card-status-warn {
    color: var(--sarahome-v3-color-text-muted);
}
.land-registry-card-link {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    border: 1px solid #2D7DD2;
    border-radius: 0.375rem;
    color: #2D7DD2;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.land-registry-card-link:hover,
.land-registry-card-link:focus {
    background: #2D7DD2;
    color: #fff;
    outline: 2px solid #2D7DD2;
    outline-offset: 1px;
}
.land-registry-card-link:active {
    transform: translateY(1px);
}
.land-registry-card-disclaimer {
    margin: var(--sarahome-v3-space-2) 0 0 0;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--sarahome-v3-color-text-muted);
}

/* §R-N+401 (2026-08-07) — 物業登記局 3 地址 + 地籍網助手 (對位 §R-N+342 mobile-first)
   對位 §R-N+381 selective narrative: URL / 地址 / 地籍網 集中喺 helper, macro 唔 inline.
   唔再 ship §R-N+399 4 渠道 accordion (.land-registry-card-channels / -channel-* 已刪). */
.land-registry-card-offices,
.land-registry-card-cadastre {
    margin: 0.625rem 0;
    border: 1px solid rgba(45, 125, 210, 0.18);
    border-radius: 0.375rem;
    background: rgba(45, 125, 210, 0.025);
}
.land-registry-card-offices-summary,
.land-registry-card-cadastre-summary {
    padding: var(--sarahome-v3-space-2) var(--sarahome-v3-space-3);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2D7DD2;
    cursor: pointer;
    list-style: none;
}
.land-registry-card-offices-summary::-webkit-details-marker,
.land-registry-card-cadastre-summary::-webkit-details-marker {
    display: none;
}
.land-registry-card-offices-summary::before,
.land-registry-card-cadastre-summary::before {
    content: '▸ ';
    font-size: 0.75rem;
}
details[open] > .land-registry-card-offices-summary::before,
details[open] > .land-registry-card-cadastre-summary::before {
    content: '▾ ';
}
.land-registry-offices-list {
    margin: 0;
    padding: var(--sarahome-v3-space-2) var(--sarahome-v3-space-4);
    list-style: none;
}
.land-registry-office-item {
    margin: 0.375rem 0;
    padding: var(--sarahome-v3-space-2);
    background: #fff;
    border-radius: 0.25rem;
    border: 1px solid var(--sarahome-v3-shadow-color-brand-blue-strong);
}
.land-registry-office-name {
    margin: 0 0 0.25rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sarahome-v3-color-text);
}
.land-registry-office-address,
.land-registry-office-meta {
    margin: 0 0 0.125rem 0;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--sarahome-v3-color-text-muted);
}
.land-registry-cadastre-hint {
    margin: 0.375rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--sarahome-v3-color-text-muted);
}
.land-registry-cadastre-link {
    display: inline-block;
    margin: 0 0.75rem 0.5rem 0.75rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--sarahome-v3-color-success);
    border-radius: 0.25rem;
    color: var(--sarahome-v3-color-success);
    background: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
}
.land-registry-cadastre-link:hover,
.land-registry-cadastre-link:focus {
    background: var(--sarahome-v3-color-success);
    color: #fff;
}

/* R-N+XXX (2026-08-01) — D-B2 Share button group
   對位 §R-N+288 brand refresh (warm orange #FF8C42) + a11y focus outline */
.listing-share {
    display: flex;
    align-items: center;
    gap: var(--sarahome-v3-space-2);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(125, 125, 125, 0.15);
}
.listing-share-label {
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-text-secondary);
    font-weight: 600;
    margin-right: 0.25rem;
}
.listing-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.1s ease, opacity 0.15s ease;
    flex-shrink: 0;
}
.listing-share-btn:hover,
.listing-share-btn:focus {
    transform: scale(1.08);
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.listing-share-whatsapp {
    background: var(--sarahome-v3-color-whatsapp);
    color: #fff;
}
.listing-share-facebook {
    background: #1877F2;
    color: #fff;
}
.listing-share-copy {
    background: rgba(125, 125, 125, 0.12);
    color: var(--sarahome-v3-color-text-primary);
}
.listing-share-toast {
    position: fixed;
    left: 50%;
    bottom: calc(80px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(20px);
    padding: 0.625rem 1.25rem;
    background: var(--sarahome-v3-color-fg);
    color: #fff;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}
.listing-share-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 768px) {
    .listing-share-toast {
        bottom: calc(140px + env(safe-area-inset-bottom));
    }
}

/* Hero agent 1-line 摘要 */
.listing-hero-agent {
    margin: 0;
    padding: var(--sarahome-v3-space-2) 0;
    font-size: 0.8125rem;
    color: var(--sarahome-v3-color-text-secondary);
    line-height: 1.4;
}

.listing-hero-agent strong {
    color: var(--sarahome-v3-color-fg);
    font-weight: 600;
}

/* Listing-actions 已刪 (§R-N+135.8), 守住 selector 0 hit (防 regression) */
.listing-actions {
    display: none !important;
}

/* 守住 listing-cta-strip 已刪 (§R-N+135.8), 防止未 ship CSS 死碼 (防 CSS-template coupling drift, §R-N+79) */
.listing-cta-strip {
    display: none !important;
}

/* ============================================================
   §R-N+135.9 (2026-07-22) — Image 加大 + Lightbox (Task 1 + 2)
   對位 CEO: 「加大內容框 (圖片)」+ 「點擊圖片單獨看」
   Selective narrative YAGNI: 0 新 route/endpoint, KISS vanilla JS
   ============================================================ */

/* §R-N+135.9 (2026-07-22) — Task 1: 圖片加大 (full-width within hero-grid)
   注意: .listing-photo-main  喺 line 3479 (max-width: 100%, aspect-ratio: 16/9)
   唔可以喺度重複定義 (§R-N+79 selective narrative). */
.listing-gallery {
    width: 100%;
    margin-bottom: 1rem;
}

.listing-photo-main-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    border-radius: var(--sarahome-v3-radius-sm);
    transition: opacity 0.2s;
}

.listing-photo-main-img:hover {
    opacity: 0.92;
}

.listing-photo-main-img:focus-visible {
    outline: 3px solid var(--sarahome-v3-color-accent);
    outline-offset: 2px;
}

/* Mobile 圖片加大 — max-height 撐大 */
@media (max-width: 768px) {
    .listing-photo-main {
        aspect-ratio: 4 / 3;
    }
}

/* Task 2: Lightbox  */
.listing-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: listing-lightbox-fade-in 0.15s ease-out;
}

.listing-lightbox[hidden] {
    display: none;
}

@keyframes listing-lightbox-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.listing-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    display: block;
    border-radius: 0.375rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-drag: none;
}

.listing-lightbox-btn {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.listing-lightbox-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

.listing-lightbox-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.listing-lightbox-btn-close {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
}

.listing-lightbox-btn-prev,
.listing-lightbox-btn-next {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
}

.listing-lightbox-btn-prev {
    left: 1rem;
}

.listing-lightbox-btn-next {
    right: 1rem;
}

.listing-lightbox-counter {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    pointer-events: none;
}

/* Body lock 對位 P5-G mobile bottom-nav 守住 */
body.listing-lightbox-open {
    overflow: hidden;
}

/* Mobile lightbox: prev/next button 細啲 */
@media (max-width: 768px) {
    .listing-lightbox-btn-close {
        top: 0.5rem;
        right: 0.5rem;
    }
    .listing-lightbox-btn-prev {
        left: 0.5rem;
    }
    .listing-lightbox-btn-next {
        right: 0.5rem;
    }
}


/* =========================================================================
   §R-N+4xxx+42 (2026-09-04, CEO verdict) — Floor plans display (Phase 1 closure)
   對位 §R-N+288 brand refresh: 藍 accent 對位 photo gallery
   對位 §R-N+62 KISS: 純 CSS, 0 JS animation library
   對位 §R-N+264 a11y: aria-labelledby + role=img via alt
   ========================================================================= */

.listing-detail-floor-plans {
    margin-top: 32px;
    padding: 0;
}
.listing-detail-floor-plans-header {
    margin-bottom: 12px;
}
.listing-detail-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sarahome-v3-color-text-primary, #0F172A);
}
.listing-detail-section-title svg {
    color: var(--sarahome-v3-color-accent, #2D7DD2);
}
.listing-detail-floor-plans-count {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748B;
    margin-left: 4px;
}
.listing-detail-floor-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.listing-detail-floor-plan-card {
    background: white;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.listing-detail-floor-plan-card:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}
.listing-detail-floor-plan-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.listing-detail-floor-plan-thumbnail {
    aspect-ratio: 4 / 3;
    background: rgba(45, 125, 210, 0.04);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.listing-detail-floor-plan-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.listing-detail-floor-plan-pdf-preview {
    color: #991B1B;
    display: flex;
    align-items: center;
    justify-content: center;
}
.listing-detail-floor-plan-meta {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.listing-detail-floor-plan-format {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(45, 125, 210, 0.10);
    color: var(--sarahome-v3-color-accent, #2D7DD2);
    font-size: 0.6875rem;
    font-weight: 600;
}
.listing-detail-floor-plan-format[data-format="pdf"] {
    background: rgba(220, 38, 38, 0.10);
    color: #991B1B;
}
.listing-detail-floor-plan-format[data-format="svg"] {
    background: rgba(16, 185, 129, 0.10);
    color: #065F46;
}
.listing-detail-floor-plan-filename {
    font-size: 0.75rem;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 60px;
}
.listing-detail-floor-plan-size {
    font-size: 0.6875rem;
    color: #94A3B8;
}
.listing-detail-floor-plans-hint {
    margin: 8px 0 0 0;
    font-size: 0.8125rem;
    color: #64748B;
    text-align: center;
}

@media (max-width: 640px) {
    .listing-detail-floor-plans-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* === §R-N+4xxx+56 (2026-09-05, Round 10) — Floor plan lightbox (universal) === */
/* 對位 §R-N+62 KISS: 純 CSS, 0 JSX-like templates, 對位 .listing-lightbox pattern */
/* 對位 §R-N+264 a11y: role=dialog + aria-modal + ESC + prev/next kbd */

.floor-plans-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    animation: floor-plans-lightbox-fade-in 0.18s ease-out;
}
.floor-plans-lightbox[hidden] { display: none; }

@keyframes floor-plans-lightbox-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.floor-plans-lightbox-content {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floor-plans-lightbox-img,
.floor-plans-lightbox-iframe {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30);
}

.floor-plans-lightbox-iframe {
    width: 80vw;
    height: 80vh;
    background: #fff;
}

.floor-plans-lightbox-btn {
    position: absolute;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.floor-plans-lightbox-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.20);
    transform: scale(1.05);
}
.floor-plans-lightbox-btn:disabled {
    opacity: 0.30;
    cursor: not-allowed;
}

.floor-plans-lightbox-btn-close {
    top: 16px;
    right: 16px;
}
.floor-plans-lightbox-btn-prev {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.floor-plans-lightbox-btn-next {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.floor-plans-lightbox-btn-prev:hover:not(:disabled),
.floor-plans-lightbox-btn-next:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.05);
}

.floor-plans-lightbox-meta {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(15, 23, 42, 0.70);
    color: #fff;
    padding: 8px 18px;
    border-radius: 22px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.875rem;
}

.floor-plans-lightbox-counter {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.floor-plans-lightbox-format {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.floor-plans-lightbox-download {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.10);
    transition: background-color 0.15s ease;
}
.floor-plans-lightbox-download:hover {
    background: rgba(255, 255, 255, 0.20);
}

body.floor-plans-lightbox-open {
    overflow: hidden;
}

/* Update link to button (universal trigger) */
.listing-detail-floor-plan-link {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    padding: 0;
}

.listing-detail-floor-plan-link:focus-visible {
    outline: 2px solid var(--sarahome-v3-color-primary, #2D7DD2);
    outline-offset: 2px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .floor-plans-lightbox {
        padding: 16px;
    }
    .floor-plans-lightbox-btn {
        width: 40px;
        height: 40px;
    }
    .floor-plans-lightbox-btn-prev {
        left: 8px;
    }
    .floor-plans-lightbox-btn-next {
        right: 8px;
    }
    .floor-plans-lightbox-iframe {
        width: 95vw;
        height: 70vh;
    }
    .floor-plans-lightbox-meta {
        bottom: 8px;
        gap: 10px;
        padding: 6px 14px;
        font-size: 0.75rem;
    }
}