/* ===== Minimal Shop – styles.css ===== */
:root{
  --bg:#fafafa;
  --fg:#1b1b1b;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#111;     /* 低饱和深色作为强调 */
  --radius:12px;
  --gap:16px;
  --btn-primary-bg:#111;
  --btn-primary-fg:#fff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:15px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans SC",sans-serif;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:760px;margin:0 auto;padding:24px}

header{
  padding:28px 0 8px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
header h1{margin:0 0 6px;font-size:28px;letter-spacing:.2px}
header p{margin:0;color:var(--muted);font-size:14px}

#filters{
  display:flex;gap:10px;align-items:center;margin:14px 0 8px;
}
#filters input,#filters select{
  flex:1;appearance:none;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--fg);
  outline:none;
}
#filters select{flex:0 0 140px}
#filters input:focus,#filters select:focus{border-color:#cbd5e1;box-shadow:0 0 0 3px rgba(148,163,184,.25)}

.grid{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}

.card{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s ease;
}
.card:hover{border-color:#d1d5db}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

.card .body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0;font-size:16px;font-weight:650}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:12px;padding:1px 8px;border:1px solid var(--line);border-radius:999px;color:#444;background:#fff}
.price{font-weight:700}

.card p{margin:0;color:#374151;font-size:14px}

.actions{display:flex;gap:8px;margin-top:auto}
.btn{
  display:inline-block;text-align:center;padding:9px 10px;border-radius:10px;
  border:1px solid var(--line);background:#fff;color:#111;text-decoration:none;
}
.btn:hover{border-color:#cbd5e1}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(0.95)}

footer{
  border-top:1px solid var(--line);margin-top:24px;padding:16px 0;text-align:center;color:var(--muted);font-size:13px;
}
footer a{color:inherit;text-underline-offset:2px}

/* --- 暗色模式 --- */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0c0f; --fg:#e5e7eb; --muted:#9ca3af; --line:#1f2937; --accent:#e5e7eb; --btn-primary-bg:#2563eb; --btn-primary-fg:#fff;
  }
  #filters input,#filters select,.card,.btn{background:#0f1115;border-color:var(--line);color:var(--fg)}
  .badge{background:#0f1115;border-color:#2a2f39;color:#c7ccd6}
  .card p{color:#c9d1d9}
}
.btn.primary{
  background:var(--btn-primary-bg);
  border-color:var(--btn-primary-bg);
  color:var(--btn-primary-fg);
}