*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
@font-face{font-family:Vazir;src:local("Vazirmatn"),url(vazirmatn.woff2)}
body{margin:0;font-family:Vazir,Tahoma,sans-serif;background:#f4f6f6;color:#1b2b2b;font-size:16px}
main{padding:12px 12px 150px}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid #d5dddd;z-index:5}
nav button{flex:1;height:56px;border:0;background:none;font:inherit;color:#667;border-top:3px solid transparent}
nav button.on{color:#0f766e;font-weight:bold;border-top-color:#0f766e}
#bar:not(:empty){position:fixed;bottom:56px;left:0;right:0;background:#fff;border-top:1px solid #d5dddd;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;z-index:4;font-weight:bold}
.in{width:100%;height:48px;border:1px solid #c5cfcf;border-radius:10px;padding:0 12px;font:inherit;margin:0 0 10px;background:#fff}
button{font:inherit;cursor:pointer}
.pri,.sec,.btn{min-height:48px;border-radius:10px;border:0;padding:0 16px;display:inline-flex;align-items:center;justify-content:center}
.pri{background:#0f766e;color:#fff;font-weight:bold}
.sec{background:#e6f4f1;color:#0f766e}
.x{min-height:48px;min-width:48px;border:0;background:#fdecec;color:#c0392b;border-radius:10px}
.w{width:100%;margin-bottom:10px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{background:#fff;border-radius:12px;padding:8px;box-shadow:0 1px 3px #0002;display:flex;flex-direction:column;gap:4px}
.card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.card span{color:#0f766e;font-size:14px}
.qty{display:flex;align-items:center;justify-content:space-between;gap:6px}
.qty button{width:48px;height:48px;border:0;border-radius:10px;background:#0f766e;color:#fff;font-size:26px}
.qty i{font-style:normal;font-weight:bold;min-width:28px;text-align:center}
.row{display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:8px;margin-bottom:8px}
.row>div:not(.qty){flex:1;min-width:0}
.row small{display:block;color:#667}
.th{width:56px;height:56px;border-radius:8px;object-fit:cover}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button{flex:1;height:48px;border:0;border-radius:10px;background:#e6edec}
.tabs .on{background:#0f766e;color:#fff}
.empty{text-align:center;color:#889;margin-top:40px}
.pin{max-width:320px;margin:60px auto;text-align:center}
.pin input{text-align:center;letter-spacing:8px}
#modal{position:fixed;inset:0;background:#0007;z-index:20;display:flex;align-items:flex-end}
#modal[hidden]{display:none}
.sheet{background:#fff;width:100%;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:16px}
.sheet h2{margin:0 0 12px}
.tot{font-weight:bold;font-size:18px;margin:10px 0;color:#0f766e}
.pick{display:flex;gap:8px;margin-bottom:10px}
.pick .btn{flex:1}
#pv{width:100%;max-height:220px;object-fit:contain;border-radius:10px;margin-bottom:10px;background:#eef}
.inv{width:100%;border:1px solid #ddd;margin-bottom:10px}
#toast{position:fixed;bottom:130px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:10px 18px;border-radius:20px;z-index:30;opacity:0;transition:.2s;pointer-events:none}
#toast.on{opacity:1}