/* =========================================================
   نجم الأصناف — حزمة CSS الكاملة فوق ثيم «راند»
   تُلصق في: لوحة سلة ← تخصيص متقدم ← تخصيص باستخدام CSS
   المصدر المرجعي الوحيد: المحاكي المعتمد najm-demo-store.html
   كل القيم أدناه منقولة حرفياً من :root ومن قواعد المحاكي.
   ========================================================= */

/* ---------------------------------------------------------
   1) فرض هوية نجم على متغيرات راند المركزية
   العنابي يحمل الإجراء (أبيض عليه 12.1:1) · الوردي توقيع بصري (4.06:1)
   --------------------------------------------------------- */
:root {
  --color-primary: #651345;
  --color-primary-dark: #4E0E35;
  --color-primary-light: #E53679;
  --color-primary-reverse: #F4EDF1;

  /* توكنز المحاكي حرفياً */
  --najm-action: #651345;
  --najm-action-dark: #4E0E35;
  --najm-signature: #E53679;
  --najm-ink: #383838;
  --najm-ink-soft: #64676B;
  --najm-muted: #939598;
  --najm-confirm: #0E6B52;
  --najm-line: #DCDDDE;
  --najm-surface: #fff;
  --najm-sunken: #F7F6F7;
  --najm-page: #EFEDEE;
  --najm-tint-action: #F4EDF1;
  --najm-tint-verify: #FCEBF2;
  --najm-tint-ok: #E8F3EF;
  --najm-pink-soft: #FFB3CE;

  --najm-r-sm: 6px;
  --najm-r-btn: 8px;
  --najm-r-card: 10px;
  --najm-r-block: 12px;
  --najm-r-pill: 999px;
  --najm-elev-1: 0 1px 2px rgba(56,56,56,.06);
  --najm-elev-fab: 0 6px 18px rgba(14,107,82,.34);
  --najm-elev-sheet: 0 -8px 28px rgba(56,56,56,.24);
}

/* لمسات هوية على عناصر راند الأصلية */
.store-header .top-navbar { border-bottom: 1px solid var(--najm-line); }
.store-footer { border-top: 3px solid var(--najm-signature); }

/* ---------------------------------------------------------
   2) أيقونة «مرآبي» بالهيدر — بين حساب العميل والسلة
   تطابق .hbtn بالمحاكي: 44×44 · radius 8 · شارة وردية 17px
   --------------------------------------------------------- */
#najm-hbtn {
  width: 44px; height: 44px;
  border-radius: var(--najm-r-btn);
  display: flex; align-items: center; justify-content: center;
  color: var(--najm-ink);
  position: relative;
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  margin-inline-end: 4px;
}
#najm-hbtn:hover { background: var(--najm-sunken); color: var(--najm-action); }
#najm-hbtn .najm-badge {
  position: absolute; top: 4px; inset-inline-end: 4px;
  background: var(--najm-signature); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  animation: najm-pop .2s;
}
#najm-hbtn .najm-badge[hidden] { display: none; }
@keyframes najm-pop { from { transform: scale(.85); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes najm-slideup { from { transform: translateY(18px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------------------------------------------------------
   3) الشريط اللاصق (vbar بالمحاكي) — منقول حرفياً
   --------------------------------------------------------- */
#najm-sticky {
  background: rgba(101,19,69,.97);
  color: #fff;
  position: sticky; top: 0; z-index: 19;
}
#najm-sticky .najm-sb-in {
  max-width: 1280px; margin: 0 auto;
  padding: 9px 14px;
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;
}
#najm-sticky .najm-sb-icon { color: var(--najm-pink-soft); display: flex; flex: 0 0 auto; }
#najm-sticky .najm-sb-text {
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto; min-width: 0;
}
#najm-sticky .najm-sb-btn {
  background: #fff; color: var(--najm-action);
  font-size: 12.5px; font-weight: 700;
  border-radius: var(--najm-r-sm);
  padding: 8px 12px; min-height: 36px;
  flex: 0 0 auto; border: 0; cursor: pointer;
}

/* ---------------------------------------------------------
   4) الحاوية العامة — تطابق main بالمحاكي (max-width 1280)
   --------------------------------------------------------- */
.najm-wrap { max-width: 1280px; margin: 0 auto; padding: 16px 14px 0; }
.najm-block {
  background: var(--najm-surface);
  border: 1px solid var(--najm-line);
  border-radius: var(--najm-r-block);
  padding: 16px;
  margin-bottom: 14px;
}

/* ---------------------------------------------------------
   5) بانر الهيرو (promo بالمحاكي) — منقول حرفياً
   --------------------------------------------------------- */
.najm-hero {
  position: relative; overflow: hidden;
  border-radius: var(--najm-r-block);
  color: #fff;
  padding: 22px 20px;
  margin-bottom: 14px;
  background: linear-gradient(140deg,#E53679 0%,#651345 62%,#4A0E31 100%);
}
.najm-hero .najm-gear {
  position: absolute; top: -30px; inset-inline-start: -40px;
  opacity: .10; pointer-events: none;
}
.najm-hero-in { position: relative; }
.najm-hero .najm-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: var(--najm-r-pill);
  padding: 5px 11px;
  font-size: 12px; font-weight: 700;
  margin-bottom: 12px;
}
.najm-hero h2 {
  margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700;
  text-wrap: pretty; color: #fff;
}
.najm-hero h2 span { color: #FFD9E6; }
.najm-hero p {
  margin: 9px 0 15px;
  font-size: 14px;
  color: rgba(255,255,255,.92);
  max-width: 420px;
}
.najm-hero .najm-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.najm-btn-w {
  background: #fff; color: var(--najm-action);
  font-size: 15px; font-weight: 700;
  border-radius: var(--najm-r-btn);
  padding: 13px 18px; min-height: 46px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none;
}
.najm-btn-w:hover { color: var(--najm-action); background: #fff; }
.najm-btn-o {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
  font-size: 15px; font-weight: 700;
  border-radius: var(--najm-r-btn);
  padding: 13px 18px; min-height: 46px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; text-decoration: none;
}
.najm-btn-o:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---------------------------------------------------------
   6) محدد السيارة (vsel بالمحاكي) — منقول حرفياً
   --------------------------------------------------------- */
.najm-vsel h3 {
  margin: 0 0 3px; font-size: 16.5px; font-weight: 700;
  display: flex; align-items: center; gap: 7px; color: var(--najm-ink);
}
.najm-vsel h3 .najm-i { color: var(--najm-signature); display: flex; }
.najm-vsel .najm-hint { font-size: 13px; color: var(--najm-ink-soft); margin-bottom: 13px; }
.najm-vsel .najm-head-row { display: flex; align-items: flex-start; gap: 10px; }
.najm-vsel .najm-head-row > div { flex: 1 1 auto; min-width: 0; }
.najm-skip, .najm-done {
  background: none; border: 0; cursor: pointer;
  color: var(--najm-ink-soft); font-size: 12.5px; font-weight: 700;
  padding: 6px 10px; border-radius: var(--najm-r-sm); flex: 0 0 auto;
}
.najm-skip:hover, .najm-done:hover { background: var(--najm-sunken); color: var(--najm-action); }
.najm-done { color: var(--najm-action); }

.najm-mgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(104px,1fr)); gap: 7px; }
.najm-mcard {
  background: #fff; border: 1px solid var(--najm-line);
  border-radius: var(--najm-r-btn);
  padding: 11px 8px; min-height: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; cursor: pointer; color: var(--najm-ink);
  font-family: inherit;
}
.najm-mcard:hover { border-color: var(--najm-action); background: var(--najm-tint-action); }
.najm-mcard b { font-size: 14.5px; font-weight: 700; }
.najm-mcard span { font-size: 11px; color: var(--najm-ink-soft); }
.najm-mcard.najm-big { grid-column: span 2; min-height: 66px; }
.najm-mcard.najm-big b { font-size: 18px; }

.najm-ygrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(76px,1fr)); gap: 6px; }
.najm-ycard {
  background: #fff; border: 1px solid var(--najm-line);
  border-radius: var(--najm-r-btn); min-height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; cursor: pointer; color: var(--najm-ink); font-family: inherit;
}
.najm-ycard:hover { border-color: var(--najm-action); background: var(--najm-tint-action); }
.najm-ycard b { font-size: 15px; font-weight: 700; direction: ltr; }
.najm-decade {
  font-size: 11px; font-weight: 700; color: var(--najm-ink-soft);
  margin: 12px 0 6px; display: flex; align-items: center; gap: 8px;
}
.najm-decade::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--najm-line); }

/* بطاقة السيارة النشطة (vcurrent بالمحاكي) */
.najm-vcurrent {
  display: flex; align-items: center; gap: 12px;
  background: var(--najm-action); color: #fff;
  border-radius: var(--najm-r-card);
  padding: 14px; min-height: 64px;
}
.najm-vcurrent .najm-ic { color: var(--najm-pink-soft); display: flex; flex: 0 0 auto; }
.najm-vcurrent .najm-txt { flex: 1 1 auto; min-width: 0; }
.najm-vcurrent .najm-lbl { font-size: 11px; font-weight: 700; color: var(--najm-pink-soft); display: block; }
.najm-vcurrent .najm-val { font-size: 18px; font-weight: 700; display: block; margin-top: 2px; }
.najm-vcurrent .najm-change {
  background: #fff; color: var(--najm-action);
  font-size: 13.5px; font-weight: 700;
  border-radius: var(--najm-r-btn);
  padding: 10px 13px; min-height: 40px;
  border: 0; cursor: pointer; flex: 0 0 auto; font-family: inherit;
}
.najm-under { margin-top: 10px; font-size: 12.5px; color: var(--najm-ink-soft); }
.najm-under .najm-glink {
  background: none; border: 0; cursor: pointer;
  color: var(--najm-action); font-weight: 700; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px; padding: 0;
  font-family: inherit;
}
.najm-under .najm-glink:hover { text-decoration: underline; }

/* زر «حدّد سيارتك» بعد التخطّي */
.najm-dismissed-btn {
  width: 100%; background: #fff;
  border: 1.5px dashed var(--najm-line);
  border-radius: var(--najm-r-block);
  color: var(--najm-action); font-weight: 700; font-size: 13.5px;
  padding: 13px; min-height: 48px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 14px; font-family: inherit;
}
.najm-dismissed-btn:hover { border-color: var(--najm-action); background: var(--najm-tint-action); }

/* ---------------------------------------------------------
   7) مرآبي — صفوف السيارات
   --------------------------------------------------------- */
.najm-garage-list { display: flex; flex-direction: column; gap: 7px; }
.najm-gcar {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--najm-line);
  border-radius: var(--najm-r-btn); padding: 4px;
}
.najm-gcar[data-active="1"] { background: var(--najm-tint-action); border: 1.5px solid var(--najm-action); }
.najm-gpick {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer;
  padding: 9px 6px; text-align: start; color: var(--najm-ink); font-family: inherit;
}
.najm-radio {
  width: 18px; height: 18px; border-radius: 99px;
  border: 2px solid var(--najm-muted); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.najm-gcar[data-active="1"] .najm-radio { border-color: var(--najm-action); }
.najm-radio i { display: none; width: 8px; height: 8px; border-radius: 99px; background: var(--najm-action); }
.najm-gcar[data-active="1"] .najm-radio i { display: block; }
.najm-gname { display: block; font-size: 14.5px; font-weight: 700; }
.najm-gstate { display: block; font-size: 11px; color: var(--najm-ink-soft); margin-top: 1px; }
.najm-gdel {
  width: 36px; height: 36px; flex: 0 0 auto;
  border: 0; background: none; cursor: pointer;
  color: var(--najm-muted); border-radius: var(--najm-r-sm);
  display: flex; align-items: center; justify-content: center;
}
.najm-gdel:hover { background: var(--najm-tint-verify); color: var(--najm-action); }
.najm-gadd {
  width: 100%; margin-top: 9px;
  background: #fff; border: 1.5px dashed var(--najm-line);
  border-radius: var(--najm-r-btn); color: var(--najm-action);
  font-weight: 700; font-size: 13.5px; padding: 11px; min-height: 44px; cursor: pointer;
  font-family: inherit;
}
.najm-gadd:hover { border-color: var(--najm-action); background: var(--najm-tint-action); }
.najm-gfull { margin-top: 9px; font-size: 12px; color: var(--najm-ink-soft); text-align: center; }

/* ---------------------------------------------------------
   8) شريط الأقسام (rail بالمحاكي) — منقول حرفياً
   --------------------------------------------------------- */
.najm-sec-title {
  font-size: 17px; font-weight: 700; margin: 20px 0 10px; color: var(--najm-ink);
}
.najm-rail {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 8px; scroll-snap-type: x proximity;
}
.najm-rail::-webkit-scrollbar { height: 6px; }
.najm-rail::-webkit-scrollbar-thumb { background: #C9C7C8; border-radius: 99px; }
.najm-rail .najm-c {
  flex: 0 0 auto; width: 130px; scroll-snap-align: start;
  background: #fff; border: 1px solid var(--najm-line);
  border-radius: var(--najm-r-card);
  padding: 12px 10px; min-height: 92px;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--najm-ink); text-decoration: none;
}
.najm-rail .najm-c:hover { border-color: var(--najm-action); color: var(--najm-ink); }
.najm-rail .najm-c .najm-i { color: var(--najm-signature); }
.najm-rail .najm-c b { font-size: 13px; font-weight: 700; line-height: 1.3; }
.najm-rail .najm-c span { font-size: 11px; color: var(--najm-ink-soft); margin-top: auto; }

/* ---------------------------------------------------------
   9) FAB — منقول حرفياً (bottom 20 · جهة النهاية 16)
   --------------------------------------------------------- */
#najm-fab {
  position: fixed; bottom: 20px; inset-inline-end: 16px; z-index: 40;
  background: var(--najm-confirm); color: #fff;
  border-radius: var(--najm-r-pill);
  padding: 13px 17px; min-height: 50px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  box-shadow: var(--najm-elev-fab);
  border: 0; cursor: pointer; font-family: inherit;
}
#najm-fab:hover { background: #0B5642; }

/* ورقة الاستشارة */
#najm-sheet-wrap {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(56,56,56,.42);
  display: flex; align-items: flex-end; justify-content: center;
}
#najm-sheet {
  background: #fff; width: 100%; max-width: 460px;
  border-radius: 14px 14px 0 0;
  padding: 18px 16px 22px;
  box-shadow: var(--najm-elev-sheet);
  animation: najm-slideup .22s;
}
@media (min-width: 640px) {
  #najm-sheet-wrap { align-items: center; }
  #najm-sheet { border-radius: 14px; }
}
.najm-sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.najm-sheet-avatar {
  width: 42px; height: 42px; border-radius: 99px; flex: 0 0 auto;
  background: var(--najm-confirm); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.najm-sheet-title { display: block; font-size: 16px; font-weight: 700; color: var(--najm-ink); }
.najm-sheet-sub { display: block; font-size: 12px; color: var(--najm-ink-soft); margin-top: 2px; }
.najm-sheet-close {
  width: 32px; height: 32px; flex: 0 0 auto; border: 0; background: none;
  color: var(--najm-muted); cursor: pointer; border-radius: var(--najm-r-sm);
  display: flex; align-items: center; justify-content: center;
}
.najm-sheet-close:hover { background: var(--najm-sunken); }
.najm-msg-label { font-size: 11.5px; font-weight: 700; color: var(--najm-ink-soft); margin-bottom: 6px; }
.najm-msg {
  background: #F0F7F4; border: 1px solid #C9E2D8;
  border-radius: var(--najm-r-card); padding: 12px 13px;
  font-size: 13.5px; line-height: 1.7; color: #1e4b3c;
}
.najm-msg span { display: block; }
.najm-iso { direction: ltr; unicode-bidi: isolate; font-weight: 700; }
.najm-vin {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 12px 0 16px; font-size: 11.5px; line-height: 1.6; color: var(--najm-ink-soft);
}
.najm-vin .najm-ic { color: var(--najm-confirm); flex: 0 0 auto; margin-top: 1px; display: flex; }
.najm-send {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--najm-confirm); color: #fff;
  font-size: 15px; font-weight: 700;
  border-radius: var(--najm-r-btn); padding: 13px 16px; min-height: 48px;
  text-decoration: none;
}
.najm-send:hover { background: #0B5642; color: #fff; }
.najm-phone {
  text-align: center; margin-top: 10px;
  font-size: 12px; color: var(--najm-ink-soft);
  direction: ltr; unicode-bidi: isolate;
}

/* ---------------------------------------------------------
   10) سطح المكتب — نفس نقطة الكسر بالمحاكي (900px)
   --------------------------------------------------------- */
@media (min-width: 900px) {
  .najm-hero { padding: 32px 30px; }
  .najm-hero h2 { font-size: 34px; }
  .najm-wrap { padding: 22px 14px 0; }
}

/* ---------------------------------------------------------
   11) الفوتر — عنابي بالكامل كما بالمحاكي
   نلوّن فوتر راند الحقيقي ولا نستبدله (روابطه وسجله التجاري حيّة من سلة)
   --------------------------------------------------------- */
/* راند يضع وضع الفوتر على body (footer-is-light / footer-is-dark) بتخصيص أعلى
   من .store-footer وحدها — نغطي الحالتين صراحةً بدل !important */
.store-footer,
.footer-is-light .store-footer,
.footer-is-dark .store-footer {
  background: var(--najm-action);
  color: #fff;
  margin-top: 30px;
  /* مساحة تمنع زر الاستشارة العائم (bottom:20 + ارتفاع 50) من تغطية صف وسائل الدفع */
  padding-bottom: 80px;
}
.store-footer .store-footer__inner,
.footer-is-light .store-footer .store-footer__inner,
.footer-is-dark .store-footer .store-footer__inner {
  background: transparent;
  border-bottom-color: rgba(255,255,255,.18);
}
.store-footer h1, .store-footer h2, .store-footer h3,
.store-footer h4, .store-footer h5, .store-footer b, .store-footer strong {
  color: #fff;
}
.store-footer p, .store-footer li, .store-footer span, .store-footer small {
  color: rgba(255,255,255,.86);
}
.store-footer a { color: rgba(255,255,255,.86); }
.store-footer a:hover { color: var(--najm-pink-soft); }
.store-footer hr,
.store-footer [class*="border-t"], .store-footer [class*="border-b"] {
  border-color: rgba(255,255,255,.18);
}
/* أيقونات التواصل داخل الفوتر تبقى بألوان علاماتها، لا ترث لون الفوتر */
.store-footer svg { color: inherit; }

/* ---------------------------------------------------------
   12) أيقونات التواصل — الشعارات الرسمية (42×42 كما بالمحاكي)
   --------------------------------------------------------- */
.store-footer .s-social-list {
  display: flex; gap: 9px; margin-top: 12px;
  list-style: none; padding: 0; flex-wrap: wrap;
}
.store-footer .s-social-link { margin: 0; }
.store-footer .s-social-link > a {
  width: 42px; height: 42px;
  border-radius: var(--najm-r-card);
  display: flex; align-items: center; justify-content: center;
  color: #fff; overflow: hidden; padding: 0;
  background: none; border: 0;
}
.store-footer .s-social-link > a:hover { opacity: .88; color: #fff; }
.store-footer .s-social-icon {
  display: flex; width: 100%; height: 100%;
  align-items: center; justify-content: center;
}
.store-footer .s-social-icon svg { display: block; width: 100%; height: 100%; }
/* سلة تورّث fill للـsvg داخل الفوتر، فتُطمَس الخلفية السوداء بأيقونة تيك توك.
   initial يعيد الافتراضي للمسارات بلا fill، ويترك المسارات الملوّنة (سناب/تيك توك) كما هي. */
.store-footer .s-social-icon svg { fill: initial; }
/* واتساب وحده يعتمد currentColor ليأخذ الأبيض فوق الأخضر */
.store-footer .s-social-link > a[title="whatsapp"] .s-social-icon svg { fill: currentColor; }
/* واتساب: شبح أبيض على أخضر العلامة الرسمي (تيك توك وسناب يحملان خلفيتيهما داخل الـSVG) */
.store-footer .s-social-link > a[title="whatsapp"] { background: #25D366; }

/* ---------------------------------------------------------
   13) وسائل الدفع — رقعة بيضاء موحّدة كما بالمحاكي
   --------------------------------------------------------- */
.store-footer .s-payments-list {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin-top: 10px; align-items: center;
  list-style: none; padding: 0;
}
.store-footer .s-payments-list-item {
  background: #fff; border-radius: 6px;
  height: 28px; width: 46px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; margin: 0; overflow: hidden;
}
.store-footer .s-payments-list-item svg {
  display: block; max-height: 15px; max-width: 36px;
  width: auto; height: auto;
}
.store-footer .s-payments-list-item img {
  display: block; width: auto; height: auto;
  max-height: 22px; max-width: 40px; object-fit: contain;
}

/* ---------------------------------------------------------
   14) ضغط الفوتر — إزالة الفراغ الميت وتقليل الحشوة
   السبب الجذري المقيس: <salla-apps-icons> عنصر فارغ يحجز
   عموداً بعرض 404px وارتفاع 304px بلا أي محتوى (روابط تطبيقات
   الجوال غير مضافة). حجبه يعيد توزيع الشبكة على الأعمدة الحيّة.
   --------------------------------------------------------- */
.store-footer salla-apps-icons:empty { display: none; }

/* حشوة المحاكي: 26px علوي / 30px سفلي — بدل 64px من راند */
.store-footer .store-footer__inner,
.footer-is-light .store-footer .store-footer__inner,
.footer-is-dark .store-footer .store-footer__inner {
  padding-top: 26px;
  padding-bottom: 22px;
}

/* الشبكة تصبح 5 أعمدة: (عن المتجر ×2) + روابط + تواصل + طرق الدفع */
@media (min-width: 1024px) {
  .store-footer .container.grid {
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 22px;
  }
  /* إلغاء الحشوة الجانبية الضخمة (pl-20 = 80px) على عمود التعريف */
  .store-footer .container.grid > .lg\:col-span-2 {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
}

/* عناوين أعمدة الفوتر — مقاس المحاكي (14px) */
.store-footer h3 { font-size: 14px; margin-bottom: 10px; }
.store-footer .store-footer__inner li { margin-bottom: 7px; }

/* ---------------------------------------------------------
   15) طرق الدفع كعمود مستقل بعنوانه داخل الشبكة
   نقل <salla-payments> من الشريط السفلي إلى الشبكة يتم بالـJS،
   وهذي أنماطه بعد النقل.
   --------------------------------------------------------- */
.najm-pay-col h3 {
  font-size: 14px; font-weight: 700; color: #fff;
  margin: 0 0 10px;
}
.store-footer .najm-pay-col .s-payments-list { margin-top: 0; }

/* الشريط السفلي: سطر حقوق واحد مضغوط */
.store-footer > .md\:flex {
  padding-top: 12px; padding-bottom: 12px;
  border-top: 1px solid rgba(255,255,255,.18);
}

/* شارتا السجل التجاري والرقم الضريبي — محاذاة ومقاس موحّد */
.store-footer .flex.gap-4 { gap: 14px; align-items: stretch; flex-wrap: wrap; }
.store-footer salla-trust-badges { display: flex; align-items: center; gap: 8px; }
.store-footer .s-trust-badges-image { width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain; }
.store-footer .s-trust-badges-label { font-size: 11px; line-height: 1.35; margin: 0; color: rgba(255,255,255,.72); }
.store-footer .s-trust-badges-number { font-size: 12.5px; font-weight: 700; color: #fff; direction: ltr; unicode-bidi: isolate; display: block; }

/* ---------------------------------------------------------
   16) الهيدر — ضغط الحشوة وتوحيد التباعد كما بالمحاكي
   المحاكي: .hwrap padding 10px 14px · شعار 38px · بحث مرن · أيقونات 44px
   --------------------------------------------------------- */
#mainnav .inner > .container > .flex.items-stretch {
  gap: 12px;
  align-items: center;
}
/* صف الأيقونات: تباعد 4px موحّد كما بالمحاكي (.hbtns) */
#mainnav .flex.items-center.justify-end { gap: 4px; margin: 0; }
#mainnav .flex.items-center.justify-end > * { margin-inline: 0; }

/* شريط البحث ينزل بصف الشعار ويتمدد — لا يبقى شريطاً أسود منفصلاً */
.store-header .top-navbar { padding-top: 6px; padding-bottom: 6px; }
/* ---------------------------------------------------------
   14) إصلاحان مقيسان على الفوتر الحي (2026-08-24)
   --------------------------------------------------------- */

/* أ) منع تكرار وسائل الدفع: حقننا يضيف 6 شعارات رسمية بـtitle،
   وشعارات سلة الأصلية تبقى بلا title — نخفيها بدل تركها تتراكم (10 بدل 6) */
.store-footer .s-payments-list[data-najm-pay] > li:not([title]) { display: none; }

/* ب) توحيد شارتَي «السجل التجاري» و«الرقم الضريبي»
   سلة ترسمهما ببنيتين مختلفتين: الأولى عبر <salla-trust-badges>،
   والثانية عبر divs عادية بمحاذاة items-end وصورة 40×50 تُمطّ إلى 52px */
.store-footer .flex.gap-4 { align-items: center; flex-wrap: wrap; gap: 14px; }
.store-footer .flex.gap-4 > div.items-end { align-items: center; }
.store-footer .flex.gap-4 img[alt="value added tax"],
.store-footer .s-trust-badges-image {
  width: 42px; height: 42px;
  object-fit: contain; flex: 0 0 auto;
  border-radius: 4px;
}
.store-footer .s-trust-badges-label,
.store-footer .flex.gap-4 p.text-sm {
  font-size: 12px; line-height: 1.4;
  color: rgba(255,255,255,.72);
  margin: 0 0 2px;
}
.store-footer .s-trust-badges-number,
.store-footer .flex.gap-4 b.text-sm {
  font-size: 14px; font-weight: 700; color: #fff;
  direction: ltr; unicode-bidi: isolate; display: block;
}
/* ---------------------------------------------------------
   17) أربعة أعمدة فعلية + ضغط رأسي (2026-08-24)
   السبب الجذري المقيس: عمود العلامة يحمل lg:col-span-2 فيستهلك
   عمودين من أربعة، فلا يبقى مكان لعمود «طرق الدفع» ويُدفع لصف ثانٍ.
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .store-footer .container.grid > .lg\:col-span-2 { grid-column: span 1 / span 1; }
  .store-footer .container.grid {
    grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
    align-items: start;
  }
}

/* ضغط رأسي: وصف المتجر وأيقونات التواصل كانا يورّثان mb-6 (24px) */
.store-footer .store-footer__inner .max-w-sm {
  margin-bottom: 14px; font-size: 13px; line-height: 1.65;
}
.store-footer salla-social.mb-6 { margin-bottom: 14px; }

/* مساحة زر الاستشارة العائم: 48px تكفي (الزر يسار والحقوق يمين) */
.store-footer,
.footer-is-light .store-footer,
.footer-is-dark .store-footer { padding-bottom: 48px; }



/* ---------------------------------------------------------
   18) شعارات الدفع: سطر واحد + شعارا تابي وتمارا الرسميان
   العمود 274px — ستة عناصر بعرض 40px وفاصل 5px = 270px
   المصدر: D:/My Project/Sources (الحزمتان الرسميتان)
   كلتاهما شارة = نص أسود فوق خلفية العلامة، لا نص مجرّد.
   --------------------------------------------------------- */
.store-footer .najm-pay-col .s-payments-list { gap: 5px; flex-wrap: nowrap; }
.store-footer .najm-pay-col .s-payments-list-item { width: 40px; height: 26px; padding: 0 4px; }
.store-footer .najm-pay-col .s-payments-list-item svg { max-height: 13px; max-width: 32px; }

/* تابي: أخضر العلامة #6CFF93 من Tabby_Badge_SVG الرسمي */
.store-footer .s-payments-list-item[title="tabby"] { background: #6CFF93; border-radius: 5px; }
.store-footer .s-payments-list-item[title="tabby"] svg { max-width: 30px; }

/* تمارا: لوحة التدرّج الرسمية من AR Wordmark Gradient.svg نفسها
   (مستخرجة ومصغّرة إلى WebP 80px) ككبسولة، والشعار الأسود فوقها */
.store-footer .s-payments-list-item[title="tamara_ar"],
.store-footer .s-payments-list-item[title="tamara"] {
  background-image: url("data:image/webp;base64,UklGRkwBAABXRUJQVlA4IEABAABQDACdASpQACIAPjEUiEKiISIYjAUkIAMEoAxQumPqenfjh7IFjfxPEemJr4FjYy/Q42zCyAkU0NLjwUP+XJygN/TmLx/75Jm9zsOCUnlGiFedhLVjhXdD2AZZNlaNSn1RLAIgKNDFHRAuQAD+9/AB45/5RRiEPf/6w9lElt2XR59//dk5l026V4iDjsQDgOMv3PrLj6le3HeoNoTtddVhLg2S2QSmfb6rSAv+lIf2qHFb22fuyh6yJNzZ8VkxGlwnljyeVNEe873tc6fm7K+Wqa1Pb4p5Pw8w1Sh/Kl/+G7JFO+c59cVCcvWn048zLGQTUNw1JeT2phb66EGYCNApwNDAGy0Xvcngtnc5DsuobCPQLs0ea6AAdtatgeWEQZLt2uOC6MWTw7HUfYZt17PpAAFnPnSWAPF7A8Gw9IAAAA==");
  background-size: cover;
  background-position: center;
  border-radius: 5px;
}
.store-footer .s-payments-list-item[title="tamara_ar"] svg,
.store-footer .s-payments-list-item[title="tamara"] svg { fill: #000; max-width: 32px; }
/* ---------------------------------------------------------
   19) توحيد أيقونات الهيدر الثلاث (2026-08-24)
   المقاس مأخوذ بالقياس من أيقونة السلة الحيّة:
   الأيقونة 40×40 · radius 9999 · حد 0.8px #E5E7EB · لون #374151
   الشارة  20×20 · top -2px · inset-inline-start -6px · 12px/700
   الفرق الوحيد المعتمد: لون الشارة يصير وردي الهوية بدل عنابي راند.
   --------------------------------------------------------- */

/* أ) زر مرآبي يطابق حلقة السلة والحساب */
#najm-hbtn {
  width: 40px; height: 40px;
  border-radius: 9999px;
  border: 0.8px solid #E5E7EB;
  color: #374151;
  margin-inline-end: 4px;
}
#najm-hbtn:hover {
  background: var(--najm-tint-action);
  color: var(--najm-action);
  border-color: var(--najm-action);
}

/* ب) شارة مرآبي تطابق شارة السلة مقاساً واتجاهاً */
#najm-hbtn .najm-badge {
  width: 20px; height: 20px; min-width: 20px;
  top: -2px;
  inset-inline-start: -6px;
  inset-inline-end: auto;
  font-size: 12px; line-height: 16px; font-weight: 700;
  padding: 0;
}

/* ج) شارة السلة تأخذ وردي الهوية بدل عنابي راند #991B1B */
.s-cart-summary-count { background: var(--najm-signature); }
/* د) إزالة أنيميشن الشارة — يعلَق عند currentTime:0 فيثبّت scale(.85)
   فتُرسم الشارة 17px بدل 20px (20 × .85 = 17) */
#najm-hbtn .najm-badge { animation: none; transform: none; }

/* ---------------------------------------------------------
   20) الهيدر — مطابقة المحاكي (2026-08-24)
   صف واحد: [برغر · شعار · بحث مرن · أيقونات] ثم سطر مستقل للأقسام.
   البحث يُنقل بالـDOM من الشريط العلوي (رقعة JS)، والقائمة لا تُنقل:
   display:contents على غلافها يجعل أبناءه عناصر مباشرة بالصف فيرتّبهم flex.

   ⚠ كل قاعدة هنا مشروطة بالعلم html[data-najm-hdr] الذي يرفعه الـJS
   بعد نجاح النقل فقط. لو تغيّرت بنية راند وفشل النقل، لا تُطبَّق أي
   قاعدة ويبقى الهيدر كما صمّمه الثيم — مفتاح أمان مقصود لا سهو.
   --------------------------------------------------------- */

/* أ) الشريط العلوي فرغ من البحث فيُطوى (كان 48px بلا مقابل) */
html[data-najm-hdr] .store-header .top-navbar { display: none; }

/* ب) صف الشعار يستقبل البحث ويسمح بسطر ثانٍ للأقسام */
html[data-najm-hdr] #mainnav .inner > .container > .flex.items-stretch {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0;
}
/* غلاف [برغر · شعار · قائمة] يذوب فيصير أبناؤه عناصر مباشرة بالصف */
html[data-najm-hdr] #mainnav .inner > .container > .flex.items-stretch
  > .flex.items-center:not(.justify-end) { display: contents; }

html[data-najm-hdr] #mainnav a.mburger      { order: 1; }
html[data-najm-hdr] #mainnav a.navbar-brand { order: 2; flex: 0 0 auto; }
html[data-najm-hdr] #mainnav .header-search { order: 3; flex: 1 1 auto; min-width: 0; }
html[data-najm-hdr] #mainnav .flex.items-center.justify-end { order: 4; flex: 0 0 auto; }
html[data-najm-hdr] #mainnav custom-main-menu { order: 5; }

/* ج) مربع البحث — مقاسات المحاكي (.hsearch)
   الغلافات الأربعة تُفرَد لعرض كامل: سلة تجعلها inline-block بعرض
   أدنى 220px، فلا تتمدد داخل flex بلا هذي القواعد. */
html[data-najm-hdr] #mainnav .header-search salla-search,
html[data-najm-hdr] #mainnav .header-search > salla-search > div,
html[data-najm-hdr] #mainnav .header-search .s-search-container,
html[data-najm-hdr] #mainnav .header-search .s-search-input-wrapper {
  display: block;
  width: 100%;
  min-width: 0;
}
html[data-najm-hdr] #mainnav .header-search .s-search-input {
  width: 100%;
  background: var(--najm-sunken);
  border: 1px solid var(--najm-line);
  border-radius: var(--najm-r-btn);
  color: var(--najm-ink);
  /* لا نلمس padding-inline-start: سلة تحجز 2.5rem بجهة البداية لأيقونة البحث،
     وتجاوزها يدفع النص تحت الأيقونة (رُصد بالقياس أثناء الاختبار).
     ولا نفرض font-size: الثيم يثبّته 16px لمنع تكبير iOS عند التركيز. */
  padding-inline-end: 14px;
}
html[data-najm-hdr] #mainnav .header-search .s-search-input::placeholder { color: var(--najm-muted); }
html[data-najm-hdr] #mainnav .header-search .s-search-input:focus {
  outline: 2px solid var(--najm-action);
  outline-offset: -1px;
  background: var(--najm-surface);
}

/* د) سطر الأقسام — يطابق nav.main بالمحاكي (سطح المكتب فقط) */
@media (min-width: 1024px) {
  html[data-najm-hdr] #mainnav custom-main-menu {
    flex: 0 0 100%;
    min-width: 0;
    border-top: 1px solid var(--najm-line);
    margin-top: 6px;
  }
  html[data-najm-hdr] #mainnav ul.main-menu { padding-top: 0; gap: 1px; }
  html[data-najm-hdr] #mainnav ul.main-menu > li.root-level > a {
    padding: 10px 7px;
    font-size: 12.6px;
    font-weight: 700;
  }
}

/* شاشات متوسطة: نمنع تضخّم سطر الأقسام لصفوف كثيرة — كما بالمحاكي */
@media (min-width: 1024px) and (max-width: 1150px) {
  html[data-najm-hdr] #mainnav ul.main-menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* هـ) الجوال: البحث يأخذ سطراً كاملاً تحت الشعار بدل أن ينضغط */
@media (max-width: 1023px) {
  html[data-najm-hdr] #mainnav .header-search { flex: 1 1 100%; order: 5; margin-top: 6px; }
  html[data-najm-hdr] #mainnav a.navbar-brand { flex: 1 1 auto; }
  /* الثيم يحجز custom-main-menu{min-height:84px} لهيكل تحميل القائمة.
     على الجوال يكون العنصر فارغاً (أبناؤه display:none والدرج يُنقل لجسم
     الصفحة)، فيبقى الحجز فراغاً صافياً. إلغاؤه وفّر 41px مقيسة. */
  html[data-najm-hdr] #mainnav custom-main-menu { min-height: 0; }
}