/* Phase 2.4c hardened — html body prefix + !important（變數塊保留）*/
/* wp-tea-listings frontend — base structure
* v0.4.0 起改為 CSS variables 化，顏色 / 字體 / 圓角 / grid 全由 assets/themes/*.css 覆寫
* 此檔只負責 layout、結構、互動行為，視覺值都來自 var(--wptl-*)。
* 預設值（無 theme 載入時）= site06-fresh 的 fallback。
*/
:root {
/* ---- 預設 fallback（無 theme CSS 時）= site06-fresh ---- */
--wptl-primary: #c43a50;
--wptl-secondary: #fce4e8;
--wptl-accent: #ff6b9d;
--wptl-bg: #ffffff;
--wptl-card-bg: #ffffff;
--wptl-section-bg: #f8f8f8;
--wptl-text: #222;
--wptl-text-muted: #666;
--wptl-text-strong: #444;
--wptl-border: #ddd;
--wptl-border-light: #eee;
--wptl-card-border: 1px solid var(--wptl-border);
--wptl-border-radius: 8px;
--wptl-card-padding: 14px 16px;
--wptl-shadow: 0 1px 3px rgba(0,0,0,.05);
--wptl-shadow-hover: 0 6px 16px rgba(0,0,0,.08);
--wptl-card-img-h: 300px;
--wptl-card-img-h-mobile: 200px;
--wptl-grid-min: 260px;
--wptl-grid-gap: 20px;
--wptl-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
--wptl-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
--wptl-card-translate-hover: -4px;
--wptl-tag-bg: var(--wptl-secondary);
--wptl-tag-color: var(--wptl-primary);
--wptl-tag-radius: 10px;
}
html body .tea-listings-wrapper { max-width: 1200px !important; margin: 0 auto !important; padding: 20px !important; font-family: var(--wptl-font-body) !important; color: var(--wptl-text) !important; background: var(--wptl-bg) !important; }
/* ---- search form ---- */
html body .tea-search-form { background: var(--wptl-section-bg) !important; padding: 20px !important; border-radius: var(--wptl-border-radius) !important; margin-bottom: 30px !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 18px !important; }
html body .tea-search-form section { margin-bottom: 8px !important; }
html body .tea-search-form h4 { margin: 0 0 8px !important; font-size: 14px !important; font-weight: 700 !important; color: var(--wptl-text-strong) !important; font-family: var(--wptl-font-heading) !important; }
html body .tea-search-form label { display: inline-flex !important; align-items: center !important; margin-right: 10px !important; margin-bottom: 4px !important; font-size: 13px !important; cursor: pointer !important; }
html body .tea-search-form input[type="number"] { width: 80px !important; padding: 4px 6px !important; }
html body .tea-search-form select[multiple] { width: 100% !important; min-height: 110px !important; }
html body .tea-search-form .filter-actions { grid-column: 1 / -1 !important; display: flex !important; gap: 10px !important; align-items: center !important; }
html body .tea-search-form button[type="button"],
html body .tea-search-form button[type="reset"] { padding: 8px 24px !important; border: 0 !important; border-radius: 6px !important; cursor: pointer !important; font-size: 14px !important; font-family: var(--wptl-font-body) !important; }
html body .tea-search-form button[type="button"][data-wptl="search-btn"] { background: var(--wptl-primary) !important; color: #fff !important; }
html body .tea-search-form button[type="reset"] { background: var(--wptl-border) !important; color: var(--wptl-text-strong) !important; }
/* ---- results ---- */
html body .tea-results-area .loading,
html body .tea-results-area .empty { text-align: center !important; color: var(--wptl-text-muted) !important; padding: 40px 0 !important; }
html body .results-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(var(--wptl-grid-min), 1fr)) !important; gap: var(--wptl-grid-gap) !important; }
/* ---- card ---- */
html body .tea-card { border: var(--wptl-card-border) !important; border-radius: var(--wptl-border-radius) !important; overflow: hidden !important; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important; background: var(--wptl-card-bg) !important; box-shadow: var(--wptl-shadow) !important; position: relative !important; }
html body .tea-card:hover { transform: translateY(var(--wptl-card-translate-hover)) !important; box-shadow: var(--wptl-shadow-hover) !important; }
html body .tea-card .card-image,
html body .tea-card .card-no-image { width: 100% !important; height: var(--wptl-card-img-h) !important; background: var(--wptl-border-light) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--wptl-text-muted) !important; position: relative !important; }
html body .tea-card .card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
html body .tea-card .card-info { padding: var(--wptl-card-padding) !important; }
html body .tea-card h3 { margin: 0 0 6px !important; font-size: 17px !important; color: var(--wptl-text) !important; font-family: var(--wptl-font-heading) !important; }
html body .tea-card .meta { margin: 4px 0 !important; font-size: 13px !important; color: var(--wptl-text-muted) !important; }
html body .tea-card .intro { margin: 6px 0 !important; font-size: 13px !important; color: var(--wptl-text-strong) !important; min-height: 38px !important; }
html body .tea-card .city { margin: 4px 0 !important; font-size: 12px !important; color: var(--wptl-text-muted) !important; }
html body .tea-card .price { margin: 8px 0 !important; font-size: 14px !important; font-weight: 600 !important; color: var(--wptl-primary) !important; }
html body .tea-card .tags { margin-top: 8px !important; display: flex !important; flex-wrap: wrap !important; gap: 4px !important; }
html body .tea-card .tag { background: var(--wptl-tag-bg) !important; color: var(--wptl-tag-color) !important; padding: 2px 8px !important; border-radius: var(--wptl-tag-radius) !important; font-size: 11px !important; }
/* ---- pagination ---- */
html body .pagination { margin-top: 30px !important; text-align: center !important; }
html body .pagination .page-num { margin: 0 3px !important; padding: 6px 12px !important; border: 1px solid var(--wptl-border) !important; background: var(--wptl-card-bg) !important; cursor: pointer !important; border-radius: 4px !important; color: var(--wptl-text-strong) !important; font-family: var(--wptl-font-body) !important; }
html body .pagination .page-num.current { background: var(--wptl-primary) !important; color: #fff !important; border-color: var(--wptl-primary) !important; }
/* ---- RWD ---- */
@media (max-width: 768px) {
html body .results-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
html body .tea-card .card-image,
html body .tea-card .card-no-image { height: var(--wptl-card-img-h-mobile) !important; }
html body .tea-card h3 { font-size: 15px !important; }
}
@media (max-width: 480px) {
html body .results-grid { grid-template-columns: 1fr !important; }
html body .tea-card .card-image,
html body .tea-card .card-no-image { height: 280px !important; }
}
/* === Phase 2.6: 可點擊卡片 + 服務類型 chip + CTA（base，hardened）=== */
html body a.tea-card.tea-card--clickable { display: block !important; text-decoration: none !important; color: inherit !important; cursor: pointer !important; }
html body a.tea-card.tea-card--clickable:hover { text-decoration: none !important; }
html body .tea-card__service-type { display: inline-block !important; font-size: 11px !important; font-weight: 600 !important; padding: 2px 10px !important; border-radius: 12px !important; margin: 2px 0 6px !important; color: #fff !important; background: var(--wptl-primary) !important; }
html body .tea-card__service-type.svc--fixed { background: var(--wptl-accent) !important; }
html body .tea-card__service-type.svc--both { background: linear-gradient(90deg, var(--wptl-primary), var(--wptl-accent)) !important; }
html body .tea-card .price.price--tbd { color: var(--wptl-text-muted) !important; font-weight: 400 !important; }
html body .tea-card__cta { display: inline-block !important; margin-top: 10px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--wptl-primary) !important; }
html body .tea-card__cta::after { content: "查看詳情 →" !important; }
html body a.tea-card.tea-card--clickable:hover .tea-card__cta { text-decoration: underline !important; }