:root { --brand:#7a1f2a; --bg:#f8f8fb; --ink:#1f2937; --muted:#6b7280; }
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; color:var(--ink); background:var(--bg);}
a{color:var(--brand); text-decoration:none}
header, main{max-width:1100px; margin:0 auto; padding:1rem;}
nav{display:flex; justify-content:space-between; align-items:center;}
nav .right a{margin-left:1rem}
.container{max-width:1100px; margin:0 auto; padding:1rem;}
.flash{padding:.75rem 1rem; border-radius:.5rem; background:#eef2ff; margin:.5rem 0;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin-top:1rem;}
.card{background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1rem; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card h3{margin:.25rem 0 .25rem 0; font-size:1.1rem}
.card .sku{color:var(--muted); font-size:.9rem}
.card .price{font-weight:700; margin:.25rem 0 .75rem 0}
form.inline{display:flex; gap:.5rem; align-items:center}
input[type=number], input[type=text], input[type=password], input[type=email]{width:100%; padding:.6rem .7rem; border:1px solid #d1d5db; border-radius:.5rem}
input[type=number]{max-width:110px}
button{background:var(--brand); color:#fff; padding:.6rem .9rem; border:none; border-radius:.6rem; cursor:pointer}
button.secondary{background:#111827}
table{width:100%; border-collapse:collapse; background:#fff; border-radius:.75rem; overflow:hidden; border:1px solid #e5e7eb}
th, td{padding:.75rem; border-bottom:1px solid #e5e7eb; text-align:left}
tfoot td{font-weight:700}
.footer{color:var(--muted); font-size:.9rem; text-align:center; padding:2rem 1rem}
@media(max-width:600px){
  nav .right a{margin-left:.6rem}
}