<style>
#zq{--gold:#C9A227;--gold-d:#8a6d15;--ink:#1a1611;--paper:#faf7f0;--line:#e5ddc9;
font-family:inherit;max-width:560px;margin:0 auto;padding:24px 16px;color:var(--ink);}
#zq h2{font-size:26px;font-weight:700;margin:0 0 4px;}
#zq .sub{color:#6b6152;font-size:14px;margin:0 0 24px;}
#zq .step{font-size:15px;font-weight:700;margin:0 0 10px;}
#zq .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px;}
#zq .opt{background:var(--paper);border:1px solid var(--line);border-radius:10px;
padding:12px 8px;text-align:center;cursor:pointer;font-size:14px;font-weight:600;
transition:border-color .15s;}
#zq .opt small{display:block;font-weight:400;font-size:11.5px;color:#6b6152;margin-top:3px;}
#zq .opt.on{border:2px solid var(--gold);background:#fff;}
#zq .result{background:var(--ink);color:#fff;border-radius:14px;padding:18px;margin-bottom:26px;}
#zq .result .name{font-size:17px;font-weight:700;color:var(--gold);}
#zq .result .price{font-size:14px;opacity:.85;margin:4px 0 14px;}
#zq .btn{display:block;width:100%;background:var(--gold);color:var(--ink);border:0;
border-radius:10px;padding:13px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;}
#zq .btn:disabled{opacity:.45;cursor:default;}
#zq .offers h3{font-size:16px;font-weight:700;margin:0 0 12px;}
#zq .offer{display:flex;align-items:center;justify-content:space-between;gap:10px;
background:var(--paper);border:1px solid var(--line);border-radius:10px;
padding:12px 14px;margin-bottom:8px;font-size:14px;}
#zq .offer button{background:none;border:1px solid var(--gold-d);color:var(--gold-d);
border-radius:8px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;
font-family:inherit;white-space:nowrap;}
#zq .msg{font-size:13px;margin-top:8px;min-height:18px;}
</style>
اختر قهوتك'));
root(h('
خطوتان وتصل قهوتك المناسبة إلى سلتك
'));
root(h('
١ — اختر خلطتك
'));
var g1 = h('
');
BLENDS.forEach(function(b){
var o = h('
'+b.label+''+b.hint+'
');
o.onclick = function(){ sel.blend=b.key; render(); };
g1(o);
});
root(g1);
root(h('
٢ — اختر الحجم
'));
var g2 = h('
');
SIZES.forEach(function(s){
var o = h('
'+s.label+''+s.hint+'
');
o.onclick = function(){ sel.size=s.key; render(); };
g2(o);
});
root(g2);
var done = sel.blend && sel.size;
var sku = done ? MAP[sel.blend][sel.size] : null;
var card = h('
');
card(h('
'+(done ? PRODUCTS[sku].name : "أكمل الاختيارين لتظهر قهوتك")+'
'));
card(h('
'+(done ? "رمز المنتج: "+sku : "")+'
'));
var btn = h('<button class="btn"'+(done?"":" disabled")+'>أضف إلى السلة</button>');
var msg = h('
');
if(done) btn.onclick = function(){ addToCart(sku, msg, btn); };
card(btn); card(msg);
root(card);
var offerList = (sel.blend==="golden") ? ["ZC2007","ZC2003","ZC1002"] : OFFERS;
var of = h('
عروض جاهزة
');
offerList.forEach(function(sku2){
var row = h('
'+PRODUCTS[sku2].name+'
');
var b = h('<button>أضف</button>');
var m = h('
');
b.onclick = function(){ addToCart(sku2, m, b); };
row(b); row(m);
of(row);
});
root(of);
}
render();
})();
