/* SaraHome / 莎拉家 — Mobile-first CSS (Stage 0 Commit 2 selective ship)
   對位 CEO 2026-08-04 mobile UI density verdict (Stage 0 / C-改良 Option A selective):
   - Audit 根因: 9575 行 style.css monolith, 82 個 @media block 散落
   - §R-N+135.8 selective narrative「mobile-first 根因集中化」chain
   - §R-N+62 KISS (1 commit 1 chain)
   - §R-N+344 根因: mobile (.listing-sticky-cta, .listing-hero-cta hide,
     .listing-sticky-cta-tel shape, .site-footer 154px magic number,
     .listing-detail padding-bottom 154px)
   - §R-N+345 (mobile sticky tel-FAB CSS shape 圓形 48px FAB)
   - §R-N+346 (mobile .site-footer 預留 sticky-cta + mobile-nav 154px 空間)
   - §R-N+341.1 (padding-bottom 122 → 154 magic number)

對位 §R-N+62 KISS defer timing 根因:
   - Stage 0 Commit 1 (§R-N+347.1) hero-v3-title 22px chain ✅
   - Stage 0 Commit 2 (本檔): 抽 §R-N+344 mobile block (line 6464-6624, 161 行 scope) → mobile.css
   - Phase 3 mobile-first 完成後再做 Option C 雙檔拆

對位 P131-G8 source-order 根因 守住:
   - mobile.css 喺 base.html 內 style.css 後面 link (source-order 後者 win)
   - 對住 specificity 同, 後 link = 後定義 = wins
   - 同時對住現有 §R-N+344 block `!important` 守住 (唔郁)
*/

/* === 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). */
@media (max-width: 768px) {
    .listing-sticky-cta {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        position: fixed;
        left: 0;
        right: 0;
        /* §R-N+12xx+2 (2026-08-17): bottom 82px magic number → nav-height token.
           82px 係 2026-08-04 舊 nav 81.4px 對位; §R-N+350/352 nav 收窄後真值 = 65px,
           舊值遺留 17px seam (頁面內容透中間). Token 同 .mobile-bottom-nav min-height
           共用單一 source (--sarahome-mobile-nav-height, style.css :root). */
        bottom: calc(var(--sarahome-mobile-nav-height, 66px) + env(safe-area-inset-bottom));
        z-index: 95;
        padding: 0.5rem 0.75rem;
        background: var(--sarahome-v3-surface-card, #FFFFFF);
        border-top: 1px solid var(--sarahome-v3-border, #E5E7EB);
        box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* §R-N+12xx+2 — Row 1 info strip: price (conversion context) + agent identity.
       border-bottom 分隔 actions row; 對位 House730 sticky conversion pattern. */
    .listing-sticky-cta-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding-bottom: 0.375rem;
        border-bottom: 1px solid var(--sarahome-v3-border, #E5E7EB);
    }

    .listing-sticky-cta-price {
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        color: var(--sarahome-v3-color-cta-aa, #C2410C);
    }

    .listing-sticky-cta-price-unit {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--sarahome-v3-color-text-secondary, #6B7280);
    }

    .listing-sticky-cta-agent {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        min-width: 0;
        max-width: 55%;
    }

    .listing-sticky-cta-agent-avatar {
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--sarahome-v3-surface-section-alt, #F3F4F6);
        color: var(--sarahome-v3-color-text-secondary, #6B7280);
        font-size: 0.6875rem;
        font-weight: 700;
    }

    .listing-sticky-cta-agent-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .listing-sticky-cta-agent-name {
        font-size: 0.75rem;
        color: var(--sarahome-v3-color-text-secondary, #6B7280);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .listing-sticky-cta-actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        max-width: 1280px;
        margin: 0 auto;
        width: 100%;
    }

    .listing-sticky-cta-actions > .btn-primary,
    .listing-sticky-cta-actions > .btn-secondary {
        flex: 1;
        min-width: 0;
    }

    .listing-sticky-cta-fav {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        min-width: 48px;
        padding: 0;
        background: #FFFFFF;
        color: var(--sarahome-v3-color-fg, #1F2937);
        border: 1.5px solid var(--sarahome-v3-border, #E5E7EB);
        border-radius: 50%;
        text-decoration: none;
        cursor: pointer;
        transition: border-color 0.15s ease, color 0.15s ease;
    }

    .listing-sticky-cta-fav:hover,
    .listing-sticky-cta-fav:focus-visible {
        outline: none;
        border-color: var(--sarahome-v3-color-accent, #FF8C42);
    }

    .listing-sticky-cta-fav[aria-pressed="true"] {
        color: var(--sarahome-v3-color-cta, #E76F51);
        border-color: var(--sarahome-v3-color-cta, #E76F51);
    }

    /* hide desktop CTA on mobile, sticky replaces it */
    .listing-actions {
        display: none;
    }

    /* §R-N+344 (2026-08-04) — Mobile hero CTA duplicates sticky CTA 4-button strip
       根因: mobile 1-col stack (§R-N+341) 將 4-btn (.listing-hero-cta, 216px vertical)
       + .listing-mortgage-cta (~50px) 全寬鋪出嚟, hero area 佔 ~270px vertical,
       對位 .listing-sticky-cta mobile bottom fixed 已提供「聯絡經紀」+ 收藏.
       Fix: hide 在 floating sticky 內已經存在嘅重複 entry, desktop 保留 2-col 4-btn grid.
       !important due to: .listing-hero-cta { display: grid } line 7064 喺 default block,
       source-order 後於本 rule, mobile 唔觸發 @media (min-width:769px) override,
       統一用 !important (同 .listing-detail padding-bottom 一致 pattern).
       對位 §R-N+135.8 selective narrative「4 entry 重複 → 1 entry」chain + §R-N+62 KISS. */
    .listing-hero-cta,
    .listing-mortgage-cta {
        display: none !important;
    }

    .listing-sticky-cta-tel {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        min-width: 48px;
        padding: 0;
        background: #FFFFFF;
        color: var(--sarahome-v3-color-accent, #FF8C42);
        border: 1.5px solid var(--sarahome-v3-color-accent, #FF8C42);
        border-radius: 50%;
        text-decoration: none;
        box-shadow: 0 2px 6px rgba(255, 140, 66, 0.18);
        transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, color 0.15s ease;
    }

    .listing-sticky-cta-tel:hover,
    .listing-sticky-cta-tel:focus {
        text-decoration: none;
        background: var(--sarahome-v3-color-accent, #FF8C42);
        color: #FFFFFF;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(255, 140, 66, 0.32);
        outline: none;
    }

    .listing-sticky-cta-tel:active {
        transform: scale(0.96);
    }

    /* §R-N+12xx+2 — WhatsApp circle (mirror tel FAB shape, desktop hero whatsapp 對位).
       色用 AA 深青 #0F766E (對位 style.css P2-4 .listing-hero-cta-btn-whatsapp AA block). */
    .listing-sticky-cta-wa {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        min-width: 48px;
        padding: 0;
        background: #FFFFFF;
        color: #0F766E;
        border: 1.5px solid #0F766E;
        border-radius: 50%;
        text-decoration: none;
        box-shadow: 0 2px 6px rgba(15, 118, 110, 0.16);
        transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, color 0.15s ease;
    }

    .listing-sticky-cta-wa:hover,
    .listing-sticky-cta-wa:focus {
        text-decoration: none;
        background: #0F766E;
        color: #FFFFFF;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(15, 118, 110, 0.3);
        outline: none;
    }

    .listing-sticky-cta-wa:active {
        transform: scale(0.96);
    }

    /* v0.83 (2026-09-11) — WeChat circle (mirror wa/tel FAB, CEO verdict 澳門主流).
       WeChat 官方綠 #07C160 喺白底 icon contrast 2.6:1 唔夠 AA → 用 #079F4F (對位 wa 深青 AA 先例).
       [data-copied] = copy 成功 feedback flash (JS wechat-copy.js 設/除 attribute). */
    .listing-sticky-cta-wechat {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        min-width: 48px;
        padding: 0;
        background: #FFFFFF;
        color: #079F4F;
        border: 1.5px solid #079F4F;
        border-radius: 50%;
        text-decoration: none;
        box-shadow: 0 2px 6px rgba(7, 159, 79, 0.16);
        transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, color 0.15s ease;
    }

    .listing-sticky-cta-wechat:hover,
    .listing-sticky-cta-wechat:focus {
        text-decoration: none;
        background: #079F4F;
        color: #FFFFFF;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(7, 159, 79, 0.3);
        outline: none;
    }

    .listing-sticky-cta-wechat:active {
        transform: scale(0.96);
    }

    .listing-sticky-cta-wechat[data-copied] {
        background: #07C160;
        border-color: #07C160;
        color: #FFFFFF;
        transform: scale(1.06);
    }

    /* §R-N+12xx+1 (2026-08-17) — Sticky CTA fix (CEO 方案 B C1):
       1. .listing-sticky-cta-contact 舊版 class="btn-cta" 只定義喺 partner-l2-list.css /
          agent-contract-form.css (唔喺 listing page 加載) → 裸橙色文字 link, 0 button affordance.
          Fix: 呢度直接 ship 真 button shape (flex:1 48px cta-aa 填充白字 radius 10px),
          唔依賴跨頁 .btn-cta (§R-N+62 KISS: 1 selector 1 concern).
       2. .listing-sticky-cta-form flex 容器 — form 本身冇 shape, 對齊 48px icon 行.
       3. fav 鈕 icon-only (文字 span 已改 sr-only): 48px circle 內只放 heart icon,
          爆框根因 (3 行 wrap) 由 template sr-only 化根治, CSS 守 overflow: hidden defensive. */
    .listing-sticky-cta-contact {
        flex: 1 1 auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        padding: 0 1rem;
        background: var(--sarahome-v3-color-cta-aa, #C2410C);
        color: #FFFFFF;
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        border: none;
        border-radius: 10px;
        text-decoration: none;
        transition: background 0.15s ease, transform 0.1s ease;
    }

    .listing-sticky-cta-contact:hover,
    .listing-sticky-cta-contact:focus-visible {
        background: var(--sarahome-v3-color-cta, #FF6B35);
        color: #FFFFFF;
        text-decoration: none;
        outline: none;
    }

    .listing-sticky-cta-contact:active {
        transform: scale(0.98);
    }

    .listing-sticky-cta-form {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        margin: 0;
    }

    .listing-sticky-cta-fav {
        overflow: hidden;
    }

    /* §R-N+346 (2026-08-04) — Mobile .site-footer 預留 sticky-cta + mobile-nav 空間
       根因: .listing-sticky-cta + .mobile-bottom-nav 兩個 position:fixed 元素永久佔 154.2px viewport bottom
       (sticky bottom=82, height=72.2, nav top=582.6 bottom=664, height=81.4).
       對位 audit 真值: copyright 喺 sticky 區內被遮 70px; disclaimer 邊界 margin 6.7px 太薄.
       統一 ship 154px magic number (對位 §R-N+341.1 .listing-detail padding-bottom chain),
       確保全站 footer (disclaimer + copyright) 喺 mobile scroll 最底時不被遮.
       對位 §R-N+62 KISS: 1 commit 1 根因, 純 CSS, 0 template/JS 改動.

       §R-N+425 (2026-08-11) — mobile .site-footer padding-bottom 154px → 96px (CEO 反饋)
       根因: 154px 對位 listing-detail 嘅 sticky CTA + nav, 但 .site-footer 屬全站 selector,
       其他 page (首頁 / 搜尋 / 關於) 冇 sticky CTA, 154px 屬 over-reserve 70px.
       Fix: 統一縮至 96px (= nav 81.4px + safe-area 14.6px), 對位 mobile-bottom-nav 預留.
       Listing-detail 嘅 .listing-sticky-cta 由 `bottom: calc(82px + env(safe-area-inset-bottom))`
       守住, 縮 58px 唔影響 sticky CTA 對位 (sticky CTA 喺 footer 上面).
       Listing-detail 嘅 .listing-detail { padding-bottom: calc(96px + env(safe-area-inset-bottom)) }
       守住 detail 主體底部, 縮 footer padding 唔影響 detail 主體.
       對位 §R-N+358 selective narrative: 全站 selector 簡化, 0 template/JS 改動.

       §R-N+8xx+15 (2026-08-13) — footer 太厚 fix (CEO 反饋): base 96px → 16px.
       根因 (live audit 375x667): footer 總高 355px, copyright 後一大片深色空白.
       96px reserve 係為 listing-detail 頁 sticky CTA (bottom:82px) 而設, 但
       .site-footer 屬全站 selector; 其餘 page 冇 sticky CTA, body padding-bottom
       calc(60px + safe-area) 已預留 bottom-nav 空間 → 96px 屬 over-reserve.
       Fix: base 收 16px, 大額 reserve 用 body:has(.listing-sticky-cta) scope 去
       listing-detail 頁 (sticky CTA markup 只喺 listing_detail.html render).
       對位 §R-N+62 KISS 1 commit 1 根因 + 既有 :has() pattern (style.css L1558). */
    .site-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
    /* listing-detail 頁有 sticky CTA 浮喺 bottom 82px — 保留 96px 全額 reserve
       §R-N+12xx+2 (2026-08-17): C2 結構性 conversion bar 2-row (info + actions ≈96px)
       + nav 65px = 佔 viewport bottom ~161px. 舊 96px reserve 唔夠 → scroll 最底
       footer 被 bar 遮. 升至 168px (161px + 7px defensive gap). */
    body:has(.listing-sticky-cta) .site-footer {
        padding-bottom: calc(168px + env(safe-area-inset-bottom)) !important;
    }

    /* §R-N+437 (2026-08-11) — P1.1 mobile-bottom-nav chain selective extract
       對位 §R-N+348 selective chain pattern (Stage 0 Commit 2  根因).
       Source: web/static/css/style.css @media (max-width: 768px) block (line 2973-3020),
       全部 §R-N+350/351/352 chain 根因 audit trail 守住.
       base.html cascade order: mobile.css 喺 style.css 後, source-order 後寫後贏,
       對住 mobile 根因 (≤768 override), 0 specificity 變動, 0 老 selector 改動.
       對位 §R-N+62 KISS 1 commit 1 根因 (§R-N+437 根因 = selective extract, 純 CSS).

       §R-N+352 (2026-08-04) — Mobile bottom-nav 上下 padding 再收窄 (52px → 48px, -8%)
       根因: CEO 追問 §R-N+350 (-12%) 投訴「上下收窄多啲」, 對位 Apple HIG 44pt strict.
       Real audit: §R-N+350 ship 後 padding: 0.125rem 0 ... = 2px top + 2px bottom + 48px item = 52px.
       Fix: 將 top padding 0.125rem → 0 (節省 2px), bottom padding 保留 env(safe-area-inset-bottom)
       (iOS safe area 必須留住, 否則 home indicator 區域 click 失效).
       對位 §R-N+351 守住 56px magic number: 56px - 4px = 52px 仍有 4px defensive gap, sheet 唔會撞 nav.
       min-height 48px 不變 (守 §R-N+62 KISS + a11y tap-target). */
    .mobile-bottom-nav {
        display: grid;
        /* §R-N+4xxx+76 (2026-09-06) Round 22 — 4→5 columns for re-enabled 儲存 nav item
           375px viewport / 5 item = 75px each (22px icon + 短 text fits)
           smaller phone 320px / 5 = 64px (still fits 22px icon)
           對位 §R-N+264 a11y: min-height 66px + 48px tap target preserved */
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        /* §R-N+12xx+2 (2026-08-17): min-height 48px → nav-height token (66px).
           根因: content-driven 高度 (item 64px + border) = 65px 同 sticky-cta 82px
           magic number 唔對位 → 17px seam. Token + safe-area padding = 65px 實值,
           同 .listing-sticky-cta bottom 共用單一 source (§R-N+62 KISS). */
        min-height: var(--sarahome-mobile-nav-height, 66px);
        padding: 0 0 env(safe-area-inset-bottom);
        background: var(--sarahome-v3-surface-card);
        border-top: 1px solid var(--sarahome-v3-border);
        box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.08);
        backdrop-filter: blur(12px);
    }

    /* §R-N+350 (2026-08-04) — Mobile bottom-nav 收窄 (81.4px → 72px, -12%)
       根因: CEO 投訴 1) mobile-bottom-nav 遮蓋 search-form-compact 2) nav 高度可收窄.
       Real audit 81.39px 對位 §R-N+346 magic number sum (sticky 82px + safe-area).
       body padding-bottom: 68px → 60px (-8px)
       .mobile-bottom-nav min-height: 64px → 48px (Apple HIG 49pt strict)
       .mobile-bottom-nav padding: 0.25rem → 0.125rem 上下
       .mobile-bottom-nav-item min-height: 56px → 48px (守住 44px tap target)
       text label 保留 (CEO verdict B).
       對位 §R-N+62 KISS: 1 audit = 1 commit, 0 mobile.css 改動 (留 §R-N+346 magic number 154px 守住).
       對位 §R-N+346 .site-footer 154px magic number 守住: 154px - 72px = 82px 預返 sticky-cta,
       連鎖 rebalance 完, 全站 footer 預留仍足夠 sticky CTA 空間. */
    .mobile-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        min-height: 48px;
        color: var(--sarahome-v3-color-text-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-bottom-nav-item.active {
        color: var(--sarahome-v3-color-accent);
    }

    .mobile-bottom-nav-item.active svg {
        stroke-width: 2.5;
    }

    /* §R-N+437 (2026-08-11) — body padding-bottom 對位 mobile-bottom-nav 預留
       Source: style.css L2960-2962 (body padding-bottom calc).
       body padding-bottom 同 .mobile-bottom-nav chain 邏輯性關聯 (§R-N+350 註明),
       selective extract 必須 keep 兩個一齊. */
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }

    /* 給 disclaimer 預留 sticky CTA bottom 空間 (82 nav + ~72 sticky + safe area) */
    /* §R-N+341.1 (2026-08-04) — 由 122 → 154, 對位新 cssBottom 82px (舊 65px + 重疊 17px 修正) */
    /* §R-N+344: sticky CTA already covers the mobile conversion path.
       §R-N+358 reduces the page reserve to CTA height + defensive gap. */
    .site-footer {
        padding-top: 0.8rem;
    }

    .site-footer .container {
        gap: 0.3rem;
    }

    /* §R-N+422 (2026-08-11) — mobile ≤768 footer 統一 1fr stack
       對位 §R-N+290 style consistency: mobile 統一 1fr (≤768 通用)
       640px 過早 (CEO §R-N+290: 768 統一 1fr )
       對位 §R-N+62 KISS: 1 commit 1 , 純 CSS, 0 template/JS 改動 */
    .footer-services {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.3rem;
        padding-bottom: 0.1rem;
    }

    .footer-brand-summary {
        align-self: stretch;
        gap: 0.25rem;
    }

    /* mobile 1fr stack: 5 個 link 收緊 1 行 flex-wrap, 唔再 2-col mini-grid
       對位 §R-N+290: 1fr stack 統一, link 排列自然流動
       §R-N+8xx+16 (2026-08-13) — CEO 反饋 footer links 文字縮細:
       font 14px → 12px (font-xs) + column gap 1.25rem → 0.75rem,
       5 個 link 一行放晒 (240px + 32px gap = 272px < 351px wrap).
       44px min-height tap target 保留 (§P-MD-05). */
    .footer-services-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem 0.75rem;
        justify-self: stretch;
        align-self: stretch;
    }

    .footer-services-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0.25rem 0;
        font-size: var(--sarahome-v3-font-xs, 0.75rem);
    }

    .disclaimer {
        font-size: 0.8125rem;
        line-height: 1.6;
    }

    .copyright {
        padding-top: 0.25rem;
    }

    .listing-detail {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }

    /* §R-N+358 mobile detail density: keep specs readable without doubling every row. */
    .agent-card-humanized {
        gap: 0.75rem;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .agent-avatar-humanized {
        width: 48px;
        height: 48px;
    }

    .listing-share-btn {
        width: 44px;
        height: 44px;
    }

    /* §R-N+11xx+12 (2026-08-16) — Mobile listing detail _hero_right chain:
       .agent-card-humanized 已 ship (line 314), 但 .agent-stats-humanized 3 stats
       (4.8評分 / 50+成交 / 已驗證) 喺 320px viewport 邊界擠.
       根因: gap 0.75rem × 3 stats + svg 12px + text → 約 280-300px, 320px viewport OK 但擠.
       Ship: flex-wrap 守住, 字號守住 Apple HIG 12px. */
    .agent-stats-humanized {
        flex-wrap: wrap;
        row-gap: 0.375rem;
        column-gap: 0.625rem;
    }

    .agent-name-humanized {
        font-size: 0.9375rem;
    }

    .agent-bio-humanized {
        font-size: 0.75rem;
    }

    .listing-meta-section,
    .listing-location,
    .listing-description {
        margin-top: 0.75rem;
    }

    .listing-section-title {
        margin-bottom: 0.5rem;
        padding-bottom: 0.375rem;
    }

    /* §R-N+349 (2026-08-04) — Mobile M3 tiny font fix-up (Apple HIG 12pt min 守住)
       根因: Stage 0 Option A disk-probe 拎到 3 個 mobile 細小 text selector font-size < 12px
       - .search-filter-clear (line 4460 default 0.6875rem = 11px < 12px)
       - .search-results .listing-new-badge (line 5258 default 0.7rem = 11.2px < 12px)
       - .search-results .listing-card-price .price-secondary (line 5134 default 0.625rem = 10px < 12px)
       Mobile-first 根因: 3 個 selector 屬 desktop default, 對住 ≤768px viewport 仍用 desktop font-size,
       Playwright 根因 audit 拎到 mobile viewport 1.1% / 0.8% 細小 text (Apple HIG 12pt min 守住).
       對位 §R-N+135.8 selective narrative 抽 3 個 mobile-only override 落 mobile.css,
       守住 desktop default 0.6875rem / 0.7rem / 0.625rem (0 改動).
       對位 §R-N+62 KISS (1 commit 1 chain, 純 CSS, 0 template/JS 改動). */
    .search-filter-clear {
        font-size: 0.75rem;       /* 12px - Apple HIG 12pt min 守住 */
    }

    .search-results .listing-new-badge {
        font-size: 0.75rem;       /* 12px - Apple HIG 12pt min 守住 */
    }

    .search-results .listing-card-price .price-secondary {
        font-size: 0.75rem;       /* 12px - Apple HIG 12pt min 守住 */
    }

    /* =============================================================
       §R-N+429 (2026-08-11) — Mobile touch chain
       :
       - A1: 全部 interactive element 加 touch-action: manipulation,
         消除 300ms tap delay (即時 tap response, 唔等 double-tap-to-zoom).
         對位 §R-N+137 affordance: 撳 card 入 detail 即時 response.
       - A4: iOS HIG 44x44 tap target 根因. 8 個 mobile interactive
         selector 全部 min-height: 44px (search filter chips /
         breadcrumbs / featured-view-all / search-hot-keywords toggle /
         active-filter-chip / listing-card-overlay / listing-card-v2 /
         featured-v3-card).
         對位 §R-N+99 a11y + §R-N+290 style consistency.
       對位 §R-N+62 KISS: 1 commit 2 , 純 CSS, 0 template/JS 改動.
       對位 §R-N+138 disk-truth: 守住 mobile-only scope, desktop 0 影響. */
    a, button, input, select, textarea, label {
        touch-action: manipulation;
    }

    .search-quick-tab,
    .search-type-option,
    .breadcrumb-list a,
    .featured-v3-view-all,
    .search-hot-keywords-expand-toggle,
    .active-filter-chip,
    .listing-card-overlay,
    .listing-card-v2,
    .featured-v3-card {
        min-height: 44px;
    }

    /* 對位 iOS HIG: featured-v3-card 內部 a 都係 full card link,
       已經 >=44px by content, 唔需要 min-height override.
       對位 §R-N+355 mobile density: featured-v3-card img 用
       aspect-ratio 3:2 已守 image 根因, 44px tap 對應 visible
       interactive element 根因. */

    /* §R-N+430 (2026-08-11) — Mobile form helper class chain
       根因: 對位 §R-N+290 style consistency, 全站 mobile form helper text
       統一 .form-help-text , 對位 §R-N+430 HTML first commit
       嘅 register.html / verify_phone.html 抽走 inline style.
       對位 §R-N+140 12-dim: var(--sarahome-v3-color-text-*) / space-* 根因.
       對位 §R-N+79 selective narrative: top-2 template ship, 5 form variants
       (default / muted / accent / warning / lg) 覆蓋現存 inline pattern. */
    .form-help-text {
        font-size: 0.85rem;
        color: var(--sarahome-v3-color-text-secondary, #6B7280);
        margin: 0.5rem 0 0 0;
        line-height: 1.4;
    }
    .form-help-text--muted {
        color: var(--sarahome-v3-color-text-tertiary, #9CA3AF);
    }
    .form-help-text--accent {
        color: var(--sarahome-v3-color-accent, #1E5A9E);
    }
    .form-help-text--warning {
        background-color: #FFF3CD;
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        border-left: 3px solid #F59E0B;
    }
    .form-help-text--lg {
        font-size: 0.9rem;
    }

    /* §R-N+454 (2026-08-11) — mobile quick-search sheet fields 1-col stack + 44px tap target
       對位 §R-N+62 KISS 1 commit 1 根因 + §P-MD-05 44px (Apple HIG).
       根因: style.css L6048 base rule `.search-filter-fields { 3fr 9fr }` 直接套用 mobile
       (min-width 768/1024 先有 override), keyword field 得 87px 闊, label + input 迫爆.
       §R-N+401 comment 聲稱「Mobile ≤768px: 1 col stack」但實際冇 max-width 768 override → 未完成.
       Fix: mobile.css 加 1fr stack (source-order 後寫後贏, 對位 §R-N+348 selective extract).
       同時 .search-submit-btn + field input/select 32px → 44px (Apple HIG tap target). */
    .search-filter-fields {
        grid-template-columns: 1fr;
    }

    .search-page-v2 .search-submit-btn {
        min-height: 44px;
        width: 100%;
    }

    .search-page-v2 .search-field-input input,
    .search-page-v2 .search-field-input select,
    .search-page-v2 .search-field-price input {
        min-height: 44px;
    }

    /* §R-N+455 (2026-08-11) — mobile quick tabs 兩行 wrap
       對位 §R-N+62 KISS 1 commit 1 根因 + §R-N+138 disk-truth.
       根因 (live DOM audit 390x844): §R-N+399 設計 mobile 用 1 條 horizontal scroll,
       9 個 tab (intent 4 + property_type 5) 全部排同一行, 最右「商舖」right edge
       688px >> viewport 390px, 溢出 298px. 常用「住宅」tab 要 swipe 先見到.
       Fix: mobile wrap 兩行 — intent 4 tabs 一行 (303px < 356px ✓) +
       property_type 5 tabs 另一行 (gap 收窄 0.25rem 後 354px < 356px ✓).
       0 JS 改動 (§R-N+134 inline-script-out 守住), 純 CSS override. */
    .search-quick-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        white-space: normal;
        scrollbar-width: none;
    }

    .search-quick-tabs-group {
        gap: 0.25rem;
    }

    /* §R-N+456 (2026-08-11) — mobile tap target 44px 統一: quick-tag + sort-select
       對位 §R-N+62 KISS 1 commit 1 根因 + §P-MD-05 44px (Apple HIG).
       根因 (live DOM audit 390x844): 首頁 15 個熱門地區 .quick-tag 全部 h=36px
       (用 --sarahome-v3-touch-target-sm 36px token), §R-N+429 sweep 漏咗;
       search 結果 #sort-select h=32px < 44px.
       Fix: 兩個 interactive selector 統一 min-height 44px, 0 template/JS 改動. */
    .quick-tag {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    #sort-select {
        min-height: 44px;
    }

    /* §R-N+457 (2026-08-11) — hero quick-tags mobile density (收起 n+7)
       已被 §R-N+8xx+11 (2026-08-12) 單行橫滑取代 — 舊 nth-of-type(n+7) display:none
       規則移除 (單行橫滑自帶 overflow, 全部 tag 可橫滑到達).
       「更多地區」link 保留顯示規則如下. */
    .hero-v3-quick-tags .quick-tag-more {
        display: inline-flex;
    }

}

/* §R-N+457 — desktop ≥769 15 個熱門地區已全顯示, 「更多地區」link 隱藏避免重複 */
@media (min-width: 769px) {
    .hero-v3-quick-tags .quick-tag-more {
        display: none;
    }
}


/* =============================================================
   §R-N+12 dim 殘留 ship: mortgage 結果 share/copy button (mobile-only)
   對位 §R-N+345 selective narrative: desktop 保留現狀不變, mobile 新加
   對位 §R-N+152.3 result 區 1 根因 = share/copy 入口
   ============================================================= */
.calculator-result-actions {
    display: flex;
    gap: 12px;
    margin: 16px 0 12px;
    padding: 0 4px;
}

.result-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    min-height: 44px;  /* Apple HIG 44px tap target */
    background: var(--sarahome-v3-surface-card, #FFFFFF);
    border: 1px solid var(--sarahome-v3-border, #E5E7EB);
    border-radius: 8px;
    color: var(--sarahome-v3-color-fg, #1F2937);
    font-size: 0.875rem;  /* 14px */
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.result-action-btn:hover {
    background: var(--sarahome-v3-color-bg, #FAFAFA);
    border-color: var(--sarahome-v3-color-accent, #FF8C42);
}

.result-action-btn:active {
    transform: scale(0.97);
}

.result-action-btn svg {
    flex-shrink: 0;
}

/* §R-N+10xx+6r (2026-08-13) — preset-chips-row desktop 隱藏
   對位 CEO 2026-08-13「桌面版本 preset-chips-row 現在是顯示出來的」:
   preset chips 屬 mobile-only 快捷篩選 (方案 A), 但 template 冇 mobile-only
   condition, HTML 喺 desktop 都 render; 而 mobile.css 全部 preset-chip rules
   包喺 @media (max-width: 768px) 內 → desktop 冇隱藏規則, 顯示裸 chips.
   Fix: desktop ≥769 隱藏 .preset-chips-row + backdrop (mobile-only).
   mobile ≤768 由 @media 內規則正常顯示. 純 CSS, 0 template/JS/backend 改動. */
@media (min-width: 769px) {
    .preset-chips-row,
    .mobile-filter-backdrop {
        display: none;
    }
}

/* §R-N+10xx+6m (2026-08-13) — 移除 mobile-search-toolbar CSS
   對位 CEO 2026-08-13「[全部]後面加快速搜尋按鈕, 隱藏/移除 mobile-search-toolbar」:
   template 已移除 .mobile-search-toolbar (地區/價格/房數/全部篩選/排序),
   preset chips 方案 A 全接管; 快速搜尋 button (preset-chip-quicksearch)
   取代「全部篩選」開 filter panel 入口; 排序保留喺 result-strip.
   呢組 rules (§R-N+438 extract / §R-N+399 sub-group / §R-N+10xx+0 active state)
   一併清走. git history revert path: commit 91a46bf 之前.
   backdrop rule 保留 (快速搜尋 button 需要 backdrop 開 filter panel). */
@media (max-width: 768px) {

/* §R-N+10xx+6p (2026-08-13) — preset-chips-row 整體縮細 (CEO: 適應手機尺寸)
   對位 CEO 2026-08-13「手機版本 preset-chips-row 整體縮小一點」:
   - .preset-chip min-height 44 → 36px, padding 0.375/0.75 → 0.25/0.625rem
   - font-size 0.875 → 0.8125rem
   - group/row gap space-2(0.5rem) → space-1(0.25rem)
   - segment min-height 36 → 32px, padding 收窄
   - 守 §R-N+62 KISS 純 CSS, 0 template/JS/backend 改動. */
.preset-chips-row {
    display: flex;
    flex-direction: column;
    gap: var(--sarahome-v3-space-1);
    margin: 0 -1rem 0.375rem;
    padding: 0 1rem;
    position: relative;
    z-index: 81;
}
.preset-chips-row-inner {
    display: flex;
    flex-direction: column;
    gap: var(--sarahome-v3-space-1);
}
.preset-chip-group {
    display: flex;
    gap: var(--sarahome-v3-space-1);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}
.preset-chip-group::-webkit-scrollbar {
    display: none;
}
.preset-chip {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sarahome-v3-color-fg);
    background: var(--sarahome-v3-surface-card, #FFFFFF);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preset-chip.is-active {
    color: #FFFFFF;
    background: var(--sarahome-v3-color-accent, #FF8C42);
    border-color: var(--sarahome-v3-color-accent, #FF8C42);
}
.preset-chip:hover {
    border-color: var(--sarahome-v3-color-accent, #FF8C42);
}
.preset-chip-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* §R-N+10xx+6h (2026-08-13) — preset chips 地區組對位首頁熱門地區:
   count badge + 更多地區 link (對位 index.html quick-tag-count / quick-tag-more). */
.preset-chip-count {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--sarahome-v3-color-text-secondary, #6B7280);
    margin-left: 0.125rem;
}
.preset-chip.is-active .preset-chip-count {
    color: rgba(255, 255, 255, 0.85);
}
.preset-chip-more {
    text-decoration: none;
    border-style: dashed;
    color: var(--sarahome-v3-color-accent, #C25A1A);
}

/* §R-N+10xx+6l/6o (2026-08-13) — 買/租 segmented control
   置頂第一操作, 同普通 preset chips 區分: 無 border 背景, active 橙底白字.
   對位 §R-N+290 style consistency (accent token) + §R-N+99 a11y.
   §R-N+10xx+6o: overflow-x:visible (唔可以 auto, 否則 sort dropdown menu
   被 overflow clip 截走 → 排序按鈕冇反應). 5 個 chips 用 flex-wrap 防 320px 溢出. */
.preset-chip-group-segment {
    gap: var(--sarahome-v3-space-1, 0.25rem);
    background: rgba(125, 125, 125, 0.08);
    border-radius: 999px;
    padding: 0.25rem;
    overflow-x: visible;
    overflow-y: visible;
    flex-wrap: wrap;
}
.preset-chip-segment {
    border: none;
    background: transparent;
    color: var(--sarahome-v3-color-text-secondary, #6B7280);
    min-height: 32px;
    padding: 0.25rem 0.875rem;
    font-size: 0.8125rem;
}
.preset-chip-segment.is-active {
    background: var(--sarahome-v3-color-accent, #FF8C42);
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(255, 140, 66, 0.3);
}
.preset-chip-segment:hover {
    border: none;
    background: rgba(255, 140, 66, 0.12);
}
.preset-chip-segment.is-active:hover {
    background: var(--sarahome-v3-color-accent, #FF8C42);
}

/* §R-N+10xx+6m (2026-08-13) — 快速搜尋 button
   喺買/租 segmented control 尾部, 開 filter-sidebar 進階篩選.
   視覺: 灰底淺色區分 (panel trigger), active_count badge 橙色. */
.preset-chip-quicksearch {
    border: none;
    background: var(--sarahome-v3-color-accent, #FF8C42);
    color: #FFFFFF;
    min-height: 32px;
    padding: 0.25rem 0.875rem;
    font-weight: 600;
    font-size: 0.8125rem;
}
.preset-chip-quicksearch:hover {
    background: var(--sarahome-v3-color-accent-aa, #C2410C);
}
.preset-chip-quicksearch small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 0.25rem;
    color: var(--sarahome-v3-color-accent, #FF8C42);
    background: #FFFFFF;
    border-radius: 999px;
}

/* §R-N+10xx+6n (2026-08-13) — 快速搜尋 icon + 排序 dropdown
   快速搜尋 button: icon + 文字並排 (flex).
   排序 dropdown: details/summary 似 chip, 展開後絕對定位 menu. */
.preset-chip-quicksearch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.preset-sort-dropdown {
    position: relative;
    flex: 0 0 auto;
}
.preset-sort-dropdown summary {
    list-style: none;
    cursor: pointer;
}
.preset-sort-dropdown summary::-webkit-details-marker {
    display: none;
}
.preset-sort-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 0.375rem;
    background: var(--sarahome-v3-surface-card, #FFFFFF);
    border: 1px solid var(--sarahome-v3-border);
    border-radius: var(--sarahome-v3-radius-md, 8px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}
.preset-sort-option {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: var(--sarahome-v3-color-fg);
    font-size: 0.8125rem;
    text-decoration: none;
}
.preset-sort-option:hover,
.preset-sort-option.is-active {
    background: rgba(255, 140, 66, 0.12);
    color: var(--sarahome-v3-color-accent, #C25A1A);
}

/* §R-N+10xx+6d (2026-08-13) — preset chips 直接跳頁, 移除搜尋按鈕
   對位 CEO 2026-08-13「唔想撳 search btn, 直接減少操作」:
   撳 chip 即 navigate (?property_type=X / ?district=Y), 撳多一次取消。
   .preset-search-btn 已由 template 移除, 呢組 rules 一併清走。 */

/* §R-N+10xx+1/6q (2026-08-13) — mobile listing card thumb height
   對位 CEO verdict「Option A 根因 B」+ 2026-08-13「圖片放大啲, 否則比例扁平化」:
   - §R-N+10xx+1: 16:9 (197px) → 160px lock (density 根因, card 340 → 304px)
   - §R-N+10xx+6q: CEO 反饋 160px 太扁 (351px wide / 160px = 2.19:1) →
     height 160 → 200px (1.75:1, 接近 16:9 但唔過度佔空間)
   0 template 改動,純 mobile.css chain,desktop 16:9 守住(對位 §R-N+418)。 */
.search-results .listing-card-thumb {
    aspect-ratio: auto;
    height: 200px;
}

.search-results .listing-card-thumb .listing-thumb {
    height: 200px;
    object-fit: cover;
    object-position: center top;
}

/* §R-N+10xx+2 (2026-08-13) — stats + sort 合併 single chip row
   對位 CEO verdict「Option A 根因 C」+ USER PROFILE autonomy:
   由 agent 決定方向(stats 收起 mobile, info inline 入 result-strip chip)。

   Disk-truth 根因(目前 iPhone SE first-fold):
   - search-summary-stats h=39px (53 個買盤合共 · 平均 HK$ X 萬)
   - result-strip h=56px (53 個買盤 · 排序 dropdown)
   - 總計 95px,佔 first-fold 14%

   chain:
   - .search-summary-stats display:none (mobile 完全收起)
   - .result-strip compact(margin/padding 縮,sticky 保持)
   - result-strip 內 avg price 直接 inline chip(模板加 .result-strip-stats-inline)
   - 結果:95px → 56px (-39px first-fold)

   desktop 守住:§R-N+4xx+42 已 ship 嘅 stats-optional pattern + desktop 嘅
   stats bar display:flex 唔變。對位 §R-N+290 style consistency。 */
.search-summary-stats {
    display: none;
}

.result-strip {
    margin: 0 0 var(--sarahome-v3-space-2);
    padding: var(--sarahome-v3-space-1) var(--sarahome-v3-space-3);
    gap: var(--sarahome-v3-space-2);
}

.result-strip-stats-inline {
    color: var(--sarahome-v3-color-text-secondary);
    font-size: 0.8125rem;
}

/* §R-N+10xx+3 (2026-08-13) — listing tier 視覺分組
   對位 CEO verdict「Option A 根因 D」+ USER PROFILE autonomy:
   由 agent 決定方向(對位 House730 廣告分組, is-top 強 elevation 陰影,
   is-featured accent border)。

   Disk-truth 根因(目前 iPhone SE):
   - 0/20 card 有 tier visual marker(全部同一個 1px solid gray border)
   - is_top / is_featured badge 已有,但 card 本身冇 elevation 視覺分組
   - 用戶 macro 認知「邊張係置頂 / Pro 經紀」要靠細小 badge,唔顯眼

   chain:
   - .listing-card-v2.is-top:強 elevation 陰影(0 4px 12px rgba accent)
   - .listing-card-v2.is-featured:accent border (1.5px solid var(--accent))
   - 一般 card 保留 1px solid gray default
   - 對位 §R-N+290 style consistency (用 --sarahome-v3-* token)
   - 對位 §R-N+164 structural:結構性反饋 chain(改善 listing macro 認知)
   - 0 density 影響,純 visual elevation */
.search-results .listing-card-v2.is-top {
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.18);
}

.search-results .listing-card-v2.is-featured {
    border-color: var(--sarahome-v3-color-accent, #FF8C42);
    box-shadow: 0 2px 8px rgba(255, 140, 66, 0.12);
}

/* §R-N+10xx+3 chain 根因:is-top + is-featured 同時出現時
   應 is-top elevation 較強(對位 §R-N+283 source-order :
   is-featured 後寫會覆蓋 is-top 嘅 box-shadow)。
   Higher specificity 0,3,1 (兩個 class 串連) 守住 is-top chain。 */
.search-results .listing-card-v2.is-top.is-featured {
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.18);
}

.mobile-filter-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 101;
    background: rgba(17, 24, 39, 0.48);
}
}

/* ============================================================
   §R-N+8xx+3 (2026-08-12) Plan C Plus C-3: mobile.css 4 breakpoint chain
   對位 §P-MD-02 mobile-first + §P-MD-06 mobile-density + §R-N+347 mobile chain集中化

   Breakpoint chain:
   - ≤480 (small phones, e.g. iPhone SE)
   - 481-768 (regular mobile)
   - 769-1024 (tablet, desktop chain 跨 desktop.css 接管)
   - ≥1025 (desktop, 完全歸 desktop.css)
   ============================================================ */

/* === Home Page Mobile chain (≤768) === */
@media (max-width: 768px) {
    /* Hero section mobile density (對位 §P-MD-06) */
    .hero-v3 {
        padding: 1.5rem 0 1rem;
    }
    .hero-v3-inner {
        padding: 0 var(--sarahome-v3-space-3);
    }
    .hero-v3-title {
        font-size: var(--sarahome-v3-font-xl, 1.375rem);
        line-height: 1.25;
    }
    .hero-v3-subtitle {
        font-size: var(--sarahome-v3-font-sm, 0.875rem);
        margin-bottom: var(--sarahome-v3-space-3);
    }
    .hero-v3-search {
        padding: var(--sarahome-v3-space-2);
        border-radius: var(--sarahome-v3-radius-md, 8px);
    }
    .hero-v3-search-row {
        gap: var(--sarahome-v3-space-2);
    }
    .hero-v3-search-input {
        font-size: 1rem;
        min-height: var(--sarahome-v3-touch-target, 44px);
    }
    .hero-v3-submit {
        font-size: 1rem;
        min-height: var(--sarahome-v3-touch-target, 44px);
    }

    /* §R-N+8xx+9 (2026-08-12) — House730-style mobile hero brand lift.
       House730 mobile 首頁 signature: 品牌色 hero (白字) + 白色大圓角浮動搜尋卡.
       對位 SaraHome 品牌橙: cta-aa (#C2410C, 白字對比 5.19:1 AA) → #9A3412 深橙漸變,
       搜尋卡 radius-xl + 深陰影營造「品牌底上浮起」層次 (mobile ≤768 only,
       desktop 0 改動). 對位 §R-N+62 KISS 1 commit 1 lift + §R-N+290 style
       consistency (100% token-based) + §P-MD-05 44px 保留. */
    .hero-v3 {
        background: linear-gradient(160deg,
            var(--sarahome-v3-color-cta-aa, #C2410C) 0%,
            #9A3412 100%);
        padding: 2rem 0 1.5rem;
        /* House730 brand-hero signature: 底部大圓角收邊 */
        border-radius: 0 0 var(--sarahome-v3-radius-xl, 24px) var(--sarahome-v3-radius-xl, 24px);
    }
    .hero-v3-title {
        color: #FFFFFF;
    }
    .hero-v3-subtitle {
        color: rgba(255, 255, 255, 0.92);
    }
    .hero-v3-search {
        border-radius: var(--sarahome-v3-radius-xl, 24px);
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
    }
    .hero-v3-submit {
        border-radius: var(--sarahome-v3-radius-lg, 16px);
    }
    .hero-v3-quick-tags .quick-tag {
        background: #FFFFFF;
        border-color: rgba(255, 255, 255, 0.7);
    }
    .hero-v3-quick-tags .quick-tag-label {
        color: rgba(255, 255, 255, 0.9);
    }
    .hero-v3-quick-tags .quick-tag-more {
        background: transparent;
        color: #FFFFFF;
        border-color: rgba(255, 255, 255, 0.6);
    }

    /* Featured section mobile density */
    .featured-v3 {
        padding: 0.75rem 0;
    }
    .featured-v3-header {
        margin-bottom: var(--sarahome-v3-space-3);
        padding: 0 var(--sarahome-v3-space-3);
    }
    .featured-v3-title {
        font-size: var(--sarahome-v3-font-md, 1rem);
    }
    .featured-v3-carousel {
        /* 2026-09-15 §R-N+4xxx+40: padding 清 0 (原本 0 space-3) — 對位精選 section
           卡邊起點 (箭嘴已移除; 留住 12px inset 會令 latest rail 首卡比 curated
           右移 12px, 展示方式唔完全一致。live E2E 實拍捕获) */
        padding: 0;
    }
    /* §R-N+8xx+14 (2026-08-13) — mobile swipe clobber fix.
       home.css base rule .featured-v3-viewport{overflow:hidden} (§R-N+8xx+2)
       source-order 喺 style.css swipe rule 之後載入, 同 specificity → home.css 贏,
       clobber 咗 overflow-x:auto. mobile.css 喺 home.css 之後載入,
       source-order 後寫後贏, 呢度補返 override.
       對位 §R-N+420 scoped-ancestor cascade clobber pattern. */
    .featured-v3-viewport {
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* Categories section mobile density (對位 §P-MD-08 wrap 收起) */
    .categories-v3 {
        padding: 1.5rem 0;
    }
    .categories-v3-title {
        font-size: var(--sarahome-v3-font-md, 1rem);
        padding: 0 var(--sarahome-v3-space-3);
        margin-bottom: var(--sarahome-v3-space-3);
    }
    .categories-v3-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sarahome-v3-space-2);
        padding: 0 var(--sarahome-v3-space-3);
    }
    .categories-v3-card {
        padding: var(--sarahome-v3-space-2);
    }
    .categories-v3-card-title {
        font-size: 0.6875rem;
    }
    .categories-v3-card-count {
        font-size: 0.625rem;
    }

    /* Mortgage inline mobile stack (對位 §R-N+283 dual-wrapper mobile-density pattern) */
    .mortgage-inline-v3 {
        padding: 0.75rem 0;
    }
    .mortgage-inline-header {
        margin-bottom: var(--sarahome-v3-space-3);
    }
    .mortgage-inline-title {
        font-size: var(--sarahome-v3-font-md, 1rem);
    }
    .mortgage-inline-grid {
        grid-template-columns: 1fr;
        gap: var(--sarahome-v3-space-4);
    }
    .mortgage-inline-fields {
        grid-template-columns: 1fr 1fr;
        gap: var(--sarahome-v3-space-2);
    }
}

/* === Home Page Mobile chain (≤480 small phone) === */
@media (max-width: 480px) {
    .hero-v3 {
        /* §R-N+8xx+9: brand hero lift 對位 — 品牌漸變底需要較鬆 padding,
           原 1rem 0 0.75rem 太 cramped (House730 brand-hero 對位) */
        padding: 1.5rem 0 1.25rem;
    }
    .hero-v3-title {
        font-size: 1.25rem;
    }
    .hero-v3-subtitle {
        font-size: 0.8125rem;
    }
    .categories-v3-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .featured-v3-card-price {
        font-size: var(--sarahome-v3-font-md, 1rem);
    }
    .mortgage-inline-v3 {
        padding: 0.75rem 0;
    }
}

/* === Home Page Tablet chain (769-1024) === */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-v3 {
        padding: 2.5rem 0 1.5rem;
    }
    .featured-v3 {
        padding: 0.75rem 0;
    }
    .categories-v3 {
        padding: 2rem 0;
    }
    .categories-v3-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sarahome-v3-space-3);
    }
    .mortgage-inline-fields {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   §R-N+8xx+10 (2026-08-12) — House730-style mobile icon strip
   兩排入口騎跨 hero 底邊 (CEO 設計參考圖 house730.com).
   Base rule display:none (home.css), 本 block mobile ≤768 顯示.
   對位 dual-wrapper mobile-only pattern + §P-MD-05 tap target +
   §R-N+290 style consistency (100% token-based).
   categories-v3 mobile 功能被 icon strip 完全覆蓋 → ≤768 隱藏.
   ============================================================ */
@media (max-width: 768px) {
    .hero-v3 {
        /* badge 騎跨 hero 底邊, tags 需要更多底部呼吸空間 */
        padding-bottom: 3.25rem;
    }
    .hero-v3-icons {
        display: block;
        position: relative;
        z-index: 5;
        margin-top: -2.5rem;
        padding: 0 var(--sarahome-v3-space-3);
    }
    .hero-v3-icons-primary {
        display: flex;
        justify-content: space-around;
        gap: var(--sarahome-v3-space-2);
    }
    .hero-icon-badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.375rem;
        text-decoration: none;
        /* §R-N+8xx+13: 5 badge 一排, min-width 收窄令 375px 放得落 */
        min-width: 56px;
    }
    .hero-icon-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 4px solid #FFFFFF;
        color: #FFFFFF;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
        transition: transform 0.2s ease;
    }
    .hero-icon-badge:active .hero-icon-circle {
        transform: scale(0.94);
    }
    /* House730 四色徽章 → SaraHome palette mapping
       §R-N+8xx+13: 商舖/按揭計算升第一排 (CEO verdict), 5 badge 色對位 */
    .hero-icon-badge--buy .hero-icon-circle {
        background: var(--sarahome-v3-color-cta, #FF6B35);
    }
    .hero-icon-badge--rent .hero-icon-circle {
        background: var(--sarahome-v3-color-info, #2563EB);
    }
    .hero-icon-badge--park .hero-icon-circle {
        background: var(--sarahome-v3-color-success, #10B981);
    }
    .hero-icon-badge--shop .hero-icon-circle {
        background: var(--sarahome-v3-color-accent-aa, #C2410C);
    }
    .hero-icon-badge--mortgage .hero-icon-circle {
        background: var(--sarahome-v3-color-accent, #FF8C42);
    }
    /* §R-N+8xx+12 (2026-08-13) — hero-icon-badge--list (立即放盤) badge 暫時移除,
       orphan CSS rule 同步清理 (CEO verdict: 放盤功能只供經紀). */
    /* §R-N+8xx+13 (2026-08-13) — 第二排 outline 線稿暫時移除 (CEO verdict),
       orphan .hero-v3-icons-secondary / .hero-icon-outline rules 同步清理. */
    .hero-icon-label {
        font-size: var(--sarahome-v3-font-xs, 0.75rem);
        font-weight: 600;
        color: var(--sarahome-v3-color-fg, #1F2937);
    }
    /* icon strip 覆蓋 categories 功能, mobile 隱藏避免重複 */
    .categories-v3 {
        display: none;
    }
}

/* ============================================================
   §R-N+8xx+11 (2026-08-12) — House730-style mobile 單欄 pill 搜尋
   (CEO verdict 方案 A: 簡化 hero). 雙 wrapper pattern (對位 §R-N+283):
   desktop 3-field .hero-v3-search 隱藏, .hero-v3-search-mobile 單欄顯示.
   搜尋卡 242px → ~56px, hero first fold 即刻見樓盤.
   同時 quick-tags 由 wrap 多行改單行橫滑 (scroll-snap-x, 對位 §R-N+4xx+34).
   對位 §R-N+62 KISS 1 commit 1 lift + §R-N+290 style consistency.
   ============================================================ */
@media (max-width: 768px) {
    /* Desktop 3-field form mobile 隱藏 */
    .hero-v3 .hero-v3-search {
        display: none;
    }
    /* §R-N+23xx+10: desktop 搜尋卡 wrapper 亦隱藏 (mobile 0 改動).
       desktop form 已 display:none, card 只剩 padding 會留白 26px gap,
       對位 §R-N+62 KISS: 跟住 desktop form 一齊 display:none.
       mobile pill 喺 card 外不受影響. */
    .hero-v3 .hero-v3-search-card {
        display: none;
    }
    /* 單欄 pill 搜尋顯示 */
    .hero-v3-search-mobile {
        display: flex;
        align-items: center;
        gap: var(--sarahome-v3-space-2, 0.5rem);
        background: var(--sarahome-v3-surface-card, #FFFFFF);
        border-radius: 999px;
        padding: 0 var(--sarahome-v3-space-1, 0.25rem) 0 var(--sarahome-v3-space-3, 0.75rem);
        min-height: var(--sarahome-v3-touch-target-lg, 52px);
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);
    }
    .hero-v3-search-mobile-icon {
        flex: 0 0 auto;
        color: var(--sarahome-v3-color-text-secondary, #6B7280);
    }
    .hero-v3-search-mobile-input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font-size: var(--sarahome-v3-font-base, 1rem);
        color: var(--sarahome-v3-color-fg, #1F2937);
        height: 100%;
    }
    .hero-v3-search-mobile-input::placeholder {
        color: var(--sarahome-v3-color-text-secondary, #6B7280);
    }
    .hero-v3-search-mobile-btn {
        flex: 0 0 auto;
        border: none;
        border-radius: 999px;
        background: var(--sarahome-v3-color-cta-aa, #C2410C);
        color: #FFFFFF;
        font-size: var(--sarahome-v3-font-sm, 0.875rem);
        font-weight: 600;
        padding: 0 var(--sarahome-v3-space-4, 1rem);
        min-height: calc(var(--sarahome-v3-touch-target, 44px) - 8px);
        cursor: pointer;
    }
    /* Quick tags 單行橫滑 (取代 §R-N+457 wrap 收起) */
    .hero-v3-quick-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--sarahome-v3-space-1, 0.25rem);
    }
    .hero-v3-quick-tags::-webkit-scrollbar {
        display: none;
    }
    /* §R-N+457 收起規則已移除 (2026-08-12) — 單行橫滑下全部 tag 顯示,
       唔再需要 nth-of-type(n+7) override */
    .hero-v3-quick-tags .quick-tag,
    .hero-v3-quick-tags .quick-tag-label {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .hero-v3-quick-tags .quick-tag-label {
        margin-right: 0;
    }
}

/* §R-N+10xx+6e/6u (2026-08-13) — mobile 隱藏 active-filter-chips + search-hot-keywords
   對位 CEO 2026-08-13「唔用 active-filter-chips, 直接喺 preset-chips-row 操作」+
   「手機版本 search-hot-keywords 熱門搜尋 隱藏/移除」:
   - active-filter-chips: preset chips 已有 is-active 狀態 + 撳多一次取消,
     mobile 上屬 redundant
   - search-hot-keywords (熱門搜尋 5 欄): mobile 版面由 preset chips 全接管,
     熱門地區/類型/價格已喺 preset chips, 隱藏避免重複
   Desktop (≥769px) 保留. 純 CSS, 0 template / JS / backend 改動. */
@media (max-width: 768px) {
    .active-filter-chips {
        display: none;
    }
    .search-hot-keywords {
        display: none;
    }
}

/* §R-N+10xx+6j (2026-08-13) — mobile 隱藏 desktop .search-toolbar
   對位 CEO 2026-08-13「手機介面隱藏 desktop .search-toolbar, 暫時保留 mobile-search-toolbar」:
   .search-toolbar (breadcrumb + H1 + 買/租 toggle + count) 屬 desktop 版,
   mobile 上應由 mobile-search-toolbar + preset chips 接管, 隱藏避免重複佔位.
   Desktop (≥769px) 保留. 純 CSS, 0 template / JS / backend 改動. */
@media (max-width: 768px) {
    .search-toolbar {
        display: none;
    }
}

/* §R-N+10xx+6k/6n (2026-08-13) — mobile 隱藏 result-count + result-strip
   對位 CEO 2026-08-13「手機版本移除 result-count」+「隱藏/移除 result-strip」:
   .result-count (為您找到 N 個...) 同成個 .result-strip (含 sort-toolbar) mobile 隱藏,
   排序入口改由 preset chips row 內排序 dropdown (preset-sort-dropdown) 提供.
   Desktop (≥769px) 保留. 純 CSS, 0 template / JS / backend 改動. */
@media (max-width: 768px) {
    .result-count {
        display: none;
    }
    .result-strip {
        display: none;
    }
}

/* §R-N+10xx+7c (2026-08-13) — 按揭計算機頁面手機版優化 (CEO 2026-08-13)
   實測 375×812: 成頁 scroll 1869px, result 區 814px 最肥 (3 張全寬 icon card 直排 273px).
   改動 (全部 mobile-only, desktop 0 影響):
   - result-grid-v2: 1fr → 2-col (對位 CEO 2-col 密度偏好), 最後一張 card 跨 full-width
   - form / result card padding 收緊 (24px → 16px), form row margin 1.25rem → 0.875rem
   - hero value 2.25rem → 1.75rem (長 HK$ 數值更穩), hero padding 收緊
   - intro / disclaimer 字體 + margin 收緊
   對位 §R-N+62 KISS: 1 commit 1 concern, 純 CSS. */
@media (max-width: 768px) {
    .calculator-intro {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }
    .calculator-form-v2,
    .calculator-result-v2 {
        padding: var(--sarahome-v3-space-4);
    }
    .form-row-v2 {
        margin-bottom: 0.875rem;
    }
    .result-hero {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }
    .result-hero-value {
        font-size: 1.75rem;
    }
    .result-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sarahome-v3-space-2);
    }
    .result-grid-v2 .result-card:last-child {
        grid-column: 1 / -1;
    }
    .result-card {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--sarahome-v3-space-3);
        gap: var(--sarahome-v3-space-2);
    }
    .result-card-icon {
        width: 28px;
        height: 28px;
    }
    .result-card .result-value {
        font-size: 0.875rem;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .result-card .result-sub {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .calculator-disclaimer {
        margin-top: 0.875rem;
        padding: 0.75rem 0.875rem;
    }
}

/* §R-N+10xx+7d.3 (2026-08-13) — 極窄屏 (≤360px) result cards 返 1-col
   對位 §P-MD-05 mobile density: 2-col 喺 ≤360px 卡 body 得 ~67px,
   HK$ 數值會觸發 ellipsis 截斷, 改 1-col 保證完整顯示. */
@media (max-width: 360px) {
    .result-grid-v2 {
        grid-template-columns: 1fr;
    }
    .result-grid-v2 .result-card:last-child {
        grid-column: auto;
    }
}

/* §R-N+10xx+7e (2026-08-13) — 按揭計算機 form 手機版改 2×2 四格
   對位 CEO「mortgage-form 手機版本可否改為四格」:
   .calculator-form-v2 由 block (4 rows 直排) 改 grid 2-col,
   4 個 field (物業價格 / 按揭成數 / 年利率 / 貸款年期) 2×2 排列,
   對位首頁 mortgage-inline-fields 1fr 1fr pattern (mobile.css L1002).
   純 CSS, 0 template / JS 改動. */
@media (max-width: 768px) {
    .calculator-form-v2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sarahome-v3-space-2);
    }
    .form-row-v2 {
        margin-bottom: 0;
        min-width: 0;
    }
    .form-row-v2 input {
        width: 100%;
        min-width: 0;
    }
}


/* ============================================================
   §R-N+23xx+4 Phase 1.5 (2026-08-20) — touch target audit fix (mobile-only)
   對位 style.css 尾段同款 section (style.css 已 cover 跨 device 元素),
   此處只 fix mobile-only 元素: nav-toggle (32→44) / quick-tag (40→44) /
   pagination (32-36→44)。後寫後贏 override 對位 §R-N+146。
   ============================================================ */
@media (max-width: 768px) {
    .nav-toggle {
        width: 44px;
        height: 44px;
    }

    .quick-tag {
        min-height: 44px;
    }

    .pagination-num,
    .pagination-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    /* §R-N+4xxx+79 (2026-09-06) Round 24 — Fixed pagination footer on mobile
       根因 (§R-N+138 disk-truth): .pagination position:static → 喺 667px viewport,
       pagination 位置 top=7057px (way below fold). User click 下一頁 → page reload
       跳返 top, 要 scroll 落底 click 多次。
       第一次 fix 用 position:sticky 但 disk-verify 揭發 html { overflow-y:auto }
       破壞咗 sticky (P131 sticky 需要 ancestor 都 visible, 否則 sticky element
       變咗普通 block element 跟住 scroll 走)。
       disk-verify (375x667): position:sticky test element bottom=2516 (應為 617,
       viewport-50px), isStuck=false. Same test with position:fixed: bottom=617 ✓

       修法 (§R-N+62 KISS): 改用 position:fixed, 同 .listing-sticky-cta 完全一致 pattern
       - position: fixed (永遠 stick 喺 viewport bottom, 唔受 scroll 影響)
       - bottom: calc(nav-height + safe-area) → 喺 mobile bottom-nav 上方
       - z-index: 90 (Cmd+K FAB z=96 之上但 Cmd+K mobile FAB z=96 之下)
       - backdrop-filter: blur(12px) iOS native sticky bar pattern
       - 用 --sarahome-mobile-nav-height token (single source of truth)

       影響 5 個 pagination template:
       1. web/templates/search/_partials/_search_results.html (.pagination)
       2. web/templates/agent/inquiries.html (.pagination)
       3. web/templates/partner/l2_list.html (.l2-list-pagination)
       4. web/templates/partner/audit_queue.html (.l2-list-pagination)
       5. web/templates/partner/peer_review.html (.l2-list-pagination)

       User UX: 任何 scroll 位置都可以直接 click page number, 唔需要 scroll 落底

       對位 framework rule:
       - §R-N+12xx+2 nav-height token precedent
       - §R-N+62 KISS: 純 CSS, 0 template, 0 JS
       - §R-N+264 a11y: 44px min-height preserved */
    .pagination {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--sarahome-mobile-nav-height, 66px) + env(safe-area-inset-bottom));
        z-index: 90;
        margin: 0;
        padding: 0.625rem 1rem;
        background: var(--sarahome-v3-surface-card, #FFFFFF);
        border-top: 1px solid var(--sarahome-v3-border, #E5E7EB);
        box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        justify-content: center;
    }

    /* l2-list-pagination 同樣 fixed (用喺 /partner/l2, /partner/audit-queue,
       /partner/peer-review 全部 L3 admin listing pagination) */
    .l2-list-pagination {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--sarahome-mobile-nav-height, 66px) + env(safe-area-inset-bottom));
        z-index: 90;
        margin: 0;
        padding: 0.625rem 1rem;
        background: var(--sarahome-v3-surface-card, #FFFFFF);
        border-top: 1px solid var(--sarahome-v3-border, #E5E7EB);
        box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* Pagination 內容有 padding-top 加返, 否則 fixed 元素遮住 last result card
       §R-N+346 precedent: .site-footer 已 ship 154px padding-bottom reserve sticky space */
    .search-results,
    .inquiry-list,
    .l2-list-table,
    .l2-list-cards,
    .audit-queue-list,
    .peer-review-list {
        padding-bottom: calc(var(--sarahome-mobile-nav-height, 66px) + 60px + env(safe-area-inset-bottom));
    }
}