:root{--ink:#1F2937;--gold:#C9A24B;--lgold:#E5C778;--cream:#F7F5F0;--mut:#6B7280;--line:#E5E7EB;--bg:#F3F4F6;--ok:#166534;--bad:#9B1C1C;--f-body:'Vazirmatn',sans-serif;--f-title:'Vazirmatn',sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Vazirmatn',system-ui,sans-serif;font-size:15px}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
#app{min-height:100vh;display:flex;flex-direction:column;max-width:1000px;margin:0 auto;background:var(--bg)}
.top{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--gold)}
.brand{display:flex;flex-direction:column}.brand b{color:var(--lgold);font-size:17px}.brand small{color:#9CA3AF;font-size:11px}
main{flex:1;padding:12px 12px 90px}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;background:#fff;border-top:1px solid var(--line);max-width:1000px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1;border:0;background:none;padding:8px 0 7px;font-size:12px;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:2px}
.tabs button i{font-style:normal;font-size:19px}.tabs button.on{color:var(--ink);font-weight:700;box-shadow:inset 0 -3px 0 var(--gold)}
.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:600}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1a1a1a}.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.red{background:#fff;color:var(--bad);border-color:#F3C1C1}.btn.sm{padding:5px 10px;font-size:13px}.btn:disabled{opacity:.5}
.bar{display:flex;gap:8px;margin-bottom:8px}.bar input,.bar select,.field input,.field select,.field textarea{width:100%;border:1px solid #D1D5DB;border-radius:10px;padding:9px 11px;background:#fff}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px}.chip{border:1px solid #D1D5DB;background:#fff;border-radius:999px;padding:5px 12px;white-space:nowrap;font-size:13px;cursor:pointer}
.chip.on{background:var(--ink);color:var(--lgold);border-color:var(--ink)}
.count{color:var(--mut);font-size:12px;margin:0 2px 6px}
.item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 10px;margin-bottom:8px;cursor:pointer}
.item.off{opacity:.55;background:#EEE}.thumb{width:54px;height:54px;border-radius:10px;background:var(--cream);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.thumb img{max-width:100%;max-height:100%}.thumb span{color:#C4C4C4;font-size:22px}
.info{flex:1;min-width:0}.info .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:11.5px;color:var(--mut);margin-top:3px}.code{font-family:Arial,sans-serif;direction:ltr;color:#4B5563}
.tag{border-radius:6px;padding:1px 7px;background:#F3F4F6}.tag.ok{background:#DCFCE7;color:var(--ok)}.tag.warn{background:#FDE2E2;color:var(--bad)}.tag.gold{background:#FFF4CC;color:#7A6128}
.pr{font-weight:700;font-size:13px;white-space:nowrap;text-align:left;min-width:70px}.pr small{display:block;color:var(--mut);font-weight:400;font-size:10.5px}
.sw{position:relative;width:44px;height:26px;flex:none}.sw input{opacity:0;width:100%;height:100%;position:absolute;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:99px;background:#CBD5E1;transition:.15s}.sw i:after{content:"";position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}
.sw input:checked+i{background:var(--gold)}.sw input:checked+i:after{right:21px}
.fab{position:fixed;left:16px;bottom:calc(72px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;border:0;background:var(--ink);color:var(--lgold);font-size:30px;box-shadow:0 6px 16px rgba(0,0,0,.3);z-index:15}
.card-s{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}.card-s h3{margin:0 0 10px;font-size:15px}.card-s p{margin:6px 0;color:var(--mut);font-size:13px;line-height:1.8}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1;min-width:120px}
.field{margin-bottom:10px}.field label{display:block;font-size:12.5px;color:var(--mut);margin-bottom:4px}.field textarea{min-height:110px;resize:vertical}
.ltr{direction:ltr;text-align:left;font-family:Arial,sans-serif}
#sheet{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto}#sheet[hidden]{display:none}
.sheetbar{position:sticky;top:0;background:var(--ink);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;display:flex;justify-content:space-between;align-items:center;z-index:2;border-bottom:2px solid var(--gold)}
.sheetbody{max-width:700px;margin:0 auto;padding:12px 12px 120px}
.photo{display:flex;gap:12px;align-items:center}.photo .pv{width:110px;height:110px;border-radius:14px;background:var(--cream);border:1px dashed var(--gold);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}.pv img{max-width:100%;max-height:100%}
.pal{display:flex;flex-wrap:wrap;gap:7px}.sw-c{position:relative;width:38px;height:38px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #CBD5E1;cursor:pointer}
.sw-c.sel{box-shadow:0 0 0 3px var(--gold)}.sw-c b{position:absolute;top:-6px;right:-6px;background:var(--ink);color:var(--lgold);border-radius:50%;width:18px;height:18px;font-size:11px;display:flex;align-items:center;justify-content:center}
.qcbox{margin:6px 0}.qcbox .tag{margin-left:5px}
.sticky{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px;justify-content:center;z-index:3}.sticky .btn{flex:1;max-width:220px}
#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:90%;text-align:center}#toast.on{opacity:1}
.pages-wrap{overflow:auto}.pages{transform-origin:top right}
.pages .page{margin:0 auto 14px;box-shadow:0 4px 18px rgba(0,0,0,.18)}
/* ================= catalog pages (also used for print) ================= */
.page{width:794px;height:1123px;position:relative;background:#fff;overflow:hidden;direction:rtl;font-family:var(--f-body);color:var(--ink);page-break-after:always;break-after:page}
.page .banner{height:94px;background:#0b0d10 url(assets/banner.jpg) center/cover;display:flex;align-items:center;justify-content:center;color:var(--lgold);font-family:var(--f-title);font-weight:700;font-size:27px;border-bottom:3px solid var(--gold)}
.page .banner span{direction:rtl}
.page .strip{height:26px;line-height:26px;text-align:center;font-size:13px;font-weight:700;color:#7A6128}
.grid{display:grid;grid-template-columns:123px 17px 133px 15px 275px 15px 171px;direction:rtl;margin:0 22px}
.hdr{height:64px;margin-bottom:18px}.hdr div{background:var(--ink);color:var(--lgold);border:1.5px solid var(--gold);border-radius:32px;display:flex;align-items:center;justify-content:center;font-family:var(--f-title);font-weight:700;font-size:20px}
.hdr .h1{grid-column:1}.hdr .h3{grid-column:3}.hdr .h5{grid-column:5}.hdr .h7{grid-column:7}
.cards{margin-top:0}.card{height:var(--ch);margin-bottom:18px}
.card .c-img{display:flex;align-items:center;justify-content:center;padding:4px}.c-img img{max-width:100%;max-height:100%;object-fit:contain}
.c-dots{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.c-dots i{width:11px;height:11px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.cap{background:var(--cream);border:1px solid var(--gold);border-radius:24px;overflow:hidden;position:relative}
.c-name{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 6px;text-align:center}
.c-name .lab{font-size:11px;font-weight:700;color:#A8801F;height:14px;line-height:14px}
.c-name .nm{font-weight:700;font-size:15px;line-height:1.35;max-height:calc(var(--ch) - 58px);overflow:hidden;width:100%}
.c-name .cd{font-family:Arial,sans-serif;direction:ltr;font-size:12.5px;color:#6B7280;margin-top:3px}
.c-spec{display:flex;flex-direction:column;padding:7px 12px 7px;text-align:center}
.c-spec .st{font-weight:700;font-size:12px;line-height:1.5;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid rgba(201,162,75,.55);min-height:22px}
.c-spec .rest{flex:1;min-height:0;overflow:hidden;font-size:11.5px;line-height:1.75;color:#4B5563}
.c-spec .rest .bl{display:block}.c-spec .rest.flow .bl{display:inline;margin-inline-end:9px}
.c-price{background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:28px}
.c-price .pn{font-family:var(--f-title);font-weight:700;font-size:27px;color:var(--lgold);line-height:1.2;direction:ltr}
.c-price .pu{font-size:13px;color:var(--gold);margin-top:2px;min-height:16px}
.page .foot{position:absolute;left:0;right:0;bottom:0;height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:linear-gradient(to top,rgba(214,190,130,.28),transparent)}
.foot .sl{flex:1;text-align:center;font-family:var(--f-title);font-weight:700;font-size:25px;color:#B8892D}.foot img{height:70px}
#catalog-print{position:fixed;left:-20000px;top:0;display:block}
@page{size:A4;margin:0}
@media print{
  html,body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ui{display:none!important}
  #catalog-print{position:static;display:block;left:auto}
  #catalog-print .page{margin:0;box-shadow:none}
}
.sheetbar .btn{background:transparent;color:#fff;border-color:#6B7280}