:root { --max: 1100px; --border:#e6e6e6; --text:#111; --muted:#666; --bg:#fff; }
* { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
img { display:block; }
.container { max-width: var(--max); margin: 0 auto; padding: 20px; }
.header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); }
.brand { font-weight: 800; font-size: 18px; }
.nav a { margin-left: 12px; padding: 6px 10px; border:1px solid var(--border); border-radius:10px; }
.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card { border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.card img { width:100%; height:220px; object-fit:cover; }
.pad { padding:12px; display:flex; flex-direction:column; gap:8px; }
.title { font-weight:700; }
.price { font-weight:700; }
.btn { display:inline-block; background:#111; color:#fff; border:1px solid #111; border-radius:10px; padding:10px 12px; cursor:pointer; }
.btn.secondary { background:#fff; color:#111; }
.row { display:flex; align-items:center; gap:12px; }
.space-between { justify-content: space-between; align-items: center; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:10px; text-align:left; vertical-align: middle; }
.product { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; }
.product-img { width:100%; height:auto; border:1px solid var(--border); border-radius:12px; }
.product-info .price { font-size:20px; margin:10px 0; }
.form { display:flex; flex-direction:column; gap:12px; max-width:480px; }
.form input, .form textarea { width:100%; padding:10px; border:1px solid var(--border); border-radius:10px; }
.flash { margin: 10px 0; display:flex; flex-direction:column; gap:8px; }
.flash-item { padding:10px 12px; border-radius:8px; border:1px solid var(--border); }
.flash-item.success { background:#eefcee; border-color:#cce8cc; }
.flash-item.warning { background:#fff8e6; border-color:#ffecb3; }
.flash-item.danger { background:#ffecec; border-color:#ffc9c9; }
.footer { padding: 24px 20px; border-top:1px solid var(--border); text-align:center; color: var(--muted); }
@media (max-width: 860px){ .product { grid-template-columns: 1fr; } }