*{box-sizing:border-box}body{margin:0;font-family:Arial,'Microsoft YaHei',sans-serif;background:#f7f8fb;color:#1f2937}.hero{background:linear-gradient(135deg,#fff7ed,#e0f2fe);padding:28px 18px;border-bottom:1px solid #e5e7eb}.hero-inner{max-width:1200px;margin:auto;display:flex;gap:18px;align-items:center}.logo{width:115px;height:115px;object-fit:contain;background:white;border-radius:18px;padding:8px;box-shadow:0 8px 24px #0001}h1{margin:0;font-size:34px}.subtitle{font-size:18px;margin:6px 0;font-weight:700}.small{margin:4px 0;color:#4b5563}.toolbar{position:sticky;top:0;z-index:5;max-width:1200px;margin:0 auto;padding:14px 12px;display:grid;grid-template-columns:1fr 240px 150px;gap:10px;background:#f7f8fb}input,select,textarea{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px;font-size:15px}button{border:0;border-radius:10px;padding:12px 14px;background:#0f766e;color:white;font-weight:700;cursor:pointer}.notice{max-width:1200px;margin:0 auto 8px;padding:12px 14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;color:#7c2d12}.grid{max-width:1200px;margin:0 auto;padding:10px 12px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}.card{background:white;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;box-shadow:0 6px 18px #0000000a;display:flex;flex-direction:column}.card img{width:100%;height:165px;object-fit:contain;background:#fff}.card-body{padding:12px;display:flex;flex-direction:column;gap:8px;flex:1}.cat{font-size:12px;color:#64748b}.name{font-weight:700;font-size:14px;line-height:1.35;min-height:42px}.unit{display:flex;gap:8px;font-size:13px}.qty{display:flex;align-items:center;gap:8px}.qty button{background:#e5e7eb;color:#111827;padding:7px 10px}.add{margin-top:auto;background:#f97316}.drawer{position:fixed;right:-450px;top:0;width:450px;max-width:94vw;height:100vh;background:white;z-index:20;box-shadow:-8px 0 30px #0002;transition:.25s;display:flex;flex-direction:column}.drawer.open{right:0}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #e5e7eb}.drawer-head h2{margin:0}.drawer-head button{background:#ef4444;font-size:22px;padding:6px 12px}#cartItems{padding:12px;overflow:auto;max-height:42vh}.cart-row{display:grid;grid-template-columns:60px 1fr auto;gap:8px;padding:10px;border-bottom:1px solid #eee;align-items:center}.cart-row img{width:55px;height:55px;object-fit:contain}.cart-name{font-weight:700;font-size:14px}.cart-actions{display:flex;gap:5px;align-items:center}.cart-actions button{background:#e5e7eb;color:#111827;padding:6px 8px}.remove{background:#ef4444!important;color:white!important}.customer-form{padding:14px;border-top:1px solid #e5e7eb;display:flex;flex-direction:column;gap:9px}.send{background:#22c55e;font-size:16px}.clear{background:#64748b}#overlay{display:none;position:fixed;inset:0;background:#0005;z-index:10}#overlay.show{display:block}footer{text-align:center;padding:24px;background:#111827;color:white;line-height:1.7}@media(max-width:720px){.hero-inner{flex-direction:column;text-align:center}.toolbar{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.card img{height:140px}h1{font-size:28px}}
.card.out{opacity:.55}.card button:disabled{background:#9ca3af;cursor:not-allowed}