/* styles.css */
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#fafafa; color:#111; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1000px; margin: 0 auto; padding: 20px; }
.container.small { max-width: 520px; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding: 14px 20px; background:#1B4332; color:#fff; }
.brand { font-weight:800; }
.nav { display:flex; gap:14px; align-items:center; }
.linkBtn { background:transparent; border:none; color:#fff; cursor:pointer; font-size:14px; }
.filters { display:flex; gap:10px; align-items:center; padding:12px; background:#fff; border-radius:12px; margin-bottom:16px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.card { background:#fff; border-radius:14px; overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.card img { width:100%; height:160px; object-fit:cover; background:#eee; }
.cardBody { padding:12px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.row.gap { justify-content:flex-start; }
.row.between { justify-content:space-between; }
.btn { display:inline-block; background:#2D6A4F; color:#fff; padding:10px 14px; border-radius:12px; border:none; cursor:pointer; }
.price { font-weight:800; }
.price.big { font-size: 20px; }
.muted { color:#666; font-size: 13px; }
.tags { display:flex; gap:6px; margin-top:8px; }
.tag { font-size:12px; padding:4px 8px; border-radius:999px; background:#f1f5f3; }
.actions { margin-top:10px; }
.detail { display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; background:#fff; border-radius:14px; padding:14px; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.detailImg { width:100%; height:360px; object-fit:cover; border-radius:12px; background:#eee; }
.block { display:block; margin: 10px 0; }
input, textarea, select { width:100%; padding:10px 12px; border-radius:12px; border:1px solid #ddd; }
.lineItem { display:grid; grid-template-columns: 1fr auto auto; gap:12px; align-items:center; padding:12px; background:#fff; border-radius:12px; margin:10px 0; }
.qty { width: 90px; }
hr { border:none; border-top:1px solid #eee; margin: 18px 0; }
@media (max-width: 850px){ .detail{ grid-template-columns:1fr; } }