:root{--ink:#0f1111;--nav:#0b1220;--subnav:#0f172a;--paper:#ffffff;--muted:#f6f7fb;--line:#e5e7eb;--brand:#1464ff;--accent:#ffd814;--ok:#10b981;--r:14px;--shadow:0 10px 30px rgba(0,0,0,.08)}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#0f1111;font-family:<?= $dir==='rtl'?"'Noto Kufi Arabic','Almarai','IBM Plex Sans Arabic','Cairo',system-ui,Segoe UI,Roboto,Arial,sans-serif":"'Inter','Rubik',system-ui,Segoe UI,Roboto,Arial,sans-serif"?>;font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{text-decoration:none;color:inherit}
.container{max-width:1320px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;z-index:90;background:var(--nav);color:#fff}
.topbar{height:74px;display:grid;grid-template-columns:240px 1fr 420px;gap:12px;align-items:center;width:-webkit-fill-available;max-width:-webkit-fill-available;margin-inline:auto}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:40px;height:40px;border-radius:12px}
.search{position:relative;display:grid;grid-template-columns:180px 1fr 64px;gap:8px}
.search select,.search input{height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#f3f4f6;color:#111;padding:0 12px}
.search button{height:48px;border:none;border-radius:12px;background:#111;color:#fff;font-weight:900}
.actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.langCur{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.2);border-radius:12px;height:42px;background:transparent;color:#fff;padding:0 12px}
.langCur img{width:20px;height:14px;border-radius:2px}
.iconWrap{position:relative;width:42px;height:42px;border:1px solid rgba(255,255,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;background:transparent;color:#fff}
.iconWrap svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.6}
.badgeDot{position:absolute;top:-6px;<?= $dir==='rtl'?'left':'right' ?>:-6px;background:#ef4444;color:#fff;border-radius:999px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;padding:0 4px;border:2px solid var(--nav)}
.sign{background:#1464ff;color:#fff;border:none;border-radius:12px;height:42px;padding:0 14px;display:flex;align-items:center;gap:8px}
.sign svg{width:18px;height:18px;stroke:#fff;fill:none}
.meta{background:var(--subnav);color:#cbd5e1}
.meta .rail{display:flex;gap:12px;align-items:center;height:44px;overflow:auto;scrollbar-width:none}
.meta .rail::-webkit-scrollbar{display:none}
.bubble{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:6px 10px}
.ticker{flex:1;overflow:hidden}
.ticker .track{display:inline-flex;gap:24px;white-space:nowrap;animation:tkr 22s linear infinite}
@keyframes tkr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero{background:linear-gradient(120deg,#0f172a,#0b3aa1 55%,#7bc3ff);color:#fff;position:relative;overflow:hidden}
.hero-wrap{padding:28px 0 0 0;display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:end;min-height:380px}
.h-title{font-size:44px;font-weight:800;margin:12px 0 6px 0;line-height:1.2;letter-spacing:<?= $dir==='rtl'?'0':'-.02em' ?>}
.h-sub{opacity:.95;margin:0 0 14px 0;font-size:18px;line-height:1.5;font-weight:500}
.hero-cta{display:flex;gap:10px;margin:10px 0 24px 0}
.btn-a{padding:12px 16px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:12px;display:inline-flex;align-items:center;gap:8px;font-weight:600;transition:all .2s}
.btn-a:hover{background:rgba(255,255,255,.1)}
.btn-b{padding:12px 16px;background:#1464ff;color:#fff;border-radius:12px;border:none;display:inline-flex;align-items:center;gap:8px;font-weight:600;transition:all .2s}
.btn-b:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,100,255,.3)}
.hero-banner{display:flex;align-items:end;justify-content:center}
.hero-banner img{max-width:520px;width:90%;height:auto;transform:translateY(10px)}
.section{padding:26px 0}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.section-head h3{margin:0;font-size:24px;font-weight:800;letter-spacing:<?= $dir==='rtl'?'0':'-.01em' ?>;line-height:1.3}
.section-head .right{display:flex;gap:10px;align-items:center}
.viewAll{color:#6b7280;font-weight:500;transition:color .2s}
.viewAll:hover{color:#111}
.headNav{display:inline-flex;gap:8px}
.headNav .navh{width:36px;height:36px;border-radius:10px;border:1px solid #e5e7eb;background:#f3f4f6;display:flex;align-items:center;justify-content:center}
.divider{height:1px;background:#eef2f7;margin:10px 0}
.carousel{position:relative}
.row-scroll{display:flex;gap:16px;overflow:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:4px}
.row-scroll::-webkit-scrollbar{display:none}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:#0b1220;color:#fff;border:none;border-radius:999px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:2;opacity:0;transition:opacity .25s,transform .2s}
.nav-btn.prev{left:-10px}
.nav-btn.next{right:-10px}
.carousel:hover .nav-btn{opacity:.95}
.nav-btn:active{transform:translateY(-50%) scale(.96)}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:8px;color:#6b7280}
.card{content-visibility:auto;contain-intrinsic-size:360px 520px}
.card.v2{flex:0 0 280px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:.2s}
.card.v2:hover{transform:translateY(-4px)}
.card.v2 .media{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden}
.card.v2 .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform .35s}
.card.v2 .badsL,.card.v2 .badsR{position:absolute;top:10px;display:flex;gap:6px}
.card.v2 .badsL{left:10px}
.card.v2 .badsR{right:10px;display:flex;gap:4px}
.badge{background:linear-gradient(45deg,#1464ff,#0b3aa1);color:#fff;font-size:12px;padding:6px 10px;border-radius:999px;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.card.v2 .info{padding:14px}
.card.v2 .brand{font-size:13px;color:#6b7280;font-weight:500}
.card.v2 .title{font-weight:800;margin:6px 0;line-height:1.3;height:44px;overflow:hidden;letter-spacing:<?= $dir==='rtl'?'0':'-.01em' ?>}
.stars{display:flex;align-items:center;gap:6px;margin:4px 0 6px}
.stars i{width:16px;height:16px;display:inline-block;background:linear-gradient(90deg,#f59e0b var(--p,0%),#e5e7eb var(--p,0%));-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="m12 17.27 6.18 3.73-1.64-7.03L21 9.24l-7.19-.61L12 2 10.19 8.63 3 9.24l4.46 4.73L5.82 21z"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="m12 17.27 6.18 3.73-1.64-7.03L21 9.24l-7.19-.61L12 2 10.19 8.63 3 9.24l4.46 4.73L5.82 21z"/></svg>') center/contain no-repeat}
.stars .rCount{font-size:13px;color:#6b7280;font-weight:500}
.iconBtn{width:36px;height:36px;border-radius:999px;background:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.1);cursor:pointer;transition:all .2s}
.iconBtn svg{width:20px;height:20px;stroke:#111;fill:none;stroke-width:1.6;transition:all .2s}
.iconBtn:hover{transform:scale(1.05);box-shadow:0 4px 8px rgba(0,0,0,.1)}
.iconBtn:active{transform:scale(.96)}
.iconBtn.active svg{stroke:#ef4444;fill:#ef4444}
.priceBox{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:8px;margin:8px 0}
.priceBox .now{display:flex;align-items:flex-end;gap:4px;font-weight:900}
.priceBox .sym{font-size:14px;opacity:.85}
.priceBox .int{font-size:22px}
.priceBox .dec{font-size:14px}
.priceBox .old{display:flex;align-items:flex-end;gap:2px;color:#6b7280;text-decoration:line-through}
.savePill{justify-self:start;background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:8px;padding:2px 6px;font-size:12px;font-weight:800}
.priceBox .u{grid-column:1/-1;font-size:13px;color:#6b7280;margin-top:4px}
.shipRow{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:13px;color:#111}
.ic.truck{width:16px;height:16px;display:inline-block;background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23111" stroke-width="1.5" xmlns="http://www.w3.org/2000/svg"><path d="M3 7h11v8H3zM14 10h4l3 3v2h-7z"/><circle cx="7" cy="17" r="2"/><circle cx="18" cy="17" r="2"/></svg>') center/contain no-repeat}
.pill{background:#eef2ff;color:#1e3a8a;border:1px solid #dbeafe;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}
.pill.muted{background:#f3f4f6;color:#374151;border-color:#e5e7eb}
.pill.express{background:linear-gradient(45deg,#1464ff,#0b3aa1);color:#fff;border:none}
.card.v2 .cta{display:flex;gap:8px;margin-top:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:10px 12px;cursor:pointer}
.btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.6}
.btn.addCart{background:#1464ff;color:#fff;flex:1}
.catGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.catCard{position:relative;background:#0b1220;color:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-height:200px}
.catCard .img{height:140px;background:#111;overflow:hidden}
.catCard .img img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.catCard .info{padding:12px 12px 46px}
.catCard .title{font-weight:900;margin:0 0 4px}
.catCard .sub{opacity:.85;font-size:13px}
.catCard .go{position:absolute;<?= $dir==='rtl'?'left':'right' ?>:12px;bottom:12px;background:#fff;color:#111;border-radius:12px;border:1px solid #e5e7eb;padding:8px 12px;font-weight:800}
.footer{background:#0f1111;color:#d1d5db;margin-top:30px}
.footer .cols{display:grid;gap:20px;grid-template-columns:2fr 1fr 1fr 1fr;padding:26px 0}
.footer a{color:#e5e7eb}
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:6px}
.hero-dots i{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.5)}
.hero-dots i.active{background:#fff}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);z-index:1000;padding:16px}
.modal .panel{background:#0b1220;color:#e5e7eb;border-radius:18px;max-width:980px;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px;position:relative}
.modal h4{margin:0 0 12px;font-size:20px;font-weight:800;letter-spacing:<?= $dir==='rtl'?'0':'-.01em' ?>}
.modal .colWrap{display:flex;flex-direction:column;gap:12px}
.modal input{height:46px;border-radius:12px;border:1px solid #1f2937;background:#111827;color:#e5e7eb;padding:0 16px;font-size:15px;font-weight:500;transition:all .2s}
.modal input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}
.quickRow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.qTag{background:#111827;border:1px solid #1f2937;border-radius:999px;padding:8px 14px;font-weight:500;cursor:pointer;transition:all .2s}
.qTag:hover{background:#1f2937;border-color:#374151}
.scrollCol{max-height:360px;overflow:auto;display:grid;gap:8px;padding:4px;margin:0 -4px}
.scrollCol::-webkit-scrollbar{width:8px}
.scrollCol::-webkit-scrollbar-track{background:transparent}
.scrollCol::-webkit-scrollbar-thumb{background:#1f2937;border-radius:999px}
.lcItem{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #1f2937;background:#111827;color:#e5e7eb;border-radius:12px;padding:12px 16px;cursor:pointer;transition:all .2s}
.lcItem:hover{background:#1f2937;border-color:#374151}
.lcItem .code{color:#6b7280;font-weight:500}
.qv{position:fixed;inset:0;background:rgba(15,23,42,.85);display:none;align-items:center;justify-content:center;padding:16px;z-index:200;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:qvFadeIn .3s ease-out}
@keyframes qvFadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.qv.closing{animation:qvFadeOut .2s ease-in forwards}
@keyframes qvFadeOut{to{opacity:0;transform:scale(.95)}}
.qv-container{background:#fff;border-radius:20px;max-width:1200px;width:100%;max-height:90vh;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05);position:relative;display:grid;grid-template-rows:auto 1fr;animation:slideUp .3s ease-out}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.qv-header{background:linear-gradient(135deg,#1e40af 0%,#3b82f6 50%,#06b6d4 100%);color:#fff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.qv-header::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');opacity:.5}
.qv-header-content{display:flex;align-items:center;gap:12px;position:relative}
.qv-header-icon{width:32px;height:32px;background:rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center}
.qv-header-text{font-weight:600;font-size:15px}
.qv-close{position:relative;width:36px;height:36px;border:none;background:rgba(255,255,255,.2);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.qv-close:hover{background:rgba(255,255,255,.3);transform:scale(1.05)}
.qv-close svg{width:18px;height:18px}
.qv-body{display:grid;grid-template-columns:1fr 520px;gap:0;height:-webkit-fill-available;overflow:hidden}
.qv-gallery{background:#f8fafc;position:relative;display:flex;flex-direction:column}
.qv-main-image{flex:1;display:flex;align-items:center;justify-content:center;position:relative;cursor:zoom-in;overflow:hidden}
.qv-main-image img{max-width:100%;max-height:100%;object-fit:contain;transition:all .4s cubic-bezier(.4,0,.2,1)}
.qv-main-image:hover img{transform:scale(1.05)}
.qv-thumbnails{display:flex;gap:8px;padding:16px;border-top:1px solid #e2e8f0;background:#fff}
.qv-thumb{width:80px;height:80px;border-radius:12px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .2s;background:#f8fafc;display:flex;align-items:center;justify-content:center}
.qv-thumb:hover{border-color:#e2e8f0;transform:translateY(-2px)}
.qv-thumb.active{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,.3)}
.qv-thumb img{width:100%;height:100%;object-fit:contain}
.qv-zoom-lens{position:absolute;width:120px;height:120px;border:2px solid #3b82f6;border-radius:8px;background:rgba(59,130,246,.1);pointer-events:none;display:none;z-index:3;backdrop-filter:blur(2px)}
.qv-zoom-preview{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;background:#fff;overflow:hidden;display:none;z-index:4;box-shadow:0 0 25px rgba(0,0,0,.3)}
.qv-zoom-preview img{position:absolute;transform-origin:top left}
.qv-details{padding:32px;background:#fff;overflow-y:auto;position:relative}
.qv-specs{background:#f8fafc;border-radius:16px;padding:24px;margin-bottom:24px}
.qv-above{position:relative;min-height:280px}
.qv-zoom-active .qv-above > :not(.qv-zoom-preview){opacity:0;pointer-events:none;transition:opacity .3s}
.qv-zoom-active .qv-zoom-preview{display:flex;align-items:center;justify-content:center}
.qv-zoom-hint{position:absolute;bottom:16px;left:16px;background:rgba(0,0,0,.8);color:#fff;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:500;opacity:0;transition:opacity .2s;backdrop-filter:blur(8px)}
.qv-main-image:hover .qv-zoom-hint{opacity:1}
.qv-details{padding:32px;background:#fff;overflow-y:auto}
.qv-details::-webkit-scrollbar{width:6px}
.qv-details::-webkit-scrollbar-track{background:transparent}
.qv-details::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:3px}
.qv-seller{display:flex;align-items:center;gap:12px;padding:16px;background:#f8fafc;border-radius:16px;margin-bottom:24px}
.qv-seller-avatar{width:48px;height:48px;border-radius:12px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.qv-seller-avatar img{width:100%;height:100%;object-fit:contain}
.qv-seller-info{flex:1}
.qv-seller-name{font-weight:700;font-size:16px;margin-bottom:2px}
.qv-seller-rating{font-size:14px;color:#64748b;display:flex;align-items:center;gap:6px}
.qv-verified{background:#dcfdf7;color:#059669;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px}
.qv-title{font-size:32px;font-weight:800;line-height:1.2;margin:0 0 8px 0;color:#0f172a}
.qv-brand{color:#64748b;font-size:16px;font-weight:500;margin-bottom:16px}
.qv-badges{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.qv-badge{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600}
.qv-badge.deal{background:#fef3c7;color:#d97706}
.qv-badge.new{background:#dbeafe;color:#2563eb}
.qv-badge.luxury{background:#f3e8ff;color:#7c3aed}
.qv-badge.express{background:#dcfdf7;color:#059669}
.qv-badge.trending{background:#fee2e2;color:#dc2626}
.qv-price{margin-bottom:24px}
.qv-price .now{display:flex;align-items:baseline;gap:4px;margin-bottom:8px}
.qv-price .currency{color:#64748b;font-size:18px;font-weight:500}
.qv-price .amount{font-size:36px;font-weight:900;color:#0f172a}
.qv-price .decimal{font-size:24px;font-weight:900;color:#64748b}
.qv-price .old{color:#64748b;text-decoration:line-through;font-size:18px}
.qv-price .discount{background:#fecaca;color:#991b1b;padding:4px 8px;border-radius:8px;font-size:12px;font-weight:700;margin-left:8px}
.qv-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.qv-info-item{background:#f8fafc;border-radius:16px;padding:20px;text-align:center;transition:all .2s}
.qv-info-item:hover{background:#f1f5f9;transform:translateY(-2px)}
.qv-info-item.primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}
.qv-info-label{font-size:12px;font-weight:600;color:#64748b;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.qv-info-item.primary .qv-info-label{color:rgba(255,255,255,.8)}
.qv-info-value{font-size:16px;font-weight:700;color:#0f172a}
.qv-info-item.primary .qv-info-value{color:#fff}
.qv-specs{background:#f8fafc;border-radius:16px;padding:24px;margin-bottom:24px}
.qv-specs-title{font-size:18px;font-weight:700;margin-bottom:16px;color:#0f172a}
.qv-specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.qv-spec-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #e2e8f0}
.qv-spec-item:last-child{border-bottom:none}
.qv-spec-label{color:#64748b;font-weight:500}
.qv-spec-value{font-weight:600;color:#0f172a}
.qv-actions{display:grid;grid-template-columns:1fr auto auto;gap:12px;margin-top:auto}
.qv-btn{height:52px;border-radius:16px;font-weight:600;font-size:16px;border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.qv-btn-primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;flex:1}
.qv-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(59,130,246,.4)}
.qv-btn-secondary{background:#f8fafc;color:#374151;width:52px}
.qv-btn-secondary:hover{background:#f1f5f9;transform:translateY(-2px)}
.qv-btn-secondary.active{background:#fecaca;color:#dc2626}
.qv-btn svg{width:20px;height:20px}