*{box-sizing:border-box;margin:0;padding:0}
  :root{
    --bg:#f4f6fb; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e3e8f0;
    --brand:#10b981; --brand-dark:#059669; --brand-soft:#d1fae5;
    --amber:#f59e0b; --blue:#3b82f6; --violet:#8b5cf6; --green:#22c55e; --rose:#f43f5e; --red:#ef4444;
    --shadow:0 1px 3px rgba(15,23,42,.07),0 6px 20px rgba(15,23,42,.06);
    --radius:16px;
  }
  html{scroll-behavior:smooth}
  /* تثبيت الصفحة أفقياً — تمنع انزلاقها يميناً/يساراً عند التكبير أو السحب بالماوس واللمس،
     فيبقى المحتوى في المنتصف ولا يختفي. clip لا يكسر الهيدر الملتصق (sticky) بعكس hidden،
     وhidden مكتوب قبله كبديل للمتصفحات الأقدم التي لا تدعم clip. */
  html,body{max-width:100%;overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
  .site-gate{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:20px}
  .gate-card{background:#fff;border-radius:20px;padding:34px 28px;max-width:340px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
  .gate-card h2{font-size:19px;font-weight:900;margin-top:10px}
  .gate-card p{color:var(--muted);font-size:13.5px;margin-top:4px;margin-bottom:16px}
  /* معاينة رابط المتجر أثناء الكتابة */
  .slug-preview{margin-top:6px;padding:7px 11px;border-radius:9px;font-size:12.5px;line-height:1.7;
    background:var(--bg);border:1px solid var(--line);color:var(--muted)}
  .slug-preview.checking{background:#fffbeb;border-color:#fde68a;color:#92400e}
  .slug-preview.ok{background:#ecfdf5;border-color:#6ee7b7;color:#065f46}
  .slug-preview.bad{background:#fef2f2;border-color:#fecaca;color:#991b1b}

  /* وصف نوع الرخصة المختار — يتغيّر مع القائمة */

  /* بطاقتا اختيار نوع البيع — بنفس هوية الموقع */

  /* الإعلان السريع */
  .qa-verified{background:#ecfdf5;border:1px solid #6ee7b7;color:#065f46;border-radius:10px;
    padding:9px 12px;font-size:13px;font-weight:800;margin-bottom:14px}
  .qa-imgs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .qa-img{position:relative;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
  .qa-img img{width:100%;height:100%;object-fit:cover;display:block}
  .qa-img button{position:absolute;top:3px;inset-inline-end:3px;background:rgba(15,23,42,.72);color:#fff;
    border:none;border-radius:50%;width:20px;height:20px;font-size:11px;cursor:pointer;line-height:1}
  .sell-choice{display:flex;gap:14px;align-items:flex-start;background:var(--card);
    border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;transition:.18s}
  .sell-choice:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(16,185,129,.14);transform:translateY(-2px)}
  .sell-choice .sc-ic{font-size:34px;line-height:1.1;flex:none}
  .sell-choice .sc-title{font-weight:900;font-size:16.5px;margin-bottom:3px}
  .sell-choice .sc-desc{font-size:13px;color:var(--muted);line-height:1.85}
  .lic-desc{background:var(--bg);border:1px solid var(--line);border-inline-start:3px solid var(--brand);
    border-radius:9px;padding:8px 12px;font-size:12.5px;color:var(--muted);line-height:1.7;margin:-6px 0 12px}

  /* ملاحظة الدعم أعلى نموذج تسجيل التاجر */
  .support-note{display:flex;gap:11px;align-items:flex-start;background:#eff6ff;border:1px solid #bfdbfe;
    border-radius:12px;padding:12px 14px;margin-bottom:16px}
  .support-note .sn-ic{font-size:20px;line-height:1.2;flex:none}
  .support-note b{display:block;font-size:13.5px;font-weight:900;color:#1e40af;margin-bottom:2px}
  .support-note p{font-size:12.8px;color:#1e3a8a;line-height:1.75;margin:0}
  .support-note .sn-num{direction:ltr;display:inline-block;unicode-bidi:embed;font-weight:900;
    color:#1d4ed8;text-decoration:underline;white-space:nowrap}
  .gate-card .input{text-align:center;letter-spacing:4px;font-size:18px;font-weight:800}
  body{
    font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.6; min-height:100vh;
  }
  .wrap{max-width:1120px;margin:0 auto;padding:0 16px}
  .num{direction:ltr;display:inline-block;unicode-bidi:embed}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  input,select,textarea{font-family:inherit;font-size:15px;color:var(--ink)}
  a{cursor:pointer;color:inherit;text-decoration:none}

  /* ============ شريط التنبيه التجريبي ============ */
  #demoBar{background:linear-gradient(90deg,#134e4a,#065f46);color:#d1fae5;font-size:13px;text-align:center;padding:6px 12px}
  #demoBar b{color:#fff}

  /* ============ الهيدر ============ */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .hbar{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:wrap}
  .logo{font-size:20px;font-weight:900;color:var(--brand-dark);display:flex;align-items:center;gap:8px;white-space:nowrap}
  .logo-mark{width:30px;height:30px;border-radius:8px;display:block;flex:0 0 auto}
  .logo small{font-size:11px;color:var(--muted);font-weight:600}
  .mainnav{display:flex;gap:4px;flex:1;min-width:200px}
  .mainnav a{padding:8px 14px;border-radius:10px;font-weight:700;font-size:15px;color:var(--muted);transition:.15s;display:flex;align-items:center;gap:6px}
  .mainnav a:hover{background:var(--bg);color:var(--ink)}
  .navbadge{background:var(--brand);color:#fff;font-size:11px;border-radius:99px;min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-weight:800}
  .seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px;gap:2px}
  .seg button{padding:7px 13px;border-radius:9px;font-weight:800;font-size:13.5px;color:var(--muted);transition:.15s;white-space:nowrap}
  .seg button.on{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.35)}
  .iconbtn{position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--muted)}
  .icon-badge{position:absolute;top:-6px;inset-inline-end:-6px}
  .langbtn{height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;white-space:nowrap;flex:none}
  .langbtn:hover{border-color:var(--brand);color:var(--brand-dark)}
  .iconbtn:hover{color:var(--ink);border-color:#cbd5e1}

  /* ============ أزرار ============ */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;border-radius:12px;font-weight:800;font-size:15px;transition:.15s;border:1px solid transparent}
  .btn-primary{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(16,185,129,.3)}
  .btn-primary:hover{background:var(--brand-dark)}
  .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand-dark)}
  .btn-danger{background:#fff;border-color:#fecaca;color:var(--red)}
  .btn-danger:hover{background:var(--red);color:#fff}
  .btn-sm{padding:7px 14px;font-size:13.5px;border-radius:10px}
  .btn-block{width:100%}
  .btn:disabled{opacity:.5;cursor:not-allowed}

  /* ============ بطاقات ============ */
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .card-pad{padding:20px}
  .h2{font-size:21px;font-weight:900;margin-bottom:4px}
  .sub{color:var(--muted);font-size:14px}
  .muted{color:var(--muted)}
  .price{font-weight:900;color:var(--ink)}
  .price small{font-weight:700;color:var(--muted);font-size:12px}

  /* ============ هيرو + بانرات ============ */
  .hero{background:linear-gradient(135deg,#0d9488,#059669 55%,#10b981);color:#fff;border-radius:20px;padding:26px 26px;margin:14px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;box-shadow:0 10px 26px rgba(5,150,105,.22)}
  .hero > div:first-child{flex:1;min-width:0}
  .hero h1{font-size:25px;font-weight:900;line-height:1.35;text-wrap:balance}
  .hero p{color:#d1fae5;font-size:15px;margin-top:4px;max-width:520px}
  .hero .emoji{font-size:64px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
  /* شعار المنصة داخل شريط الترحيب — أبيض ليظهر على الخلفية الخضراء */
  .hero-logo{flex:none;display:flex;align-items:center;justify-content:center}
  .hero-logo img{height:120px;width:auto;max-width:230px;object-fit:contain;
    filter:brightness(0) invert(1) drop-shadow(0 6px 14px rgba(0,0,0,.28))}
  @media(max-width:640px){ .hero-logo img{height:84px;max-width:170px} }
  /* الأرقام الثلاثة صفٌّ واحد دائماً — الالتفاف 2+1 كان يكسر التوازن */
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
  .hero-stat{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:9px 6px;text-align:center;min-width:0}
  .hero-stat b{display:block;font-size:20px;font-weight:900;color:#fff;line-height:1.2}
  .hero-stat span{display:block;font-size:10.5px;color:#d1fae5;font-weight:700;margin-top:2px;line-height:1.3}

  /* على الجوال: بطاقة مضغوطة لا تبتلع الشاشة */
  @media(max-width:640px){
    .hero{padding:20px 18px;margin:12px 0 14px;border-radius:18px;gap:12px}
    .hero h1{font-size:20px;line-height:1.35}
    .hero p{font-size:13px;margin-top:6px}
    .hero-logo{display:none}          /* الشعار موجود في الترويسة أصلاً */
    .hero-stats{margin-top:14px;gap:6px}
    .hero-stat{padding:8px 4px}
    .hero-stat b{font-size:18px}
    .hero-stat span{font-size:9.5px}
  }
  .banner-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
  .banner{flex:0 0 300px;scroll-snap-align:start;border-radius:16px;padding:18px;color:#fff;min-height:110px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow)}
  .banner .b-emoji{font-size:30px}
  .banner .b-title{font-weight:900;font-size:17px}
  .banner .b-sub{font-size:12.5px;opacity:.92}
  .grad-emerald{background:linear-gradient(135deg,#10b981,#0d9488)}
  .grad-indigo{background:linear-gradient(135deg,#6366f1,#4f46e5)}
  .grad-rose{background:linear-gradient(135deg,#f43f5e,#e11d48)}
  .grad-amber{background:linear-gradient(135deg,#f59e0b,#d97706)}
  .grad-sky{background:linear-gradient(135deg,#0ea5e9,#0284c7)}

  /* ============ شرائح الأقسام ============ */
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
  .chip{padding:8px 18px;border-radius:99px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:14px;color:var(--muted);transition:.15s}
  .chip:hover{border-color:var(--brand);color:var(--brand-dark)}
  .chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:800}
  .searchbox{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 14px}
  .searchbox input{border:none;outline:none;flex:1;background:none}
  .searchbox span{color:var(--muted)}

  /* ============ شبكة المتاجر والمنتجات ============ */
  .grid-stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:16px}
  .grid-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px;margin-top:18px}
  .store-card{padding:18px;display:flex;flex-direction:column;gap:10px;transition:.18s}
  .store-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,23,42,.12)}
  .store-top{display:flex;align-items:center;gap:12px}
  .tile{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
  .tile-lg{width:74px;height:74px;font-size:40px;border-radius:18px}
  .cat-tag{font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:99px;background:var(--brand-soft);color:var(--brand-dark)}
  .prod-card{padding:16px;display:flex;flex-direction:column;gap:9px;transition:.18s;position:relative}
  .prod-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,23,42,.12)}
  .prod-card .ptile{width:100%;height:auto;aspect-ratio:3/4;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:56px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);position:relative;overflow:hidden}
  .prod-card .ptile img,.ctile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  /* صورة صفحة المنتج تظهر كاملة دائماً — contain لا cover:
     العبايات والفساتين صور طويلة، وcover كان يقصّ أعلاها وأسفلها.
     الارتفاع مرن بين حدّين حتى لا تبتلع الصور العملاقة الشاشة. */
  .pv-photo{width:100%;height:min(60vh,480px);min-height:300px;border-radius:16px 16px 0 0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:90px;background:linear-gradient(135deg,#f8fafc,#f1f5f9)}
  .pv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

  /* ============ قوالب متجر التاجر — أزياء/تقنية/مأكولات ============ */
  .tpl-fashion-hero{background:linear-gradient(160deg,#1c1410,#2b1e14);color:#f5f0e6;border-radius:22px;padding:36px 22px;text-align:center;margin-bottom:20px}
  .tpl-fashion-hero h2{font-size:24px;font-weight:900;margin-top:14px;letter-spacing:.3px}
  .tpl-fashion-cat{display:inline-block;margin-top:8px;padding:4px 14px;border:1px solid #c9a227;border-radius:99px;color:#c9a227;font-size:11.5px;font-weight:800}
  .tpl-fashion-hero p{margin-top:10px;color:#d8cdb8;font-size:13.5px;max-width:420px;margin-inline:auto}
  .tpl-fashion-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .tpl-fashion-card{background:#fff;border:1px solid #ece4d3;border-radius:16px;overflow:hidden;cursor:pointer;transition:.18s}
  .tpl-fashion-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(28,20,16,.14)}
  .tpl-fashion-card .ph{width:100%;height:180px;position:relative;background:linear-gradient(135deg,#f8fafc,#f1f5f9)}
  .tpl-fashion-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  .tpl-fashion-info{padding:12px 14px}
  .tpl-fashion-info .nm{font-weight:800;font-size:13.5px;color:#1c1410}
  .tpl-fashion-info .pr{color:#c9a227;font-weight:900;font-size:16px;margin-top:6px}

  .tpl-tech-hero{background:linear-gradient(120deg,#0b1220,#1e3a8a);color:#e2e8f0;border-radius:18px;padding:20px;display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
  .tpl-tech-hero h2{font-size:19px;font-weight:900}
  .tpl-tech-cat{display:inline-block;margin-top:4px;font-size:11px;font-weight:800;color:#38bdf8}
  .tpl-tech-count{margin-inline-start:auto;text-align:center;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35);border-radius:12px;padding:8px 16px}
  .tpl-tech-count b{display:block;font-size:18px;color:#38bdf8}
  .tpl-tech-count span{font-size:10px;color:#94a3b8}
  .tpl-tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:10px}
  .tpl-tech-card{background:#0f172a;border:1px solid #1e293b;border-radius:12px;overflow:hidden;cursor:pointer;color:#e2e8f0}
  .tpl-tech-card .ph{width:100%;height:100px;position:relative;background:#1e293b}
  .tpl-tech-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  .tpl-tech-info{padding:8px 10px}
  .tpl-tech-info .nm{font-size:11.5px;font-weight:700;color:#e2e8f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tpl-tech-info .pr{color:#38bdf8;font-weight:900;font-size:13.5px;margin-top:4px}

  .tpl-bakery-hero{background:#fff7ed;border:1px solid #fed7aa;border-radius:20px;padding:26px;text-align:center;margin-bottom:18px}
  .tpl-bakery-hero h2{font-size:21px;font-weight:900;color:#7c2d12;margin-top:10px}
  .tpl-bakery-hero p{color:#9a3412;font-size:13.5px;margin-top:6px}
  .tpl-bakery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
  .tpl-bakery-card{background:#fff;border:1px solid #fed7aa;border-radius:20px;padding:14px;text-align:center;cursor:pointer;transition:.18s}
  .tpl-bakery-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(124,45,18,.12)}
  .tpl-bakery-card .ph{width:96px;height:96px;border-radius:50%;overflow:hidden;position:relative;margin:0 auto;background:#fff7ed;border:3px solid #fdba74}
  .tpl-bakery-card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  .tpl-bakery-info .nm{font-weight:800;font-size:13px;color:#7c2d12;margin-top:10px}
  .tpl-bakery-info .pr{color:#c2410c;font-weight:900;font-size:15px;margin-top:4px}

  /* بطاقات اختيار القالب بلوحة التاجر */
  .tpl-pick-card{border:2px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .tpl-pick-card.on{border-color:var(--brand);background:var(--brand-soft)}
  .tpl-swatch{display:flex;gap:3px;flex-shrink:0}
  .tpl-swatch span{width:14px;height:28px;border-radius:4px;display:block}
  .ctile{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;border-radius:10px;background:var(--bg);flex:0 0 46px;border:1px solid var(--line)}
  .ctile .ptile-emoji{font-size:22px;line-height:1}
  .prod-name{font-weight:900;font-size:15.5px}
  .prod-desc{font-size:12.5px;color:var(--muted);flex:1}
  .prod-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
  .addbtn{width:38px;height:38px;border-radius:11px;background:var(--brand);color:#fff;font-size:21px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(16,185,129,.35);transition:.15s}
  .addbtn:hover{background:var(--brand-dark);transform:scale(1.06)}
  .stock{font-size:11.5px;color:var(--muted)}

  /* ============ واجهة الزبون — أسلوب التسوق الحديث ============ */
  .searchbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);margin:16px 0 2px}
  .searchbar input{border:none;outline:none;flex:1;background:none;font-size:15px;font-weight:700}
  .searchbar span{color:var(--muted)}
  .sort-btn{flex:none;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;position:relative;white-space:nowrap}
  .sort-btn:hover{border-color:var(--brand);color:var(--brand-dark)}
  .sort-btn.on{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-soft)}
  .sort-btn .sf-lb{display:none}
  @media(min-width:520px){.sort-btn .sf-lb{display:inline}}
  .sort-btn .sf-dot{position:absolute;top:-3px;left:-3px;width:9px;height:9px;border-radius:50%;background:#ef4444;border:2px solid #fff}
  .sf-sec-lb{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:8px}
  .sf-opts{display:flex;flex-direction:column;gap:6px}
  .sf-opt{text-align:start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:700;cursor:pointer;color:var(--ink)}
  .sf-opt:hover{border-color:var(--brand)}
  .sf-opt.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}
  .sf-check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin-top:12px;cursor:pointer}
  .cat-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .cat-scroll::-webkit-scrollbar,.row-prods::-webkit-scrollbar,.store-strip::-webkit-scrollbar{display:none}
  .cat-ic{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;background:none;border:none;scroll-snap-align:start;width:78px}
  .cat-ic .c-ic{width:62px;height:62px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:var(--shadow);transition:.15s}
  .cat-ic:hover .c-ic{border-color:var(--brand);transform:translateY(-2px)}
  .cat-ic .c-lb{font-size:11.5px;font-weight:800;color:var(--muted);text-align:center;line-height:1.25}
  .row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 10px}
  .row-head h3{font-size:18px;font-weight:900;display:flex;align-items:center;gap:8px}
  .seeall{font-size:13px;font-weight:800;color:var(--brand-dark);background:var(--brand-soft);border:none;border-radius:99px;padding:6px 14px;cursor:pointer;white-space:nowrap}
  .seeall:hover{background:var(--brand);color:#fff}
  .row-prods{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .row-prods .prod-card{flex:0 0 176px;scroll-snap-align:start}
  .off-badge{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;font-size:11.5px;font-weight:900;border-radius:8px;padding:3px 9px;box-shadow:0 2px 8px rgba(239,68,68,.35);z-index:2}
  .old-price{font-size:12.5px;color:var(--muted);text-decoration:line-through;font-weight:700}
  .pstore{font-size:11px;font-weight:800;color:var(--brand-dark);display:flex;align-items:center;gap:4px}
  .store-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch}
  .store-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;background:none;border:none;width:86px;scroll-snap-align:start}
  .store-chip .tile{width:64px;height:64px;border-radius:18px;font-size:30px}
  .store-chip .sc-lb{font-size:11px;font-weight:800;color:var(--muted);text-align:center;line-height:1.2}
  .cat-filter{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 14px;-webkit-overflow-scrolling:touch}
  .cat-filter::-webkit-scrollbar{display:none}
  .cf-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 14px 7px 10px;font-weight:800;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.15s}
  .cf-chip .cf-ic{font-size:17px}
  .cf-chip:hover{border-color:var(--brand);color:var(--brand-dark)}
  .cf-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
  .cf-chip.on:hover{color:#fff}

  /* ============ السلة ============ */
  .cart-store{padding:18px;margin-bottom:14px}
  .cart-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
  .cart-row:last-child{border-bottom:none}
  .cart-row .ctile{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--bg);flex-shrink:0}
  .cart-row .c-info{flex:1;min-width:0}
  .cart-row .c-name{font-weight:800;font-size:14.5px}
  .cart-row .c-price{font-size:13px;color:var(--muted)}
  .stepper{display:flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px}
  .stepper button{width:26px;height:26px;border-radius:8px;background:#fff;font-weight:900;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:center}
  .stepper button:hover{background:var(--brand);color:#fff}
  .stepper .qty{min-width:26px;text-align:center;font-weight:800;font-size:14px}
  .rmbtn{color:#cbd5e1;font-size:17px;padding:6px}
  .rmbtn:hover{color:var(--red)}
  .cart-summary{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:1px solid var(--line);background:var(--bg);border-radius:0 0 var(--radius) var(--radius)}
  .delivery-note{font-size:12.5px;color:var(--muted);background:#fef9c3;border:1px solid #fde68a;border-radius:10px;padding:9px 12px;margin-top:12px}

  /* ============ نماذج ============ */
  .field{margin-bottom:14px}
  .label{display:block;font-weight:800;font-size:13.5px;margin-bottom:6px}
  .input,select.input,textarea.input{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;outline:none;background:#fff;transition:.15s}
  .input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(16,185,129,.15)}
  textarea.input{resize:vertical;min-height:70px}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  @media(max-width:640px){.form-grid{grid-template-columns:1fr}}
  .hint{font-size:12px;color:var(--muted);margin-top:5px}
  .pf-gallery{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .pf-thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
  .pf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .pf-thumb button{position:absolute;top:2px;left:2px;width:18px;height:18px;border:none;border-radius:50%;background:rgba(15,23,42,.75);color:#fff;font-size:11px;line-height:1;cursor:pointer}
  .pf-add{width:64px;height:64px;border-radius:10px;border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--muted);cursor:pointer}
  .pf-add:hover{border-color:var(--brand);color:var(--brand-dark)}
  .up-box{border-radius:10px;border:1.5px solid var(--brand);background:var(--brand-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px}
  .up-pct{font-size:15px;font-weight:900;color:var(--brand-dark);font-variant-numeric:tabular-nums}
  .up-track{width:74%;height:6px;border-radius:99px;background:rgba(0,0,0,.12);overflow:hidden}
  .up-fill{height:100%;background:var(--brand);border-radius:99px;transition:width .15s linear}

  /* ============ الطلبات + الخط الزمني ============ */
  .order-card{padding:18px;margin-bottom:16px}
  .order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px}
  .order-id{font-weight:900;font-size:14px;color:var(--muted)}
  .status-badge{font-size:12.5px;font-weight:800;padding:4px 13px;border-radius:99px;display:inline-flex;align-items:center;gap:5px}
  .st-new{background:#fef3c7;color:#b45309}
  .st-preparing{background:#dbeafe;color:#1d4ed8}
  .st-out{background:#ede9fe;color:#6d28d9}
  .st-delivered{background:#dcfce7;color:#15803d}
  .timeline{display:flex;align-items:center;margin:14px 0;gap:0}
  .tl-step{flex:1;text-align:center;position:relative;font-size:11.5px;font-weight:800;color:#cbd5e1;padding-top:26px}
  .tl-step::before{content:'';position:absolute;top:8px;right:50%;transform:translateX(50%);width:16px;height:16px;border-radius:50%;background:#e2e8f0;border:3px solid #f1f5f9;box-shadow:0 0 0 1px #cbd5e1;z-index:2}
  .tl-step::after{content:'';position:absolute;top:14px;right:50%;width:100%;height:3px;background:#e2e8f0;z-index:1}
  .tl-step:first-child::after{width:50%;right:50%}
  .tl-step:last-child::after{width:50%;left:50%;right:auto}
  .tl-step.done{color:var(--brand-dark)}
  .tl-step.done::before{background:var(--brand);border-color:#a7f3d0;box-shadow:none}
  .tl-step.done::after{background:var(--brand)}
  .tl-step.current{color:var(--blue)}
  .tl-step.current::before{background:var(--blue);border-color:#bfdbfe;box-shadow:0 0 0 4px rgba(59,130,246,.25);animation:pulse 1.6s infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 8px rgba(59,130,246,.12)}}
  .items-list{background:var(--bg);border-radius:12px;padding:10px 14px;font-size:13.5px}
  .items-list .irow{display:flex;justify-content:space-between;padding:5px 0;gap:10px}
  .items-list .irow .q{color:var(--muted);font-weight:700}
  .totals{display:flex;justify-content:space-between;padding:4px 0;font-size:13.5px}
  .totals b{font-weight:900}
  .cash-line{background:#fef9c3;border:1px solid #fde68a;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700;color:#92400e;margin-top:8px}

  /* ============ لوحات التاجر والإدارة ============ */
  .portal-head{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;border-radius:18px;padding:22px;margin:18px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .portal-head h2{font-size:21px;font-weight:900}
  .portal-head .sub{color:#94a3b8}
  .tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}
  .tab{padding:9px 18px;border-radius:11px;background:#fff;border:1px solid var(--line);font-weight:800;font-size:14px;color:var(--muted);transition:.15s}
  .tab:hover{border-color:var(--brand);color:var(--brand-dark)}
  .tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:16px 0}
  .stat{padding:18px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
  .stat .v{font-size:26px;font-weight:900;margin-top:2px}
  .stat .k{font-size:13px;color:var(--muted);font-weight:700}
  .stat .ic{font-size:22px}
  table.tbl{width:100%;border-collapse:collapse;font-size:14px}
  .tbl-wrap{overflow-x:auto}
  .tbl th{text-align:right;font-size:12px;color:var(--muted);font-weight:800;padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
  .tbl td{padding:11px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
  .tbl tr:hover td{background:#f8fafc}
  .app-card{padding:18px;border-radius:14px;background:#fff;border:1px solid var(--line);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:var(--shadow)}
  .app-card .who{font-weight:900}
  .app-card .meta{font-size:13px;color:var(--muted)}

  /* ============ شريط التقارير ============ */
  .bar-row{display:flex;align-items:center;gap:12px;margin:9px 0;font-size:13.5px}
  .bar-row .bname{width:150px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bar-track{flex:1;background:#eef2f7;border-radius:8px;height:22px;overflow:hidden}
  .bar-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--brand),#34d399);display:flex;align-items:center;justify-content:flex-end;padding:0 8px;color:#fff;font-size:11.5px;font-weight:800;min-width:20px;transition:width .5s}

  /* ============ نافذة منبثقة + توست ============ */
  #modalRoot .overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
  #modalRoot .modal{background:#fff;border-radius:20px;max-width:500px;width:100%;max-height:88vh;overflow-y:auto;padding:24px;animation:pop .18s ease;box-shadow:0 25px 60px rgba(0,0,0,.3)}
  @keyframes pop{from{transform:translateY(14px) scale(.97);opacity:0}}
  .modal h3{font-size:19px;font-weight:900;margin-bottom:14px}
  .modal-x{float:left;width:34px;height:34px;border-radius:10px;background:var(--bg);font-size:16px;color:var(--muted);display:flex;align-items:center;justify-content:center}
  .modal-x:hover{background:#fee2e2;color:var(--red)}
  #toastRoot{position:fixed;bottom:22px;right:0;left:0;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:200;pointer-events:none}
  .toast{background:#0f172a;color:#fff;padding:11px 20px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:pop .2s ease;pointer-events:auto}
  .toast.good{background:var(--brand-dark)}
  .toast.bad{background:var(--red)}

  .empty{padding:50px 20px;text-align:center;color:var(--muted)}
  .empty .e{font-size:46px;margin-bottom:10px}
  .success-banner{background:#dcfce7;border:1px solid #86efac;color:#166534;border-radius:14px;padding:16px 18px;font-weight:800;margin-bottom:16px;display:flex;gap:10px;align-items:center}
  footer{margin:40px 0 20px;text-align:center;color:var(--muted);font-size:13px}
  .step-list{counter-reset:st}
  .step-list li{list-style:none;display:flex;gap:12px;align-items:flex-start;padding:9px 0}
  .step-list li::before{counter-increment:st;content:counter(st);width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:2px}
  .mini{font-size:12.5px;color:var(--muted)}
  .row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

  /* ============ تسجيل الدخول ============ */
  .auth-wrap{min-height:72vh;display:flex;align-items:center;justify-content:center;padding:30px 0}
  .auth-card{max-width:440px;width:100%;padding:28px;border-radius:22px}
  .auth-head{text-align:center;margin-bottom:6px}
  .auth-emoji{font-size:52px;margin-bottom:6px}
  .auth-head h2{font-size:22px;font-weight:900}
  .auth-head .sub{margin-top:4px}
  .auth-hint{background:#ecfdf5;border:1px dashed #6ee7b7;color:#065f46;border-radius:12px;padding:10px 14px;font-size:13px;margin-top:14px}
  .auth-or{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:12.5px;font-weight:800}
  .auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--line)}
  .auth-phone{font-size:20px;letter-spacing:2px}
  .auth-otp{font-size:26px;letter-spacing:12px;text-align:center;font-weight:900}
  .role-card{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:.15s;background:#fff}
  .role-card:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(16,185,129,.15);transform:translateX(-3px)}
  .rc-ic{font-size:30px;width:52px;height:52px;border-radius:13px;background:var(--bg);display:flex;align-items:center;justify-content:center}
  .rc-t{font-weight:900;font-size:16px}
  .rc-arrow{color:var(--brand);font-weight:900}

  /* ============ شريحة المستخدم + شريط المعاينة ============ */
  .userchip{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:5px 6px 5px 12px}
  .uc-ic{font-size:17px}
  .uc-t{font-weight:800;font-size:13.5px;display:flex;flex-direction:column;line-height:1.2;text-align:right}
  .uc-t small{color:var(--muted);font-weight:600;font-size:11px}
  .uc-out{background:var(--ink);color:#fff;border-radius:9px;padding:6px 12px;font-weight:800;font-size:12.5px}
  .uc-out:hover{background:var(--red)}
  .previewbar{background:#fef3c7;border:1px solid #fde68a;color:#92400e;border-radius:0 0 12px 12px;padding:7px 16px;font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
  .previewbar button{background:#92400e;color:#fff;border-radius:9px;padding:5px 14px;font-weight:800;font-size:12.5px}

  /* ══════ الإعلانات السريعة — عرض عام ══════
     قريبة من هوية الموقع لكن بلمسة كهرمانية مميزة، حتى يعرف الزبون
     فوراً أنه أمام إعلان فردي وليس منتج متجر معتمد. */
  .qad-card{padding:14px;display:flex;flex-direction:column;gap:8px;position:relative;cursor:pointer;
    border:1px solid #fde68a;background:linear-gradient(180deg,#fffdf6,#fff);transition:.18s}
  .qad-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(245,158,11,.18);border-color:var(--amber)}
  .qad-badge{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
    background:#fef3c7;color:#92400e;border:1px solid #fcd34d;
    font-size:11px;font-weight:900;padding:3px 9px;border-radius:99px}
  .qad-tile{width:100%;height:120px;border-radius:12px;overflow:hidden;position:relative;
    display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fefce8,#f8fafc)}
  .qad-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  .qad-ph{font-size:44px;opacity:.4}
  .qad-name{font-weight:800;font-size:14.5px;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:44px}
  .qad-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .qad-cond{font-size:11px;font-weight:800;padding:2px 9px;border-radius:99px;background:#f1f5f9;color:var(--muted)}
  .qad-cond.is-new{background:var(--brand-soft);color:var(--brand-dark)}
  .qad-foot{display:flex;align-items:center;justify-content:space-between}
  .qad-by{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);
    padding-top:7px;border-top:1px dashed var(--line)}
  .qad-verified{display:inline-flex;align-items:center;gap:3px;background:#ecfdf5;color:#065f46;
    border:1px solid #6ee7b7;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:99px}

  .qad-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
  .qad-count{padding:12px 20px;border-radius:12px;background:#fffbeb;border:1px solid #fde68a;text-align:center}
  .qad-count b{display:block;font-weight:900;font-size:22px;color:#92400e}
  .qad-count span{font-size:12px;color:var(--muted)}
  .qad-filters{margin-top:6px}
  .qad-filters .chips{margin:8px 0}

  .qad-detail{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
  .qad-gallery{flex:1 1 300px;min-width:260px}
  .qad-main{width:100%;height:300px;border-radius:14px;overflow:hidden;position:relative;
    display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fefce8,#f8fafc)}
  .qad-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  .qad-thumbs{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
  .qad-thumb{width:60px;height:60px;border-radius:9px;overflow:hidden;border:2px solid var(--line);
    padding:0;background:none;cursor:pointer;transition:.15s}
  .qad-thumb.on{border-color:var(--amber)}
  .qad-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .qad-info{flex:1 1 280px;min-width:250px}
  .qad-price{font-weight:900;font-size:26px;color:var(--brand-dark);margin:8px 0 14px}
  .qad-facts{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:14px}
  .qad-facts>div{background:var(--bg);border-radius:10px;padding:9px 12px}
  .qad-facts span{display:block}
  .qad-seller{border-top:1px dashed var(--line);padding-top:12px}
  .qad-warn{margin:16px 0 26px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;
    border-radius:12px;padding:13px 16px;font-size:13px;line-height:1.8}

  /* بطاقة تنبيه نوع النتيجة داخل البحث العام */
  .res-kind{font-size:11px;font-weight:900;padding:3px 9px;border-radius:99px;align-self:flex-start}
  .res-kind.shop{background:var(--brand-soft);color:var(--brand-dark)}

  @media(max-width:620px){
    .qad-main{height:230px}
    .qad-facts{grid-template-columns:1fr}
  }

  /* شارة الرفع — «مرفوع» فقط، بلا أي إيحاء بجودة أو توصية من المنصة */
  .qad-boost{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
    background:linear-gradient(135deg,#dbeafe,#e0e7ff);color:#1e40af;border:1px solid #93c5fd;
    font-size:11px;font-weight:900;padding:3px 9px;border-radius:99px}
  .qad-card:has(.qad-boost){border-color:#93c5fd;background:linear-gradient(180deg,#f8fbff,#fff)}
  .qad-card:has(.qad-boost):hover{box-shadow:0 10px 26px rgba(59,130,246,.18);border-color:var(--blue)}

  /* شارة رفع المنتج داخل بطاقة المنتج */
  .prod-card.is-boosted{border:1px solid #93c5fd;background:linear-gradient(180deg,#f8fbff,#fff)}
  .prod-card.is-boosted:hover{box-shadow:0 10px 26px rgba(59,130,246,.18)}
  .prod-boost{position:absolute;top:10px;inset-inline-start:10px;z-index:2}

/* ============================================================
   الشريط السفلي — يظهر على الجوال فقط، والحاسوب يستخدم القائمة العلوية
   ============================================================ */
#bottomNav { display: none; }

@media (max-width: 860px) {
  #bottomNav {
    display: grid;
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
    align-items: end;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid var(--line, #e6ebf2);
    /* مساحة آمنة لهواتف بشريط إيماءات سفلي */
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 14px rgba(15, 23, 42, .07);
  }
  /* الزر البارز يشغل خانتين ليقع في المنتصف تماماً */
  #bottomNav .bn-add { grid-column: 3; }
  #bottomNav .bn-item:nth-of-type(1) { grid-column: 1; }
  #bottomNav .bn-item:nth-of-type(2) { grid-column: 2; }
  #bottomNav .bn-item:nth-of-type(3) { grid-column: 4; }
  #bottomNav .bn-item:nth-of-type(4) { grid-column: 5; }

  .bn-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: 0; cursor: pointer;
    padding: 6px 2px; color: #94a3b8; font: inherit;
    transition: color .15s;
  }
  .bn-item .bn-ic { font-size: 21px; line-height: 1; }
  .bn-item .bn-lb { font-size: 10.5px; font-weight: 700; }
  .bn-item.on { color: var(--brand, #0b8a5f); }
  .bn-item:active { transform: scale(.94); }

  /* زر أضف إعلان — مرفوع فوق الشريط ليكون الفعل الأوضح */
  .bn-add {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: 0; cursor: pointer; padding: 0 10px;
    margin-top: -26px; font: inherit;
  }
  .bn-plus {
    width: 54px; height: 54px; border-radius: 50%;
    background: linear-gradient(150deg, #12c98a, #0b8a5f);
    color: #fff; font-size: 32px; font-weight: 300; line-height: 52px;
    box-shadow: 0 5px 16px rgba(11, 138, 95, .42);
    border: 3px solid #fff;
  }
  .bn-addtxt { font-size: 10.5px; font-weight: 800; color: var(--brand, #0b8a5f); }
  .bn-add:active .bn-plus { transform: scale(.93); }

  /* مساحة أسفل الصفحة حتى لا يغطي الشريط آخر المحتوى */
  body { padding-bottom: 74px; }
}

/* صفوف صفحة «من نحن» */
.ab-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line, #e6ebf2); }
.ab-row:last-child { border-bottom: 0; }
.ab-ic { font-size: 22px; line-height: 1.3; }

/* ============================================================
   بطاقة الإعلان — السعر أولاً والشارات فوق الصورة
   ============================================================ */
.qad-card { padding: 0 !important; overflow: hidden; }

.qad-card .qad-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.qad-card .qad-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qad-card .qad-ph { font-size: 40px; opacity: .3; }

/* شارة «مرفوع» فوق الصورة — تُبرز قيمة الخدمة المدفوعة */
.qad-boost-ov {
  position: absolute; top: 8px; inset-inline-start: 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-size: 10.5px; font-weight: 800;
  padding: 4px 9px; border-radius: 999px;
  box-shadow: 0 2px 7px rgba(217, 119, 6, .38);
}
/* حالة المنتج — الزاوية المقابلة */
.qad-cond-ov {
  position: absolute; top: 8px; inset-inline-end: 8px;
  background: rgba(15, 23, 42, .74); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  backdrop-filter: blur(3px);
}
.qad-cond-ov.is-new { background: rgba(11, 138, 95, .9); }

.qad-body { padding: 11px 12px 13px; }

/* السعر أولاً وأكبر — المشتري يقرّر به قبل قراءة الاسم */
.qad-price2 {
  font-size: 21px; font-weight: 800; line-height: 1.15;
  color: var(--brand, #0b8a5f); margin-bottom: 5px;
}
.qad-price2 small { font-size: 12px; font-weight: 700; opacity: .75; }

.qad-card .qad-name {
  font-size: 13.5px; font-weight: 600; line-height: 1.45;
  color: var(--ink, #0f172a);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 7px; min-height: 2.9em;
}

.qad-line {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 11px; color: #64748b; margin-bottom: 7px;
}
.qad-dot { opacity: .5; }

.qad-card .qad-by {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: #64748b;
  border-top: 1px solid var(--line, #e6ebf2); padding-top: 8px;
}

/* ============================================================
   شريط الرجوع — يظهر في كل شاشة عدا الرئيسية، ولكل مستخدم
   ============================================================ */
#backBar:empty { display: none; }
#backBar {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg, #f7f9fc);
  padding: 8px 14px 4px;
}
.backbtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--line, #e6ebf2);
  border-radius: 999px; padding: 7px 14px 7px 12px;
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--ink, #0f172a);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
  transition: transform .12s;
}
.backbtn:active { transform: scale(.96); }
.bb-arrow { font-size: 17px; line-height: 1; color: var(--brand, #0b8a5f); }

/* ============================================================
   صفحة «مزيد»
   ============================================================ */
.more-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit;
  padding: 14px 16px; text-align: start;
  border-bottom: 1px solid var(--line, #e6ebf2);
  color: var(--ink, #0f172a);
}
.more-row:last-child { border-bottom: 0; }
.more-row:active { background: #f1f5f9; }
.mr-ic { font-size: 19px; }
.mr-t  { flex: 1; font-size: 14.5px; font-weight: 600; }
.mr-ar { color: #cbd5e1; font-size: 20px; }

.ctry-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line, #e6ebf2);
}
.ctry-row:last-child { border-bottom: 0; }
.ctry-flag { font-size: 20px; }
.ctry-name { flex: 1; font-size: 14px; }
.ctry-live {
  background: #f0fdf7; color: var(--brand, #0b8a5f);
  border: 1px solid #b8ead2; border-radius: 999px;
  padding: 2px 10px; font-size: 11px; font-weight: 800;
}
.ctry-soon {
  background: #f1f5f9; color: #94a3b8;
  border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700;
}

/* أزرار التواصل */
.ct-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 9px;
  text-decoration: none; color: #fff; font-size: 14px;
  transition: transform .12s;
}
.ct-btn:last-child { margin-bottom: 0; }
.ct-btn:active { transform: scale(.98); }
.ct-btn b { display: block; font-weight: 800; }
.ct-btn small { display: block; font-size: 11.5px; opacity: .9; margin-top: 1px; }
.ct-ic { font-size: 21px; }
.ct-mail { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.ct-wa   { background: linear-gradient(135deg, #22c55e, #16a34a); }
.ct-tel  { background: linear-gradient(135deg, #64748b, #475569); }

/* الشريط السفلي صار خمس أيقونات — نلغي تثبيت الأعمدة القديم */
@media (max-width: 860px) {
  #bottomNav { grid-template-columns: repeat(5, 1fr); }
  #bottomNav .bn-add,
  #bottomNav .bn-item:nth-of-type(1),
  #bottomNav .bn-item:nth-of-type(2),
  #bottomNav .bn-item:nth-of-type(3),
  #bottomNav .bn-item:nth-of-type(4) { grid-column: auto; }
}

/* ── الانتقال إلى الحقل الناقص في ملف التوثيق ── */
.doc-missing{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.doc-chip{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:99px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s
}
.doc-chip::before{content:'○';color:#d97706;font-size:11px}
.doc-chip:hover,.doc-chip:focus-visible{background:#fffbeb;border-color:#fde68a}
.doc-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.doc-flash{
  border-radius:12px;
  animation:docFlash 2.6s ease-out 1;
}
@keyframes docFlash{
  0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,0)}
  12%,58%{box-shadow:0 0 0 4px rgba(217,119,6,.28)}
}
@media (prefers-reduced-motion:reduce){
  .doc-flash{animation:none;box-shadow:0 0 0 3px rgba(217,119,6,.35)}
}


/* ── مستند توثيق مقفل: لا يُحذف بعد رفعه ── */
.doc-locked{position:relative}
.doc-lock{
  position:absolute;top:4px;inset-inline-end:4px;
  width:24px;height:24px;border-radius:50%;
  background:rgba(15,23,42,.82);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;pointer-events:auto;cursor:help
}


/* ── منتج مرفوع بدفعة سارية: يتميّز ليعرفه التاجر بلمحة ── */
.row-boosted{background:linear-gradient(90deg,rgba(11,138,95,.07),transparent)}
.row-boosted td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.badge-boosted{
  display:inline-block;margin-inline-start:6px;padding:2px 9px;border-radius:99px;
  background:var(--brand);color:#fff;font-size:11px;font-weight:800;vertical-align:middle
}


/* ── شريط معاينة القالب قبل تركيبه ── */
.previewbar.tplbar{background:#0f172a;color:#fff;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.previewbar.tplbar b{color:#4ade80}
.previewbar.tplbar button{
  background:var(--brand);color:#fff;border:0;border-radius:99px;
  padding:6px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer
}
.previewbar.tplbar button.pb-ghost{background:transparent;border:1px solid rgba(255,255,255,.45)}
.previewbar.tplbar button:hover{filter:brightness(1.08)}


/* ── ضغط الواجهة على الجوال ──
   العناصر كانت مصمَّمة لشاشة عريضة، فبدت متضخّمة على الهاتف:
   أيقونات الأقسام تأكل خُمس العرض، والشريط السفلي والترويسة يقضمان
   ارتفاعاً ثميناً. نصغّرها بنسبة متّسقة بلا مسّ سهولة اللمس (44px حد أدنى). */
@media (max-width: 640px) {
  /* الترويسة — سطر واحد لا سطران.
     كانت تلتفّ لأن .mainnav يحجز 200px، فينزل زرّ الدخول والسلة
     واللغة إلى سطر ثانٍ ويبدو الشريط مبعثراً. والتنقّل مكرَّر أصلاً
     في الشريط السفلي، فإخفاؤه هنا لا يفقد المستخدم شيئاً. */
  .hbar{flex-wrap:nowrap;gap:7px;padding:calc(8px + env(safe-area-inset-top,0px)) 0 8px}
  .mainnav{display:none}
  #userArea{margin-inline-start:auto;flex:0 0 auto}
  #userArea .btn{padding:6px 11px !important;font-size:12px !important;border-radius:9px}
  .iconbtn,.langbtn{padding:5px 9px;font-size:12px;flex:0 0 auto}
  .logo{font-size:16px;gap:6px;flex:0 0 auto}
  .logo-mark{width:26px;height:26px;border-radius:7px}
  .logo small{font-size:10px}
  header .wrap{padding:0 12px}

  /* البطاقة الخضراء */
  .hero{padding:16px 15px;margin:10px 0 12px;border-radius:16px}
  .hero h1{font-size:19px;line-height:1.35;text-wrap:balance;max-width:15ch}
  .hero p{font-size:12px;line-height:1.55}
  .hero-stats{margin-top:12px}
  .hero-stat{padding:7px 3px;border-radius:10px}
  .hero-stat b{font-size:16.5px}
  .hero-stat span{font-size:9px}

  /* أيقونات الأقسام — كانت 62px على شاشة 540px */
  .cat-ic{width:60px;gap:5px}
  .cat-ic .c-ic{width:48px;height:48px;font-size:23px}
  .cat-ic .c-lb{font-size:10px}

  /* شريط البحث */
  .wrap{padding:0 12px}

  /* الشريط السفلي */
  #bottomNav{padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px))}
  .bn-item{padding:4px 2px;min-height:44px}
  .bn-item .bn-ic{font-size:18px}
  .bn-item .bn-lb{font-size:9.5px}
  .bn-plus{width:46px;height:46px;font-size:27px;line-height:44px}
  .bn-addtxt{font-size:9.5px}

  /* عناوين الأقسام */
  .row-head h3{font-size:14.5px}
}


/* ── أيقونات الشريط السفلي الخطّية ── */
.bn-ic svg{width:23px;height:23px;display:block}
.bn-item{color:#94a3b8}
.bn-item.on{color:var(--brand)}
.bn-item.on .bn-lb{color:var(--brand)}
@media (max-width: 640px){
  .bn-ic svg{width:21px;height:21px}
}


/* ═══ الاستكشاف — تصفّح بملء الشاشة ═══
   انزلاق رأسي بمحاذاة إجبارية: كل منتج يقف في مكانه تماماً. */
.xp-feed{
  position:fixed;inset:0;bottom:64px;background:#000;
  overflow-y:auto;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:20
}
.xp-slide{
  position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.xp-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.xp-media img{width:100%;height:100%;object-fit:cover}
.xp-noimg{font-size:96px;filter:grayscale(.2)}

/* تدرّج أسفل الصورة ليُقرأ النص فوقها مهما كانت فاتحة */
.xp-slide::after{
  content:'';position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35) 45%,transparent)
}

.xp-actions{
  position:absolute;inset-inline-end:12px;bottom:120px;z-index:3;
  display:flex;flex-direction:column;gap:12px
}
.xp-btn{
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s
}
.xp-btn svg{width:23px;height:23px}
.xp-btn:active{transform:scale(.92)}
.xp-fav.on{background:#fff;color:#e11d48}
.xp-fav.on svg{fill:currentColor}

.xp-info{
  position:absolute;inset-inline-start:16px;inset-inline-end:74px;bottom:26px;z-index:3;color:#fff
}
.xp-price{
  display:inline-block;background:#fff;color:#0f172a;font-weight:900;font-size:15px;
  padding:4px 12px;border-radius:99px;margin-bottom:8px
}
.xp-name{font-size:19px;font-weight:900;line-height:1.35;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.xp-store{
  margin-top:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  color:#fff;border-radius:99px;padding:7px 15px;font:inherit;font-size:13px;font-weight:800;cursor:pointer
}
.xp-store:active{background:rgba(255,255,255,.28)}

.xp-empty{
  position:fixed;inset:0;bottom:64px;background:var(--bg);z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px
}
.xp-empty .e{font-size:64px}

@media (prefers-reduced-motion:reduce){ .xp-feed{scroll-behavior:auto} }


/* أثناء الاستكشاف: لا ترويسة ولا شريط رجوع — الصورة وحدها */
body.in-explore header,
body.in-explore #previewBar,
body.in-explore #backBar{display:none!important}
body.in-explore{overflow:hidden}
body.in-explore .xp-feed{z-index:60}


/* وسم المستند: مطلوب أم اختياري */
.req-tag,.opt-tag{
  display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:99px;
  font-size:10px;font-weight:800;vertical-align:middle
}
.req-tag{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.opt-tag{background:var(--bg);color:var(--muted);border:1px solid var(--line)}


/* ═══ رفع صور المنتج — ثلاث طرق ═══ */
.pf-drop{
  flex:1;min-width:210px;border:2px dashed var(--line);border-radius:14px;
  background:var(--bg);padding:14px 12px;transition:border-color .15s,background .15s
}
.pf-drop.over{border-color:var(--brand);background:#ecfdf5}
.pf-drop-in{display:flex;flex-direction:column;align-items:center;gap:10px}
.pf-ways{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pf-way{
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 16px;min-width:86px;transition:border-color .15s,transform .12s
}
.pf-way:hover{border-color:var(--brand);transform:translateY(-1px)}
.pf-way:active{transform:scale(.97)}
.pf-way-ic{font-size:22px;line-height:1}
.pf-way-t{font-size:12px;font-weight:800;color:var(--ink)}
.pf-drop-hint{font-size:11.5px;color:var(--muted);font-weight:700;text-align:center}

/* الإفلات لا معنى له على اللمس — نخفي تلميحه */
@media (hover:none){ .pf-drop-hint{display:none} .pf-drop{padding:12px 10px} }

/* ── إفلات الصور: إشارة بصرية أن المنطقة تستقبل الملف ── */
[data-drop]{border-radius:12px;transition:box-shadow .15s,background .15s}
[data-drop].drop-over{
  box-shadow:0 0 0 3px var(--brand);
  background:color-mix(in srgb, var(--brand) 8%, transparent);
}
@media (prefers-reduced-motion:reduce){ [data-drop]{transition:none} }

/* ── عمودان على الهاتف: الشاشة تُظهر 6 منتجات بدل 3 ──
   البطاقة مجرَّبة بعرض 176px في الشريط الأفقي، وعمودان على أضيق
   هاتف (360px) يعطيانها 162px — فرق طفيف نعوّضه بحشوة أقل. */
@media(max-width:640px){
  .grid-prods{grid-template-columns:repeat(2,1fr);gap:10px}
  .prod-card{padding:9px;gap:4px;border-radius:14px}
  /* الصورة مربّعة تتبع عرض البطاقة، بدل شريط 104px يقصّ المنتج */
  .prod-card .ptile{height:auto;aspect-ratio:3/4;border-radius:10px;font-size:38px}
  .prod-card .prod-name{font-size:13px;line-height:1.3;font-weight:800}
  .prod-card .prod-desc{font-size:11px;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .prod-card .prod-foot{font-size:13.5px}
  .prod-card .prod-foot .btn,.prod-card .prod-foot button{width:30px;height:30px;font-size:16px;flex:0 0 30px}
  .prod-card .old-price{font-size:11px}
  .prod-card .off-badge{font-size:10px;padding:2px 6px;top:7px;right:7px}
}

/* ── دليل المتاجر ── */
.shops-dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.shop-tile{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 10px 14px;cursor:pointer;font:inherit;transition:.16s;
}
.shop-tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,.10)}
.shop-tile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.shop-tile-ic{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px}
.shop-tile-nm{font-weight:800;font-size:13.5px;color:var(--ink);text-align:center;line-height:1.3}
@media(max-width:640px){.shops-dir{grid-template-columns:repeat(3,1fr);gap:10px}.shop-tile-ic{width:54px;height:54px;font-size:26px}}



/* ── الصور تُعرض كاملة (contain) في كل مكان ──
   العبايات والفساتين صور عمودية، وcover كان يقصّ رأسها وذيلها.
   الخلفية الناعمة تملأ ما حول الصورة فيبدو الفراغ مقصوداً لا خللاً. */
.prod-card .ptile, .ctile,
.tpl-fashion-card .ph, .tpl-tech-card .ph, .tpl-bakery-card .ph,
.qad-tile, .qad-main{
  background:linear-gradient(160deg,#fbfcfd,#eef2f6);
}

/* ── شريحة القالب في لوحة التاجر ──
   مربّع صغير بألوان القالب يحمل أيقونة المتجر واسمه — يكفي للتمييز
   بلمحة، والشكل الحقيقي يُرى بزر «معاينة المتجر». */
.tpl-chip{
  width:104px;height:104px;flex:0 0 104px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:10px;overflow:hidden;border:1px solid rgba(0,0,0,.08);
}
.tpl-chip-ic{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:19px;overflow:hidden;flex:0 0 38px;
}
.tpl-chip-ic img{width:100%;height:100%;object-fit:cover}
.tpl-chip-nm{font-size:10.5px;font-weight:800;text-align:center;line-height:1.25;
  max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tpl-chip-bar{display:flex;gap:3px;width:100%;padding:0 6px}
.tpl-chip-bar span{height:4px;flex:1;border-radius:99px}
@media(max-width:640px){.tpl-chip{width:84px;height:84px;flex:0 0 84px}.tpl-chip-ic{width:32px;height:32px;flex:0 0 32px;font-size:16px}}

/* ── أيقونات الأقسام SVG داخل الدائرة ──
   الأيقونة إمّا SVG أصلي أو إيموجي احتياطي — النمطان يعملان.
   نلوّن الـSVG بلون النص (currentColor) فيتبع الوضع الليلي تلقائياً. */
.cat-ic .c-ic svg{ width:32px; height:32px; display:block; color:var(--ink); }
.cat-ic:hover .c-ic svg{ color:var(--brand); }
/* في ترويسة الصف وعنوان الصفحة تظهر الأيقونة بحجم النص المجاور */
.row-head h3 svg, .h2 svg{ width:1.15em; height:1.15em; vertical-align:-0.18em; display:inline-block; }
@media(max-width:640px){ .cat-ic .c-ic svg{ width:26px; height:26px; } }

/* ── بطاقة شعار المتجر: نصفان (رفع + معاينة) ── */
.logo-split{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap}
.logo-split-up,.logo-split-prev{flex:1;min-width:180px}
.logo-split-sep{width:1px;background:var(--line);align-self:stretch}
.logo-split-lbl{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:10px}
.logo-up-thumb{width:96px;height:96px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;margin:0 auto}
.logo-up-add{width:96px;height:96px;border-radius:16px;border:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;margin:0 auto;transition:.15s}
.logo-up-add:hover{border-color:var(--brand);background:var(--bg)}
.logo-prev-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.logo-prev-ic{width:44px;height:44px;border-radius:12px;overflow:hidden;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 44px}
.logo-prev-ic.sm{width:34px;height:34px;flex:0 0 34px}
.logo-prev-ic img{width:100%;height:100%;object-fit:cover}
.logo-prev-nm{font-weight:800;font-size:14px}
.logo-prev-card{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px}
@media(max-width:640px){.logo-split-sep{display:none}.logo-split{gap:14px}}

/* ── شارة «بانتظار الموافقة» بجانب حقل معدَّل ── */
.pend-badge{display:inline-block;margin-inline-start:8px;font-size:10.5px;font-weight:800;
  color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:99px;padding:2px 8px;vertical-align:middle}

/* ══ البحث داخل الترويسة ══
   يتمدّد ليملأ ما بين الشعار وزر اللغة، ويتقلّص على الجوال بلا كسر السطر. */
.hsearch{flex:1 1 160px;min-width:0;display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.hsearch svg{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.hsearch input{border:none;outline:none;background:none;flex:1;min-width:0;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink)}
.hsearch input::placeholder{color:var(--muted);font-weight:600}
.hsearch:focus-within{border-color:var(--brand)}

/* ══ صفحة التصنيفات ══ */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.cat-cell{display:flex;flex-direction:column;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 8px;
  cursor:pointer;font-family:inherit;text-align:center;transition:border-color .15s,transform .15s}
.cat-cell:hover{border-color:var(--brand);transform:translateY(-2px)}
.cat-cell:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.cat-cell .cc-ic{width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  color:var(--brand);font-size:24px}
.cat-cell .cc-ic svg{width:30px;height:30px}
.cat-cell .cc-t{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.4}
.cat-cell .cc-n{font-size:10.5px;color:var(--muted);font-weight:700}
@media (max-width:420px){
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .cat-cell{padding:13px 5px}
}

@media (max-width: 640px) {
  /* الترويسة على الجوال: شعار + بحث + سلة + لغة، لا أكثر.
     زرّ الدخول واسم المستخدم خرجا من هنا لأن البحث احتاج المساحة —
     وكلاهما صار داخل «حسابي/المزيد» في الشريط السفلي فلم يضِع شيء. */
  #userArea{display:none}
  .logo small{display:none}
  .hsearch{padding:7px 10px;border-radius:10px}
  .hsearch input{font-size:12.5px}
  /* البحث يأخذ ما تبقّى، وما حوله ثابت لا ينضغط */
  .logo,.iconbtn,.langbtn{flex:0 0 auto}
}

/* ══ شريط الفرز/التصفية (حلّ محلّ شريط البحث بعد نقله للترويسة) ══ */
.filterbar{display:flex;align-items:center;gap:10px;margin:14px 0 2px}
.filterbar .fb-sp{flex:1}
.qchip{display:inline-flex;align-items:center;gap:7px;background:var(--brand-soft,#e8f4ef);
  border:1px solid var(--line);border-radius:99px;padding:7px 13px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:800;color:var(--brand-dark,#075c40);max-width:60%}
.qchip span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qchip .qx{font-size:15px;line-height:1;opacity:.65}
.qchip:hover{border-color:var(--brand)}
.qchip:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ══ زر خدمة لم تُفعَّل بعد ══
   ظاهر ليعرف التاجر أنها قادمة، لكنه لا يستجيب فلا يظنّها معطّلة. */
.btn-soon{background:var(--bg);border:1px dashed var(--line);color:var(--muted);
  cursor:not-allowed;opacity:.9;display:inline-flex;align-items:center;gap:6px}
.btn-soon:hover{background:var(--bg);border-color:var(--line)}
.soon-tag{font-size:9.5px;font-weight:800;background:#fef3c7;color:#92400e;
  border-radius:99px;padding:2px 7px;letter-spacing:.2px}

/* ── رقائق المقاس (العبايات) — يستعملها التاجر والعميل معاً ── */
.size-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.size-chip{min-width:52px;height:40px;padding:0 12px;border-radius:11px;cursor:pointer;
  background:var(--card,#fff);border:1.5px solid var(--line);color:var(--ink);
  font-family:inherit;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.size-chip:hover{border-color:var(--brand)}
.size-chip.on{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 2px 8px rgba(16,185,129,.3)}
.size-chip:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.c-size{font-size:11.5px;font-weight:800;color:var(--brand);background:var(--brand-l,#e6f2ec);
  border-radius:7px;padding:1px 7px;margin-inline-start:5px;vertical-align:1px}

/* ══ شاشة الإيقاف المؤقت ══ */
.site-gate{position:fixed;inset:0;z-index:99998;display:none;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(circle at 50% 35%, #0e5c42 0%, #0a3627 48%, #05231a 100%)}
.maint-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);
  border-radius:22px;padding:36px 28px;max-width:440px;width:100%;text-align:center;color:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.4)}
.maint-mark{width:78px;height:78px;margin:0 auto 18px;border-radius:22px;color:#7ff0c8;
  background:rgba(47,189,138,.14);border:1px solid rgba(47,189,138,.3);
  display:flex;align-items:center;justify-content:center}
.maint-mark svg{width:42px;height:42px;filter:drop-shadow(0 0 10px rgba(47,189,138,.6))}
.maint-card h2{margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-.3px}
.maint-why{margin:0 0 4px;color:#7ff0c8;font-size:15px;font-weight:800}
.maint-sub{margin:0 0 22px;color:rgba(255,255,255,.62);font-size:13.5px;line-height:1.75}
.maint-count{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.maint-count .mc{flex:1;max-width:88px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:13px;padding:12px 4px}
.maint-count b{display:block;font-size:26px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1.15}
.maint-count span{display:block;font-size:10.5px;color:rgba(255,255,255,.55);margin-top:3px}
.maint-when{color:rgba(255,255,255,.5);font-size:12px;margin-bottom:20px}
.maint-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(255,255,255,.1);padding-top:16px;font-size:12.5px}
.maint-foot a{color:#7ff0c8;text-decoration:none}
.maint-link{background:none;border:0;color:rgba(255,255,255,.42);font-family:inherit;font-size:12.5px;cursor:pointer;padding:0}
.maint-link:hover{color:rgba(255,255,255,.8)}
.maint-link:focus-visible,.maint-foot a:focus-visible{outline:2px solid #7ff0c8;outline-offset:3px;border-radius:4px}
#gateForm .input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;text-align:center}
#gateForm .input::placeholder{color:rgba(255,255,255,.4)}
@media(max-width:400px){.maint-count b{font-size:21px}.maint-card{padding:28px 20px}}