/* Base marketplace styles (moved from the original front controller). */
:root { color-scheme: light; --ink:#12141a; --muted:#5c6170; --line:#e6e8ee; --card:#fff; --bg:#f6f7fb; --accent:#1d4ed8; }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.5 "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
header { background:#12141a; color:#fff; }
.wrap { width:min(1120px, calc(100% - 2rem)); margin:0 auto; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
.brand { color:#fff; font-weight:650; text-decoration:none; letter-spacing:-0.02em; }
.brand span { color:#93c5fd; }
nav { display:flex; gap:0.4rem; flex-wrap:wrap; }
nav a, .ghost { color:#d7dbe7; text-decoration:none; border-radius:999px; padding:0.35rem 0.75rem; }
nav a[aria-current="page"] { background:#fff; color:#12141a; }
main { padding:2rem 0 4rem; }
h1 { margin:0 0 0.4rem; font-size:2rem; letter-spacing:-0.03em; }
.lead, .meta, .empty { color: var(--muted); }
.lead { margin:0 0 1.5rem; max-width:42rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; list-style:none; padding:0; }
.card { display:grid; gap:0.7rem; align-content:start; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; color:inherit; text-decoration:none; }
.card img, .swatch { width:100%; height:160px; object-fit:cover; background:#eceff5; display:block; }
.swatch { display:grid; place-items:center; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; color:#fff; }
.card div, .panel { padding:1rem; }
.card div { padding:0 1rem 1rem; display:grid; gap:0.35rem; }
.card strong { font-size:1.05rem; }
.pill { justify-self:start; border:1px solid var(--line); border-radius:999px; padding:0.1rem 0.5rem; font-size:0.75rem; }
.price { font-weight:650; }
.detail { display:grid; gap:1rem; grid-template-columns: minmax(0, 280px) 1fr; }
.detail img, .detail .swatch { border-radius:16px; height:220px; }
.back { color: var(--accent); }
.panel { background:#fff; border:1px solid var(--line); border-radius:16px; display:grid; gap:0.8rem; max-width:32rem; }
label { display:grid; gap:0.25rem; font-weight:600; }
input, select { font:inherit; padding:0.55rem 0.7rem; border:1px solid var(--line); border-radius:10px; }
button, .button { font:inherit; background:var(--accent); color:#fff; border:0; border-radius:999px; padding:0.55rem 1rem; cursor:pointer; text-decoration:none; display:inline-block; }
.notice { background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; padding:0.7rem 0.9rem; margin:0 0 1rem; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
th, td { text-align:left; padding:0.65rem 0.8rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.tabs { display:flex; gap:0.5rem; margin:0 0 1rem; flex-wrap:wrap; }
.tabs a { text-decoration:none; color:inherit; border:1px solid var(--line); background:#fff; border-radius:999px; padding:0.35rem 0.75rem; }
.tabs a[aria-current="page"] { background:#12141a; color:#fff; }
.filters { display:flex; gap:0.5rem; margin:0 0 1rem; }
.filters a { color:inherit; text-decoration:none; border:1px solid var(--line); background:#fff; border-radius:999px; padding:0.3rem 0.7rem; }
.filters a[aria-current="page"] { background:#12141a; color:#fff; }
@media (max-width: 700px) { .detail { grid-template-columns: 1fr; } .bar { align-items:flex-start; flex-direction:column; } }