:root{--bg:#f5f6f8;--card:#fff;--ink:#1f2d3d;--mut:#6b7684;--acc:#c8471e}
*{box-sizing:border-box;margin:0;padding:0}
body{font:16px/1.55 -apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
header{background:var(--card);border-bottom:1px solid #e3e6ea;padding:16px 0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.logo{font-size:21px;font-weight:700;letter-spacing:-.3px}
.logo span{color:var(--acc)}
nav a{margin-left:22px;color:var(--mut);text-decoration:none;font-size:15px}
nav a:hover{color:var(--acc)}
.hero{margin:24px 0;border-radius:10px;overflow:hidden;position:relative}
.hero img{width:100%;display:block;height:260px;object-fit:cover}
h1{font-size:27px;margin:28px 0 6px}
.sub{color:var(--mut);margin-bottom:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px;padding-bottom:40px}
.card{background:var(--card);border:1px solid #e3e6ea;border-radius:10px;overflow:hidden}
.card img{width:100%;height:178px;object-fit:cover;display:block}
.body{padding:13px}
.name{font-weight:600;font-size:15px;margin-bottom:5px}
.art{color:var(--mut);font-size:13px;margin-bottom:9px}
.price{font-size:18px;font-weight:700}
.btn{display:block;margin-top:10px;padding:9px;text-align:center;background:var(--acc);color:#fff;border-radius:6px;font-size:14px;text-decoration:none}
footer{background:var(--card);border-top:1px solid #e3e6ea;padding:26px 0;color:var(--mut);font-size:14px;margin-top:20px}
@media(max-width:600px){.hero img{height:150px}nav a{margin:0 14px 0 0}}