/* ================================================================
   سوق ستايلي — تطبيق واحد يجمع كل المحلات
   واجهة السوق ثابتة (فحمي + ذهبي)، وكل محل يلبس ستايله داخل شاشته.
   ================================================================ */

/* ── الهوية الفاتحة (الافتراضية) ──
   درس من مواقع الأزياء الكبيرة (COS/Mango/Aritzia): الفخامة تجي من الفراغ
   والضوء، مو من السواد. خلفية عاجية دافئة تخلّي الملابس هي البطل — والأسود
   يبقى خياراً بزر واحد لمن يحبّه. */
:root {
  /* ═══ فخامة دافئة: رملي عراقي بدل الرمادي البارد ═══ */
  --bg: #F7F3EC; --surface: #FFFDF9; --surface-2: #EFE8DC;
  --ink: #241F19; --muted: #8A7F6D; --gold: #A8823A;
  --line: #E5DCCC; --bar: #D6CCB8; --backdrop: #EDE6D9;
  /* ظل دافئ (بني مو أسود) — البطاقة تطفو بدل ما تنحبس بإطار */
  --shadow-sm: 0 1px 3px rgba(72,54,30,.04), 0 6px 20px rgba(72,54,30,.055);
  --shadow-lg: 0 14px 40px rgba(72,54,30,.11);
  --radius: 12px; --radius-lg: 18px;
  /* العناوين بخط عربي أنيق، والواجهة بخط واضح */
  --font-head: 'Amiri', 'Cairo', serif;
  --font-ui: 'Cairo', sans-serif;
  --font-body: 'Tajawal', system-ui, sans-serif;
}

/* ── الهوية الغامقة (اختيارية) ── */
html[data-theme="dark"] {
  --bg: #0d0e12; --surface: #171922; --surface-2: #1e2029;
  --ink: #f3f0ea; --muted: #9b9cab; --gold: #d8b26a;
  --line: #262a34; --bar: #39404f; --backdrop: #07080b;
  --shadow-sm: none; --shadow-lg: 0 14px 34px rgba(0,0,0,.45);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; line-height: 1.25; font-weight: 800; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.app { height: 100dvh; display: flex; flex-direction: column; position: relative; overflow: hidden; background: var(--bg); }

.statusbar { display: none; }
html[data-preview="1"] .statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 18px 3px; font-size: 12px; font-weight: 700; background: var(--bg); color: var(--ink);
}
.sb-right { display: flex; gap: 5px; }
.sb-right svg { width: 15px; height: 15px; }

/* ---------- الشريط العلوي ---------- */
.mtop { flex: none; padding: 8px 16px 10px; background: var(--bg); }
.mt-row { display: flex; align-items: center; gap: 10px; }
.mt-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.mt-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--gold); color: #14151a; display: grid; place-items: center; flex: none; }
.mt-mark svg { width: 19px; height: 19px; stroke-width: 1.6; }
.mt-brand b { font-family: var(--font-head); font-size: 16px; }
.mt-loc { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.mt-loc svg { width: 13px; height: 13px; }
.mt-act { width: 36px; height: 36px; border-radius: 999px; background: var(--surface); display: grid; place-items: center; position: relative; flex: none; }
.mt-act .n {
  position: absolute; top: -2px; inset-inline-end: -2px; min-width: 17px; height: 17px; border-radius: 999px;
  background: var(--gold); color: #14151a; font-size: 10px; font-weight: 800; display: grid; place-items: center; padding: 0 4px;
}
.mt-search {
  display: flex; align-items: center; gap: 9px; margin-top: 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 13px; padding: 11px 13px; color: var(--muted); font-size: 13.5px;
}
.mt-search svg { width: 17px; height: 17px; }
.mt-search input { flex: 1; background: none; border: 0; outline: none; color: var(--ink); font: inherit; }
.mt-search input::placeholder { color: var(--muted); }

/* ---------- الشاشة ---------- */
.screen { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 18px; scrollbar-width: thin; }
/* شريط رفيع يظهر بالتلفون بعد — قبل چان مخفياً تماماً فما تعرف إن بعده محتوى
   ولا عندك شي تسحبه. ٦px بس حتى ما ياكل من عرض الشاشة. */
.screen::-webkit-scrollbar, .hrow::-webkit-scrollbar, .chips::-webkit-scrollbar,
.sv-scroll::-webkit-scrollbar, .sheet::-webkit-scrollbar, .sv-chips::-webkit-scrollbar { width: 6px; height: 6px; }
.screen::-webkit-scrollbar-thumb, .hrow::-webkit-scrollbar-thumb, .chips::-webkit-scrollbar-thumb,
.sv-scroll::-webkit-scrollbar-thumb, .sheet::-webkit-scrollbar-thumb, .sv-chips::-webkit-scrollbar-thumb {
  background: var(--bar); border-radius: 999px;
}
.screen::-webkit-scrollbar-track, .hrow::-webkit-scrollbar-track, .chips::-webkit-scrollbar-track,
.sv-scroll::-webkit-scrollbar-track, .sheet::-webkit-scrollbar-track, .sv-chips::-webkit-scrollbar-track { background: transparent; }
.sec { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 16px 14px; }
.sec h2 { font-family: var(--font-head); font-size: 21px; font-weight: 400; letter-spacing: .2px;
  position: relative; padding-bottom: 9px; }
/* شرطة ذهبية قصيرة — لمسة الفخامة الوحيدة، ما تتكرر بكل مكان */
.sec h2::after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 32px; height: 1px; background: var(--gold); }
.sec span { font-size: 11.5px; color: var(--muted); }
.hrow { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: thin; }
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 0 16px; scrollbar-width: thin; }
.chip { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 12.5px; color: var(--muted); background: var(--surface); }
.chip.on { background: var(--gold); color: #14151a; border-color: var(--gold); font-weight: 700; }

/* ---------- بطاقة عرض (خصم محل) ---------- */
.offer {
  flex: none; width: 268px; border-radius: var(--radius-lg); padding: 14px; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
}
.offer::before {
  content: ''; position: absolute; inset-block-start: -40px; inset-inline-start: -30px; width: 160px; height: 160px;
  background: radial-gradient(circle, var(--sc), transparent 68%); opacity: .55;
}
.offer-h { display: flex; align-items: center; gap: 9px; position: relative; }
.offer-h img { width: 34px; height: 34px; border-radius: 10px; background: #fff; object-fit: contain; }
.offer-h b { font-size: 13px; }
.offer-h span { font-size: 10.5px; color: var(--muted); display: block; }
.offer p { margin: 11px 0 0; font-family: var(--font-head); font-size: 15px; font-weight: 800; position: relative; }
.offer .cd { display: flex; gap: 5px; margin-top: 10px; position: relative; }
.offer .cd div { background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px; text-align: center; min-width: 42px; }
.offer .cd u { text-decoration: none; display: block; font-family: var(--font-head); font-weight: 900; font-size: 14px; }
.offer .cd i { font-style: normal; font-size: 9px; color: var(--muted); }
.offer .pct {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px; background: var(--sc); color: #fff;
  border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800;
}

/* ---------- بطاقة محل ---------- */
.shops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px; }
.scard { background: var(--surface); border: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); }
.scard .cov { height: 84px; position: relative; background: var(--surface-2); }
.scard .cov img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
/* غلاف بديل: تدرّج رملي بحرف المحل — ما يبقى فراغ ميّت */
.scard .cov .covx {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, #EFE8DC, #E2D8C4);
  font-family: var(--font-head); font-size: 40px; color: rgba(168,130,58,.55);
}
.scard .cov .tag {
  position: absolute; inset-block-start: 9px; inset-inline-start: 9px;
  background: rgba(255,253,249,.9); backdrop-filter: blur(8px);
  color: var(--ink); font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(72,54,30,.12);
}
.scard .bd { padding: 0 12px 13px; position: relative; }
.scard .lg {
  width: 44px; height: 44px; border-radius: 13px; margin-top: -22px; background: #fff; border: 2px solid var(--surface);
  object-fit: contain; position: relative; z-index: 2;
}
.scard b { display: block; font-family: var(--font-head); font-size: 16.5px; font-weight: 400;
  line-height: 1.4; margin-top: 8px; }
.scard .kind { font-size: 11px; color: var(--muted); }
.scard .meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.scard .meta i { font-style: normal; display: flex; align-items: center; gap: 3px; }
.scard .meta .st { color: var(--gold); }
.follow {
  margin-top: 10px; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  font-size: 12px; font-weight: 700; color: var(--ink); background: var(--surface-2);
}
.follow.on { background: var(--gold); color: #14151a; border-color: var(--gold); }

/* ---------- بطاقة منتج (بالسوق: تحمل اسم محلها) ---------- */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; padding: 0 16px; }
.pcard { background: var(--surface); border: 0; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .25s, transform .25s; }
.pcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.pcard .ph { position: relative; aspect-ratio: 4/5; background: var(--surface-2); }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; }
.pcard .off, .sv-card .off {
  /* الإشارة تنقلب بواجهة RTL فتطلع «20٪−» — نعزلها بـLTR حتى تُقرأ «−20٪» */
  direction: ltr; unicode-bidi: isolate;
}
.pcard .off {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px; background: #B84A3E; color: #fff;
  font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px;
}
.pcard .by {
  position: absolute; inset-block-end: 9px; inset-inline-start: 9px;
  max-width: calc(100% - 18px); display: inline-flex; align-items: center; gap: 6px;
  /* كبسولة عاجية زجاجية: تدل على المحل بلا ما تثقّل الصورة */
  background: rgba(255,253,249,.88); backdrop-filter: blur(10px) saturate(1.1);
  border-radius: 999px; padding: 3px 10px 3px 3px; box-shadow: 0 2px 10px rgba(72,54,30,.13);
}
.pcard .by img { width: 19px; height: 19px; border-radius: 999px; background: #fff; object-fit: contain; }
.pcard .by span { font-size: 10.5px; color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .m { padding: 12px 12px 15px; }
.pcard .m b { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 400;
  line-height: 1.5; height: 3em; overflow: hidden; color: var(--ink); letter-spacing: .1px; }
.pcard .m .pr { display: flex; align-items: baseline; gap: 6px; margin-top: 7px; font-family: var(--font-body); }
.pcard .m .pr u { text-decoration: none; font-size: 13px; font-weight: 500; color: var(--muted);
  letter-spacing: .3px; }
.pcard .m .pr s { font-size: 10.5px; color: var(--muted); }
.hrow .pcard { flex: none; width: 152px; }

/* قائمة مضغوطة (نتائج البحث) */
.lrow { display: flex; gap: 11px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px; }
.lrow img.th { width: 62px; height: 78px; object-fit: cover; border-radius: 10px; flex: none; }
.lrow .li { flex: 1; min-width: 0; }
.lrow .li b { display: block; font-size: 13px; }
.lrow .li .by { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.lrow .li .by img { width: 16px; height: 16px; border-radius: 999px; background: #fff; object-fit: contain; }
.lrow .li .pr { font-family: var(--font-head); font-weight: 800; font-size: 13.5px; margin-top: 5px; color: var(--gold); }
.list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }

/* ---------- شريط التبويب ---------- */
.tabbar { flex: none; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 30; }
.tab { flex: 1; display: grid; place-items: center; gap: 3px; color: var(--muted); font-size: 10.5px; padding: 4px 0; position: relative; }
.tab.on { color: var(--gold); }
.tab .n { position: absolute; top: 0; inset-inline-end: 20%; min-width: 16px; height: 16px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 9.5px; display: grid; place-items: center; font-weight: 800; }

/* ================================================================
   شاشة المحل — هنا يلبس المحل ستايله (التوكنز تنحط inline)
   ================================================================ */
.shop-view {
  position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column;
  background: var(--s-bg); color: var(--s-ink); animation: slideUp .24s ease;
  font-family: var(--s-font-body);
}
@keyframes slideUp { from { transform: translateY(22px); opacity: .5; } to { transform: none; opacity: 1; } }
.shop-view h1, .shop-view h2, .shop-view h3 { font-family: var(--s-font-head); }
.sv-scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; padding-bottom: 20px; }

.sv-cover { position: relative; height: 178px; }
.sv-cover img { width: 100%; height: 100%; object-fit: cover; }
.sv-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--s-bg), transparent 62%); }
.sv-back {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 3; width: 36px; height: 36px;
  border-radius: 999px; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center;
}
html[data-preview="1"] .sv-back { inset-block-start: 34px; }
.sv-head { padding: 0 16px; margin-top: -34px; position: relative; z-index: 2; }
.sv-lg { width: 66px; height: 66px; border-radius: 18px; background: #fff; object-fit: contain; border: 2px solid var(--s-surface); }
.sv-name { display: flex; align-items: flex-start; gap: 10px; margin-top: 9px; }
.sv-name h2 { font-size: 20px; }
.sv-name .kind { font-size: 12px; color: var(--s-muted); }
.sv-follow {
  margin-inline-start: auto; border: 1.5px solid var(--s-accent); color: var(--s-accent);
  border-radius: 999px; padding: 8px 18px; font-size: 12.5px; font-weight: 800; flex: none;
}
.sv-follow.on { background: var(--s-accent); color: var(--s-accent-ink); }
.sv-meta { display: flex; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--s-muted); flex-wrap: wrap; }
.sv-meta i { font-style: normal; display: flex; align-items: center; gap: 4px; }
.sv-meta svg { width: 14px; height: 14px; }
.sv-offer {
  margin: 14px 16px 0; border-radius: var(--s-radius); background: var(--s-accent); color: var(--s-accent-ink);
  padding: 13px 15px; display: flex; align-items: center; gap: 11px;
}
.sv-offer b { font-family: var(--s-font-head); font-size: 14px; display: block; }
.sv-offer span { font-size: 11.5px; opacity: .9; }
.sv-offer .cdx { margin-inline-start: auto; font-family: var(--s-font-head); font-weight: 900; font-size: 15px; white-space: nowrap; }
.sv-chips { display: flex; gap: 7px; overflow-x: auto; padding: 14px 16px 4px; scrollbar-width: thin; }

.sv-chips button { flex: none; border: 1px solid var(--s-line); border-radius: 999px; padding: 7px 15px; font-size: 12.5px; color: var(--s-muted); background: var(--s-surface); }
.sv-chips button.on { background: var(--s-accent); color: var(--s-accent-ink); border-color: var(--s-accent); font-weight: 700; }
.sv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px 0; }
.sv-card { background: var(--s-surface); border-radius: var(--s-radius); overflow: hidden; border: 1px solid var(--s-line); }
.sv-card .ph { aspect-ratio: 3/4; position: relative; background: var(--s-surface-2); }
.sv-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.sv-card .off { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; background: var(--s-accent); color: var(--s-accent-ink); font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 999px; }
.sv-card .m { padding: 10px 11px 12px; }
.sv-card .m b { display: block; font-size: 12.5px; font-weight: 600; height: 2.7em; overflow: hidden; line-height: 1.35; }
.sv-card .m .pr { display: flex; gap: 6px; align-items: baseline; margin-top: 5px; font-family: var(--s-font-head); }
.sv-card .m .pr u { text-decoration: none; font-weight: 800; font-size: 13.5px; }
.sv-card .m .pr s { font-size: 10.5px; color: var(--s-muted); }
.sv-web {
  margin: 18px 16px 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--s-line); border-radius: var(--s-radius); padding: 13px; font-size: 13px; color: var(--s-muted);
}
.sv-web b { color: var(--s-ink); }

/* ---------- الورقة السفلية ---------- */
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.58); z-index: 60; }
.sheet {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 70; background: var(--bg); color: var(--ink);
  border-radius: 26px 26px 0 0; max-height: 92%; overflow-y: auto; scrollbar-width: thin; animation: up .26s ease;
}

@keyframes up { from { transform: translateY(60px); opacity: .6; } to { transform: none; opacity: 1; } }
.grab { width: 40px; height: 4px; border-radius: 9px; background: var(--line); margin: 10px auto 0; }
.sh-img { aspect-ratio: 4/3; background: var(--surface-2); margin-top: 10px; }
.sh-img img { width: 100%; height: 100%; object-fit: cover; }
.sh-body { padding: 16px; }
.sh-by { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.sh-by img { width: 34px; height: 34px; border-radius: 10px; background: #fff; object-fit: contain; }
.sh-by b { font-size: 13px; display: block; }
.sh-by span { font-size: 11px; color: var(--muted); }
.sh-by .goto { margin-inline-start: auto; font-size: 11.5px; color: var(--gold); font-weight: 700; }
.sh-body h2 { font-size: 18px; margin-bottom: 7px; }
.sh-price { display: flex; gap: 8px; align-items: baseline; font-family: var(--font-head); margin-bottom: 10px; }
.sh-price b { font-size: 21px; color: var(--gold); }
.sh-price s { color: var(--muted); font-size: 13px; }
.sh-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; }
.olab { font-size: 11.5px; color: var(--muted); margin: 0 0 7px; }
.opts { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.sz { border: 1px solid var(--line); background: var(--surface); padding: 8px 14px; border-radius: 12px; font-size: 13px; }
.sz.on { background: var(--gold); color: #14151a; border-color: var(--gold); font-weight: 700; }
.cl { width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--line); }
.cl.on { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 15px; border-radius: 14px; background: var(--gold); color: #14151a; font-weight: 800; font-size: 15px;
}
.btn.ghost { background: none; border: 1.5px solid var(--line); color: var(--ink); }

/* ---------- السلة ---------- */
.cart-shop { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); margin: 0 16px 12px; overflow: hidden; }
.cs-head { display: flex; align-items: center; gap: 9px; padding: 12px 13px; border-bottom: 1px solid var(--line); }
.cs-head img { width: 30px; height: 30px; border-radius: 9px; background: #fff; object-fit: contain; }
.cs-head b { font-size: 13.5px; flex: 1; }
.cs-head span { font-size: 11px; color: var(--muted); }
.crow { display: flex; gap: 11px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.crow img { width: 58px; height: 74px; object-fit: cover; border-radius: 9px; flex: none; }
.crow .ci { flex: 1; min-width: 0; }
.crow .ci b { font-size: 12.5px; display: block; }
.crow .ci span { font-size: 11px; color: var(--muted); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; margin-top: 6px; }
.qty button { width: 27px; height: 27px; }
.qty b { min-width: 22px; text-align: center; font-size: 12.5px; }
.cs-foot { padding: 11px 13px; display: flex; justify-content: space-between; font-size: 13px; }
.cs-foot b { font-family: var(--font-head); color: var(--gold); }
.sum { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin-bottom: 5px; }
.sum.total { color: var(--ink); font-family: var(--font-head); font-size: 17px; margin: 10px 0 14px; }
.empty { text-align: center; color: var(--muted); padding: 60px 24px; font-size: 14px; line-height: 1.9; }
.field { margin-bottom: 10px; }
.field label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 14.5px; outline: none;
}
.ok-wrap { text-align: center; padding: 32px 20px 26px; }
.ok-mark { width: 58px; height: 58px; border-radius: 999px; background: var(--gold); color: #14151a; display: grid; place-items: center; margin: 0 auto 14px; font-size: 27px; }

/* ---------- حسابي ---------- */
.acc-head { text-align: center; padding: 20px 16px 8px; }
.acc-av { width: 66px; height: 66px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; margin: 0 auto 10px; }
.acc-list { padding: 8px 16px; display: flex; flex-direction: column; gap: 9px; }
.acc-item { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; font-size: 14px; }
.acc-item span { flex: 1; }
.acc-item b { color: var(--gold); }
.foll-row { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; scrollbar-width: thin; }
.foll-row .f { flex: none; width: 70px; text-align: center; }
.foll-row .f img { width: 56px; height: 56px; border-radius: 999px; background: #fff; object-fit: contain; margin: 0 auto; border: 2px solid var(--gold); padding: 3px; }
.foll-row .f span { display: block; font-size: 10.5px; margin-top: 5px; color: var(--muted); }

.toast {
  position: absolute; inset-block-end: 82px; inset-inline: 22px; z-index: 90; text-align: center;
  background: var(--gold); color: #14151a; padding: 12px; border-radius: 13px; font-size: 13.5px; font-weight: 800;
}

[hidden] { display: none !important; }

/* ---------- تخطيطات المحل حسب الستايل اللي اختاره صاحبه ---------- */
.sv-grid[data-l="soft"] { grid-template-columns: 1fr; gap: 16px; }
.sv-grid[data-l="soft"] .ph { aspect-ratio: 4/3; }
.sv-grid[data-l="soft"] .m b { height: auto; font-size: 14.5px; }
.sv-grid[data-l="offers"] .off { font-size: 12px; padding: 5px 11px; }

.sv-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 0; }
.sv-lrow {
  display: flex; gap: 11px; align-items: center; background: var(--s-surface);
  border: 1px solid var(--s-line); border-radius: var(--s-radius); padding: 9px;
}
.sv-lrow img { width: 60px; height: 76px; object-fit: cover; border-radius: 9px; flex: none; }
.sv-lrow .i { flex: 1; min-width: 0; }
.sv-lrow .i b { font-size: 13px; display: block; }
.sv-lrow .i .szs { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.sv-lrow .i .szs i { font-style: normal; font-size: 10px; border: 1px solid var(--s-line); border-radius: 6px; padding: 2px 6px; color: var(--s-muted); }
.sv-lrow .i .pr { font-family: var(--s-font-head); font-weight: 800; font-size: 13.5px; margin-top: 5px; color: var(--s-accent); }
.sv-lrow .add { width: 33px; height: 33px; border-radius: 999px; background: var(--s-accent); color: var(--s-accent-ink); display: grid; place-items: center; font-size: 19px; flex: none; }

.sv-reelw { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 0; }
.sv-reel { position: relative; height: 400px; }
.sv-reel img { width: 100%; height: 100%; object-fit: cover; }
.sv-reel .g { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88), transparent 54%); }
.sv-reel .t { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 16px; color: #fff; }
.sv-reel .t b { font-family: var(--s-font-head); font-size: 17px; display: block; }
.sv-reel .t .pr { font-weight: 800; margin-top: 4px; font-family: var(--s-font-head); }
.sv-reel .t .szs { display: flex; gap: 6px; margin-top: 9px; }
.sv-reel .t .szs i { font-style: normal; font-size: 11px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; padding: 3px 9px; }
.sv-reel .t .buy { display: inline-flex; margin-top: 11px; padding: 10px 22px; border-radius: 999px; background: var(--s-accent); color: var(--s-accent-ink); font-weight: 800; font-size: 13.5px; }

/* ---------- تنبيه التوصيل بالسلة ---------- */
.ship-warn {
  margin: 0 16px 12px; padding: 13px 15px; border-radius: var(--radius);
  background: rgba(225,29,72,.10); border: 1px solid rgba(225,29,72,.42);
  display: flex; flex-direction: column; gap: 5px;
}
.ship-warn.ok { background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.35); }
.ship-warn b { font-family: var(--font-head); font-size: 13.5px; }
.ship-warn span { font-size: 12.3px; color: var(--muted); line-height: 1.65; }
.ship-warn span b { color: var(--gold); font-family: inherit; font-size: inherit; }

/* ================================================================
   الشاشات الكبيرة: السوق ما يتمدد على كل العرض — يبقى عمود مقروء
   وشبكاته تتوسّع بذكاء
   ================================================================ */
@media (min-width: 900px) {
  body { background: var(--backdrop); }
  .app {
    max-width: 1140px; margin-inline: auto;
    border-inline: 1px solid var(--line); box-shadow: 0 0 80px rgba(0,0,0,.5);
  }
  .mt-search { max-width: 560px; }
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 20px; }
  .shops-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .scard .cov { height: 140px; }
  .offer { width: 330px; }
  .hrow .pcard { width: 190px; }
  .list .lrow img.th { width: 74px; height: 92px; }
  .sv-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .sv-cover { height: 280px; }
  .sv-list, .sv-reelw { max-width: 760px; margin-inline: auto; }
  .sv-reel { height: 520px; }
  .sheet { max-width: 620px; margin-inline: auto; border-radius: 26px 26px 0 0; }
  .cart-shop, .ship-warn { max-width: 760px; margin-inline: auto; }
  .tabbar { padding-block: 10px; }
  .tab { font-size: 12px; }
}
@media (min-width: 1300px) {
  .app { max-width: 1240px; }
}

/* ================================================================
   ورقة المنتج: الصورة ما تاكل الشاشة، وزر الشراء يبقى ظاهر دائماً
   ================================================================ */
.sh-img { max-height: 44vh; }
.sh-img img { object-fit: cover; }
.sheet .sh-body .btn:last-child {
  position: sticky; inset-block-end: 0; z-index: 3;
  box-shadow: 0 -14px 22px -12px var(--bg);
}
.sheet { max-height: 90%; padding-bottom: env(safe-area-inset-bottom); }
@media (max-height: 720px) { .sh-img { max-height: 38vh; } }

/* ================================================================
   شريط التمرير على الكمبيوتر
   بالهاتف الإصبع يمرّر والشريط زايد (ولا يظهر أصلاً)، لكن على شاشة
   كبيرة بماوس إخفاؤه يخلّي المستخدم ما يعرف إن بعده محتوى تحت ولا
   عنده وين يسحب. نظهره لأجهزة المؤشر فقط حتى ما ينكسر شكل الموبايل.
   ================================================================ */
@media (hover: hover) and (pointer: fine) {
  .screen, .sv-scroll, .sheet {
    scrollbar-width: thin;
    scrollbar-color: var(--bar) transparent;
  }
  .screen::-webkit-scrollbar,
  .sv-scroll::-webkit-scrollbar,
  .sheet::-webkit-scrollbar { display: block; width: 12px; }

  /* الصفوف الأفقية (العروض والتصنيفات): بلا شريط ما يوصلها صاحب الماوس أصلاً */
  .hrow::-webkit-scrollbar,
  .chips::-webkit-scrollbar,
  .sv-chips::-webkit-scrollbar { display: block; height: 9px; }
  .hrow, .chips, .sv-chips { scrollbar-width: thin; scrollbar-color: var(--bar) transparent; }

  .screen::-webkit-scrollbar-track,
  .sv-scroll::-webkit-scrollbar-track,
  .sheet::-webkit-scrollbar-track,
  .hrow::-webkit-scrollbar-track,
  .chips::-webkit-scrollbar-track,
  .sv-chips::-webkit-scrollbar-track { background: transparent; }

  .screen::-webkit-scrollbar-thumb,
  .sv-scroll::-webkit-scrollbar-thumb,
  .sheet::-webkit-scrollbar-thumb,
  .hrow::-webkit-scrollbar-thumb,
  .chips::-webkit-scrollbar-thumb,
  .sv-chips::-webkit-scrollbar-thumb {
    background: var(--bar);
    border-radius: 999px;
    border: 3px solid transparent;   /* هامش شفاف يخلّي الشريط رفيعاً وأنيقاً */
    background-clip: content-box;
  }
  .screen::-webkit-scrollbar-thumb:hover,
  .sv-scroll::-webkit-scrollbar-thumb:hover,
  .sheet::-webkit-scrollbar-thumb:hover,
  .hrow::-webkit-scrollbar-thumb:hover,
  .chips::-webkit-scrollbar-thumb:hover,
  .sv-chips::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
    background-clip: content-box;
  }
}

/* نموذج طلب انضمام محل */
.jf { display: flex; flex-direction: column; gap: 4px; }
.jf label { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.jf input, .jf select {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
  padding: 13px; font-family: inherit; font-size: 14.5px; width: 100%;
}
.jf input:focus, .jf select:focus { outline: none; border-color: var(--gold); }
.jf .btn { margin-top: 18px; }
.jhint { font-size: 12px; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 1.8; }

/* ════════════════════════════════════════════════════════════
   الحركة — نفس أسلوب مواقع الأزياء: هادئة، سريعة، تخدم التصفّح
   ولا تلعب بالعين. كلها تنطفي تلقائياً لمن يطلب المستخدم تقليل الحركة.
   ════════════════════════════════════════════════════════════ */

/* صورة القطعة تقرب لمن تحط الماوس عليها — الحركة الي تخلّي التصفّح ممتعاً */
.pcard, .scard, .lrow, .sv-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.pcard .m, .pcard > img, .scard .cov, .sv-card > img { overflow: hidden; }
.pcard img, .scard .cov img, .sv-card img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover, .sv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .pcard:hover img, .sv-card:hover img { transform: scale(1.06); }
  .scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .scard:hover .cov img { transform: scale(1.04); }
}

/* ضغطة الزر تحسّها */
button:active, .btn:active, .chip:active, .pcard:active { transform: scale(.975); }

/* المحتوى يطلع من تحت لمن تنتقل بين التبويبات */
#screen > * { animation: rise .34s cubic-bezier(.2,.7,.2,1); }
/* تبدي من ٢٥٪ مو من صفر: حتى لو تجمّدت الحركة بتبويب خلفي أو جهاز ضعيف،
   البضاعة تبقى مقروءة. الفرق بالعين معدوم، والفرق بالمخاطرة كبير. */
@keyframes rise { from { opacity: .25; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* البطاقات تطلع بتتابع لطيف عند الرسم.
   ⚠️ درس: أول نسخة خلّت البطاقة تبدي opacity:0 وتنتظر IntersectionObserver
   يشوفها — والمراقب ما اشتغل جوّا الحاوية المتمرّرة، فطلعت البضاعة **كلها
   مخفية**. الحركة ما تستاهل مخاطرة إخفاء المنتج: صارت أنيميشن يبدي مخفي
   وينتهي ظاهر، فحتى لو انكسر شي، آخر إطار = ظاهر. */
/* بلا both عمداً: لو ما اشتغلت الحركة (تبويب خلفي، جهاز ضعيف، إعداد
   يقلّل الحركة) يبقى العنصر بستايله الطبيعي = **ظاهر**. مع both يعلق
   بأول إطار وتختفي البضاعة كلها. */
.pcard, .scard, .sv-card { animation: rise .42s cubic-bezier(.2,.7,.2,1); }
.pcard:nth-child(2n), .scard:nth-child(2n) { animation-delay: .05s; }
.pcard:nth-child(3n), .scard:nth-child(3n) { animation-delay: .1s; }
.pcard:nth-child(4n) { animation-delay: .14s; }

/* شارة السلة تنطّ لمن تضيف قطعة */
.tab .badge.pop { animation: pop .42s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* خط ذهبي ينمو تحت عناوين الأقسام */
.sec h2 { position: relative; padding-bottom: 6px; }
.sec h2::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0;
  height: 2px; width: 26px; background: var(--gold); border-radius: 2px;
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.sec:hover h2::after { width: 54px; }

/* زر تبديل الإضاءة بالرأس */
.lightsw { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
           border: 1px solid var(--line); background: var(--surface); font-size: 15px; flex: none;
           transition: transform .3s, background .3s; }
.lightsw:hover { transform: rotate(18deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* شريط «حمّل التطبيق» */
.instbar { display: flex; align-items: center; gap: 11px; margin: 14px 16px 4px; padding: 11px 13px;
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
           box-shadow: var(--shadow-sm); }
.instbar img { width: 42px; height: 42px; border-radius: 11px; flex: none; }
.instbar .ib-t { flex: 1; min-width: 0; }
.instbar .ib-t b { display: block; font-size: 14px; }
.instbar .ib-t span { font-size: 11.5px; color: var(--muted); }
.instbar .ib-go { background: var(--gold); color: #14151a; font-weight: 800; font-size: 12.5px;
                  padding: 9px 15px; border-radius: 999px; flex: none; }
.instbar .ib-x { color: var(--muted); font-size: 15px; padding: 4px 6px; flex: none; }

/* خطوات التنصيب */
.steps-i { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.stp { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.75; }
.stp i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #14151a;
         display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; }
.stp em { font-style: normal; color: var(--gold); font-size: 12.5px; }
.stp .shr { width: 17px; height: 17px; vertical-align: -3px; stroke: var(--gold); }
.stp .plus { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 5px;
             border: 1.5px solid var(--muted); font-size: 13px; vertical-align: -4px; }

/* توقيع */
.madein { text-align: center; color: var(--muted); font-size: 12px; margin: 26px 16px 10px; letter-spacing: .02em; }

/* كود QR بشاشة الكمبيوتر */
.qrbox { display: grid; place-items: center; margin: 14px 0; }
.qrbox img { width: 190px; height: 190px; border-radius: 14px; border: 1px solid var(--line);
             background: #fff; padding: 10px; }

/* ===== مواقع الاستلام ووقت التسليم ===== */
.colab {
  font-family: var(--font-head); font-size: 14px; font-weight: 800;
  color: var(--ink); margin: 16px 0 9px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px }
.chips .chip {
  flex: 0 0 auto; padding: 10px 15px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: .16s; line-height: 1.2;
}
.chips .chip i { font-style: normal; opacity: .6; font-weight: 600; font-size: 12px }
.chips .chip:hover { border-color: var(--gold) }
.chips .chip.on {
  background: var(--gold); border-color: var(--gold); color: #fff;
}
.chips .chip.on i { opacity: .85 }

.locpick {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, var(--surface));
}
.locpick b { font-size: 13.5px }
.locpick span { font-size: 12.5px; color: var(--muted); line-height: 1.6 }

.locf { display: flex; flex-direction: column; gap: 7px; margin-top: 8px }
.locf label { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 4px }
.locf label i { font-style: normal; color: var(--gold); font-weight: 600 }
.locf input, .locf select, .locf textarea {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13.5px;
}
.locf textarea { resize: vertical; min-height: 58px }

.savechk {
  display: flex; align-items: center; gap: 9px; margin-top: 11px;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.savechk input { width: auto; accent-color: var(--gold) }

.locs { display: flex; flex-direction: column; gap: 9px; margin-top: 6px }
.loc {
  display: flex; align-items: center; gap: 11px; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--surface);
}
.loc .lic { font-size: 19px; line-height: 1 }
.loc .li { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0 }
.loc .li b { font-size: 13.5px }
.loc .li b .dflt {
  font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 6px; padding: 1px 6px; margin-inline-start: 5px;
}
.loc .li span { font-size: 12.5px; color: var(--muted); line-height: 1.55 }
.loc .lx {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  cursor: pointer; font-size: 13px;
}
.loc .lx:hover { color: #e5484d; border-color: #e5484d }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }

/* ===== شريط الأنشطة (ملابس 👗 · كوزمتكس 💄) =====
   نفس شرائح الأقسام بالضبط (.chips/.chip) — ما نزيد شكلاً ثانياً بالسوق:
   الخيار المختار ذهبي بنص أبيض مثل باقي الشرائح. الي يخصّه بس أيقونة
   وهامش يفصله عن اللي فوقه. محطوط بآخر الملف بقصد، لأن قاعدة .chips
   العامة تجي متأخرة وتاكل أي هامش نكتبه قبلها. */
.acts { margin: 16px 0 2px }
.acts .chip em { font-style: normal; margin-inline-end: 5px; font-size: 14.5px; line-height: 1 }


/* مواصفات القطعة بورقة التفاصيل (ماركة، صلاحية، حجم…) */
.sh-specs {
  background: var(--surface-2); border-radius: var(--radius);
  padding: 12px 14px; margin: 2px 0 16px;
}
.sh-specs div { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; }
.sh-specs span { color: var(--muted); font-size: 12.5px; min-width: 96px; }


/* ===== طلباتي: بطاقة طلب سابق =====
   الزبون يفتح الشاشة ليتذكّر «شنو اشتريت» قبل «بيش» — فالبنود بصورها هي متن
   البطاقة، والمبلغ ذيلها. والشارة الملوّنة تخلّيه يعرف الحالة بنظرة بلا قراءة. */
.ords { display: flex; flex-direction: column; gap: 14px; margin-top: 2px; }
.ord {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}

/* أي رمز لاتيني داخل سطر عربي ينقلب إذا ما ننعزله: رقم الطلب يطلع «100019-ST»
   و«×2» تطلع «2×». نفس علاج `.pcard .off` بالضبط. */
.ord .ltr { font-style: normal; direction: ltr; unicode-bidi: isolate; }

/* --- الرأس: المحل والرقم والتاريخ والحالة --- */
.o-top { display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-bottom: 1px solid var(--line); }
.o-lg { width: 38px; height: 38px; border-radius: 10px; background: #fff; object-fit: contain; flex: none; }
.o-who { flex: 1; min-width: 0; }
.o-who b { display: block; font-family: var(--font-head); font-size: 14.5px; }
.o-who span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.o-st {
  flex: none; line-height: 1; font-size: 11px; font-weight: 800;
  padding: 6px 11px; border-radius: 999px; border: 1px solid currentColor;
}
.o-st.new    { color: var(--gold); background: rgba(168,130,58,.10); }
.o-st.prep   { color: #3F6FA8;     background: rgba(63,111,168,.10); }
.o-st.done   { color: #2F8F6B;     background: rgba(47,143,107,.11); }
.o-st.cancel { color: var(--muted); background: transparent; }
/* بالغامق الأزرق والأخضر الهادئين ينطفون على خلفية فحمية — نرفع إضاءتهم */
html[data-theme="dark"] .o-st.prep { color: #7FB0E8; background: rgba(127,176,232,.13); }
html[data-theme="dark"] .o-st.done { color: #5FD3A6; background: rgba(95,211,166,.13); }

/* --- البنود --- */
.o-items { padding: 3px 0; }
.o-it { display: flex; align-items: center; gap: 11px; padding: 9px 13px; }
.o-it + .o-it { border-top: 1px dashed var(--line); }
.o-it img { width: 52px; height: 64px; object-fit: cover; border-radius: 9px; flex: none; background: var(--surface-2); }
.o-it .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.o-it .t b { font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.o-it .t span { font-size: 11.5px; color: var(--muted); }
.o-it .t .pr { color: var(--gold); font-weight: 700; }
.o-cl { display: inline-block; width: 12px; height: 12px; border-radius: 999px;
        border: 1px solid var(--line); vertical-align: -2px; }
.o-q { flex: none; font-size: 12.5px; font-weight: 800; color: var(--ink);
       background: var(--surface-2); border-radius: 8px; padding: 4px 8px; }
/* بند انسحب من المحل: يبقى بالسجل (هو جزء من طلبه) بس مطفي وما ينضاف بالإعادة */
.o-it.gone { opacity: .5; }
.o-it.gone img { filter: grayscale(1); }
.o-none { margin: 0; padding: 14px 13px; font-size: 12.5px; color: var(--muted); }

/* --- سطر الاستلام والمجموع --- */
.o-get { padding: 10px 13px; background: var(--surface-2); font-size: 12px; color: var(--ink); line-height: 1.7; }
.o-sums { padding: 11px 13px 2px; }
.o-sums .sum { font-size: 12.5px; margin-bottom: 4px; }
.o-sums .sum.total { font-size: 15px; margin: 7px 0 2px; }

/* --- الأزرار --- */
.o-acts { display: flex; gap: 9px; padding: 8px 13px 13px; }
.o-again {
  flex: 1; padding: 11px; border-radius: 12px; text-align: center;
  background: var(--gold); color: #14151a; font-weight: 800; font-size: 13px;
}
.o-call {
  flex: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  padding: 11px 15px; border-radius: 12px; font-weight: 700; font-size: 13px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.o-call:hover { border-color: var(--gold); color: var(--gold); }
.sh-specs b { font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* المدخل لصاحب المحل رابط <a> مو <div> — لازم يورث لون النص بلا خط تحته */
a.acc-item { text-decoration: none; color: inherit; }