/* ============================================================
   buylist.css - 買屋列表頁專屬樣式 (2026 版)
   來源: webDemo_2026/css/buy.css + 搜尋 Directive 適配 + RWD
   建立日期: 2026-06-03
   ============================================================ */

/* ===== Page Header（漸層深色標題區）===== */
/*[20260907]移動到main.css
.page-header { background: linear-gradient(135deg, #0d47a1 0%, #1976D2 60%, #198754 100%)!important; padding: 14px 0 0; position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0;  opacity: 0.08; }

.page-header .breadcrumb { color: rgba(255,255,255,0.7); }
.page-header .breadcrumb a { color: rgba(255,255,255,0.7); }
.page-header .breadcrumb a:hover { color: #fff; }
.page-header .breadcrumb span { color: rgba(255,255,255,0.4); }
.page-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 20px; }
.page-title { display: flex; align-items: center; gap: 12px; }
.page-title h1 { font-size: var(--font-xl); font-weight: 700; color: #fff; margin: 0; }
.page-title h1 em { color: #FFD54F; font-style: normal; }
.page-subtitle { color: rgba(255,255,255,0.75); font-size: var(--font-sm); margin-top: 4px; }
.quick-links { display: flex; gap: 8px; }
.quick-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; font-size: var(--font-bmd); font-weight: 500; color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.25); transition: all .2s; cursor: pointer; text-decoration: none; }
.quick-link-btn:hover { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.5); }
.quick-link-btn i { font-size: var(--font-sm); }
*/
/* ===== Search Strip（搜尋列）===== */
/*[20260907]移動到main.css
.search-strip { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: sticky; top: 74px; z-index: 90; }
.search-strip-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-input-wrap { flex: 1; min-width: 200px; position: relative; }
.search-input-wrap > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: var(--font-md); pointer-events: none; }
.search-input-wrap input { width: 100%; padding: 9px 14px 9px 36px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: var(--font-md); font-family: inherit; background: #fff; }
.search-input-wrap input:focus { outline: none; border-color: var(--green); }
.more-filter-btn { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: var(--font-md); color: var(--gray-600); cursor: pointer; background: #fff; transition: all .2s; font-family: inherit; }
.more-filter-btn:hover, .more-filter-btn.on { border-color: var(--green); color: var(--green); }
.search-strip .search-btn { padding: 9px 24px; font-size: var(--font-md); }
*/
/* Directive ct-field 在搜尋列內的適配 */
/*[20260907]移動到main.css
.search-strip .ct-search-area,
.search-strip .ct-search-range,
.search-strip .ct-search-type { flex-shrink: 0; }
.search-strip .ct-field { min-width: 120px; padding: 8px 12px; font-size: var(--font-md); }
*/
/* ===== Results Bar（結果列）===== */
.results-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; padding-top: 20px; }
.results-count { font-size: var(--font-bmd); color: var(--gray-600); display: flex; align-items: center; gap: 6px; }
.results-count strong { color: var(--green); font-size: var(--font-bmd); font-family: 'Inter', sans-serif; }
.results-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-tag { display: flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: var(--font-sm); font-weight: 500; background: var(--green-light); color: var(--green); border: 1px solid var(--green); cursor: pointer; transition: all .2s; }
.filter-tag:hover, .filter-tag.active { background: var(--green); color: #fff; }
.filter-tag i { font-size: var(--font-xs); }
.list-top-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.sort-controls { display: flex; align-items: center; gap: 8px; font-size: var(--font-md); }
.sort-controls select { padding: 6px 12px; border: 1.5px solid var(--gray-200); border-radius: 8px; font-size: var(--font-md); color: var(--gray-600); background: #fff; font-family: inherit; cursor: pointer; }
.view-toggle { display: flex; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); overflow: hidden; }
.view-btn { padding: 6px 10px; background: #fff; border: none; cursor: pointer; color: var(--gray-400); transition: all .2s; font-size: var(--font-md); }
.view-btn.active { background: var(--green); color: #fff; }

/* ===== Property List（物件列表）===== */
.prop-list { display: flex; gap: 14px; width: 100%; flex-direction: column; }

/* ---- List Item（物件卡片 - 列表模式）---- */
.list-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; transition: transform .2s, box-shadow .2s; cursor: pointer; max-height: 255px;}
.list-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.list-img { position: relative; width: 330px; min-width: 280px; overflow: hidden; background: var(--gray-200); }
.list-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; height: 100%;}
.list-item:hover .list-img img { transform: scale(1.04); }

/* Badges */
.list-badge { position: absolute; top: 10px; left: 10px; background: var(--orange); color: #fff; font-size: var(--font-sm); font-weight: 500; padding: 3px 10px; border-radius: 20px; z-index: 2; }
.list-badge.blue { background: var(--blue); }
.list-badge.green { background: var(--green); }
.list-badge.red { background: #dc3545; }
.list-fav { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: background .2s; z-index: 2; }
.list-fav i { color: var(--orange); font-size: var(--font-md); }
.list-fav:hover { background: #fff; }
.list-badge-bar { position: absolute; bottom: 10px; left: 10px; display: flex; gap: 6px; z-index: 2; }
.list-badge-bottom { display: flex; background: rgba(47, 74, 133, 0.54); color: #fff; font-size: var(--font-xs); font-weight: 400; padding: 3px 8px; border-radius: 4px; gap: 4px; align-items: center; }
/* 圖片功能徽章（承 list-badge-bottom）：VR 720° / 影音看屋 */
.list-badge-bottom.vr-badge { background: rgba(47, 74, 133, 0.62); }
.list-badge-bottom.video-badge { background: rgba(234, 98, 60, 0.82); }
.list-badge-bottom.vr-badge i, .list-badge-bottom.video-badge i { color: #fff; font-size: var(--font-xs); }

/* Body */
.list-body { padding: 18px 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.list-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.list-header-left{width: 80%;}
.list-addr { font-size: var(--font-md); color: var(--gray-600); display: flex; align-items: center; gap: 4px; }
.list-addr i { font-size: var(--font-md); color: var(--orange); }
.list-title { font-size: var(--font-lg); font-weight: 600; color: var(--gray-800); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;line-height: var(--font-lg); }
.list-price-col { text-align: right; flex-shrink: 0; }
.list-price { font-size: var(--font-lg); font-weight: 700; color: var(--orange); font-family: 'Inter', sans-serif; line-height: 1; }
.list-price-unit { font-size: var(--font-md); font-weight: 400; color: var(--gray-600); }
.list-price-original { font-size: var(--font-md); color: var(--gray-400); text-decoration: line-through;margin-bottom: 0.5rem; }
.list-discount { display: inline-flex; align-items: center; gap: 3px; background: #dc3545; color: #fff; font-size: var(--font-xs); padding: 1px 6px; border-radius: 10px; margin-left: 4px; }

/* Specs */
.list-specs { display: flex; gap: 0; flex-wrap: wrap; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); padding: 10px 0; }
.spec-item { display: flex; flex-direction: column; gap: 2px; padding: 0 16px 0 0; margin-right: 16px; border-right: 1px solid var(--gray-200); }
.spec-item:last-child { border-right: none; margin-right: 0; }
.spec-label { font-size: var(--font-md); color: var(--gray-400); }
.spec-value { font-size: var(--font-bmd); font-weight: 500; color: var(--gray-800); font-family: 'Inter', sans-serif; }
/* (含車位) 小字註記：價格 parking_lot_price>0 / 坪數 mortgage>0 時顯示（比照舊版 buyhouse 邏輯）*/
.park-note { font-size: var(--font-xs); font-weight: 400; color: var(--gray-600); margin-left: 2px; white-space: nowrap; }

/* Tags */
.list-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.list-item .prop-tag { font-size: var(--font-xs); display: flex; align-items: center; gap: 3px; }
.prop-tag i { font-size: var(--font-xs); color: var(--green); }
/* ===== 物件標籤依 object_tag 類型上色（class 由 buyhouse/franchise ng-class 依 itemTag[0] 帶入）=====
   對應：1 社區 community｜2 捷運 mrt｜3 主題 topic｜4 系統內容 ctis｜5 學校 school｜6 公車站 bus｜7 台鐵 train｜8 高鐵 hitrain
   以下為預設起始色，可自由調整；未列到的（或無 class）走預設 .prop-tag 灰底 */
.prop-tag.mrt      { background: rgb(255 250 228); border: 1px solid rgb(255 250 228);color: var(--gray-600); }        /* 捷運 */
.prop-tag.mrt i    { color: var(--gray-600);  }
.prop-tag.school   { background: rgb(240 251 236); border: 1px solid rgb(240 251 236);color: var(--gray-600);}      /* 學校 */
.prop-tag.school i { color: var(--gray-600);  }
.prop-tag.community { background: rgb(255 245 240);border: 1px solid rgb(255 245 240); color: var(--gray-600); }                      /* 社區 */
.prop-tag.community i { color: var(--gray-600); }
.prop-tag.topic    { background: rgb(255 255 245);border: 1px solid rgb(255 255 245); color: var(--gray-600); }     /* 主題 */
.prop-tag.topic i  { color: var(--gray-600);  }
.prop-tag.ctis     { background: rgb(255 245 250);border: 1px solid rgb(255 245 250); color: var(--gray-600); }        /* 系統內容 */
.prop-tag.ctis i   { color: var(--gray-600); }
.prop-tag.bus      { background: rgb(235 245 245);border: 1px solid rgb(235 245 245); color: var(--gray-600); }                        /* 公車站 */
.prop-tag.bus i    { color: var(--gray-600);  }
.prop-tag.train    { background: rgb(255 250 228);border: 1px solid rgb(255 250 228); color: var(--gray-600); }                        /* 台鐵 */
.prop-tag.train i  { color: var(--gray-600);  }
.prop-tag.hitrain  { background: rgb(255 250 228);border: 1px solid rgb(255 250 228); color: var(--gray-600); }                        /* 高鐵 */
.prop-tag.hitrain i { color: var(--gray-600);  }

/* ===== 可點擊標籤（含 <a>：社區/捷運/學校…有連結者）hover 視覺提示 =====
   整張卡本身可點擊(→物件詳情)，標籤是「另一個連結」(→社區/捷運/學校頁，開新分頁)。
   以下讓可點標籤在 hover 時明顯有別於不可點標籤與整卡，提升可被察覺度。 */
.list-tags .prop-tag a { color: inherit; text-decoration: none; cursor: pointer; }
.list-tags .prop-tag a:hover { text-decoration: underline; }
.list-tags .prop-tag:has(a) { transition: border-color .15s ease, filter .15s ease; }
.list-tags .prop-tag:has(a):hover { border-color: var(--gray-400); filter: brightness(0.97); }

/* 影音看屋 / AI換裝 / 一鍵清除 已移至圖片 list-badge-bar（見 .list-badge-bottom.video-badge），
   原 .list-tags .prop-tag.video hover 假功能樣式已移除 */

/* ===== Recommend Section（推薦物件）===== */
.recommend-section { padding: 20px 0; }
.recommend-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.recommend-header i { color: var(--green); font-size: var(--font-bmd); }
.recommend-header h3 { font-size: var(--font-lg); font-weight: 700; color: var(--gray-800); margin: 0; }
.recommend-header span { font-size: var(--font-lg); color: var(--gray-600); }
.recommend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rec-card { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: transform .2s, box-shadow .2s; cursor: pointer; }
.rec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.rec-card-img { height: 130px; background: var(--gray-200); overflow: hidden; }
.rec-card-img img { width: 100%; height: 100%; object-fit: cover; }
.rec-card-body { padding: 10px 12px; background: #fff; }
.rec-card-title { font-size: var(--font-bmd); font-weight: 600; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-card-addr { font-size: var(--font-md); color: var(--gray-600); margin-top: 2px; }
.rec-card-price { font-size: var(--font-md); font-weight: 700; color: var(--orange); font-family: 'Inter', sans-serif; margin-top: 6px; }
.rec-card-price span { font-size: var(--font-sm); font-weight: 400; color: var(--gray-600); }

/* ===== Franchise Ad（加盟店橫幅）===== */
.franchise-ad-strip { background: linear-gradient(90deg, var(--green-light), #e8f5e9); border-radius: var(--radius); padding: 16px 24px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: box-shadow .2s; }
.franchise-ad-strip:hover { box-shadow: var(--shadow); }
.franchise-ad-strip i { color: var(--green); font-size: var(--font-lg); }
.franchise-ad-strip .textEffect { color: var(--green); font-weight: 700; }

/* ===== Contact Banner（聯絡表單）===== */
.contact-banner { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; display: flex; gap: 20px; align-items: center; margin-top: 2rem; }
.contact-banner-img {  max-width: 300px; height: 100%; border-radius: 8px; overflow: hidden; background: var(--gray-200); }
.contact-banner-img img { width: 100%; height: 100%; object-fit: cover; }
.contact-banner-body { flex: 1; }
.contact-banner-title { font-size: var(--font-bmd); font-weight: 700; color: var(--gray-800); margin-bottom: 4px; }
.contact-banner-sub { font-size: var(--font-md); color: var(--gray-600); margin-bottom: 14px; }
.contact-input-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.contact-input { padding: 8px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-size: var(--font-md); font-family: inherit; flex: 1; min-width: 150px; }
.contact-input:focus { outline: none; border-color: var(--green); }
.contact-submit { background: var(--green); color: #fff; border: none; border-radius: var(--radius-sm); padding: 8px 20px; font-size: var(--font-md); font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .2s; }
.contact-submit:hover { background: var(--green-dark); }
.contact-submit:disabled { background: var(--gray-400); cursor: not-allowed; }

/* ===== Pagination（分頁器）===== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 32px 0 16px; }
.page-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1.5px solid var(--gray-200); background: #fff; color: var(--gray-600); font-size: var(--font-md); cursor: pointer; transition: all .2s; font-family: inherit; text-decoration: none; width:fit-content; padding: 0 1rem;}
.page-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
.page-btn:hover:not(.active) { border-color: var(--green); color: var(--green); }
.page-btn.arrow { font-size: var(--font-sm); }

/* ===== More Filter Panel（更多篩選面板）===== */
.more-filter-panel { display: none; background: #fff; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.1); padding: 20px 24px; max-width: 1200px; margin: 0 auto; }
.more-filter-panel.show { display: block; }
.more-filter-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.more-filter-group { min-width: 140px; }
.more-filter-group-title { font-size: var(--font-md); font-weight: 600; color: var(--gray-800); margin-bottom: 8px; }
.more-filter-group label { display: flex; align-items: center; gap: 6px; font-size: var(--font-md); color: var(--gray-600); padding: 6px 10px; cursor: pointer; }
.more-filter-group .freeIpt { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.more-filter-group .freeIpt input { width: 60px; padding: 4px 8px; border: 1.5px solid var(--gray-200); border-radius: 6px; font-size: var(--font-md); text-align: center; }
.more-filter-group .freeIpt span { font-size: var(--font-md); color: var(--gray-600); }
.more-filter-footer { display: none; justify-content: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--gray-200); margin-top: 16px; }
.more-filter-footer .btn-clear { padding: 8px 24px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); background: #fff; color: var(--gray-600); font-size: var(--font-sm); cursor: pointer; }
.more-filter-footer .btn-confirm { padding: 8px 24px; border: none; border-radius: var(--radius-sm); background: var(--green); color: #fff; font-size: var(--font-md); cursor: pointer; }

/* ===== 更多篩選：左分類 nav + 右可捲條件（共用；買屋/租屋/地圖/捷運可用）=====
   套用方式：面板加 class .mf-dropdown、鈕與面板包 .mf-field、內容改
   .mf-main > .mf-nav（用 <ct-more-filter-nav>）+ .mf-body（各 .mf-section id="mf-<key>"）。
   基礎 .mf-* 版型 + .mf-dropdown 修飾（桌機窄下拉 / 手機貼底 bottom-sheet），opt-in 不影響未套用頁面。*/
.mf-field { position: relative; }
.mf-main { display: flex; flex: 1; min-height: 0; max-height: 450px;}
.mf-nav { flex-shrink: 0; width: 120px; background: var(--gray-50, #f4f4f4); border-radius: var(--radius) 0 0 0; padding: 6px 0; overflow-y: auto; }
.mf-nav-item { display: block; padding: 10px 14px; font-size: var(--font-md); color: var(--gray-700); cursor: pointer; white-space: nowrap; }
.mf-nav-item:hover { color: var(--green); background: white;}
.mf-nav-item.active { color: var(--green); font-weight: 600; background: #fff; box-shadow: inset 3px 0 0 var(--green); }
.mf-body { flex: 1; min-width: 0; position: relative; padding: 12px 16px; overflow-y: auto; }
.mf-body .mf-section { min-width: 0; margin-bottom: 18px; }
.mf-body .mf-section:last-child { margin-bottom: 4px; }
/* .mf-dropdown：桌機窄下拉（靠 .mf-field 右緣下方）；手機貼視窗底 bottom-sheet */
.more-filter-panel.mf-dropdown { padding: 0; position: absolute; z-index: 30; width: 360px; right: 0; margin: .5rem 0 0; }
.more-filter-panel.mf-dropdown.show { display: flex; flex-direction: column; }
@media (max-width: 768px) {
    .more-filter-panel.mf-dropdown { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; margin: 0; border-radius: 16px 16px 0 0; max-height: 80vh; z-index: 1000; }
    .more-filter-panel.mf-dropdown .mf-body { max-height: none; }
}

/* ===== Empty Results ===== */
.results-empty { text-align: center; padding: 60px 20px; color: var(--gray-600); font-size: var(--font-md); }

/* ===== Loading ===== */
.list-loading { width: 100%; height: 30px; background: url('/images/dataLoader.gif') center no-repeat rgba(255,255,255,0.9); }

/* ===== Autocomplete（關鍵字自動完成）===== */
.autocomplete-suggestions { box-sizing: border-box; border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; box-shadow: 1px 4px 3px rgba(50,50,50,0.64); z-index: 9999; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-no-suggestion { padding: 2px 5px; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #000; }
.autocomplete-group { padding: 2px 5px; font-weight: bold; font-size: var(--font-bmd); color: #000; display: block; border-bottom: 1px solid #000; }

/* ===== Franchise Store（在地服務據點）===== */
.btm-store { padding: 24px 0; }
.btm-store .localStore { max-width: 1200px; margin: 0 auto; }
.btm-store .tileSec { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: var(--font-lg);}
.btm-store .tileSec i { color: var(--green); font-size: var(--font-lg); }
.btm-store ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; list-style: none; padding: 0; }
.btm-store li a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 0 1rem 0; background: #fff; border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all .2s; text-decoration: none; }
.btm-store li a:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.btm-store li img { width: 100%; height: 210px; object-fit: cover; border-radius: 6px 6px 0 0; }
.btm-store li b { font-size: var(--font-md); color: var(--gray-800); }

/* ===== Mobile Contact Strip ===== */
.mobile-contact-strip { display: none; padding: 16px 0; text-align: center; }
.mobile-contact-strip a { color: var(--green); font-weight: 600; text-decoration: none; }

/* ===== RWD ===== */
@media (max-width: 992px) {
    .quick-links { display: none; }
    .page-title h1 { font-size: var(--font-lg); }
    .list-img { width: 260px; min-width: 220px; }
    .list-title { max-width: 280px; font-size: var(--font-bmd); }
    .recommend-grid { grid-template-columns: repeat(2, 1fr); }
    .list-top-bar{width: 100%;}
}

@media (max-width: 768px) {
   .container{
      padding: 12px;
   }
    .search-strip { position: static; }
    .search-strip-inner { flex-direction: column; align-items: stretch; }
    .search-strip .ct-field { min-width: auto; }
    .search-input-wrap { min-width: auto; }

    .list-item { flex-direction: column; }
    .list-img { width: 100%; min-width: auto; height: 200px; }
    .list-title { max-width: none; }
    .list-header { flex-direction: row; align-items: flex-start; gap: 8px; }
    
    .list-price-col { text-align: left; }

    .page-title-row { flex-direction: column; align-items: flex-start; gap: 12px; }

    .contact-banner { flex-direction: column; }
    .contact-banner-img { width: 100%; min-width: auto; height: 140px; }

    .mobile-contact-strip { display: block; }
    .btm-store ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .recommend-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .spec-item { padding: 0 10px 0 0; margin-right: 10px; }
    .btm-store ul { grid-template-columns: 1fr; }
}