:root { --ink:#1a1a1a; --muted:#666; --line:#e3e3e3; --accent:#f0a500; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); }
a { color:inherit; }
main, .site-head > *, .site-foot > * { max-width:1040px; margin:0 auto; padding:0 16px; }
.site-head { border-bottom:1px solid var(--line); padding:12px 0; }
.site-head .brand { font-weight:700; font-size:1.15rem; text-decoration:none; display:inline-block; }
.site-head nav { display:flex; flex-wrap:wrap; gap:14px; padding-top:8px; font-size:.92rem; }
main { padding-top:24px; padding-bottom:40px; }
h1 { font-size:1.6rem; margin:0 0 12px; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.card { border:1px solid var(--line); border-radius:8px; padding:12px; }
.card img { width:100%; height:160px; object-fit:contain; }
.card-title { display:block; margin-top:8px; font-weight:500; text-decoration:none; font-size:.95rem; }
.price { margin:8px 0 0; font-size:.95rem; }
.price s { color:var(--muted); margin-left:6px; }
.off { color:#0a7d2b; margin-left:6px; }
.btn { display:inline-block; background:var(--accent); color:#000; padding:10px 18px; border-radius:6px; text-decoration:none; font-weight:600; }
.note { color:var(--muted); font-size:.9rem; }
.site-foot { border-top:1px solid var(--line); margin-top:40px; padding:20px 0; color:var(--muted); font-size:.9rem; }
.site-foot a { margin-right:12px; }.guide { max-width:760px; }
.guide h2 { clear:both; margin-top:32px; }
.guide img.pick { float:right; width:200px; height:200px; object-fit:contain; margin:0 0 12px 20px; }
.guide .btn { margin-top:4px; }
@media (max-width:560px) {
  .guide img.pick { float:none; display:block; margin:0 auto 12px; }
}