:root{
  color-scheme:light;
  --bg:#F2F5FB; --bg2:#F8FAFD;
  --surf:#FFFFFF; --surf2:#F1F5FC; --surf3:#E3ECF8;
  --line:rgba(22,29,64,.10); --line2:rgba(22,29,64,.18);
  --ink:#161D40; --ink2:#3C4670; --ink3:#7C86A8; --on-brand:#FFFFFF;
  --brand:#1565C0; --brand-2:#42A5F5; --brand-deep:#0D47A1; --brand-soft:#E8F1FC;
  --brand-rgb:21,101,192;
  --red:#C62828; --navy:#161D40;
  --grad:linear-gradient(135deg,#1E88E5 0%,#1565C0 48%,#161D40 100%);
  --ok:#0E9F6E; --ok-soft:#E3F7EF;
  --hot:#C62828; --hot-soft:#FDECEC;
  --sh-s:0 2px 8px -2px rgba(22,29,64,.12);
  --sh-m:0 10px 26px -12px rgba(22,29,64,.28);
  --sh-l:0 26px 60px -26px rgba(22,29,64,.36);
  --sh-brand:0 14px 34px -14px rgba(var(--brand-rgb),.55);
  --r-xl:30px; --r-lg:22px; --r-md:16px; --r-sm:11px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1026; --bg2:#10163A;
  --surf:#161D40; --surf2:#1C2550; --surf3:#243063;
  --line:rgba(144,202,249,.12); --line2:rgba(144,202,249,.22);
  --ink:#EEF3FF; --ink2:#B8C4E6; --ink3:#7F8BB3; --on-brand:#FFFFFF;
  --brand:#42A5F5; --brand-2:#90CAF9; --brand-deep:#64B5F6; --brand-soft:#1A2A5C;
  --brand-rgb:66,165,245;
  --grad:linear-gradient(135deg,#42A5F5 0%,#1565C0 55%,#161D40 100%);
  --ok:#34D399; --ok-soft:#0D2A22;
  --hot:#EF5350; --hot-soft:#2E1512;
  --sh-s:0 2px 8px -2px rgba(0,0,0,.5);
  --sh-m:0 10px 26px -12px rgba(0,0,0,.7);
  --sh-l:0 26px 60px -26px rgba(0,0,0,.85);
  --sh-brand:0 14px 34px -14px rgba(var(--brand-rgb),.45);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:"Cairo",-apple-system,system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  min-height:100dvh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:15px;line-height:1.62;
  transition:background .35s var(--ease),color .35s var(--ease);
}
body.locked{overflow:hidden}
.dsp{font-family:"Cairo",sans-serif;letter-spacing:-.02em;font-weight:800}
.num{font-variant-numeric:tabular-nums}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:10px}
.i{display:block;flex:none}

.app{max-width:560px;margin:0 auto;position:relative;min-height:100dvh;
  padding-bottom:calc(112px + var(--safe-b))}
.aura{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 30% at 50% -8%, rgba(var(--brand-rgb),.18), transparent 72%),
    radial-gradient(40% 22% at 92% 8%, rgba(var(--brand-rgb),.08), transparent 70%)}

.boot{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:var(--grad);transition:opacity .45s ease,transform .45s ease}
.boot.gone{opacity:0;transform:scale(1.08);pointer-events:none}
.boot-badge{width:152px;height:152px;border-radius:50%;background:#111;display:grid;
  place-items:center;box-shadow:0 26px 60px -18px rgba(0,0,0,.45);
  animation:bootIn .7s var(--spring) both;overflow:hidden}
.boot-badge img{width:104px;height:104px;object-fit:contain}
.boot-letter{font-size:56px;font-weight:800;color:var(--brand-deep)}
@keyframes bootIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

.hdr{position:sticky;top:0;z-index:70;padding:calc(var(--safe-t) + 10px) 16px 10px;
  display:flex;align-items:center;gap:10px;border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s,box-shadow .3s}
.hdr.stuck{background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom-color:var(--line)}
.mark{width:40px;height:40px;border-radius:50%;flex:none;box-shadow:var(--sh-brand);
  background:#111;display:grid;place-items:center;overflow:hidden;color:var(--on-brand);font-weight:800}
.mark img{width:100%;height:100%;object-fit:cover}
.hbrand{display:none}
.loc{flex:1;min-width:0;text-align:start;display:flex;flex-direction:column;gap:1px;padding:2px 4px;border-radius:12px}
.loc-l{font-size:10.5px;color:var(--ink3);font-weight:600;display:flex;align-items:center;gap:4px}
.loc-v{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-s{font-size:11px;font-weight:600;color:var(--ink3);line-height:1.35}
.fx-cur{display:none!important}
.ib{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh-s);color:var(--ink2);
  transition:transform .18s var(--spring),background .2s}
.ib:active{transform:scale(.88);background:var(--surf3)}
.donly{display:none}
.hsearch input{font-size:13.5px}

.rail{display:flex;gap:10px;overflow-x:auto;padding:14px 16px 4px;scrollbar-width:none;
  scroll-snap-type:x proximity;position:relative;z-index:1}
.rail::-webkit-scrollbar{display:none}
.tcard{flex:none;width:108px;scroll-snap-align:center;border-radius:var(--r-lg);padding:12px 8px 10px;
  background:var(--surf);border:1.5px solid var(--line);box-shadow:var(--sh-s);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:transform .26s var(--spring),border-color .26s,box-shadow .26s,background .26s}
.tcard:active{transform:scale(.94)}
.tcard .em{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;
  background:var(--surf3);color:var(--brand-deep);transition:background .26s,transform .3s var(--spring),color .26s}
.tcard .tb{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.tcard .lb{font-size:12.5px;font-weight:800;color:var(--ink2);transition:color .26s;text-align:center}
.tcard .sub{display:none}
.tcard[aria-selected="true"]{border-color:transparent;background:var(--grad);box-shadow:var(--sh-brand)}
.tcard[aria-selected="true"] .em{background:rgba(255,255,255,.28);transform:scale(1.06);color:var(--on-brand)}
.tcard[aria-selected="true"] .lb{color:var(--on-brand)}
.tdesc{display:flex;align-items:center;justify-content:center;gap:7px;margin:6px 16px 0;
  font-size:12.5px;font-weight:700;color:var(--ink2);position:relative;z-index:1}
.tdesc svg{color:var(--brand-deep)}

.ticker{position:relative;z-index:2;overflow:hidden;background:var(--grad);
  padding:9px 0;box-shadow:var(--sh-brand);direction:ltr;margin-top:12px}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:34px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,rgba(13,71,161,.92),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,rgba(13,71,161,.92),transparent)}
.tk-in{display:flex;width:max-content;animation:marq 28s linear infinite}
.tk-in:hover{animation-play-state:paused}
.tk-i{display:flex;align-items:center;gap:8px;padding:0 22px;color:var(--on-brand);font-size:12.5px;
  font-weight:700;white-space:nowrap;direction:rtl}
.tk-sep{width:4px;height:4px;border-radius:50%;background:rgba(22,29,64,.35);flex:none}
.live{width:7px;height:7px;border-radius:50%;background:#0E9F6E;box-shadow:0 0 0 0 rgba(14,159,110,.7);animation:live 1.8s ease-out infinite}
@keyframes live{70%{box-shadow:0 0 0 7px rgba(14,159,110,0)}100%{box-shadow:0 0 0 0 rgba(14,159,110,0)}}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:26px 16px 12px;position:relative;z-index:1}
.sec-t{font-size:18.5px;font-weight:800;display:flex;align-items:center;gap:8px}

.crail{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 8px;scrollbar-width:none;
  position:relative;z-index:1;scroll-snap-type:x proximity}
.crail::-webkit-scrollbar{display:none}
.ctile{flex:none;width:108px;scroll-snap-align:center;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh-s);
  display:flex;flex-direction:column;align-items:center;padding:0 0 10px;
  transition:transform .24s var(--spring),border-color .24s,box-shadow .24s}
.ctile:active{transform:scale(.93)}
.ctile.on{border-color:transparent;background:var(--grad);box-shadow:var(--sh-brand)}
.ctile.on .nm,.ctile.on .ct{color:var(--on-brand)}
.ctile .cimg{width:108px;height:86px;object-fit:cover;background:var(--surf3)}
.ctile .ph{width:108px;height:86px;display:grid;place-items:center;color:var(--brand-deep);
  background:linear-gradient(150deg,var(--brand-soft),var(--surf3));font-size:28px;font-weight:800}
.ctile.on .ph{background:rgba(255,255,255,.2);color:var(--on-brand)}
.ctile .nm{font-size:12px;font-weight:800;text-align:center;line-height:1.35;padding:9px 7px 0}
.ctile .ct{font-size:10px;color:var(--ink3);font-weight:700}

.feat{display:flex;gap:12px;overflow-x:auto;padding:0 16px 6px;scrollbar-width:none;position:relative;z-index:1}
.feat::-webkit-scrollbar{display:none}
.fc{flex:none;width:168px;border-radius:var(--r-lg);overflow:hidden;background:var(--surf);
  border:1px solid var(--line);box-shadow:var(--sh-s);text-align:start;
  transition:transform .2s var(--spring),box-shadow .2s}
.fc:active{transform:scale(.96)}
.fc-img,.fc-ph{width:100%;aspect-ratio:1/.86;object-fit:cover;background:var(--surf3)}
.fc-ph{display:grid;place-items:center;color:var(--ink3);font-size:32px;font-weight:800;
  background:linear-gradient(150deg,var(--brand-soft),var(--surf3))}
.fc-b{padding:10px 12px 12px}
.fc-n{font-size:13.5px;font-weight:800;line-height:1.35;margin-bottom:6px;min-height:36px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fc-f{display:flex;align-items:center;justify-content:space-between;gap:6px}
.fc-p,.it-p{font-weight:800;color:var(--brand-deep)}

.chips{position:sticky;top:calc(var(--safe-t) + 58px);z-index:55;padding:9px 16px;
  display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 15px;border-radius:99px;font-size:12.5px;font-weight:800;
  background:var(--surf);border:1px solid var(--line);color:var(--ink2);white-space:nowrap;
  transition:all .24s var(--ease)}
.chip.on{background:var(--grad);color:var(--on-brand);border-color:transparent;box-shadow:var(--sh-brand)}

.cat{padding:0 16px;position:relative;z-index:1;scroll-margin-top:130px}
.cat-t{font-size:17px;font-weight:800;padding:24px 0 12px;display:flex;align-items:center;gap:8px}
.cat-t i{width:4px;height:17px;border-radius:99px;background:var(--grad);display:block}
.list{display:flex;flex-direction:column;gap:11px}
.it{display:flex;gap:13px;padding:11px;border-radius:var(--r-lg);background:var(--surf);
  border:1px solid var(--line);box-shadow:var(--sh-s);position:relative;width:100%;text-align:start;
  transition:transform .2s var(--spring),box-shadow .2s,border-color .2s}
.it:active{transform:scale(.985)}
.it-img,.it-ph{width:92px;height:92px;border-radius:var(--r-md);object-fit:cover;flex:none;background:var(--surf3)}
.it-ph{display:grid;place-items:center;font-size:28px;font-weight:800;color:var(--brand-deep);
  background:linear-gradient(150deg,var(--brand-soft),var(--surf3))}
.it-b{flex:1;min-width:0;display:flex;flex-direction:column;padding:3px 0}
.it-n{font-size:14.5px;font-weight:800;line-height:1.35;margin-bottom:3px}
.it-d{font-size:11.5px;color:var(--ink2);line-height:1.5;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.it-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
.add{width:36px;height:36px;border-radius:12px;background:var(--grad);color:var(--on-brand);display:grid;
  place-items:center;flex:none;box-shadow:var(--sh-brand);transition:transform .2s var(--spring)}
.add:active{transform:scale(.86)}

.rev{opacity:0}
.rev.in{animation:rise .55s var(--ease) forwards}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.nav{position:fixed;bottom:0;right:0;left:0;z-index:80;
  padding:8px 10px calc(8px + var(--safe-b));
  background:color-mix(in srgb, var(--surf) 88%, transparent);
  backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(22,29,64,.30)}
.nav-in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:2px}
.nb{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:14px;
  color:var(--ink3);transition:color .24s var(--ease)}
.nb .ic{transition:transform .3s var(--spring);display:grid;place-items:center;height:22px}
.nb .tx{font-size:10.5px;font-weight:800}
.nb.on{color:var(--brand-deep)}
.nb.on .ic{transform:translateY(-2px) scale(1.12)}
.nb:active .ic{transform:scale(.86)}
.fab{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
.fab-b{width:56px;height:56px;border-radius:20px;background:var(--grad);color:var(--on-brand);display:grid;
  place-items:center;box-shadow:var(--sh-brand);margin-top:-22px;border:4px solid var(--surf);
  transition:transform .24s var(--spring)}
.fab-b:active{transform:scale(.9)}
.fab-b.full{animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.07)}96%{transform:scale(.98)}}
.fab .tx{font-size:10.5px;font-weight:800;color:var(--brand-deep)}
.cbadge{position:absolute;top:-26px;inset-inline-start:8px;min-width:21px;height:21px;padding:0 6px;border-radius:99px;
  background:var(--hot);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;
  border:2.5px solid var(--surf);opacity:0;transform:scale(.4);transition:transform .34s var(--spring),opacity .2s}
.cbadge.on{opacity:1;transform:scale(1)}

.scrim{position:fixed;inset:0;z-index:100;background:rgba(22,29,64,.46);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);backdrop-filter:blur(3px)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;right:0;left:0;bottom:0;z-index:101;max-width:560px;margin:0 auto;
  background:var(--surf);border-radius:26px 26px 0 0;box-shadow:var(--sh-l);
  transform:translateY(101%);transition:transform .42s var(--spring);
  max-height:92dvh;display:flex;flex-direction:column;overscroll-behavior:contain}
.sheet.on{transform:translateY(0)}
.grab{padding:11px 0 4px;display:grid;place-items:center;flex:none;cursor:grab}
.grab i{width:38px;height:4.5px;border-radius:99px;background:var(--line2);display:block}
.sh-h{padding:4px 16px 12px;display:flex;align-items:center;gap:10px;flex:none}
.sh-t{flex:1;font-size:17.5px;font-weight:800;min-width:0}
.sh-x{width:34px;height:34px;border-radius:11px;background:var(--surf3);display:grid;place-items:center;
  color:var(--ink2);flex:none;transition:transform .18s var(--spring)}
.sh-x:active{transform:scale(.88)}
.sh-b{padding:0 16px 12px;overflow:auto;flex:1}
.sh-f{padding:8px 16px calc(14px + var(--safe-b));flex:none;border-top:1px solid var(--line);background:var(--surf)}
.sphoto{width:100%;height:220px;object-fit:cover;border-radius:18px;background:var(--surf3);margin-bottom:12px}
.sprice{font-size:20px;font-weight:800;color:var(--brand-deep);margin:4px 0 8px}
.sdesc{color:var(--ink2);font-size:13.5px;margin-bottom:10px}
.mods{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.mod{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:14px;background:var(--surf2);text-align:start;
  transition:border-color .2s,background .2s,transform .18s var(--spring)}
.mod.on{border-color:var(--brand);background:var(--brand-soft)}
.mod:active{transform:scale(.98)}
.qty{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0}
.qty button,.stp button{width:38px;height:38px;border-radius:12px;background:var(--surf3);font-size:22px;font-weight:800;
  transition:transform .18s var(--spring)}
.qty button:active,.stp button:active{transform:scale(.88)}
.qty b{min-width:24px;text-align:center;font-size:18px}
.field{width:100%;border:1px solid var(--line);background:var(--bg2);border-radius:14px;padding:12px 14px;margin-top:8px}
.btn{width:100%;border-radius:16px;padding:14px;background:var(--grad);color:var(--on-brand);
  font-weight:800;box-shadow:var(--sh-brand);transition:transform .18s var(--spring)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6}
.err{color:var(--hot);font-size:13px;font-weight:700;margin-top:8px;min-height:1.2em}
.okbox{text-align:center;padding:28px 8px}
.okbox h2{font-size:22px;margin-bottom:6px}
.line{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.line .nm{flex:1;min-width:0}
.line .nm small{display:block;color:var(--ink3);font-weight:600}
.rm{color:var(--hot);font-size:12px;font-weight:800}

.dside{display:none}
.cl{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.cl-img,.cl-ph{width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none;background:var(--surf3)}
.cl-ph{display:grid;place-items:center;font-weight:800;color:var(--brand-deep)}
.cl-n{font-size:13px;font-weight:800;line-height:1.3}
.cl-p{font-size:12px;color:var(--brand-deep);font-weight:800;margin-top:2px}
.cl .grow{flex:1;min-width:0}
.stp{display:flex;align-items:center;gap:4px;background:var(--surf2);border-radius:12px;padding:3px}
.stp button{width:28px;height:28px;border-radius:9px;font-size:16px}
.stp b{min-width:18px;text-align:center;font-size:13px}
.sum{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--surf2);display:flex;justify-content:space-between;font-weight:800}
.dempty{padding:22px 8px;text-align:center;color:var(--ink3);font-size:13px;line-height:1.6}
.dcard{border-radius:var(--r-xl);background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh-m);overflow:hidden}
.dcard-h{display:flex;align-items:center;gap:9px;padding:14px 16px;font-weight:800;border-bottom:1px solid var(--line)}
.dcard-h .n{flex:1}
.dcard-h .cnt{padding:3px 10px;border-radius:99px;font-size:12px;background:var(--brand-soft);color:var(--brand-deep)}
.dcard-b{padding:4px 16px 16px}
.dbr{display:flex;align-items:center;gap:12px;padding:14px 16px}
.dbr-i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#111;color:var(--on-brand);box-shadow:var(--sh-brand);overflow:hidden}
.dbr-i img{width:100%;height:100%;object-fit:cover}
.dbr-b{flex:1;min-width:0}
.dbr-b b{display:block;font-size:14.5px}
.dbr-b span{font-size:12px;color:var(--ink3)}

.sbar{margin:8px 16px 0;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:15px;
  background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh-s)}
.sbar input{flex:1;border:0;outline:none;background:none;font-weight:700}
.view{position:relative;z-index:1;padding-bottom:12px}
.empty{text-align:center;color:var(--ink3);padding:36px 16px}

.wel[hidden]{display:none}
.wel{position:fixed;inset:0;z-index:300;background:var(--grad);color:var(--on-brand);
  display:flex;flex-direction:column;overflow:hidden;
  padding:calc(var(--safe-t) + 14px) 22px calc(20px + var(--safe-b));
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.wel.gone{opacity:0;transform:scale(1.04);pointer-events:none}
.wel::before,.wel::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.wel::before{top:-22%;inset-inline-end:-28%;width:82%;aspect-ratio:1;background:rgba(255,255,255,.16)}
.wel::after{bottom:-16%;inset-inline-start:-24%;width:66%;aspect-ratio:1;background:rgba(255,255,255,.1)}
.wel-top,.wel-mid,.wel-cta{position:relative;z-index:1}
.wel-top{display:flex;align-items:center;gap:10px}
.wel-top img,.wel-mark{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#111;display:grid;place-items:center;font-weight:800;color:var(--brand-deep)}
.wel-top b{flex:1;font-size:16px}
.wel-skip{padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.28);font-weight:800}
.wel-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.wel-hero{width:min(66vw,250px);background:none;box-shadow:none;border-radius:0;overflow:visible;
  display:grid;place-items:center;animation:float 6.5s ease-in-out infinite}
.wel-hero img{width:100%;height:auto;max-height:46vh;object-fit:contain;padding:6% 7%;box-sizing:border-box}
.wel-hero span{font-size:64px;font-weight:800}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.wel-hi{margin-top:16px;font-size:13px;font-weight:800;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.28)}
.wel-h{font-size:clamp(26px,7vw,40px);font-weight:800;line-height:1.25;margin-top:12px}
.wel-p{font-size:14.5px;max-width:34ch;line-height:1.7;opacity:.86;margin-top:8px}
.wel-facts{display:flex;gap:10px;margin-top:22px;width:100%}
.wel-f{flex:1;padding:12px 8px;border-radius:16px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.28)}
.wel-f b{display:block;font-size:22px;font-weight:800}
.wel-f span{display:block;font-size:11px;font-weight:700;opacity:.8;margin-top:2px}
.wel-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.wel-go{background:#fff;color:var(--brand-deep);border-radius:16px;padding:15px;font-weight:800;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.4);transition:transform .18s var(--spring)}
.wel-go:active{transform:scale(.98)}

.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%) translateY(12px);
  z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:14px;font-weight:800;
  font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (min-width:760px){
  .app{max-width:860px}
  .list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .hdr,.rail,.crail,.feat,.cat,.chips,.sec-h,.tdesc{padding-inline:22px}
}
@media (min-width:980px){
  body{padding-inline-start:104px}
  .app{max-width:1440px;padding-bottom:40px}
  .aura{background:
    radial-gradient(46% 40% at 78% -6%, rgba(var(--brand-rgb),.22), transparent 68%),
    radial-gradient(38% 34% at 10% 12%, rgba(var(--brand-rgb),.12), transparent 70%)}
  .nav{top:0;bottom:0;inset-inline-start:0;inset-inline-end:auto;width:104px;
    padding:0 12px 20px;border-top:0;border-inline-end:1px solid var(--line);
    box-shadow:none;display:flex;flex-direction:column;justify-content:center;
    background:color-mix(in srgb, var(--surf) 92%, transparent)}
  .nav::before{content:"";position:absolute;top:22px;inset-inline:0;margin:0 auto;width:48px;height:48px;
    border-radius:50%;box-shadow:var(--sh-brand);background:#111 var(--mark, var(--grad)) center/cover no-repeat}
  .nav-in{grid-template-columns:1fr;gap:6px;max-width:none;width:100%}
  .nb{padding:12px 6px;border-radius:16px;gap:5px}
  .nb .tx,.fab .tx{font-size:11px}
  .nb:hover{background:var(--surf2)}
  .nb.on{background:var(--brand-soft)}
  .fab-b{margin-top:0;width:100%;height:52px;border-radius:16px;border:0}
  .cbadge{top:-6px;inset-inline-start:auto;inset-inline-end:-4px}
  .hdr{gap:16px;padding:16px 26px 14px}
  .hdr .mark{display:none}
  .hbrand{display:block;font-size:20px;font-weight:800}
  .loc{flex:none;max-width:340px;padding:6px 12px;border-radius:13px;background:var(--surf);
    border:1px solid var(--line);box-shadow:var(--sh-s)}
  .hsearch{display:flex;align-items:center;gap:8px;flex:1;min-width:0;max-width:520px;margin-inline:auto;
    height:44px;padding:0 14px;border-radius:15px;background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh-s);color:var(--ink3)}
  .hsearch:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18)}
  .hsearch input{flex:1;min-width:0;border:0;outline:none;background:none;font-weight:700;color:var(--ink)}
  .dx{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start;padding-inline:26px}
  .dmain{min-width:0}
  .dmain .rail,.dmain .chips,.dmain .cat,.dmain .feat,.dmain .crail,.dmain .sec-h,.dmain .tdesc{padding-inline:0}
  .dmain .rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:visible;padding-top:18px}
  .rail .tcard{flex-direction:row;align-items:center;gap:12px;padding:14px 16px;width:auto}
  .rail .tcard .em{width:44px;height:44px;border-radius:14px}
  .rail .tcard .tb{align-items:flex-start}
  .rail .tcard .lb{font-size:15px;color:var(--ink);text-align:start}
  .rail .tcard .sub{display:block;font-size:11.5px;font-weight:700;color:var(--ink3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .rail .tcard[aria-selected="true"] .lb,.rail .tcard[aria-selected="true"] .sub{color:var(--on-brand)}
  .tdesc{display:none}
  .dmain .ticker{border-radius:var(--r-md);margin-top:16px}
  .dmain .sec-h{padding:28px 0 14px}
  .sec-t{font-size:22px}
  .dmain .crail{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;overflow:visible}
  .dmain .ctile{width:auto}
  .dmain .ctile .cimg,.dmain .ctile .ph{width:100%;height:auto;aspect-ratio:4/3}
  .dmain .ctile:hover,.dmain .fc:hover,.dmain .it:hover{transform:translateY(-3px);box-shadow:var(--sh-m)}
  .dmain .feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;overflow:visible}
  .dmain .fc{width:auto}
  .dmain .chips{top:78px;margin:8px 0;padding:8px;border-radius:99px;border:1px solid var(--line);
    box-shadow:var(--sh-s);width:max-content;max-width:100%}
  .dmain .list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .dmain .it-img,.dmain .it-ph{width:106px;height:106px}
  .dside{position:sticky;top:92px;display:flex;flex-direction:column;gap:14px;max-height:calc(100dvh - 110px);overflow:auto}
  .sheet{top:50%;bottom:auto;left:50%;right:auto;width:min(600px,calc(100% - 140px));max-height:84vh;border-radius:24px;
    opacity:0;pointer-events:none;transform:translate(-50%,-46%) scale(.96);
    transition:transform .34s var(--spring),opacity .22s var(--ease)}
  .sheet.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
  .grab{display:none}
  .toast{bottom:28px}
  .wel{padding:28px 48px 36px}
  .wel-mid{flex-direction:row;align-items:center;justify-content:center;gap:64px;text-align:start;width:min(1100px,100%);margin:0 auto}
  .wel-hero{width:340px;order:2;flex:none;background:none;box-shadow:none;border-radius:0}
  .wel-copy{display:flex;flex-direction:column;align-items:flex-start;max-width:560px}
  .wel-h{font-size:clamp(34px,3.2vw,48px);text-align:start}
  .wel-p{text-align:start;font-size:16px}
  .wel-facts{width:auto}
  .wel-f{min-width:140px}
  .wel-cta{flex-direction:row}
  .wel-go{min-width:200px;padding:16px 28px}
  .sbar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rev.in,.boot-badge,.wel-hero,.tk-in,.fab-b.full,.live{animation:none}
  .rev{opacity:1}
  .sheet,.scrim,.boot,.wel{transition:none}
}

.abu-pop{position:absolute;z-index:60;pointer-events:none;opacity:0;transform:translateY(10px) scale(.6);transform-origin:50% 100%;transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.abu-pop.on{opacity:1;transform:none}
.abu-pop img{width:100%;height:100%;object-fit:contain;display:block}
.abu-sad{position:fixed;bottom:84px;left:8px;right:auto;z-index:70;width:112px;pointer-events:none;opacity:0;transform:translateY(14px) scale(.9);transition:opacity .3s,transform .3s}
.abu-sad.on{opacity:1;transform:none}
.abu-sad img{width:100%;height:auto;display:block}

/* ---- permanent discount for WhatsApp-verified customers (cart / pay sheet / side cart) ---- */
.vd{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:12px 14px;border-radius:16px;text-align:start;
  background:var(--ok-soft);border:1.5px solid var(--ok);color:var(--ink)}
.vd-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;background:var(--ok);color:#fff}
.vd-t{flex:1;min-width:0;display:block}
.vd-t b{display:block;font-size:15.5px;line-height:1.4;font-weight:800}
.vd-t small{display:block;font-size:12px;font-weight:700;opacity:.75;line-height:1.4}
.vd-a{flex:none;font-size:17px;font-weight:800;color:var(--ok);unicode-bidi:plaintext}
.vd-no{background:var(--surf2);border:1.5px dashed var(--line2)}
.vd-nudge{background:var(--brand-soft);border:1.5px dashed var(--brand);cursor:pointer;transition:transform .18s var(--spring)}
.vd-nudge:active{transform:scale(.98)}
.vd-nudge .vd-ic{background:var(--grad);color:var(--on-brand)}
.vd-go{flex:none;padding:8px 12px;border-radius:12px;background:var(--grad);color:var(--on-brand);font-weight:800;font-size:13.5px}
.sum-t{background:var(--ok-soft);color:var(--ink);font-size:17px;align-items:center}
.sum-t small{display:block;font-size:11.5px;font-weight:700;opacity:.7}
.vd-done{margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--ok-soft);border:1.5px solid var(--ok);line-height:1.6;font-size:15px}
.vd-done small{display:block;font-size:12px;font-weight:700;opacity:.75}
.how-link{display:block;width:100%;margin-top:14px;padding:14px;border-radius:16px;background:var(--surf2);border:1.5px solid var(--line2);text-align:center;font-size:16px;font-weight:800}
.how-link small{display:block;font-size:12px;font-weight:700;opacity:.7}
.onb-on .abu-pop,.onb-on .abu-sad{display:none!important}

/* ---- "How to order?" pill in the header ---- */
.how-pill{flex:none;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 11px 0 6px;border-radius:99px;background:var(--grad);color:var(--on-brand);
  border:1px solid rgba(255,255,255,.4);box-shadow:var(--sh-brand);white-space:nowrap;transition:transform .18s var(--spring)}
.how-pill:active{transform:scale(.94)}
.hp-ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.hp-ic svg{width:16px;height:16px;fill:var(--brand-2);stroke:none}
.hp-t{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.hp-t b{font-size:13.5px;font-weight:800}
.hp-t small{font-size:10px;font-weight:700;opacity:.75}
:root[data-theme="dark"] .hp-ic{background:#161D40}
@media (max-width:359px){.hp-t small{display:none}.how-pill{padding-inline-end:11px}}

/* ---- big pumping discount badge (verified customers: account tab, cart, pay sheet) ---- */
.vb{display:flex;align-items:center;gap:16px;margin-top:10px;padding:14px 16px;border-radius:24px;color:var(--ink);
  background:linear-gradient(135deg,var(--ok-soft),var(--brand-soft));border:1.5px solid var(--brand);box-shadow:0 12px 28px -16px rgba(14,159,110,.6)}
.vb-n{position:relative;flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#19c37d,#0E9F6E 55%,#07784f);
  box-shadow:0 0 0 4px var(--brand-2),0 0 24px 5px rgba(66,165,245,.6),0 14px 24px -10px rgba(14,159,110,.75);
  animation:vbPump 1.7s ease-in-out infinite;will-change:transform}
.vb-n::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--brand-2);opacity:0;animation:vbRing 1.7s ease-out infinite;pointer-events:none}
.vb-v{font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em;direction:ltr;unicode-bidi:isolate;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.vb-v i{font-style:normal;font-size:.62em;margin-inline-start:1px}
.vb-t{flex:1;min-width:0;display:block;text-align:start}
.vb-t b{display:block;font-size:21px;line-height:1.3;font-weight:800}
.vb-t small{display:block;font-size:13px;font-weight:700;opacity:.7;line-height:1.35}
.vb-t em{display:block;font-style:normal;margin-top:6px;font-size:14px;font-weight:800;color:var(--ok);line-height:1.4}
.vb-t em span{display:block;font-size:11.5px;opacity:.8}
.vb-s{gap:12px;padding:9px 12px;border-radius:20px}
.vb-s .vb-n{width:62px;height:62px;box-shadow:0 0 0 3px var(--brand-2),0 0 16px 3px rgba(66,165,245,.55)}
.vb-s .vb-v{font-size:25px}
.vb-s .vb-t b{font-size:17px}
.vb-s .vb-t small{font-size:12px}
@keyframes vbPump{0%,100%{transform:scale(1)}14%{transform:scale(1.13)}28%{transform:scale(1)}42%{transform:scale(1.09)}60%{transform:scale(1)}}
@keyframes vbRing{0%{opacity:.85;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.32)}}
@media (prefers-reduced-motion:reduce){.vb-n{animation:none}.vb-n::before{display:none}}

/* ---- button text centering fixes (btn_center) ---- */
.how-pill{padding:0 9px;justify-content:center;text-align:center}
.how-pill .hp-t{align-items:center;text-align:center;padding-top:1px}
@media (max-width:359px){.how-pill{padding-inline:9px}}
.vd-go{display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;min-height:34px;padding:0 14px}

/* ---- payment step (cod | shamcash) ---- */
.pmh{margin:16px 2px 8px;text-align:center}
.pmh b{display:block;font-size:15px}
.pmh small,.pm small,.pm-copy small,.pmq small{display:block;font-size:11.5px;font-weight:700;opacity:.7}
.pms{display:flex;flex-direction:column;gap:10px}
.pm{width:100%;min-height:64px;border-radius:16px;border:2px solid var(--line2);background:var(--surf);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 14px;font:inherit;cursor:pointer}
.pm b{font-size:17px}
.pm.on{border-color:var(--brand-deep);background:var(--brand-soft);box-shadow:var(--sh-s)}
.pm.on b::before{content:"✓ ";color:var(--ok)}
.pm:active{transform:scale(.98)}
.pmq{margin-top:12px;padding:14px;border-radius:16px;background:var(--surf2);text-align:center}
.pmq-t{margin:0 0 10px}
.pmq-img{display:block;margin:0 auto;width:100%;max-width:240px;border-radius:14px;background:#fff}
.pmq-n{margin:10px 0 0;font-weight:800}
.pmq-c{margin:8px 0;padding:10px;border-radius:12px;background:var(--bg2);border:1px dashed var(--line2);font-family:monospace;font-size:13px;word-break:break-all;user-select:all}
.pm-copy{width:100%;min-height:50px;border-radius:14px;border:2px solid var(--brand-deep);background:var(--surf);color:var(--ink);font:inherit;text-align:center;cursor:pointer}
.pm-copy b{font-size:15px}
.pmq-a{margin:12px 0 0;font-size:16px}
.pmq-h{margin:10px 0 0;font-size:13px;line-height:1.6;font-weight:700}
.sum small{display:block;font-size:11.5px;font-weight:700;opacity:.7}
.pmh{margin-top:14px}

/* ===================================================================== Fast Cargo (app.fast-kargo.xyz) */
body{font-family:"Cairo",system-ui,sans-serif}
.rv{opacity:0;animation:rise .5s var(--ease) forwards}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;animation:none}}
/* wide logo instead of the round restaurant mark */
.mark{display:flex;align-items:center;justify-content:center;width:auto;height:42px;min-width:42px;max-width:120px;padding:4px 10px;border-radius:13px;background:#fff;box-shadow:var(--sh-s)}
.mark img{display:block;width:auto;height:32px;max-width:100px;object-fit:contain}
.boot-badge,.wel-top img,.wel-mark,.dbr-i{background:#fff}
.boot-badge img,.dbr-i img,.wel-top img{object-fit:contain}
.boot-badge img{width:118px;height:auto}
.dbr-i img{padding:4px}
.wel-top img,.wel-mark{width:auto;height:34px;max-width:100px;border-radius:10px;padding:3px 8px}
.nav::before{background:#fff var(--mark, var(--grad)) center/80% no-repeat}
.wel{background:radial-gradient(120% 80% at 80% 0%,#1E88E5 0%,#1565C0 38%,#161D40 100%)}
.wel-go{color:var(--navy)}
.wel-hero img{padding:0;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}

/* hero */
.fc-home{padding:4px 16px 16px}
.hero{position:relative;display:flex;align-items:flex-end;gap:6px;margin-top:6px;padding:18px 16px 16px;border-radius:var(--r-xl);
  background:radial-gradient(110% 90% at 0% 0%,#1E88E5 0%,#1565C0 42%,#161D40 100%);color:#fff;overflow:hidden;box-shadow:var(--sh-l)}
.hero::after{content:"";position:absolute;inset-inline-start:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:rgba(198,40,40,.35);filter:blur(30px)}
.hero-tx{position:relative;z-index:1;flex:1;min-width:0}
.hero-hi{display:inline-block;font-size:12px;font-weight:800;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.18)}
.hero-h{font-size:clamp(21px,5.6vw,28px);font-weight:800;line-height:1.3;margin-top:8px}
.hero-p{font-size:13px;opacity:.85;margin-top:4px}
.hero-fast{position:relative;z-index:1;width:min(34vw,150px);height:auto;margin:-10px -6px -16px 0;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.qtrack{display:flex;align-items:center;gap:6px;margin-top:14px;background:#fff;border-radius:16px;padding:5px 5px 5px 5px;box-shadow:var(--sh-m)}
.qtrack .qt-ic{color:#7C86A8;display:grid;place-items:center;padding-inline-start:8px}
.qtrack input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:#161D40;padding:9px 2px;outline:none;direction:ltr;text-align:right}
.qtrack input::placeholder{direction:rtl;color:#9AA3C0}
.qtrack button{flex:none;padding:10px 16px;border-radius:12px;background:#C62828;color:#fff;font-weight:800}
.qtrack-lg{border:1px solid var(--line2)}
:root[data-theme="dark"] .qtrack{background:var(--surf2)}
:root[data-theme="dark"] .qtrack input{color:var(--ink)}

/* services */
.svcs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:start;padding:14px;border-radius:var(--r-lg);
  background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh-s);min-height:118px;transition:transform .2s var(--spring)}
.svc:active{transform:scale(.96)}
.svc-wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:0}
.svc-ic{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;background:var(--grad);box-shadow:var(--sh-brand)}
.svc-red .svc-ic{background:linear-gradient(135deg,#E53935,#C62828 60%,#8E1B1B);box-shadow:0 12px 26px -12px rgba(198,40,40,.6)}
.svc-navy .svc-ic{background:linear-gradient(135deg,#2B3A7A,#161D40);box-shadow:0 12px 26px -12px rgba(22,29,64,.6)}
.svc-tx b{display:block;font-size:14.5px;font-weight:800;line-height:1.35}
.svc-tx small{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
.svc-soon{position:absolute;top:10px;inset-inline-end:10px;font-size:10px;font-weight:800;padding:2px 8px;border-radius:99px;background:var(--brand-soft);color:var(--brand-deep)}
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kind{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 6px;border-radius:var(--r-lg);background:var(--surf);border:1px solid var(--line);box-shadow:var(--sh-s)}
.kind-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--brand);background:var(--brand-soft);margin-bottom:4px}
.kind b{font-size:13.5px}
.kind small{font-size:10.5px;color:var(--ink3);line-height:1.4}
.sec-more{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:800;color:var(--brand)}
.brs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin:0 -2px}
.brs::-webkit-scrollbar{display:none}
.br{position:relative;flex:none;width:96px;height:56px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-s);display:grid;place-items:center}
.br-l{display:grid;place-items:center;width:100%;height:100%;padding:10px 12px}
.br-l img{max-width:100%;max-height:28px;object-fit:contain}
.br-new{position:absolute;top:-6px;inset-inline-start:-4px;font-style:normal;font-size:9.5px;font-weight:800;padding:1px 7px;border-radius:99px;background:#C62828;color:#fff}
.wa-card{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border-radius:var(--r-lg);background:#E7F8EE;color:#0B6B3A}
.wa-card b{display:block;font-size:14px}.wa-card small{font-size:12px;opacity:.8}
:root[data-theme="dark"] .wa-card{background:#0D2A1C;color:#7EE2A8}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;text-decoration:none}
.btn-ghost{background:var(--brand-soft);color:var(--brand-deep);box-shadow:none}
.side-fast{display:block;width:70%;margin:8px auto 14px}

/* tracking */
.recent{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.recent button{padding:5px 12px;border-radius:99px;background:var(--surf2);border:1px solid var(--line);font-size:12px;font-weight:700}
.trk-load,.trk-err{margin-top:14px;padding:16px;border-radius:var(--r-lg);background:var(--surf);border:1px solid var(--line);display:flex;align-items:center;gap:10px;font-weight:700;flex-wrap:wrap}
.trk-err{color:var(--hot);background:var(--hot-soft);border-color:transparent}
.trk-err a{color:inherit;text-decoration:underline}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--brand-soft);border-top-color:var(--brand);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.trk{margin-top:14px;padding:16px}
.trk-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.trk-code{font-weight:800;font-size:17px;letter-spacing:.5px}
.trk-st{padding:5px 12px;border-radius:99px;background:var(--brand);color:#fff;font-size:12.5px;font-weight:800}
.trk-route{display:flex;align-items:center;gap:8px;margin-top:14px;padding:12px;border-radius:16px;background:var(--surf2)}
.trk-route>div{flex:1;min-width:0}
.trk-route small,.trk-meta small{display:block;font-size:11px;color:var(--ink3);font-weight:700}
.trk-route b{font-size:13px}
.trk-arw{color:var(--hot);transform:scaleX(-1)}
.trk-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.trk-meta .full{grid-column:1/-1}
.trk-meta b{font-size:13px}
.trk-h{margin-top:16px;font-weight:800}
.trk-tl{list-style:none;margin:8px 0 0;padding:0;border-inline-start:2px solid var(--line2)}
.trk-tl li{position:relative;padding:4px 18px 12px}
.trk-tl li::before{content:"";position:absolute;inset-inline-start:-7px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--surf);border:2.5px solid var(--ink3)}
.trk-tl li.now::before{border-color:var(--hot);background:var(--hot)}
.trk-tl b{font-size:13.5px}
.trk-tl p{font-size:12.5px;color:var(--ink2);margin-top:2px}
.trk-tl small{display:block;font-size:11px;color:var(--ink3)}
.trk-full{display:block;margin-top:10px;text-align:center;font-size:12.5px;font-weight:700;color:var(--brand)}
.trk-empty{text-align:center;color:var(--ink3);padding:20px 10px;font-size:13px;line-height:1.8}
.trk-empty img{width:140px;height:auto;display:block;margin:0 auto 8px}

/* calculator / sheets */
.lbl{display:block;margin:12px 2px -2px;font-size:12.5px;font-weight:800;color:var(--ink2)}
select.field{appearance:auto}
.segs{display:flex;gap:8px;margin-top:8px}
.seg{flex:1;padding:11px;border-radius:14px;background:var(--bg2);border:1.5px solid var(--line);font-weight:800}
.seg.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-deep)}
.wt{display:flex;gap:8px;align-items:center}
.wt button{flex:none;width:46px;height:46px;margin-top:8px;border-radius:14px;background:var(--brand-soft);color:var(--brand-deep);font-size:22px;font-weight:800}
.wt .field{text-align:center;font-weight:800;font-size:16px}
.cres{margin-top:14px;padding:16px;border-radius:var(--r-lg);background:var(--grad);color:#fff;text-align:center}
.cres small{opacity:.85;font-weight:700}
.cres>b{display:block;font-size:34px;font-weight:800;line-height:1.2}
.cres-l{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;border-top:1px solid rgba(255,255,255,.18)}
.cres p{font-size:11.5px;opacity:.85;margin:8px 0}
.cres .btn-ghost{background:#fff;color:var(--navy)}
.brg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.brg-i{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:16px;background:#fff;border:1.5px solid var(--line);text-decoration:none;color:#161D40}
.brg-i .br-l{height:40px;padding:4px}
.brg-i small{font-size:11px;font-weight:800}
.brg-i.on{border-color:var(--brand)}
.hint{font-size:12px;color:var(--ink3);margin-top:8px;line-height:1.6}
.soon{text-align:center}
.soon img{width:130px;height:auto;display:block;margin:0 auto 6px}
.soon h4{font-size:17px;font-weight:800;margin-top:10px}
.soon p{color:var(--ink2);font-size:13.5px;line-height:1.7;margin-top:6px}
.soon-l{list-style:none;padding:0;margin:12px 0 0;text-align:start}
.soon-l li{position:relative;padding:8px 30px 8px 10px;border-radius:12px;background:var(--surf2);margin-top:6px;font-size:13px;font-weight:700}
.soon-l li::before{content:"✓";position:absolute;inset-inline-start:10px;color:var(--ok);font-weight:800}
.soon .svc-soon{position:static;display:inline-block}
@media (min-width:900px){.svcs{grid-template-columns:repeat(4,1fr)}.svc-wide{grid-column:span 2}}

body{overflow-x:clip}

/* ---- phase 2: shipping profile, my shipments, ship sheet ---- */
.fcard{background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:14px}
.fc-h{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.fc-h b{font-size:17px;font-weight:800}.fc-h small{font-size:12px;opacity:.6}
.fc-p{margin:4px 2px 12px;font-size:13.5px;line-height:1.7;opacity:.8}
.fc-form .lbl small{opacity:.6;font-weight:500}
.fc-err{color:#d33;font-size:13px;line-height:1.6;margin-top:8px;min-height:0}
.fc-err:empty{display:none}
.shp{display:flex;flex-direction:column;gap:5px;width:100%;text-align:start;padding:12px 13px;margin-bottom:9px;border-radius:15px;border:1px solid var(--line);background:transparent;color:inherit;font:inherit;cursor:pointer}
.shp:active{transform:scale(.985)}
.shp-t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.shp-t b{font-size:15px;letter-spacing:.5px}
.shp-r{font-size:13px;opacity:.85}
.shp-m{display:flex;justify-content:space-between;gap:8px;font-size:12px;opacity:.65}
.shp-p{font-size:11.5px;opacity:.6}.shp-p:empty{display:none}
.chip{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;background:rgba(40,110,230,.12);color:#2b6de0}
.chip.s-ok{background:rgba(30,160,90,.14);color:#159150}.chip.s-bad{background:rgba(220,60,60,.13);color:#cf3434}.chip.s-new{background:rgba(120,120,140,.15);color:inherit}
.lnk{background:none;border:0;color:inherit;text-decoration:underline;font:inherit;cursor:pointer;padding:0}
.shipf .fs{border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:12px}
.shipf .fs-h{font-weight:800;font-size:14px;margin-bottom:8px}
.shipf .field{margin-bottom:8px}
.who-ro{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(127,127,127,.09);margin-bottom:8px;font-size:14px}
.sprice:empty{display:none}
.okship{text-align:center;padding:6px 4px}
.okship img{width:110px;height:auto;margin:0 auto 6px;display:block}
.okship small{display:block;opacity:.65}
.okcode{display:block;font-size:28px;letter-spacing:1.5px;margin:4px 0 12px}
.okship p{font-size:13px;line-height:1.7;opacity:.8;margin-top:12px}
#sGo .spin{vertical-align:middle}
/* narrow phones: keep the brand name readable next to the how-it-works pill */
@media (max-width:420px){
  .hdr{gap:8px;padding-inline:12px}
  .hdr .mark{max-width:76px}
  .hdr .mark img{height:26px}
  .hdr .loc-s{display:none}
  .hdr .loc-v{font-size:14px}
  .how-pill{height:38px;padding:0 9px}
  .hp-t small{display:none}
}
@media (max-width:390px){
  .how-pill{width:40px;height:40px;padding:0;justify-content:center}
  .how-pill .hp-t{display:none}
}
/* ---------- brand shop ---------- */
.sp-head{display:inline-flex;align-items:center;gap:4px;margin:-4px 0 10px;padding:6px 10px 6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--bg2);color:var(--ink2);font:inherit;font-size:12.5px;font-weight:800}
.sp-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sp-brand{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 10px;border-radius:18px;border:1px solid var(--line);background:var(--surf);color:var(--ink);box-shadow:var(--sh-s)}
.sp-brand .br-l{width:54px;height:54px;border-radius:16px;background:#fff;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.sp-brand .br-l img{max-width:80%;max-height:80%;object-fit:contain}
.sp-brand b{font-size:13px;font-weight:800}.sp-brand small{font-size:11px;color:var(--ink3)}
.sp-brand:active,.sp-card:active{transform:scale(.97)}
.sp-cats{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.sp-cats::-webkit-scrollbar{display:none}
.sp-cat{flex:none;padding:8px 14px;border-radius:99px;font-size:12.5px;font-weight:800;border:1px solid var(--line);background:var(--bg2);color:var(--ink2)}
.sp-cat.on{background:var(--grad);color:var(--on-brand);border-color:transparent}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-card{display:flex;flex-direction:column;text-align:start;border-radius:18px;border:1px solid var(--line);background:var(--surf);color:var(--ink);overflow:hidden;padding:0 0 10px;box-shadow:var(--sh-s)}
.sp-img{display:block;aspect-ratio:1/1;background:var(--surf2);overflow:hidden}
.sp-img img{width:100%;height:100%;object-fit:cover;display:block}
.sp-nm{font-size:12.5px;font-weight:700;line-height:1.45;padding:8px 10px 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px}
.sp-pr{display:flex;flex-direction:column;padding:0 10px}
.sp-pr b{font-size:15px;font-weight:900;color:var(--brand-deep)}.sp-pr small{font-size:10.5px;color:var(--ink3)}
.sp-hero{border-radius:20px;overflow:hidden;background:var(--surf2);aspect-ratio:1/1;max-height:340px;margin:0 auto 12px}
.sp-hero img{width:100%;height:100%;object-fit:cover;display:block}
.sp-title{font-size:17px;font-weight:800;line-height:1.5}
.sp-price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:6px 0 8px;flex-wrap:wrap}
.sp-price>b{font-size:22px;font-weight:900;color:var(--brand-deep)}
.sp-price span{font-size:12px;color:var(--ink2)}
.sp-desc{font-size:13.5px;line-height:1.75;color:var(--ink2)}
.sp-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sp-opt{min-width:46px;padding:9px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg2);color:var(--ink);font-weight:800;font-size:13px}
.sp-opt.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-deep)}
.sp-sw{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:transparent;padding:3px}
.sp-sw i{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sp-sw.on{border-color:var(--brand)}
.sp-qty{display:inline-flex;align-items:center;gap:14px;margin-top:8px;padding:4px;border-radius:14px;border:1px solid var(--line);background:var(--bg2)}
.sp-qty button,.sp-lq button{width:36px;height:36px;border-radius:11px;border:0;background:var(--surf);color:var(--ink);font-size:18px;font-weight:800;box-shadow:var(--sh-s)}
.sp-qty b{min-width:18px;text-align:center}
.sp-line{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.sp-line img{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none;background:var(--surf2)}
.sp-lb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sp-lb b{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-lb small{font-size:11.5px;color:var(--ink3)}.sp-lb span{font-weight:900;color:var(--brand-deep);font-size:13.5px}
.sp-lq{display:flex;flex-direction:column;align-items:center;gap:4px}
.sp-lq button{width:30px;height:30px;font-size:15px}.sp-lq b{font-size:13px}
.sp-sum{margin-top:14px;padding:12px 14px;border-radius:16px;background:var(--bg2);border:1px solid var(--line)}
.sp-sum>div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:13.5px}
.sp-sum small{color:var(--ink3)}
.sp-sum .sp-tot{border-top:1px dashed var(--line2);margin-top:6px;padding-top:9px;font-size:15px;font-weight:900}
.sp-cartbar{display:flex;align-items:center;justify-content:center;gap:8px}
.sp-done{font-size:13.5px;font-weight:700}
.seg small{display:block;font-size:11px;opacity:.75;margin-top:2px}
.sp-thumbs{display:flex;gap:6px;margin:2px 0}
.sp-thumbs img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--surf2)}
.chip.s-go{background:rgba(40,110,230,.12);color:#2b6de0}
@media (min-width:560px){.sp-brands{grid-template-columns:repeat(4,1fr)}.sp-grid{grid-template-columns:repeat(3,1fr)}}