/* ===== المتجر ===== */
.xcatbar{margin:0 0 18px}
.xstorefront{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.xsf-main{position:relative;overflow:hidden;border-radius:calc(var(--x-r) + 8px);background:linear-gradient(135deg,var(--x-acB),color-mix(in srgb,var(--x-acB) 55%,#000));color:#fff;padding:44px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:20px;min-height:420px;--x-ink:#fff;--x-muted:rgba(255,255,255,.8);--x-ac:var(--x-ac2B);--x-on-ac:var(--x-on-ac2)}
.xsf-main .xkick{background:rgba(255,255,255,.16);color:#fff}
.xsf-main .xh1{font-size:calc(clamp(30px,4.6cqi,54px)*var(--x-scale))}
.xsf-main .xb.s{border-color:rgba(255,255,255,.5);color:#fff}
.xsf-art .xim{background:transparent;aspect-ratio:1;animation:x-bob 6s ease-in-out infinite}
.xsf-art .xim>svg>rect:first-child,.xhero-prod .xim>svg>rect:first-child{fill-opacity:0!important}
.xsf-promo{position:absolute;top:20px;left:20px;background:var(--x-ac2B);color:var(--x-on-ac2);font-weight:700;font-size:13px;padding:4px 14px;border-radius:99px}
.xsf-side{display:grid;gap:16px}
.xsf-tile{position:relative;border-radius:calc(var(--x-r) + 6px);overflow:hidden;display:block;min-height:200px}
.xsf-tile .xim{position:absolute;inset:0;border-radius:0;transition:transform .5s}
.xsf-tile:hover .xim{transform:scale(1.06)}
.xsf-tile b{position:absolute;top:18px;right:18px;font-family:var(--x-fd);font-size:20px}
.xsf-tile span{position:absolute;bottom:16px;right:18px;display:flex;gap:6px;align-items:center;font-weight:600;color:var(--x-ac)}
.xsw{display:flex;gap:10px}
.xsw button{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--x-bg),0 0 0 3px var(--x-line);transition:.2s}
.xsw button.on{box-shadow:0 0 0 3px var(--x-bg),0 0 0 5px var(--x-ac);transform:scale(1.08)}
.xhero-prod{position:relative;display:grid;place-items:center;padding:20px}
.xhero-prod .xim{width:min(420px,80cqi);aspect-ratio:1;background:transparent;position:relative;z-index:1;animation:x-bob 6s ease-in-out infinite}
.xpedestal{position:absolute;bottom:8%;width:70%;height:22%;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--x-ac) 30%,transparent),transparent 70%)}
.xbadge-new{position:absolute;top:12%;right:10%;z-index:2;width:76px;height:76px;border-radius:50%;background:var(--x-ac2B);color:var(--x-on-ac2);display:grid;place-items:center;font-weight:800;font-family:var(--x-fd);transform:rotate(-12deg);box-shadow:0 10px 24px -10px rgba(0,0,0,.4)}
.xdealhero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:center}
.xdh-cd{display:grid;gap:8px;margin-top:6px}
.xdh-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.xdeal{padding:0;overflow:hidden;position:relative;display:grid}
.xdeal .xim{aspect-ratio:1;border-radius:0}
.xdeal>div{padding:14px;display:grid;gap:6px}
.xdisc{position:absolute;top:12px;right:12px;background:#D9412F;color:#fff;font-weight:800;font-size:13px;padding:3px 10px;border-radius:8px}
.xprice.sm b{font-size:20px}.xprice.sm s{font-size:14px}
.xcmpcard{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:24px;max-width:900px;margin:30px auto 0;align-items:center}
.xcmp-im{aspect-ratio:1}
.xcmp-b{display:grid;gap:10px}
.xcmp-b>b{font-family:var(--x-fd);font-size:20px}
.xcmp-rows{display:grid;gap:6px}
.xcmp-rows>div{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--x-soft)}
.xcmp-rows>div.best{background:color-mix(in srgb,var(--x-acB) 14%,var(--x-surfaceB));box-shadow:inset 0 0 0 2px var(--x-acB)}
.xcmp-rows em{font-style:normal;font-size:12px;font-weight:700;background:var(--x-acB);color:var(--x-on-acB);padding:1px 8px;border-radius:99px}
.xcmp-rows a{display:flex;gap:4px;align-items:center;color:var(--x-acB);font-weight:600;font-size:13.5px}
.xcmp-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.xcmp-f svg{width:120px;height:34px}
.xcmp-f path{fill:none;stroke:#178A4C;stroke-width:2.5;vector-effect:non-scaling-stroke}
.xcmp-f .xb{padding:.55em 1.1em;font-size:13.5px}
.xdisc-note{font-size:12.5px;color:var(--x-muted);text-align:center;margin-top:14px}
.xprods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.xprod{display:grid;gap:10px;align-content:start}
.xprod-im{position:relative;border-radius:var(--x-r);overflow:hidden;background:var(--x-soft)}
.xprod-im>.xim{aspect-ratio:1;border-radius:0;transition:transform .5s}
.xprod:hover .xprod-im>.xim{transform:scale(1.05)}
.xprod-alt{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.xprod-alt svg{width:100%;height:100%}
.xprod.swap:hover .xprod-alt{opacity:1}
.xtag.hot{background:#D9412F;color:#fff}
.xwish{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:50%;background:var(--x-surfaceB);color:var(--x-inkB);display:grid;place-items:center;box-shadow:0 4px 12px -4px rgba(0,0,0,.25);z-index:2;transition:.2s}
.xwish.on{color:#D9412F}.xwish.on .i{fill:currentColor}
.xquick{position:absolute;inset:auto 10px 10px 10px;display:flex;justify-content:center;gap:8px;align-items:center;background:var(--x-inkB);color:var(--x-bgB);border-radius:calc(var(--x-r)*.7);padding:10px;font-weight:600;font-size:14px;transform:translateY(130%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:2}
.xprod:hover .xquick{transform:none}
.xprod-b{display:grid;gap:4px}
.xprod-b>b{font-size:15.5px;font-weight:600;line-height:1.5}
.xprod-r{display:flex;gap:6px;align-items:center;font-size:13px}
.xprod-r .xstars{font-size:13px}
.xprod.min .xprod-im{background:transparent}
.xprod.min .xprod-b{justify-items:center;text-align:center}
.xstore-b{position:absolute;bottom:10px;right:10px;background:var(--x-inkB);color:var(--x-bgB);font-size:12px;font-weight:700;padding:2px 10px;border-radius:6px}
.xplist{display:grid;gap:12px}
.xpl{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px}
.xpl-im{aspect-ratio:1;border-radius:calc(var(--x-r)*.8)}
.xpl>div{display:grid;gap:4px}
.xpl-p{justify-items:end}
.xpl .xb{padding:.6em 1.2em;font-size:14px}
.xpp{align-items:start}
.xgal{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px}
.xgal-main{grid-column:2;grid-row:1}
.xgal-main .xim{aspect-ratio:1}
.xgal-th{grid-column:1;grid-row:1;display:grid;gap:8px;align-content:start}
.xgal-th button{border-radius:12px;overflow:hidden;border:2px solid transparent;opacity:.7}
.xgal-th button.on{border-color:var(--x-ac);opacity:1}
.xgal-th .xim{aspect-ratio:1;border-radius:10px}
.xpp .xprice{margin-block:8px}
.xpp-opt{display:grid;gap:6px;margin-top:16px}
.xpp-buy{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.xqty{display:flex;align-items:center;border:1.5px solid var(--x-line);border-radius:calc(var(--x-r)*.75)}
.xqty button{width:42px;height:46px;font-size:20px}
.xqty b{min-width:30px;text-align:center}
.xpp-info{display:grid;gap:8px;margin-top:18px;padding:16px;border-radius:var(--x-r);background:var(--x-soft);font-size:14px}
.xpp-info span{display:flex;gap:8px;align-items:center}
.xpp-info .i{color:var(--x-ac)}
.xpp-tabs{margin-top:20px;display:grid;gap:12px}
.xtabs-l.row{display:flex;gap:6px;border-bottom:1px solid var(--x-line);padding-bottom:8px}
.xtabs-l.row button{padding:8px 14px}
.xpp-center{max-width:620px;margin-inline:auto;display:grid;justify-items:center;text-align:center;gap:6px}
.xpp-c-im{width:min(360px,80cqi);aspect-ratio:1}
.xpp-center .xpp-buy,.xpp-center .xpick{justify-content:center}
.xpp-center .xpp-info{text-align:right;width:100%}
.xcatcircles{display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.xcatcircles a{display:grid;justify-items:center;gap:10px;width:130px;text-align:center}
.xcircle{width:120px;height:120px;border-radius:50%;transition:transform .35s,box-shadow .35s;box-shadow:0 0 0 4px var(--x-bg),0 0 0 6px transparent}
.xcatcircles a:hover .xcircle{transform:translateY(-6px);box-shadow:0 0 0 4px var(--x-bg),0 0 0 6px var(--x-ac)}
.xcattiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.xcattile{position:relative;border-radius:calc(var(--x-r) + 4px);overflow:hidden;min-height:200px;display:block}
.xcattile .xim{position:absolute;inset:0;border-radius:0;transition:transform .5s}
.xcattile:hover .xim{transform:scale(1.06)}
.xcattile b{position:absolute;bottom:40px;right:18px;font-family:var(--x-fd);font-size:22px}
.xcattile span{position:absolute;bottom:16px;right:18px;color:var(--x-muted);font-size:13px}
.xcatpills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.xcatpills a{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;border:1.5px solid var(--x-line);font-weight:600;transition:.2s}
.xcatpills a:hover{background:var(--x-ac);color:var(--x-on-ac);border-color:var(--x-ac)}
.xcatpills small{background:var(--x-soft);color:var(--x-ink);border-radius:99px;padding:0 8px;font-size:12px}
.xdeal-cd{display:grid;gap:4px;justify-items:end}
.xdotd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;padding:30px;align-items:center}
.xdotd-im{aspect-ratio:1}
.xdotd>div{display:grid;gap:10px;justify-items:start}
.xstorecmp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px;gap:8px;max-width:980px;margin-inline:auto}
.xstorecmp>div{display:grid;justify-items:center;gap:6px;padding:22px 12px;border-radius:var(--x-r);text-align:center;position:relative}
.xstorecmp>div.best{background:color-mix(in srgb,var(--x-acB) 10%,transparent);box-shadow:inset 0 0 0 2px var(--x-acB)}
.xstorecmp>div.out{opacity:.55}
.xst-n{font-family:var(--x-fd);font-size:20px}
.xst-r{display:flex;gap:4px;align-items:center;color:#E8A317;font-size:13px}
.xst-p{font-family:var(--x-fd);font-size:26px;color:var(--x-acB)}
.xstorecmp em{position:absolute;top:-10px;font-style:normal;font-size:12px;font-weight:700;background:var(--x-acB);color:var(--x-on-acB);padding:1px 10px;border-radius:99px}
.xstorecmp .xb{padding:.55em 1.1em;font-size:13.5px}
.xtop{display:grid;gap:12px}
.xtop-i{display:grid;grid-template-columns:44px 110px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px}
.xtop-n{width:44px;height:44px;border-radius:12px;background:var(--x-ink);color:var(--x-bg);display:grid;place-items:center;font-family:var(--x-fd);font-size:20px;font-weight:700}
.xtop-i:first-child .xtop-n{background:var(--x-ac2B);color:var(--x-on-ac2)}
.xtop-im{aspect-ratio:1}
.xtop-i>div{display:grid;gap:4px;justify-items:start}
.xtop-i>div>b{font-family:var(--x-fd);font-size:18px}
.xtop-i .xtop-p{justify-items:end}
.xtop-p>b{font-family:var(--x-fd);font-size:22px;color:var(--x-ac)}
.xtop-p .xb{padding:.55em 1.1em;font-size:13.5px}
.xaffbox{display:grid;grid-template-columns:200px minmax(0,1fr) 220px;gap:24px;padding:24px;align-items:center}
.xaff-im{aspect-ratio:1}
.xaff-b{display:grid;gap:10px;justify-items:start}
.xproscons{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.xproscons>div{display:grid;gap:6px;padding:12px;border-radius:12px;background:var(--x-soft);font-size:14px}
.xproscons span{display:flex;gap:6px;align-items:center}
.xproscons .y .i{color:#178A4C}.xproscons .n .i{color:#D9412F}
.xaff-p{display:grid;gap:8px;justify-items:center;text-align:center;padding:18px;border-radius:var(--x-r);background:var(--x-soft)}
.xaff-p>b{font-family:var(--x-fd);font-size:32px;color:var(--x-ac)}
.xaff-p .xb{width:100%}
.xrev{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}
.xrev-sum{padding:24px;display:grid;gap:8px;justify-items:center;text-align:center}
.xrev-sum>b{font-family:var(--x-fd);font-size:56px;line-height:1}
.xrev-bar{display:grid;grid-template-columns:36px 1fr 36px;gap:8px;align-items:center;width:100%;font-size:13px}
.xrev-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.xrev-list .xcard{padding:18px}
.xrev-h{display:grid;grid-template-columns:40px 1fr;gap:4px 10px;align-items:center}
.xrev-h .xini{width:40px;height:40px;border-radius:12px;font-size:16px;grid-row:span 2}
.xrev-h .xstars{grid-column:2;font-size:13px}
.xok{display:flex;gap:4px;align-items:center;color:#178A4C;font-size:12px}
.xrev-ph .xim{aspect-ratio:16/9;border-radius:10px}
.xfreeship{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 24px}
.xfreeship>div{display:grid;gap:10px}

/* ===== النماذج ===== */
.xf{display:grid;gap:4px}
.xf .xb{margin-top:6px}
.xin{font:inherit;font-size:15px;padding:12px 14px;border-radius:calc(var(--x-r)*.7);border:1.5px solid var(--x-line);background:var(--x-bg);color:var(--x-ink);width:100%}
.xphone{display:flex;border:1.5px solid var(--x-line);border-radius:calc(var(--x-r)*.7);overflow:hidden;background:var(--x-bg);direction:ltr}
.xphone span{padding:11px 12px;background:var(--x-soft);color:var(--x-ink);font-weight:600}
.xphone input{border:0;border-radius:0;flex:1;min-width:0}
.xconsent{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--x-muted);margin-block:4px}
.xconsent input{accent-color:var(--x-acB);margin-top:4px}
.xf-done{display:grid;justify-items:center;text-align:center;gap:8px;padding:24px;animation:x-zoom .5s both}
.xf-done>span{width:68px;height:68px;border-radius:50%;background:#178A4C;color:#fff;display:grid;place-items:center}
.xf-done>span .i{width:34px;height:34px;stroke-width:2.6}
.xf-done>b{font-family:var(--x-fd);font-size:20px}
.xlm{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;padding:36px;align-items:center}
.xlm .xhead{margin-bottom:18px}
.xlm-art{display:grid;place-items:center;perspective:1000px;min-height:300px;background:radial-gradient(circle,var(--x-soft),transparent 70%)}
.xbook.small{width:min(200px,46cqi)}
.xbook.small .xbook-c b{font-size:22px}
.xms{max-width:640px;margin-inline:auto;padding:30px;display:grid;gap:16px}
.xms-top{display:grid;gap:10px}
.xms-top>b{font-family:var(--x-fd);font-size:20px}
.xms-steps{display:flex;gap:8px}
.xms-steps i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;background:var(--x-soft);color:var(--x-muted);transition:.3s}
.xms-steps i.on{background:var(--x-ac);color:var(--x-on-ac)}
.xms .xbar i,.xquiz-bar i{transition:width .5s}
.xms-pane{display:grid;gap:10px;animation:x-slide .4s both}
.xms-pane[hidden],.xquiz-q[hidden],.xquiz-res[hidden],.xspin-res[hidden]{display:none}
.xquiz{max-width:640px;margin-inline:auto;padding:30px;display:grid;gap:16px;position:relative}
.xquiz-q,.xquiz-res{display:grid;gap:12px;animation:x-slide .4s both}
.xquiz-q>b,.xquiz-res>b{font-family:var(--x-fd);font-size:22px}
.xquiz-o{display:grid;gap:8px}
.xquiz-o button{text-align:right;padding:14px 18px;border-radius:var(--x-r);border:1.5px solid var(--x-line);font-weight:600;transition:.2s}
.xquiz-o button:hover{border-color:var(--x-ac);background:color-mix(in srgb,var(--x-ac) 8%,transparent)}
.xweb{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;padding:32px;align-items:center}
.xweb-i{display:grid;gap:14px;justify-items:start}
.xlive{display:flex;align-items:center;gap:8px;font-weight:700;color:#D9412F;font-size:14px}
.xlive i{width:10px;height:10px;border-radius:50%;background:#D9412F;animation:x-ping 1.4s infinite}
.xweb-host{display:flex;gap:12px;align-items:center}
.xweb-host>div{display:grid}
.xweb .xf{padding:22px;border-radius:var(--x-r);background:var(--x-soft)}
.xweb .xf>b{font-family:var(--x-fd);font-size:18px;margin-bottom:4px}
.xwaopt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:30px;padding:32px;align-items:center;max-width:900px;margin-inline:auto}
.xwaopt>div:first-child{display:grid;gap:10px;justify-items:start}
.xwaopt .xf{width:100%}
.xqr{display:grid;justify-items:center;gap:8px}
.xqr-c{width:170px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 14px 30px -18px rgba(0,0,0,.4)}
.xqr-c svg{width:100%;display:block}
.xspin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;padding:32px;align-items:center;max-width:900px;margin-inline:auto}
.xspin>div:last-child{display:grid;gap:12px;justify-items:start}
.xspin .xf{width:100%}
.xwheel-w{position:relative;width:min(300px,70cqi);aspect-ratio:1;margin-inline:auto}
.xwheel-w.sm{width:200px}
.xwheel{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 8px var(--x-inkB),0 20px 40px -20px rgba(0,0,0,.5)}
.xwheel svg{width:100%;height:100%;display:block}
.xwheel text{font-size:10px;font-weight:700;font-family:var(--x-fb)}
.xwheel-p{position:absolute;top:-14px;left:50%;margin-left:-14px;width:28px;height:34px;background:var(--x-inkB);clip-path:polygon(0 0,100% 0,50% 100%);z-index:2}
.xspin-res{display:grid;gap:4px;padding:14px;border-radius:var(--x-r);background:color-mix(in srgb,#178A4C 12%,transparent);width:100%;animation:x-zoom .5s both}
.xspin-res code{font-size:22px;font-weight:700;letter-spacing:2px;color:var(--x-acB)}
.xinbar{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:center;padding:18px 22px;border-radius:calc(var(--x-r) + 4px);background:var(--x-soft)}
.xinbar>div{display:grid}

/* ===== النوافذ المنبثقة ===== */
.xpop-layer{position:absolute;inset:0;z-index:60;display:grid;place-items:center;padding:16px;animation:x-fade .3s both}
.xpop-layer.fixed{position:fixed;z-index:400}
.xpop-layer.dim{background:rgba(8,12,16,.55);backdrop-filter:blur(3px)}
.xpop-layer.corner{place-items:end start;pointer-events:none}
.xpop-layer.corner>*{pointer-events:auto}
.xpop-layer.top{place-items:start stretch;padding:0;pointer-events:none}
.xpop-layer.top>*{pointer-events:auto}
.xpop-layer.bottom{place-items:end stretch;padding:0}
.xpop-layer.full{padding:0}
.xpop-layer.out{opacity:0;transition:opacity .25s}
@keyframes x-fade{from{opacity:0}}
.xpop{position:relative;background:var(--x-surfaceB);color:var(--x-inkB);border-radius:calc(var(--x-r) + 6px);box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:x-zoom .4s cubic-bezier(.3,1.4,.5,1) both;--x-ink:var(--x-inkB);--x-bg:var(--x-surfaceB);--x-muted:color-mix(in srgb,var(--x-inkB) 62%,var(--x-surfaceB));--x-line:color-mix(in srgb,var(--x-inkB) 13%,var(--x-surfaceB));--x-ac:var(--x-acB);--x-on-ac:var(--x-on-acB)}
.xpop-x{position:absolute;top:10px;left:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--x-inkB) 8%,transparent);z-index:3}
.xp-modal{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);width:min(680px,100%);overflow:hidden}
.xp-modal-im svg{width:100%;height:100%;display:block}
.xp-modal-b{padding:30px 26px;display:grid;gap:10px;align-content:center}
.xp-exit{width:min(420px,100%);padding:34px 28px;display:grid;gap:10px;justify-items:center;text-align:center}
.xp-emoji{width:70px;height:70px;border-radius:50%;background:var(--x-ac2B);color:var(--x-on-ac2);display:grid;place-items:center;animation:x-wig 2s infinite}
.xp-emoji .i{width:34px;height:34px}
.xp-code{display:flex;gap:8px;align-items:center;border:2px dashed var(--x-acB);border-radius:12px;padding:8px 8px 8px 16px}
.xp-code code{font-size:22px;font-weight:800;letter-spacing:2px;color:var(--x-acB);flex:1}
.xp-slide{width:min(380px,calc(100% - 20px));display:grid;grid-template-columns:110px 1fr;gap:14px;padding:16px;margin:16px;animation:x-slidein .5s cubic-bezier(.3,1.3,.5,1) both}
@keyframes x-slidein{from{transform:translateY(40px);opacity:0}}
.xp-slide-im{border-radius:12px;overflow:hidden;background:var(--x-softB)}
.xp-slide-im svg{width:100%;height:100%}
.xp-slide>div:last-child{display:grid;gap:6px}
.xp-top{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;background:var(--x-inkB);color:var(--x-bgB);padding:10px 56px 10px 16px;position:relative;animation:x-drop .4s both;--x-ink:var(--x-bgB);--x-bg:var(--x-inkB);--x-line:rgba(127,127,127,.35)}
@keyframes x-drop{from{transform:translateY(-100%)}}
.xp-top .xnl{padding:4px}
.xp-top .xpop-x{background:rgba(127,127,127,.25);color:inherit;top:50%;transform:translateY(-50%)}
.xp-top span{display:flex;gap:6px;align-items:center;font-weight:600}
.xp-full{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:14px;padding:30px;background:linear-gradient(150deg,var(--x-acB),color-mix(in srgb,var(--x-acB) 45%,#000));color:#fff;--x-ink:#fff;--x-muted:rgba(255,255,255,.8);--x-ac:var(--x-ac2B);--x-on-ac:var(--x-on-ac2);--x-line:rgba(255,255,255,.3);--x-bg:rgba(255,255,255,.1)}
.xp-full .xkick{background:rgba(255,255,255,.15);color:#fff}
.xp-full .xf{width:min(420px,100%)}
.xp-full .xpop-x{color:#fff;background:rgba(255,255,255,.15);top:16px;left:16px}
.xp-sheet{width:100%;border-radius:24px 24px 0 0;padding:14px 20px 22px;display:grid;gap:12px;animation:x-up .45s cubic-bezier(.3,1.2,.5,1) both}
@keyframes x-up{from{transform:translateY(100%)}}
.xp-grab{width:44px;height:5px;border-radius:5px;background:var(--x-line);margin-inline:auto}
.xp-chat{width:min(340px,calc(100% - 20px));margin:16px;overflow:hidden;animation:x-slidein .5s both}
.xp-chat-h{display:flex;gap:10px;align-items:center;padding:14px 16px;background:var(--x-acB);color:var(--x-on-acB)}
.xp-chat-h>div{display:grid}.xp-chat-h small{opacity:.8;font-size:12px}
.xp-chat .xpop-x{background:rgba(255,255,255,.2);color:var(--x-on-acB)}
.xp-chat-b{padding:14px;display:grid;gap:8px;background:var(--x-softB)}
.xp-chat-b span{background:var(--x-surfaceB);padding:9px 12px;border-radius:12px 12px 12px 4px;font-size:14px;max-width:88%;justify-self:start;animation:x-rise .5s both}
.xp-chat-b span:nth-child(2){animation-delay:.6s}
.xp-chat-f{display:flex;gap:8px;padding:10px}
.xp-chat-f input{flex:1;min-width:0;font:inherit;padding:10px 12px;border-radius:99px;border:1.5px solid var(--x-line);background:var(--x-bg);color:var(--x-ink)}
.xp-chat-f .xb{padding:0;width:44px;height:44px;border-radius:50%}
.xp-spin{width:min(400px,100%);padding:28px;display:grid;gap:12px;justify-items:center;text-align:center}
.xp-spin .xf{width:100%}

@container sx (max-width:900px){
  .xstorefront,.xdealhero,.xcmpcard,.xaffbox,.xrev,.xdotd,.xlm,.xweb,.xwaopt,.xspin{grid-template-columns:minmax(0,1fr)}
  .xsf-main{grid-template-columns:minmax(0,1fr);padding:30px;min-height:0}
  .xsf-side{grid-template-columns:1fr 1fr}
  .xprods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xstorecmp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xrev-list{grid-template-columns:minmax(0,1fr)}
  .xcmp-im{max-width:220px}
  .xp-modal{grid-template-columns:minmax(0,1fr)}.xp-modal-im{height:150px}
}
@container sx (max-width:560px){
  .xdh-cards{grid-template-columns:minmax(0,1fr)}
  .xcattiles{grid-template-columns:1fr 1fr}
  .xpl{grid-template-columns:90px minmax(0,1fr)}.xpl-p{grid-column:1/-1;justify-items:stretch}
  .xtop-i{grid-template-columns:36px 80px minmax(0,1fr)}.xtop-i .xtop-p{grid-column:1/-1;justify-items:stretch}
  .xcmp-rows>div{grid-template-columns:1fr auto}.xcmp-rows>div a,.xcmp-rows em{display:none}
  .xinbar{grid-template-columns:minmax(0,1fr)}
  .xproscons{grid-template-columns:minmax(0,1fr)}
  .xgal{grid-template-columns:minmax(0,1fr)}.xgal-th{grid-row:2;grid-column:1;display:flex}.xgal-th button{width:64px}
  .xfreeship{grid-template-columns:minmax(0,1fr)}
  .xquick{transform:none;position:static;margin:8px}
  .xlm,.xms,.xquiz,.xweb,.xwaopt,.xspin,.xsf-main{padding:22px}
}
.xf-err{border-color:#D9412F!important;box-shadow:0 0 0 3px color-mix(in srgb,#D9412F 18%,transparent)!important}
/* النموذج المخصص */
.xcf{padding:28px}
.xcf select{font:inherit;font-size:15px;color:var(--x-ink);padding:11px 14px;border-radius:calc(var(--x-r)*.7);border:1.5px solid var(--x-line);background:var(--x-bg);width:100%}
.xreq{color:#D9412F;font-style:normal}
.xmulti button.on{background:var(--x-ac);color:var(--x-on-ac);border-color:var(--x-ac)}
.xfile{position:relative;display:grid;gap:2px;justify-items:center;padding:18px;border:2px dashed var(--x-line);border-radius:var(--x-r);text-align:center;cursor:pointer}
.xfile input{position:absolute;inset:0;opacity:0;cursor:pointer}
.xfile b{display:flex;gap:6px;align-items:center;color:var(--x-ac)}
.xfile.has b{color:#178A4C}
.xrate-in{display:flex;gap:4px;direction:ltr;justify-content:flex-end}
.xrate-in button{font-size:28px;line-height:1;color:color-mix(in srgb,var(--x-ink) 20%,transparent);transition:transform .15s,color .15s}
.xrate-in button.on{color:#E8A317}
.xrate-in button:hover{transform:scale(1.15)}
.xamt-in{grid-column:1/-1}
.xconsent.full{grid-column:1/-1}
.xconsent.xf-err{color:#D9412F}