/* uaepc-prices-order v3 — ONE PAGE price list + order buttons (owner 2026-11-01); v3 2026-11-02: the phone category grid, slim hero, short names (owner «آره، ببر روی سایت»). Built by ops/prices-redesign-1101/launch/build_launch.py from prices_v2 + order_v4 / order_real — edit the sources, rebuild, bump VER. */ /* ===== /prices v2 — simpler, list-first (preview 2026-11-01) ===== */ /* hero: same words, less height */ .dl-hero{padding:30px 20px 40px} .dl-hero h1{font-size:24px;margin-bottom:8px} /* categories: one row of small pills instead of a 12-icon grid */ #catSwitch{padding:12px 12px 10px} .cs-lbl{display:none} .cs-grid{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px} .cs-card{flex:0 0 auto;flex-direction:row!important;align-items:center;gap:7px!important;padding:6px 12px 6px 8px!important;border:1px solid #e8eaed!important;border-radius:999px!important;background:#fff;transform:none!important} .cs-card:hover{background:#fff7e0;border-color:#f5d680!important} .cs-card .cs-ic{width:26px!important;height:26px!important;border-radius:8px!important;font-size:12px!important;box-shadow:none!important} .cs-card .cs-nm{min-height:0!important;font-size:12.5px!important;white-space:nowrap} .cs-card .cs-ct{font-size:11px!important} .cs-card.cs-act{background:#0a0e1a!important;border-color:#0a0e1a!important} /* download buttons: smaller, one row */ #viewBody>div:first-child{gap:8px!important;margin:12px 0 10px!important} #vpDlBtn,#vpDlAllBtn,#vpDlXlsxBtn{padding:10px 16px!important;font-size:13.5px!important;border-radius:11px!important;box-shadow:none!important} /* search */ .vp-search{position:relative;margin:4px 12px 12px;display:flex;align-items:center} .vp-search i{position:absolute;inset-inline-start:14px;color:#9ca3af;font-size:14px;pointer-events:none} .vp-search input{width:100%;font-family:inherit;font-size:15px;padding:12px 14px;padding-inline-start:40px;border:1.5px solid #e0e4ea;border-radius:12px;background:#f8f9fb;color:#0a0e1a;outline:none} .vp-search input:focus{border-color:#ffa31a;background:#fff} .vp-none{position:absolute;inset-inline-end:14px;font-size:12px;font-weight:700;color:#b91c1c} .vp-tb tr.vp-hide,.vp-tb.vp-hide,.vp-sec.vp-hide{display:none!important} /* section bar */ .vp-sec{padding:10px 15px} /* computer table: one line per model, the AED price stands out */ @media(min-width:601px){ .vp-tb td{padding:9px 12px;vertical-align:middle} .vp-tb tbody tr:nth-child(even){background:#fafbfc} .vp-nm{display:inline} .vp-note{display:inline;margin-inline-start:8px} .vp-tb td[data-k="aed"]{font-weight:900;font-size:14px;color:#0a0e1a} } /* phone: a compact list row instead of a big orange card */ @media(max-width:600px){ .dl-hero{padding:20px 16px 34px} .dl-hero h1{font-size:19px;margin-bottom:6px} .dl-hero p{font-size:12.5px;line-height:1.7} #viewBody>div:first-child{display:grid!important;grid-template-columns:1fr 1fr;padding:0 12px!important} #viewBody>div:first-child>button:only-child{grid-column:1/-1} #vpDlBtn{grid-column:1/-1} #vpDlBtn,#vpDlAllBtn,#vpDlXlsxBtn{width:100%;padding:10px 8px!important;font-size:12.5px!important} .vp-tb tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:1px;margin:0!important;border:0!important;border-bottom:1px solid #eef0f3!important;border-radius:0!important;box-shadow:none!important;padding:11px 14px!important;background:#fff!important;overflow:visible!important} .vp-tb tbody tr:nth-child(even){background:#fafbfc!important} .vp-tb td{display:block!important;padding:0!important;margin:0!important;text-align:left!important;background:none!important;font-weight:700!important;line-height:1.45!important;position:static!important} .vp-tb td[data-l]::before{content:none!important} .vp-tb td[data-c="nm"]{grid-column:1;grid-row:1;align-self:start} .vp-tb .vp-nm{font-size:13.5px!important;font-weight:800!important;color:#0a0e1a!important} .vp-tb .vp-note{color:#5f6368!important;font-weight:600!important;font-size:11px!important;margin-top:1px} .vp-tb td[data-k="grade"]{grid-column:1;grid-row:2;justify-self:start;align-self:center} .vp-tb td[data-k="grade"] .vp-g{background:#ecfdf5!important;color:#15803d!important} .vp-tb td[data-k="stock"]{grid-column:1;grid-row:2;align-self:center;margin-inline-start:34px!important;color:#5f6368!important;font-size:11.5px!important} .vp-tb td[data-k="stock"]::before{content:attr(data-l) " "!important;font-weight:600} .vp-tb td[data-k="aed"]{grid-column:2;grid-row:1;text-align:right!important;font-size:16px!important;font-weight:900!important;color:#0a0e1a!important;white-space:nowrap} .vp-tb td[data-k="aed"]:not(.vp-wip)::after{content:" " attr(data-l);font-size:11px;font-weight:700;color:#5f6368} .vp-tb td.vp-wip{max-width:120px;white-space:normal!important;font-size:11px!important;color:#a16207!important} .vp-tb td[data-k="usd"]{grid-column:2;grid-row:2;text-align:right!important;font-size:12px!important;color:#5f6368!important} .vp-tb td[data-k="tmn"]{grid-column:2;grid-row:3;text-align:right!important;font-size:12px!important;color:#0a0e1a!important} .vp-tb td[data-k="tmn"]::after{content:" " attr(data-l);font-size:10.5px;color:#5f6368;font-weight:600} } /* ===== ONE PAGE: list + order, v4 (preview 2026-11-01) — row controls ONLY. The basket summary is the site's single source: the shared black order bar (static/uaepc-orderbar.v5.js) + the header cart button → /{lang}/checkout. No private bar, no private panel (owner 2026-08-14 «no page may build its own cart UI»). */ .vp-tb tr.in-cart{background:#f0fdf4!important} .vp-tb tr.in-cart td[data-c="nm"] .vp-nm::before{content:"✓ ";color:#15803d} .ro{display:flex;align-items:center;gap:6px;white-space:nowrap} .ro .q{display:inline-flex;align-items:center;border:1.5px solid #e0e4ea;border-radius:10px;overflow:hidden;background:#fff;height:36px} .ro .q button{width:34px;height:36px;border:0;background:#f8f9fb;font-family:inherit;font-weight:900;font-size:18px;line-height:1;color:#0a0e1a;cursor:pointer} .ro .q input{width:42px;height:36px;border:0;text-align:center;font-family:inherit;font-weight:800;font-size:14px;color:#0a0e1a;background:#fff} .ro .add{height:36px;padding:0 14px;border:0;border-radius:10px;background:linear-gradient(135deg,#ffa31a,#ff8000);color:#0a0e1a;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(255,128,0,.25)} .ro .add.on{background:#0a0e1a;color:#fff;box-shadow:none} .ro .pre{height:28px;padding:0 9px;border:1px solid #f5d680;border-radius:999px;background:#fff7e0;color:#c25400;font-family:inherit;font-weight:800;font-size:11px;cursor:pointer} @media(min-width:601px){ .vp-tb th.th-ro,.vp-tb td.td-ro{text-align:right} .vp-tb td.td-ro{padding:6px 12px} } @media(max-width:600px){ .vp-tb tr{grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto auto auto} .vp-tb td.td-ro{grid-column:1 / -1!important;grid-row:4!important;padding-top:8px!important} .ro{width:100%} .ro .q{height:40px}.ro .q button{height:40px;width:38px}.ro .q input{height:40px} .ro .add{height:40px;flex:1;justify-content:center;font-size:14px} .ro .pre{height:40px;padding:0 11px} } /* room under the list for the shared bar (same as the pages that carry it) */ .vp-card{padding-bottom:96px} /* ===== 2026-11-02 — phones: all 12 categories at once (owner «دسته‌بندی محصولات اسکرول رو دوست ندارم»): 3 chips per row with short names (the script below), a slimmer hero so the first price is on the first screen. Tested as /_test-prices (fa/en/ar) at 320/360/390/430 before shipping. !important: the page's own