:root{
    --bg:#F7F7F7;
    --surface:#FFFFFF;
    --surface-alt:#EEF3E1;
    --surface-warm:#FBF7EF;
    --text:#201E1D;
    --text-muted:#726F60;
    --text-faint:#A6A395;
    --line:#E6E1D3;
    --brand:#7C8168;
    --brand-strong:#3A3D31;
    --on-strong:#F7F7F7;
    --accent:#DCEB7D;
    --accent-strong:#B9CE55;
    --on-accent:#2E2B1F;
    --sale:#C1662E;
    --sale-soft:#FBE4D2;
    --ok:#5C7A3B;
    --ok-soft:#E1EECC;
    --danger:#B3492E;
    --danger-soft:#F6DCD3;
    --radius-s:10px;
    --radius-m:16px;
    --radius-l:22px;
    --shadow-card:0 1px 2px rgba(32,30,29,.06), 0 8px 20px -12px rgba(32,30,29,.18);
    --shadow-sheet:0 -8px 30px rgba(32,30,29,.22);
    --font-display:'Caprasimo','Baloo Bhaijaan 2',cursive;
    --font-head:'Baloo Bhaijaan 2','Segoe UI',sans-serif;
    --font-body:'IBM Plex Sans Arabic','Segoe UI',sans-serif;
    --font-num:'Figtree','Segoe UI',sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#171614;
      --surface:#242220;
      --surface-alt:#2C2E22;
      --surface-warm:#26241F;
      --text:#F5F3EC;
      --text-muted:#B3AF9F;
      --text-faint:#7D7A6C;
      --line:#3B392E;
      --brand:#A9B08C;
      --brand-strong:#0F0F0D;
      --on-strong:#F5F3EC;
      --accent:#DCEB7D;
      --accent-strong:#B9CE55;
      --on-accent:#20220F;
      --sale:#E68A52;
      --sale-soft:#3D2A1C;
      --ok:#9FC26E;
      --ok-soft:#26301A;
      --danger:#E08469;
      --danger-soft:#3A241E;
      --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 10px 24px -14px rgba(0,0,0,.6);
      --shadow-sheet:0 -8px 30px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    --bg:#171614;
    --surface:#242220;
    --surface-alt:#2C2E22;
    --surface-warm:#26241F;
    --text:#F5F3EC;
    --text-muted:#B3AF9F;
    --text-faint:#7D7A6C;
    --line:#3B392E;
    --brand:#A9B08C;
    --brand-strong:#0F0F0D;
    --on-strong:#F5F3EC;
    --accent:#DCEB7D;
    --accent-strong:#B9CE55;
    --on-accent:#20220F;
    --sale:#E68A52;
    --sale-soft:#3D2A1C;
    --ok:#9FC26E;
    --ok-soft:#26301A;
    --danger:#E08469;
    --danger-soft:#3A241E;
    --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 10px 24px -14px rgba(0,0,0,.6);
    --shadow-sheet:0 -8px 30px rgba(0,0,0,.5);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    display:flex;
    justify-content:center;
    min-height:100vh; /* fallback for older browsers */
    min-height:100svh; /* stays put while scrolling — doesn't resize as the phone's browser bar shows/hides */
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
  }
  a{color:inherit;}
  /* dev brief §2: these are now real <a href> links (crawlable), styled to look exactly like
     the buttons/spans/divs they replaced — this is the one shared reset they all need. */
  a.nav-btn, a.back-btn, a.dk-logo, .dk-nav>a, .dk-nav-cats-panel a, a.dk-cat-tile, a.dk-see-all,
  .dk-footer-col a, a.chip, a.section-link, a.marquee-item, a.store-card-link{text-decoration:none;}
  button{font-family:inherit;}
  input,select,textarea{font-family:inherit; font-size:15px;}
  ::selection{background:var(--accent); color:var(--on-accent);}

  .app-shell{
    width:100%;
    max-width:460px;
    min-height:100vh; /* fallback for older browsers */
    min-height:calc(100svh - 22px); /* a touch shorter, and stays put while scrolling instead of resizing */
    background:var(--bg);
    position:relative;
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow-card);
  }
  @media (min-width:520px){
    body{padding:28px 12px;}
    .app-shell{min-height:calc(100vh - 56px); min-height:calc(100svh - 76px); border-radius:28px; overflow:hidden;}
  }

  /* ---------- Header ---------- */
  .topbar{
    position:static;
    background:var(--bg);
    padding:calc(14px + env(safe-area-inset-top)) 16px 10px;
    display:flex; flex-direction:column; gap:12px;
    border-bottom:1px solid transparent;
  }
  .brand-row{display:flex; align-items:center; gap:10px;}
  .brand-home{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; cursor:pointer;}
  .back-btn{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%; flex:none;
    background:var(--surface-alt); border:none; cursor:pointer; color:var(--text);
  }
  .brand-mark{
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    flex:none;
  }
  .brand-mark svg{display:block;}
  .brand-word{
    font-family:var(--font-display);
    font-size:21px;
    letter-spacing:.3px;
    color:var(--text);
  }
  .brand-tag{
    font-family:var(--font-body);
    font-size:11px;
    color:var(--text-muted);
    text-align:end;
    max-width:108px;
    line-height:1.4;
  }
  .toggle-group{
    margin-inline-start:auto;
    display:flex; align-items:center; gap:6px; flex:none;
  }
  .theme-toggle{
    width:32px; height:32px; border-radius:50%; flex:none;
    border:1px solid var(--line); background:var(--surface); color:var(--text);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .theme-toggle svg{width:16px;height:16px;}
  .lang-toggle{
    min-width:32px; height:32px; border-radius:999px; flex:none; padding:0 10px;
    border:1px solid var(--line); background:var(--surface); color:var(--text);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.3px;
  }
  .search-bar{
    display:flex; align-items:center; gap:8px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 14px;
  }
  .search-bar input{
    flex:1; border:none; outline:none; background:transparent; color:var(--text); font-size:14.5px;
  }
  .search-bar input::placeholder{color:var(--text-faint);}
  .search-bar svg{flex:none; color:var(--text-faint);}

  /* ---------- Category grid ----------
     ١٣ سبتمبر ٢٠٢٦: كان شريطًا أفقيًا قابلًا للتمرير — ومع وصول الأقسام إلى عشرة صار
     أغلبها مخفيًا خارج الشاشة. صار شبكة: «الكل» شريط عريض بالأعلى، ثم ١٢ مربعًا
     بأربعة في كل صف، فتظهر كل الأقسام دفعة واحدة بلا تمرير.
     أسماء الأصناف (.chip-rail / .chip) بقيت كما هي عمدًا حتى لا تنكسر الاختبارات. */
  .cat-section-head{padding:14px 16px 8px; text-align:center;}
  .cat-section-head .eyebrow{
    display:block; font-family:var(--font-head); font-size:11px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep,var(--text-faint));
    margin-bottom:4px;
  }
  .cat-section-head h2{
    margin:0; font-family:var(--font-head); font-size:17px; font-weight:700; color:var(--text);
  }
  .chip-rail{
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:2px 16px 6px;
  }
  .chip{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    aspect-ratio:1/1;
    padding:6px 4px;
    border-radius:16px;
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--text);
    font-family:var(--font-head);
    font-size:10.5px;
    line-height:1.25;
    font-weight:600;
    cursor:pointer;
    text-align:center;
    overflow:hidden;
    text-decoration:none;
  }
  .chip .chip-ic{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
    background:var(--bg); color:var(--accent-deep,var(--text));
    flex:none;
  }
  .chip .chip-tx{display:block; width:100%; overflow-wrap:anywhere;}
  /* «الكل» شريط عريض يتصدّر الشبكة */
  .chip-rail .chip.chip-all{
    grid-column:1 / -1;
    aspect-ratio:auto;
    flex-direction:row;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    font-size:13.5px;
  }
  .chip-rail .chip.chip-all .chip-ic{width:22px; height:22px; background:transparent;}
  @media (max-width:340px){ .chip{font-size:9.5px;} .chip .chip-ic{width:26px;height:26px;} }
  .chip.active{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  .chip.active .chip-ic{background:rgba(255,255,255,.22); color:var(--on-accent);}
  .chip svg{width:15px;height:15px;}

  .price-filter-row{
    display:flex; align-items:center; gap:8px; padding:4px 16px 8px; flex-wrap:wrap;
  }
  .price-filter-row .pf-label{font-size:11.5px; font-weight:700; color:var(--text-muted); font-family:var(--font-head); flex:none;}
  .price-filter-row input{
    width:64px; padding:7px 9px; border-radius:10px; border:1px solid var(--line);
    background:var(--surface); color:var(--text); font-size:12.5px; outline:none; text-align:center;
  }
  .price-filter-row input:focus{border-color:var(--brand);}
  .price-filter-row .pf-sep{color:var(--text-faint); font-size:12px;}
  .price-filter-row .pf-cur{font-size:11px; color:var(--text-faint); flex:none;}

  /* ---------- Content ---------- */
  .content{flex:1; padding-bottom:96px;}
  .section{padding:18px 16px 4px;}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
  .section-title{font-family:var(--font-head); font-size:17px; font-weight:700; color:var(--text);}
  .section-link{font-size:12.5px; font-weight:600; color:var(--brand); cursor:pointer;}

  .trust-banner{
    margin:14px 16px 4px;
    background:var(--brand-strong);
    color:var(--on-strong);
    border-radius:var(--radius-m);
    padding:16px 18px;
    display:flex; align-items:center; gap:14px;
  }
  .trust-banner .badge-free{
    flex:none;
    background:var(--accent); color:var(--on-accent);
    font-family:var(--font-head); font-weight:700; font-size:11px;
    padding:5px 10px; border-radius:999px;
  }
  .trust-banner p{margin:0; font-size:12.8px; line-height:1.55; color:var(--on-strong); opacity:.92;}
  .trust-banner strong{font-family:var(--font-head); display:block; font-size:14.5px; margin-bottom:3px; opacity:1;}

  .store-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
  }
  /* Paginated category/explore grid: 2 columns (5 rows per 10-store page) on the mobile-app view,
     same as every other store grid — no longer forced to a single narrow column. The wide desktop
     view still overrides this further below to a wider multi-column auto-fill layout. */
  .pagination-row{display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0 6px;}
  .page-btn{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
    color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .page-btn svg{width:15px;height:15px;}
  .page-btn:disabled{opacity:.35; cursor:default;}
  .page-btn.next svg{transform:none;}
  .page-btn.prev svg{transform:rotate(180deg);}
  [dir="rtl"] .page-btn.next svg{transform:rotate(180deg);}
  [dir="rtl"] .page-btn.prev svg{transform:none;}
  .page-indicator{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:700; color:var(--text-muted); min-width:64px; text-align:center;}
  .gate-screen{
    min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:28px 20px; background:var(--bg); position:relative;
  }
  .gate-toggles{position:absolute; top:calc(16px + env(safe-area-inset-top)); inset-inline-end:16px; display:flex; gap:8px;}
  .gate-card{
    width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius-l); padding:32px 24px 26px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:4px;
  }
  .gate-brand{margin-bottom:10px;}
  .gate-brand svg{width:56px; height:56px;}
  .gate-title{font-family:var(--font-head); font-size:21px; margin:0 0 6px;}
  .gate-subtitle{font-size:13px; line-height:1.6; color:var(--text-muted); margin:0 0 20px;}
  .gate-field{width:100%; margin-bottom:12px;}
  .gate-field input{
    width:100%; box-sizing:border-box; padding:13px 14px; border-radius:var(--radius-m);
    border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:14px; font-family:inherit;
  }
  .gate-field input:focus{outline:none; border-color:var(--brand-strong);}
  .gate-error{color:var(--danger); font-size:12.5px; margin:0 0 12px; width:100%; text-align:start;}
  .gate-submit{width:100%; margin-top:6px;}
  .store-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:0;
    cursor:pointer;
    display:flex; flex-direction:column;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-card);
  }
  .store-card-link{position:absolute; inset:0; z-index:1;}
  .card-banner{position:relative; width:100%; aspect-ratio:16/8.2; background:var(--surface-alt); flex:none;}
  .card-banner-img, .card-banner-placeholder{border-radius:var(--radius-m) var(--radius-m) 0 0;}
  .card-banner-img{width:100%; height:100%; object-fit:cover; display:block;}
  .card-banner-placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7);}
  .card-banner-logo{
    position:absolute; bottom:-20px; inset-inline-start:12px;
    width:52px; height:52px; border-radius:50%;
    border:3px solid var(--surface); background:var(--surface);
    box-shadow:var(--shadow-card);
    overflow:hidden;
  }
  .card-banner-logo .store-logo{width:100%; height:100%; border-radius:50%;}
  .card-body{padding:28px 12px 12px; display:flex; flex-direction:column; gap:8px;}
  .store-card .example-tag{
    position:absolute; top:8px; inset-inline-end:8px;
    background:var(--sale-soft); color:var(--sale);
    font-size:9.5px; font-weight:700; padding:3px 7px; border-radius:6px;
    font-family:var(--font-head);
  }
  .store-card.featured{box-shadow:0 0 0 2px var(--accent-strong) inset, var(--shadow-card);}
  .store-card .featured-tag{
    position:absolute; top:8px; inset-inline-end:8px;
    background:var(--accent); color:var(--on-accent);
    font-size:9.5px; font-weight:700; padding:3px 7px; border-radius:6px;
    font-family:var(--font-head); display:flex; align-items:center; gap:3px;
  }
  .store-card .featured-tag svg{width:9px;height:9px;}
  .store-logo{
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:15px;
    color:var(--on-accent);
    flex:none;
  }
  .store-logo-img{background:var(--surface); border:1px solid var(--line);}
  .store-logo-img img{width:70%; height:70%; object-fit:contain;}

  .logo-marquee-rows{display:flex; flex-direction:column; gap:5px;}
  .logo-marquee{direction:ltr; overflow:hidden; padding:1px 0; -webkit-mask-image:linear-gradient(to left, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);}
  /* ١٣ سبتمبر ٢٠٢٦ — إصلاح جذري لدوران الشريط:
     ١) كانت alternate تجعله يرجع للخلف بدل أن يستمر. أُزيلت.
     ٢) والأهم: الصفحة RTL، فالمسار بعرض max-content يلتصق بالحافة اليمنى ويفيض يسارًا.
        ومع تحريكه إلى اليسار (-50%) كان ينسحب خارج الشاشة تمامًا فتظهر مساحة فاضية —
        وهذا ما كان يبدو وكأن «الحركة تنتهي». الحل: تثبيت اتجاه المسار نفسه ltr (بغض
        النظر عن لغة الصفحة) فيلتصق باليسار ويفيض يمينًا، فتدخل النسخة الثانية مكان
        الأولى بلا أي فراغ — ويعمل بالسلوك نفسه في العربية والإنجليزية.
     ٣) أُزيل gap واستُبدل بهامش على كل عنصر: مع gap يصير عرض المسار
        2N عنصرًا + (2N-1) فجوة، فلا يساوي -50% نسخة كاملة بالضبط وتحدث قفزة كل دورة.
        بالهامش يصير كل عنصر ٥٢px تمامًا، فـ-50% = نسخة كاملة = دورة بلا قفزة. */
  .logo-marquee-track{
    display:flex; gap:0; width:max-content;
    animation:shopora-marquee 90s linear infinite;
    will-change:transform;
  }
  .marquee-item{flex:none; cursor:pointer; border:none; background:none; padding:0; margin-right:14px;}
  .store-logo.marquee-logo{width:38px; height:38px; font-size:12px;}
  @keyframes shopora-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){
    .logo-marquee{overflow-x:auto; overflow-y:hidden;}
    .logo-marquee-track{animation:none; scrollbar-width:none;}
    .logo-marquee-track::-webkit-scrollbar{display:none;}
  }
  .store-name{font-family:var(--font-head); font-weight:700; font-size:14.5px; color:var(--text);}
  .store-origin{font-size:11.5px; color:var(--text-muted);}
  .origin-flag{display:inline-flex; vertical-align:0;}
  .origin-flag svg{display:block; flex:none;}
  .store-stars{display:flex; gap:1px; font-size:12px; color:var(--accent-strong);}
  .store-stars .off{color:var(--line);}
  .rating-row{display:flex; align-items:center; gap:5px;}
  .rating-count{font-size:11px; color:var(--text-faint);}
  .no-rating{font-size:12px; color:var(--text-faint); font-family:var(--font-head);}
  .badge-row{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px;}
  .badge{
    display:inline-flex; align-items:center; gap:4px;
    font-size:10.5px; font-weight:600; padding:4px 7px; border-radius:7px;
    font-family:var(--font-body);
  }
  .badge svg{width:11px;height:11px;}
  .badge.ok{background:var(--ok-soft); color:var(--ok);}
  .badge.no{background:var(--danger-soft); color:var(--danger);}
  .badge.unclear{background:var(--surface-alt); color:var(--text-muted);}
  .badge.sale{background:var(--sale-soft); color:var(--sale);}
  .badge.tax{background:var(--sale-soft); color:var(--sale);}
  .badge.price{background:var(--surface-alt); color:var(--brand-strong);}
  .fav-btn{
    position:absolute; top:8px; inset-inline-start:8px; z-index:2; /* sits above .store-card-link */
    width:26px; height:26px; border-radius:50%;
    background:rgba(255,255,255,.85); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
    color:var(--danger);
  }
  :root:not([data-theme="light"]) .fav-btn{background:rgba(20,19,17,.65);}
  :root[data-theme="dark"] .fav-btn{background:rgba(20,19,17,.65);}
  .fav-btn svg{width:14px;height:14px;}

  .empty-state{
    text-align:center; padding:48px 24px; color:var(--text-muted);
  }
  .empty-state svg{color:var(--text-faint); margin-bottom:10px;}
  .empty-state h4{font-family:var(--font-head); color:var(--text); margin:0 0 6px;}
  .empty-state p{margin:0; font-size:13px; line-height:1.6;}

  /* ---------- Bottom nav ---------- */
  .bottom-nav{
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:460px;
    background:var(--surface);
    border-top:1px solid var(--line);
    display:flex;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    z-index:40;
  }
  .app-shell .bottom-nav{position:absolute;}
  .nav-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; cursor:pointer; padding:6px 0; color:var(--text-faint);
  }
  .nav-btn svg{width:21px;height:21px;}
  .nav-btn span{font-size:10.5px; font-weight:600; font-family:var(--font-head);}
  .nav-btn.active{color:var(--brand-strong);}
  .nav-btn.active .nav-ic{background:var(--accent); border-radius:10px;}
  .nav-ic{padding:3px 10px; display:flex;}

  /* ---------- Sheet / modal ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(20,19,17,.5);
    z-index:50; display:flex; align-items:flex-end; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .overlay.open{opacity:1; pointer-events:auto;}
  .sheet{
    width:100%; max-width:460px; max-height:88vh;
    background:var(--surface); border-radius:24px 24px 0 0;
    box-shadow:var(--shadow-sheet);
    display:flex; flex-direction:column;
    transform:translateY(16px);
    transition:transform .22s ease;
    overflow:hidden;
  }
  .overlay.open .sheet{transform:translateY(0);}
  .sheet-handle{width:40px; height:4px; border-radius:99px; background:var(--line); margin:10px auto 2px;}
  .sheet-head{display:flex; align-items:center; justify-content:space-between; padding:10px 18px 4px;}
  .sheet-close{
    width:30px; height:30px; border-radius:50%; border:none; background:var(--surface-alt);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
  }
  /* ١٣ سبتمبر ٢٠٢٦: مساحة آمنة سفلية — في وضع الاختصار يقع شريط الإيماءة أسفل الشاشة فوق
     محتوى الشيت المفتوح؛ هذا يبعده. */
  .sheet-body{overflow-y:auto; padding:6px 20px calc(28px + env(safe-area-inset-bottom));}

  .chat-fab-wrap{position:fixed; bottom:76px; left:50%; transform:translateX(-50%); width:100%; max-width:460px; padding:0 16px; display:flex; justify-content:flex-end; pointer-events:none; z-index:41;}
  .app-shell .chat-fab-wrap{position:absolute;}
  .chat-fab{
    pointer-events:auto; width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
    background:var(--brand-strong); color:var(--on-strong); box-shadow:var(--shadow-card);
    display:flex; align-items:center; justify-content:center;
  }
  .chat-fab svg{width:23px;height:23px;}
  .chat-overlay{
    position:fixed; inset:0; background:rgba(20,19,17,.5);
    z-index:55; display:flex; align-items:flex-end; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .chat-overlay.open{opacity:1; pointer-events:auto;}
  .chat-sheet{
    width:100%; max-width:460px; height:82vh; max-height:640px;
    background:var(--surface); border-radius:24px 24px 0 0;
    box-shadow:var(--shadow-sheet);
    display:flex; flex-direction:column;
    transform:translateY(16px);
    transition:transform .22s ease;
    overflow:hidden;
  }
  .chat-overlay.open .chat-sheet{transform:translateY(0);}
  .chat-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid var(--line); flex:none;}
  .chat-head-title{display:flex; align-items:center; gap:9px;}
  .chat-head-title .chat-bot-ic{width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; flex:none;}
  .chat-head-title .chat-bot-ic svg{width:17px;height:17px;}
  .chat-head-title strong{font-family:var(--font-head); font-size:14.5px; color:var(--text); display:block;}
  .chat-head-title small{font-size:10.5px; color:var(--text-faint);}
  .chat-head-actions{display:flex; align-items:center; gap:6px;}
  .chat-icon-btn{width:28px; height:28px; border-radius:50%; border:none; background:var(--surface-alt); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .chat-icon-btn svg{width:14px;height:14px;}
  .chat-messages{flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px;}
  .chat-msg{max-width:86%; padding:10px 13px; border-radius:16px; font-size:12.8px; line-height:1.75; white-space:pre-line;}
  .chat-msg.bot{align-self:flex-start; background:var(--surface-alt); color:var(--text); border-end-start-radius:4px;}
  .chat-msg.user{align-self:flex-end; background:var(--brand-strong); color:var(--on-strong); border-end-end-radius:4px;}
  .chat-msg-stores{display:flex; flex-direction:column; gap:8px; margin-top:2px; max-width:86%;}
  .chat-store-mini{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:14px; background:var(--surface-warm); border:1px solid var(--line); cursor:pointer; text-align:start;}
  .chat-store-mini .store-logo{width:34px; height:34px; font-size:12px; flex:none;}
  .chat-store-mini .csm-info{min-width:0;}
  .chat-store-mini .csm-name{font-family:var(--font-head); font-weight:700; font-size:12.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .chat-store-mini .csm-meta{font-size:10.5px; color:var(--text-muted);}
  .chat-suggestions{display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 10px; flex:none;}
  .chat-suggestions .chip{cursor:pointer;}
  .chat-typing{align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:var(--surface-alt); border-radius:16px; border-end-start-radius:4px;}
  .chat-typing span{width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation:chatTypingBounce 1.1s infinite ease-in-out;}
  .chat-typing span:nth-child(2){animation-delay:.15s;}
  .chat-typing span:nth-child(3){animation-delay:.3s;}
  @keyframes chatTypingBounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-3px); opacity:1;}}
  .chat-input-row{display:flex; align-items:center; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); flex:none;}
  .chat-input-row input{flex:1; border:1px solid var(--line); background:var(--surface-warm); border-radius:99px; padding:10px 15px; font-size:12.8px; color:var(--text); font-family:var(--font-body);}
  .chat-input-row input:focus{outline:2px solid var(--accent-strong); outline-offset:1px;}
  .chat-send-btn{width:38px; height:38px; border-radius:50%; border:none; background:var(--brand-strong); color:var(--on-strong); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;}
  .chat-send-btn svg{width:16px;height:16px;}
  .chat-send-btn:disabled{opacity:.5; cursor:default;}
  .chat-settings-panel{padding:14px 16px 18px; border-top:1px solid var(--line); background:var(--surface-warm); flex:none;}
  .chat-settings-panel label{display:block; font-size:11px; font-weight:700; color:var(--text-muted); font-family:var(--font-head); margin-bottom:5px;}
  .chat-settings-panel input{width:100%; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-s); padding:9px 12px; font-size:12.5px; color:var(--text); font-family:var(--font-num); direction:ltr; text-align:right;}
  .chat-settings-hint{font-size:10.5px; color:var(--text-faint); line-height:1.7; margin:7px 0 10px;}
  .chat-settings-row{display:flex; gap:8px;}
  .chat-ai-badge{font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:99px; background:var(--ok-soft); color:var(--ok); font-family:var(--font-head); margin-inline-start:6px;}

  .detail-hero{display:flex; align-items:center; gap:12px; padding:8px 0 16px;}
  .detail-hero .store-logo{width:58px; height:58px; font-size:20px;}
  .detail-hero h2{margin:0 0 3px; font-family:var(--font-head); font-size:19px;}
  .fact-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 16px;}
  .fact{background:var(--surface-warm); border:1px solid var(--line); border-radius:var(--radius-s); padding:10px 12px;}
  .fact .fact-label{display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--text-muted); margin-bottom:4px;}
  .fact .fact-label svg{width:12px;height:12px;}
  .fact .fact-value{font-weight:700; font-size:13px; font-family:var(--font-head);}
  .detail-desc{font-size:13.5px; line-height:1.85; color:var(--text); margin:0 0 14px;}
  .size-guide{
    background:var(--surface-warm); border:1px solid var(--line); border-radius:var(--radius-s);
    padding:10px 12px; margin:0 0 14px;
  }
  .size-guide-label{display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:var(--text-muted); margin-bottom:4px; font-family:var(--font-head);}
  .size-guide-label svg{width:12px;height:12px;}
  .size-guide p{margin:0; font-size:12.5px; line-height:1.7; color:var(--text);}
  /* ١٩ سبتمبر ٢٠٢٦: رابط تقييمات ترستبايلوت — رابط خارجي فقط، لا نستورد ولا نخزّن أي
     بيانات منهم (سياستهم تمنع السحب الآلي وإعادة العرض). الرابط يمر عبر بحثهم فيفتح
     صفحة سليمة دائمًا حتى لو المتجر بلا مراجعات، بدل صفحة خطأ. */
  .tp-link{
    display:inline-flex; align-items:center; gap:6px; margin-top:8px;
    font-family:var(--font-head); font-size:12px; font-weight:700;
    color:var(--brand-strong); text-decoration:none;
    border:1px solid var(--line); border-radius:999px; padding:6px 12px;
    background:var(--surface); transition:border-color .15s ease, transform .15s ease;
  }
  .tp-link:hover{border-color:var(--brand-strong); transform:translateY(-1px);}
  .tp-link svg{width:13px; height:13px; flex:none;}
  .reviews-section{margin:6px 0 0; padding-top:14px; border-top:1px solid var(--line);}
  .reviews-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
  .reviews-head h3{margin:0; display:flex; align-items:center; gap:6px; font-family:var(--font-head); font-size:14.5px; color:var(--text);}
  .reviews-head h3 svg{flex:none;}
  .reviews-empty{margin:0; font-size:12.5px; color:var(--text-faint); padding:2px 0 4px;}
  .review-item{padding:10px 0; border-top:1px solid var(--line);}
  .review-item:first-of-type{border-top:none; padding-top:0;}
  .review-name{font-size:12.5px; font-weight:700; font-family:var(--font-head); color:var(--text); margin-bottom:3px;}
  .review-item .store-stars{margin-bottom:4px;}
  .review-comment{margin:0; font-size:12.8px; line-height:1.7; color:var(--text-muted);}
  .sort-row{display:flex; align-items:center; gap:7px; padding:0 16px 12px; flex:none;}
  .sort-row select{
    border:1px solid var(--line); background:var(--surface); color:var(--text);
    border-radius:999px; padding:6px 10px; font-size:12px; font-family:var(--font-head); font-weight:600; outline:none;
  }
  .discount-card{
    background:var(--sale-soft); color:var(--sale);
    border-radius:var(--radius-s); padding:12px 14px; margin-bottom:14px;
    display:flex; gap:10px; align-items:flex-start;
  }
  .discount-card svg{flex:none; margin-top:2px;}
  .discount-card .code{
    display:inline-block; margin-top:6px; background:rgba(0,0,0,.06);
    padding:2px 8px; border-radius:6px; font-family:var(--font-num); font-weight:700; letter-spacing:.5px;
  }
  .tag-row{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
  .tag-pill{background:var(--surface-alt); color:var(--brand-strong); font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:999px;}

  /* ---------- Buttons ---------- */
  .btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    border:none; border-radius:14px; padding:13px 16px;
    font-family:var(--font-head); font-weight:700; font-size:14px;
    cursor:pointer; width:100%;
  }
  .btn svg{width:16px;height:16px;}
  .btn-primary{background:var(--accent); color:var(--on-accent);}
  .btn-outline{background:transparent; border:1.5px solid var(--line); color:var(--text);}
  .btn-ghost{background:var(--surface-alt); color:var(--brand-strong);}
  .btn-danger{background:var(--danger-soft); color:var(--danger);}
  .btn-row{display:flex; gap:10px;}
  .heart-line{background:transparent; border:1.5px solid var(--line); color:var(--danger); width:52px; flex:none; padding:0;}

  /* ---------- About ---------- */
  .about-hero{padding:22px 20px 6px;}
  .about-hero .brand-word{font-size:26px;}
  .about-hero p{font-size:13.5px; color:var(--text-muted); line-height:1.7; margin-top:8px;}
  .method-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:16px; margin:0 20px 14px; display:flex; gap:12px; align-items:flex-start;
  }
  .method-card .num{
    font-family:var(--font-display); font-size:20px; color:var(--accent-strong);
    background:var(--brand-strong); width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .method-card h5{margin:0 0 4px; font-family:var(--font-head); font-size:14px;}
  .method-card p{margin:0; font-size:12.5px; color:var(--text-muted); line-height:1.6;}
  .contact-section{margin:6px 20px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:14px 16px;}
  .contact-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
  .contact-head h3{margin:0; font-family:var(--font-head); font-size:14.5px; color:var(--text);}
  .contact-row{display:flex; align-items:center; gap:10px; padding:10px 2px; border-top:1px solid var(--line); color:var(--text); text-decoration:none;}
  .contact-row:first-of-type{border-top:none;}
  .contact-icon{width:30px; height:30px; border-radius:50%; background:var(--surface-alt); color:var(--brand-strong); display:flex; align-items:center; justify-content:center; flex:none;}
  .contact-label{font-size:13px; font-weight:600; font-family:var(--font-head);}
  .contact-empty-hint{margin:6px 0 0; font-size:12px; color:var(--text-faint); line-height:1.7;}
  .tips-section{padding:0 20px 8px;}
  .tips-section .tips-intro{font-size:13px; color:var(--text-muted); line-height:1.7; margin:0 0 16px;}
  .tips-section .method-card p{white-space:pre-line;}
  .shipco-title{font-family:var(--font-head); font-size:15px; color:var(--text); margin:18px 2px 10px;}
  .shipco-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px;}
  .shipco-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    padding:12px 13px;
  }
  .shipco-card .shipco-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
  .shipco-card .store-logo.shipco-logo{width:28px; height:28px; font-size:11px; border-radius:8px; flex:none;}
  .shipco-card h6{margin:0; font-family:var(--font-head); font-size:12.5px; color:var(--text);}
  .shipco-card p{margin:0; font-size:11.5px; color:var(--text-muted); line-height:1.5;}
  .shipco-card .shipco-meta{margin-top:7px; font-size:11px; color:var(--text-muted); line-height:1.6;}
  .shipco-card .shipco-meta strong{color:var(--text); font-family:var(--font-head); font-weight:600;}
  .shipco-card a{display:inline-block; margin-top:6px; font-size:11px; color:var(--brand-strong); text-decoration:underline;}
  .shipco-empty{font-size:12.5px; color:var(--text-faint); padding:10px 2px;}
  .shipco-form-row{
    background:var(--surface-alt); border-radius:var(--radius-m); padding:12px 13px; margin-bottom:12px;
  }
  .shipco-form-row .form-field{margin-bottom:8px;}
  .shipco-form-row .form-field:last-of-type{margin-bottom:0;}
  .shipco-remove-btn{
    background:none; border:none; color:var(--sale); font-size:12px; text-decoration:underline;
    cursor:pointer; padding:4px 0; font-family:var(--font-body);
  }
  .disclaimer{margin:8px 20px 22px; font-size:11.5px; color:var(--text-faint); line-height:1.7; padding:12px 14px; border-inline-start:3px solid var(--line);}
  .category-caution{margin:2px 20px 16px; font-size:12.5px; color:var(--text); line-height:1.75; padding:13px 14px; border-inline-start:3px solid var(--sale); background:var(--sale-soft); border-radius:var(--radius-s); display:flex; gap:9px; align-items:flex-start;}
  .category-caution .ic{flex:none; color:var(--sale); margin-top:1px;}
  .policy-body{margin:0 20px 22px; font-size:13px; line-height:1.85; color:var(--text-muted);}
  .legal-links-row{display:flex; align-items:center; justify-content:center; gap:8px; margin:-10px 20px 22px; font-size:11.5px; color:var(--text-faint);}
  .legal-links-row a{color:var(--text-faint); text-decoration:underline;}
  .legal-links-row a:hover{color:var(--text-muted);}
  .legal-links-sep{color:var(--text-faint);}
  /* دفعة ٢: محتوى HTML موثّق (مراجعة مطوّلة بصفحة المتجر + نص الخصوصية/الشروط) — نفس خطوط
     وألوان ومسافات الموقع الحالية (var(--font-head) للعناوين، var(--text)/line-height 1.85
     لنص الفقرات زي .detail-desc تمامًا)، بعرض سطر مقروء (٦٥-٧٥ حرف تقريبًا). */
  .rich-content{font-size:13.5px; line-height:1.85; color:var(--text); max-width:66ch; margin:0 0 16px;}
  .rich-content h2{font-family:var(--font-head); font-size:16px; color:var(--text); margin:20px 0 8px; line-height:1.4;}
  .rich-content h2:first-child{margin-top:0;}
  .rich-content h3{font-family:var(--font-head); font-size:14px; color:var(--text); margin:16px 0 6px; line-height:1.4;}
  .rich-content h3:first-child{margin-top:0;}
  .rich-content p{margin:0 0 12px;}
  .rich-content p:last-child{margin-bottom:0;}
  .rich-content ul, .rich-content ol{margin:0 0 12px; padding-inline-start:22px;}
  .rich-content li{margin-bottom:5px;}
  .rich-content li:last-child{margin-bottom:0;}
  .rich-content strong{font-weight:700;}
  .rich-content table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; max-width:100%; border-collapse:collapse; margin:0 0 16px; font-size:12.5px; white-space:nowrap;}
  .rich-content table:last-child{margin-bottom:0;}
  .rich-content th, .rich-content td{padding:8px 12px; text-align:start; border-bottom:1px solid var(--line);}
  .rich-content th{font-weight:700; color:var(--text); background:var(--surface-alt); white-space:nowrap;}
  .rich-content tbody tr:last-child td{border-bottom:none;}
  .policy-meta{margin:2px 20px 12px; font-size:12px; color:var(--text-faint);}
  /* ---------- Admin ---------- */
  .admin-topbar{padding:16px 18px 8px; display:flex; align-items:center; justify-content:space-between;}
  .admin-topbar h3{margin:0; font-family:var(--font-head); font-size:18px;}
  .admin-row{
    display:flex; align-items:center; gap:10px; padding:11px 16px; margin:0 16px 8px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s);
  }
  .admin-row .store-logo{width:36px; height:36px; font-size:12px;}
  .admin-row .meta{flex:1; min-width:0;}
  .admin-row .meta div:first-child{font-weight:700; font-size:13.5px; font-family:var(--font-head);}
  .admin-row .meta div:last-child{font-size:11px; color:var(--text-muted);}
  .admin-actions{display:flex; gap:6px;}
  .icon-btn{
    width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--surface-warm);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
  }
  .icon-btn svg{width:15px;height:15px;}
  .icon-btn.danger{color:var(--danger);}
  .readonly-note{
    margin:20px 16px; padding:16px; background:var(--surface-alt); border-radius:var(--radius-m);
    font-size:12.8px; color:var(--brand-strong); line-height:1.7; text-align:center;
  }

  .form-field{margin-bottom:14px;}
  .form-field label{display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; color:var(--text); font-family:var(--font-head);}
  .form-field label.label-with-icon{display:flex; align-items:center; gap:6px;}
  .form-field label.label-with-icon svg{flex:none; color:var(--brand-strong);}
  .form-field .hint{font-size:10.8px; color:var(--text-faint); margin-top:4px; display:block;}
  .form-field input[type=text], .form-field input[type=url], .form-field select, .form-field textarea{
    width:100%; padding:11px 13px; border-radius:12px; border:1px solid var(--line);
    background:var(--surface-warm); color:var(--text); outline:none;
  }
  .form-field textarea{resize:vertical; min-height:64px;}
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{border-color:var(--brand);}
  .logo-upload-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .logo-upload-preview{flex:none;}
  .logo-upload-empty{background:var(--surface-alt); color:var(--text-faint); border:1px dashed var(--line);}
  .logo-upload-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .btn-sm{width:auto; padding:9px 14px; font-size:12.5px; border-radius:11px;}
  .logo-remove-btn{background:none; border:none; color:var(--sale); font-size:11.5px; text-decoration:underline; cursor:pointer; padding:4px 0; font-family:var(--font-body);}
  .banner-upload-preview-img{flex:none; width:104px; height:60px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--surface-alt);}
  .banner-upload-preview-img img{width:100%; height:100%; object-fit:cover; display:block;}
  .banner-upload-empty{flex:none; width:104px; height:60px; border-radius:10px; border:1px dashed var(--line); background:var(--surface-alt); display:flex; align-items:center; justify-content:center; color:var(--text-faint);}
  .seg{display:flex; gap:6px; flex-wrap:wrap;}
  .seg button{
    flex:1; min-width:88px; padding:10px 8px; border-radius:11px; border:1px solid var(--line);
    background:var(--surface-warm); color:var(--text); font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .seg button.on{background:var(--brand-strong); border-color:var(--brand-strong); color:var(--on-strong);}
  .price-range-inputs{display:flex; align-items:center; gap:8px;}
  .price-range-inputs input{
    flex:1; min-width:0; padding:11px 13px; border-radius:12px; border:1px solid var(--line);
    background:var(--surface-warm); color:var(--text); outline:none;
  }
  .price-range-inputs input:focus{border-color:var(--brand);}
  .price-range-inputs .hint-inline{font-size:11px; color:var(--text-faint); flex:none;}
  .chk-grid{display:flex; flex-wrap:wrap; gap:7px;}
  .chk-pill{
    padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface-warm);
    font-size:12px; font-weight:600; cursor:pointer; color:var(--text);
  }
  .chk-pill.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  .star-input{display:flex; gap:6px; font-size:24px; color:var(--line); cursor:pointer;}
  .star-input span.on{color:var(--accent-strong);}
  .star-input-sm{font-size:15px; gap:4px;}

  /* ---------- Toast ---------- */
  .toast{
    position:fixed; bottom:92px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--brand-strong); color:var(--on-strong); font-size:13px; font-weight:600;
    padding:11px 20px; border-radius:999px; z-index:80; opacity:0; pointer-events:none;
    transition:all .25s ease; max-width:88%; text-align:center; font-family:var(--font-head);
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  .scrollhide{scrollbar-width:none;}
  .scrollhide::-webkit-scrollbar{display:none;}

  /* ================= Desktop marketing site (>=720px, or forced via the view-mode toggle) ================= */
  #desktop-marketing{display:none; background:var(--bg);}
  @media (min-width:720px){
    #desktop-marketing{display:block;}
    .app-shell{display:none;}
    body{padding:0; display:block;}
    html[data-app-open="1"] #desktop-marketing{display:none;}
    /* Wide desktop shopping view: browsing/categories/etc. on a real desktop window stay a full-width
       desktop layout, not the narrow phone frame — that narrow frame is reserved for the explicit
       "View the app version" toggle (data-view="mobile" below), never triggered just by clicking around. */
    html[data-app-open="1"] .app-shell{
      display:flex; margin:0 auto; max-width:1180px; width:100%;
      border-radius:0; overflow:visible; box-shadow:none;
      min-height:100vh;
    }
    html[data-app-open="1"] body{padding:0; display:block;}
  }
  /* Manual override: a viewer can force either view regardless of window width via the view-mode toggle. */
  html[data-view="desktop"] #desktop-marketing{display:block !important;}
  html[data-view="desktop"] .app-shell{display:none !important;}
  html[data-view="desktop"] body{padding:0 !important; display:block !important;}
  html[data-view="desktop"][data-app-open="1"] #desktop-marketing{display:none !important;}
  html[data-view="desktop"][data-app-open="1"] .app-shell{
    display:flex !important; margin:0 auto !important; max-width:1180px !important; width:100%;
    border-radius:0 !important; overflow:visible !important; box-shadow:none !important;
    min-height:100vh;
  }
  html[data-view="desktop"][data-app-open="1"] body{padding:0 !important; display:block !important;}
  /* Only this explicit "mobile app" choice keeps the narrow floating phone-card look, at any window width. */
  html[data-view="mobile"] #desktop-marketing{display:none !important;}
  html[data-view="mobile"] .app-shell{display:flex !important; margin:0 auto; max-width:460px;}
  html[data-view="mobile"] body{padding:0 !important; display:flex !important; justify-content:center;}
  @media (min-width:520px){
    html[data-view="mobile"] body{padding:28px 12px !important;}
    html[data-view="mobile"] .app-shell{min-height:calc(100vh - 56px); border-radius:28px; overflow:hidden;}
  }
  /* Wide desktop app: let the bottom nav / chat button / grid use the full wide width instead of staying
     capped at the 460px phone-frame size (those elements are position:absolute within .app-shell). */
  @media (min-width:720px){
    html[data-app-open="1"]:not([data-view="mobile"]) .app-shell .bottom-nav{
      max-width:1180px; padding-left:22px; padding-right:22px;
    }
    html[data-app-open="1"]:not([data-view="mobile"]) .app-shell .chat-fab-wrap{
      max-width:1180px; padding-right:26px;
    }
    html[data-app-open="1"]:not([data-view="mobile"]) .store-grid{
      grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
      gap:18px;
    }
    /* ١٥ سبتمبر ٢٠٢٦: شبكة الأقسام داخل شاشة «تصفح» كانت أربعة أعمدة ١fr، فلمّا يتمدد الشيل
       على عرض الموقع يصير كل مربع ~٢٧٣px — ضخم. نحدّ عرض العمود ونوسّط الشبكة فتبقى
       المربعات بنفس مقاس نسخة التطبيق تمامًا كما في شبكة الأقسام بالصفحة الرئيسية. */
    html[data-app-open="1"]:not([data-view="mobile"]) .chip-rail{
      grid-template-columns:repeat(6, minmax(0,136px));
      justify-content:center;
      gap:14px;
    }
  }
  @media (min-width:720px) and (max-width:1080px){
    html[data-app-open="1"]:not([data-view="mobile"]) .chip-rail{grid-template-columns:repeat(5, minmax(0,132px));}
  }
  @media (min-width:720px) and (max-width:860px){
    html[data-app-open="1"]:not([data-view="mobile"]) .chip-rail{grid-template-columns:repeat(4, minmax(0,128px));}
  }
  .view-toggle-link{
    display:block; width:100%; text-align:center; background:var(--surface-alt); color:var(--brand-strong);
    border:none; cursor:pointer; padding:9px 10px; font-family:var(--font-head); font-weight:700; font-size:11.5px;
  }
  .dk-app-link{
    display:flex; align-items:center; gap:6px; background:none; cursor:pointer; color:var(--text-muted);
    font-family:var(--font-head); font-weight:700; font-size:11.5px; padding:6px 12px;
    border-radius:999px; border:1px solid var(--line); flex:none;
  }
  .dk-app-link:hover{color:var(--text);}

  /* ١٣ سبتمبر ٢٠٢٦: padding-top بالمساحة الآمنة — بدونه، في وضع الاختصار على الجوال
     (standalone + viewport-fit=cover + status-bar-style: black-translucent) تمتد الصفحة تحت
     شريط الحالة فيقع الشعار حرفيًا تحت الساعة وعلامة الواي فاي. نسخة الجوال (.topbar) محمية
     أصلًا بنفس الطريقة؛ هذا يسدّ الثغرة في نسخة الموقع الكاملة. */
  .dk-header{position:sticky; top:0; z-index:60; padding-top:env(safe-area-inset-top); background:color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent;}
  .dk-header-inner{
    max-width:1180px; margin:0 auto; padding:12px clamp(14px,4vw,32px) 0;
    display:flex; flex-direction:column; gap:10px;
  }
  .dk-header-top{
    display:flex; align-items:center; justify-content:space-between;
    gap:clamp(12px,3vw,36px); width:100%; flex-wrap:wrap;
  }
  .dk-logo{display:flex; align-items:center; gap:9px; background:none; border:none; cursor:pointer; padding:0; flex:none;}
  .dk-logo-mark{
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .dk-logo-mark svg{display:block;}
  .dk-logo-word{font-family:var(--font-display); font-size:20px; color:var(--text); letter-spacing:.3px;}
  .dk-nav{
    display:flex; align-items:center; justify-content:center;
    gap:clamp(16px,3vw,34px); width:100%; flex-wrap:wrap;
    border-top:1px solid var(--line); padding:9px 0 11px;
  }
  .dk-nav > a{
    background:none; border:none; cursor:pointer; padding:6px 1px;
    font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--text-muted);
    border-bottom:2px solid transparent;
  }
  .dk-nav > a:hover{color:var(--text);}
  .dk-nav-cats{position:relative;}
  .dk-nav-cats > button{
    display:flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer;
    padding:6px 1px; font-family:var(--font-head); font-weight:700; font-size:13.5px; color:var(--text-muted);
  }
  .dk-nav-cats > button svg{width:12px;height:12px;}
  .dk-nav-cats:hover > button{color:var(--text);}
  .dk-nav-cats-panel{
    position:absolute; top:100%; inset-inline-start:0; margin-top:10px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
    box-shadow:var(--shadow-card); padding:8px; display:flex; flex-direction:column; gap:2px;
    min-width:200px; opacity:0; pointer-events:none; transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease;
  }
  .dk-nav-cats:hover .dk-nav-cats-panel, .dk-nav-cats:focus-within .dk-nav-cats-panel{
    opacity:1; pointer-events:auto; transform:translateY(0);
  }
  .dk-nav-cats-panel a{
    text-align:start; background:none; border:none; cursor:pointer; border-radius:9px;
    padding:9px 11px; font-family:var(--font-body); font-size:13px; color:var(--text);
    display:block;
  }
  .dk-nav-cats-panel a:hover{background:var(--surface-alt);}
  .dk-header-actions{display:flex; align-items:center; gap:14px; flex:none;}
  .dk-search{
    display:flex; align-items:center; gap:7px; background:var(--surface-warm);
    border:1px solid var(--line); border-radius:999px; padding:8px 14px; width:clamp(140px,20vw,220px);
  }
  .dk-search svg{flex:none; color:var(--text-faint); width:15px; height:15px;}
  .dk-search input{flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--text); font-size:13.5px;}
  .dk-search input::placeholder{color:var(--text-faint);}

  .dk-hero{
    padding:clamp(40px,8vw,76px) clamp(16px,4vw,32px) clamp(32px,6vw,52px); text-align:center;
    background:linear-gradient(180deg, var(--surface-warm), var(--bg));
  }
  .dk-hero h1{
    font-family:var(--font-display); font-size:clamp(28px,4.2vw,44px); line-height:1.2; color:var(--text);
    max-width:780px; margin:0 auto 18px; text-wrap:balance;
  }
  .dk-hero-sub{
    font-size:16px; color:var(--text-muted); line-height:1.75; max-width:560px; margin:0 auto 34px;
  }
  .dk-hero-search{
    display:flex; align-items:center; gap:10px; background:var(--surface);
    border:1px solid var(--line); border-radius:999px; padding:15px 22px;
    max-width:480px; margin:0 auto; box-shadow:var(--shadow-card);
  }
  .dk-hero-search svg{flex:none; color:var(--text-faint);}
  .dk-hero-search input{flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--text); font-size:15px;}
  .dk-hero-search input::placeholder{color:var(--text-faint);}
  .dk-stats{display:flex; justify-content:center; gap:48px; margin-top:42px; flex-wrap:wrap;}
  .dk-stat{display:flex; flex-direction:column; align-items:center; gap:4px;}
  .dk-stat .n{font-family:var(--font-num); font-weight:800; font-size:28px; color:var(--brand-strong); display:flex; align-items:center;}
  .dk-stat .n svg{color:var(--brand-strong);}
  .dk-stat .l{font-family:var(--font-head); font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;}

  .dk-marquee-wrap{padding:26px 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

  .dk-section{padding:clamp(36px,7vw,64px) clamp(16px,4vw,32px); max-width:1180px; margin:0 auto;}
  .dk-section-alt{max-width:none; background:var(--surface-warm);}
  .dk-section-alt > *{max-width:1180px; margin-left:auto; margin-right:auto;}
  .dk-section-head{text-align:center; margin-bottom:38px;}
  .dk-section-head .eyebrow{
    display:block; font-family:var(--font-head); font-weight:700; font-size:11.5px;
    color:var(--accent-strong); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px;
  }
  .dk-section-head h2{font-family:var(--font-display); font-size:30px; color:var(--text); margin:0; text-wrap:balance;}
  .dk-section-head-row{display:flex; align-items:flex-end; justify-content:space-between; text-align:start; margin-bottom:28px;}
  .dk-section-head-row .eyebrow{margin-bottom:6px;}
  .dk-section-head-row h2{font-size:26px;}
  .dk-see-all{
    display:flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer;
    font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--brand); flex:none;
  }
  .dk-see-all svg{width:13px;height:13px; transform:rotate(-90deg);}
  :root[dir="ltr"] .dk-see-all svg, html[lang="en"] .dk-see-all svg{transform:rotate(90deg);}

  /* ١٥ سبتمبر ٢٠٢٦: بطاقات الأقسام في نسخة الموقع صارت بنفس هيئة نسخة التطبيق —
     مربّعات صغيرة متساوية بأيقونة دائرية صغيرة، بدل البطاقات العريضة بأيقونة ٥٢px. */
  .dk-cat-grid{
    display:grid; grid-template-columns:repeat(6, minmax(0,136px));
    justify-content:center; gap:14px;
  }
  .dk-cat-tile{
    background:var(--surface); border:1px solid var(--line); border-radius:18px;
    aspect-ratio:1/1; padding:10px 8px; text-align:center; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    transition:transform .15s ease, box-shadow .15s ease;
    overflow:hidden;
  }
  .dk-cat-tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-card);}
  .dk-cat-tile .ic{
    width:34px; height:34px; border-radius:50%; background:var(--surface-alt); color:var(--brand-strong);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .dk-cat-tile .ic svg{width:17px; height:17px;}
  .dk-cat-tile span:last-child{
    font-family:var(--font-head); font-weight:700; font-size:12px; line-height:1.3;
    color:var(--text); width:100%; overflow-wrap:anywhere;
  }
  /* زر «الكل» العريض يتصدّر الشبكة — نفس شريط نسخة التطبيق */
  .dk-cat-grid .dk-cat-tile.dk-cat-all{
    grid-column:1 / -1; aspect-ratio:auto; flex-direction:row; justify-content:center;
    gap:9px; padding:11px 16px; border-radius:999px;
    background:var(--accent); border-color:var(--accent); color:var(--on-accent);
  }
  .dk-cat-grid .dk-cat-tile.dk-cat-all .ic{
    width:24px; height:24px; background:rgba(255,255,255,.22); color:var(--on-accent);
  }
  .dk-cat-grid .dk-cat-tile.dk-cat-all .ic svg{width:15px; height:15px;}
  .dk-cat-grid .dk-cat-tile.dk-cat-all span:last-child{
    width:auto; font-size:14px; color:var(--on-accent);
  }
  @media (max-width:1080px){ .dk-cat-grid{grid-template-columns:repeat(5, minmax(0,132px));} }
  @media (max-width:860px){ .dk-cat-grid{grid-template-columns:repeat(4, minmax(0,128px));} }

  .dk-price-filter{
    display:flex; align-items:center; gap:9px; margin-bottom:26px; flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 8px 8px 16px; width:fit-content;
  }
  .dk-price-filter span:first-child{font-family:var(--font-head); font-weight:700; font-size:12.5px; color:var(--text-muted);}
  .dk-price-filter input{
    width:74px; padding:7px 10px; border-radius:999px; border:1px solid var(--line);
    background:var(--surface-warm); color:var(--text); font-size:12.5px; outline:none; text-align:center;
  }
  .dk-price-filter input:focus{border-color:var(--brand);}
  .dk-price-filter .sep{color:var(--text-faint);}
  .dk-price-filter .cur{font-size:11px; color:var(--text-faint);}

  .dk-featured-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); gap:20px;}
  .dk-featured-grid .store-card{cursor:pointer;}

  .dk-how-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px;}
  .dk-how-grid .method-card{margin:0; height:100%;}

  .dk-trust{background:var(--brand-strong); padding:56px 32px;}
  .dk-trust-inner{max-width:640px; margin:0 auto; text-align:center;}
  .dk-trust-inner .badge-free{
    display:inline-block; background:var(--accent); color:var(--on-accent);
    font-family:var(--font-head); font-weight:700; font-size:11px; padding:5px 12px; border-radius:999px; margin-bottom:16px;
  }
  .dk-trust-inner h2{font-family:var(--font-display); font-size:28px; color:var(--on-strong); margin:0 0 12px;}
  .dk-trust-inner p{font-size:14.5px; color:var(--on-strong); opacity:.92; line-height:1.75; margin:0;}

  .dk-testimonials .empty-state{padding:20px 24px 6px;}

  .dk-faq{max-width:760px;}
  .dk-faq-list{display:flex; flex-direction:column;}
  .dk-faq-item{border-bottom:1px solid var(--line);}
  .dk-faq-item > button{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:none; border:none; cursor:pointer; padding:18px 2px;
    font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--text); text-align:start;
  }
  .dk-faq-item > button svg{flex:none; color:var(--text-faint); transition:transform .15s ease;}
  .dk-faq-item.open > button svg{transform:rotate(180deg); color:var(--brand);}
  .dk-faq-item p{margin:0; padding:0 2px 20px; font-size:13.5px; color:var(--text-muted); line-height:1.75;}

  .dk-footer{background:var(--surface); border-top:1px solid var(--line); padding:52px clamp(16px,4vw,32px) 26px;}
  .dk-footer-grid{
    max-width:1180px; margin:0 auto; padding-bottom:36px;
    display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:32px;
  }
  .dk-footer-brand .brand-word{font-family:var(--font-display); font-size:22px; color:var(--text); margin-bottom:10px;}
  .dk-footer-brand p{font-size:12.5px; color:var(--text-muted); line-height:1.7; max-width:260px; margin:0;}
  .dk-footer-col h6{font-family:var(--font-head); font-weight:700; font-size:12.5px; color:var(--text); margin:0 0 14px;}
  .dk-footer-col a{
    display:block; background:none; border:none; cursor:pointer; text-align:start;
    color:var(--text-muted); font-family:var(--font-body); font-size:13px; margin-bottom:10px; padding:0;
  }
  .dk-footer-col a:hover{color:var(--brand);}
  .dk-footer-social{display:flex; gap:8px; margin-top:6px;}
  .dk-social-btn{
    width:34px; height:34px; border-radius:50%; background:var(--surface-alt); color:var(--brand-strong);
    display:flex; align-items:center; justify-content:center; text-decoration:none;
  }
  .dk-social-btn:hover{background:var(--accent); color:var(--on-accent);}
  .dk-footer-bottom{
    max-width:1180px; margin:0 auto; padding-top:20px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    font-size:11.5px; color:var(--text-faint); line-height:1.6;
  }
  .dk-footer-bottom span:last-child{max-width:560px; text-align:end;}
  .dk-footer-legal{display:flex; gap:10px; flex:none;}
  .dk-footer-legal a{color:var(--text-faint); text-decoration:underline;}
  .dk-footer-legal a:hover{color:var(--brand);}