/* assets/styles.css */
:root {
  --bg: #0b0f19;
  --card: #111729;
  --muted: #8ea0c0;
  --text: #e6eefc;
  --accent: #e2bd6d;
  --ok: #14b8a6;
  --warn: #f59e0b;
  --bad: #ef4444;
  --border: #1a2235;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Poppins, Arial, sans-serif;
  background: var(--bg); color: var(--text);
}
a { color: var(--accent); text-decoration: none; }

header, .container { max-width: 1100px; margin: 0 auto; padding: 16px; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.brand { font-weight:700; letter-spacing:.5px; }

.btn {
  display:inline-block; padding:10px 14px; border-radius:10px;
  background: var(--accent); color:#070726; font-weight:700; border:0;
}
.btn.secondary { background:#1f2b46; color:var(--text); }

.grid { display:grid; gap:16px; grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; overflow:hidden;
}
.card img { width:100%; height:220px; object-fit:cover; display:block; }
.card .pad { padding:12px; }
.price { color: var(--ok); font-weight:700; }
.desc { color: var(--muted); font-size:.95rem; line-height:1.4; }

.badge { padding:4px 8px; border-radius:999px; font-size:.85rem; border:1px solid var(--border); }
.badge.low { background:#2d1f0e; color:var(--warn); border-color:#463a17; }
.badge.oos { background:#2a1212; color:var(--bad); border-color:#512020; }

footer { margin-top:40px; padding:20px 16px; color:var(--muted); border-top:1px solid var(--border); }

.form { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.form label { display:block; margin:10px 0 6px; color:var(--muted); }
.form input, .form textarea, .form select {
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #26314e;
  background:#0e1424; color:var(--text);
}
.form .row { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

.info-list { margin:0; padding:0; list-style:none; }
.info-list li { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #26314e; }
.info-list li:last-child { border-bottom:0; }

@media (max-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .card img { height:auto; }
}
/* card becomes clickable */
.card-link { display:block; color:inherit; }
.card-link h3 { margin:6px 0 8px; }

/* product page layout tweaks */
.product-layout { display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; }
@media (max-width: 720px) {
  .product-layout { grid-template-columns: 1fr; }
}
.section-title { margin:0 0 10px; }
.kv { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed #26314e; }
.kv:last-child { border-bottom:0; }
input[disabled], textarea[disabled] { opacity: .9; }
.qr-wrap { text-align:center; }
.qr-wrap img { width:100%; height:auto; display:block; max-width:420px; margin:0 auto; border-radius:12px; }
.desc a { color:#e2bd6d; text-decoration:underline; }
.desc a:hover { opacity:0.8; }