:root{--bg:#f7f4ed;--ink:#171717;--gold:#a67c2d;--card:#fff;--muted:#6d6b65}
*{box-sizing:border-box} body{margin:0;font-family:Arial,"Noto Sans SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink)}
.hero{background:linear-gradient(135deg,#111827,#1f2937);color:white;padding:42px 24px 34px;text-align:center}
.hero h1{font-size:clamp(28px,5vw,48px);margin:0 0 8px}.hero .en{font-size:clamp(16px,2.2vw,24px);opacity:.88}
.info{max-width:1160px;margin:18px auto;padding:16px 18px;background:white;border:1px solid #e8e2d7;border-radius:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;font-size:14px}
.wrap{max-width:1180px;margin:auto;padding:18px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 20px}.search{flex:1;min-width:240px;padding:12px 14px;border:1px solid #d8d3c8;border-radius:10px;font-size:15px}
.cats{display:flex;gap:8px;flex-wrap:wrap}.catbtn{border:1px solid #cbbd9d;background:white;border-radius:999px;padding:9px 13px;cursor:pointer}
.catbtn.active{background:#171717;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{background:var(--card);border:1px solid #e5dfd2;border-radius:14px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.04);display:flex;flex-direction:column}
.cover{aspect-ratio:4/3;background:#eee;display:flex;align-items:center;justify-content:center;overflow:hidden}.cover img{width:100%;height:100%;object-fit:contain;background:#fff}
.cardbody{padding:14px;display:flex;flex-direction:column;gap:9px;flex:1}.title{font-size:16px;font-weight:700;line-height:1.35}.meta{font-size:12px;color:var(--muted)}
.price{font-size:19px;font-weight:800;color:#8a6117}.enquire{font-size:15px;font-weight:700;color:#6b7280}
.wa{margin-top:auto;display:block;text-align:center;text-decoration:none;background:#25D366;color:#062b14;font-weight:800;padding:11px 10px;border-radius:9px}
.wa:hover{filter:brightness(.96)}
.section-title{font-size:24px;margin:22px 0 12px}.empty{text-align:center;padding:50px;color:#777}
footer{text-align:center;color:#777;padding:34px 15px 50px;font-size:13px}
@media(max-width:560px){.hero{padding:28px 16px}.wrap{padding:12px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cardbody{padding:10px}.title{font-size:13px}.price{font-size:16px}.wa{font-size:12px;padding:9px 5px}}