/* ============================================================================================
   BeautyShop — تحسينات إضافية

   ملف منفصل عن beautyShopcustom_{storescope}.css لأن ذاك يُعاد توليده كلما حُفظت ألوان الثيم من
   لوحة التحكم، فأي إضافة فيه تُمحى. ويعمل مع الاتجاهين معاً — كل قاعدة هنا منطقية الجانب
   (padding-inline / margin-inline) لا يمين/يسار صريحاً.
   ============================================================================================ */


/* ───────────────────────────────────────────────────────────────────────────────────────────
   ١) محتوى المقالات والصفحات المكتوب في المحرّر

   محرّر CKEditor يُنتج بنية معطوبة بسهولة، ومقالات المدونة هنا فيها فعلاً:

       <ul>
         <li></li>              ← عنصر فارغ ينتج نقطة شاردة
         <h4>عنوان</h4>         ← عنوان داخل <ul> خارج أي <li>: بلا إزاحة ولا نقطة
         <li>نص الفقرة</li>
       </ul>

   فيرى القارئ نقاطاً معلّقة وعناوين لا تصطفّ مع نصّها — وهذا ما يجعل المقال يبدو «ملخبطاً».
   إصلاحه في المحتوى يعني تحرير كل مقال يدوياً ثم تكرار العطل مع أول مقال جديد؛ فالأجدى أن
   يصمد العرض أمام أي بنية يُخرجها المحرّر.
   ─────────────────────────────────────────────────────────────────────────────────────────── */

/* عناصر القائمة الفارغة: لا نقطة ولا ارتفاع. :empty لا تُطابق ما فيه مسافة، لذلك تُعالَج
   حالة المسافة اللاصقة أيضاً. */
.post-body li:empty,
.news-body li:empty,
.full-description li:empty,
.topic-block li:empty,
.topic-page li:empty {
  display: none;
}

/* عنوان يقع مباشرة داخل <ul>/<ol> خارج أي <li>: يُعامَل كعنوان قسم لا كبند، فيُلغى تأثير
   إزاحة القائمة عنه ويأخذ مساحة تفصله عمّا قبله. */
.post-body ul > h2, .post-body ul > h3, .post-body ul > h4, .post-body ul > h5, .post-body ul > p,
.post-body ol > h2, .post-body ol > h3, .post-body ol > h4, .post-body ol > h5, .post-body ol > p,
.news-body ul > h2, .news-body ul > h3, .news-body ul > h4, .news-body ul > h5, .news-body ul > p,
.full-description ul > h2, .full-description ul > h3, .full-description ul > h4, .full-description ul > p,
.topic-page ul > h2, .topic-page ul > h3, .topic-page ul > h4, .topic-page ul > p {
  margin-inline-start: -36px;   /* يعادل padding القائمة في الثيم */
  margin-block: 18px 6px;
  list-style: none;
}

/* المحاذاة كانت مضبوطة على <p> وحدها في الثيم، فالعناوين والقوائم تُترك للوراثة وقد تُحاذى
   خطأً داخل حاوية مضبوطة على الجانب المقابل. */
.post-body, .news-body, .full-description, .topic-block, .topic-page {
  text-align: start;
}

.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body li,
.news-body h1, .news-body h2, .news-body h3, .news-body h4, .news-body h5, .news-body li,
.full-description h2, .full-description h3, .full-description h4, .full-description li,
.topic-page h2, .topic-page h3, .topic-page h4, .topic-page li {
  text-align: start;
}

/* تنفّس بين العناوين والنص. المحرّر لا يضع أي هامش، فتلتصق العناوين بما قبلها. */
.post-body h2, .news-body h2, .full-description h2, .topic-page h2 { margin: 26px 0 10px; font-size: 20px; line-height: 1.5; }
.post-body h3, .news-body h3, .full-description h3, .topic-page h3 { margin: 22px 0 8px;  font-size: 17px; line-height: 1.5; }
.post-body h4, .news-body h4, .full-description h4, .topic-page h4 { margin: 18px 0 6px;  font-size: 15px; line-height: 1.5; }

.post-body li, .news-body li, .full-description li, .topic-page li { margin: 6px 0; line-height: 1.9; }

/* طول السطر: نص عربي بعرض 1200 بكسل متواصل يُتعب العين ويجعل العودة لبداية السطر التالي شاقة.
   65-75 حرفاً هو المدى المريح. */
.post-body p, .news-body p { max-width: 78ch; line-height: 1.95; }

/* صور المقالات تخرج بعرض ثابت من المحرّر (647 بكسل في المقال الحالي) فتتجاوز الشاشة الصغيرة. */
.post-body img, .news-body img, .full-description img, .topic-page img, .topic-block img {
  max-width: 100%;
  height: auto;
}

/* جدول عريض يجب أن ينزلق داخل إطاره لا أن يدفع الصفحة كلها أفقياً. */
.post-body table, .news-body table, .full-description table, .topic-page table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* رابط أو كلمة لاتينية طويلة (اسم منتج، عنوان URL) تكسر التخطيط على الجوال. */
.post-body a, .news-body a, .full-description a, .topic-page a { overflow-wrap: anywhere; }

/* رابط داخل نص عربي: عزل الاتجاه يمنع خوارزمية الاتجاهين من سحب علامات الترقيم المجاورة
   إلى الجانب الخطأ — وهو أشهر سبب لظهور «؟» أو «.» في غير موضعها داخل فقرة عربية. */
.post-body a, .news-body a, .full-description a, .topic-page a,
.post-body code, .news-body code { unicode-bidi: isolate; }


/* ───────────────────────────────────────────────────────────────────────────────────────────
   ٢) نماذج الحساب: التسجيل والدخول وتغيير كلمة المرور
   ─────────────────────────────────────────────────────────────────────────────────────────── */

/* البريد ورقم الجوال قيمتان لاتينيتان دائماً. داخل صفحة RTL يقفز المؤشر ويظهر النص معكوساً
   أثناء الكتابة ما لم يُثبَّت اتجاه الحقل. */
.registration-page input[type="email"],
.registration-page input[type="tel"],
.login-page input[type="email"],
.account-page input[type="email"],
.account-page input[type="tel"] {
  direction: ltr;
  text-align: start;
}

/* زر إظهار كلمة المرور. أخطاء الكتابة في حقل مخفي هي أكثر ما يُفشل أول محاولة تسجيل، وليس
   أمام المستخدم وسيلة لاكتشافها. */
.pwd-wrap { position: relative; display: block; }

.pwd-wrap input { padding-inline-end: 44px !important; }

.pwd-toggle {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #8a8f98;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}

.pwd-toggle:hover { color: #d94070; }
.pwd-toggle:focus-visible { outline: 2px solid #d94070; outline-offset: 2px; border-radius: 6px; }
.pwd-toggle svg { width: 19px; height: 19px; }


/* ───────────────────────────────────────────────────────────────────────────────────────────
   ٣) لمسات عامة على كل الصفحات
   ─────────────────────────────────────────────────────────────────────────────────────────── */

/* التركيز بلوحة المفاتيح كان غير مرئي في أغلب العناصر — يستحيل تصفّح الموقع بلوحة المفاتيح. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #d94070;
  outline-offset: 2px;
  border-radius: 4px;
}

/* رسائل التحقق تحت الحقول كانت نصاً أحمر صغيراً بلا أي وزن بصري. */
.field-validation-error {
  display: inline-block;
  font-size: 12.5px;
  line-height: 1.6;
  font-weight: 600;
  text-align: start;
}

  /* علامة تحذير قبل النص: تُميّز الخطأ عن أي نص أحمر آخر، وتفيد من يصعب عليه تمييز الألوان
     (عمى الألوان الأحمر/الأخضر يصيب ~8% من الذكور، واللون وحده لا يكفي كإشارة). */
  .field-validation-error::before {
    content: '⚠ ';
    font-weight: 700;
  }

.input-validation-error {
  border-color: #d94070 !important;
  background-color: #fffafb !important;
}

/* ملخّص أخطاء النموذج — «البريد الإلكتروني مستخدم من قبل» وأمثاله.

   كان يرث ‎.message-error‎ من الثيم (‎beautyShop.rtl.css:476‎): نصّ أحمر 13px **مُوسَّط**
   بلا خلفية ولا حدود ولا أيقونة، يطفو أعلى نموذج التسجيل الطويل. أضعف عرض ممكن لأهمّ
   رسالة في الصفحة — العميل يضغط «تسجيل»، تُعاد الصفحة، ولا يلاحظ شيئاً فيظنّ الزر معطّلاً.

   صار صندوق تنبيه صريحاً: خلفية، شريط جانبي أحمر، أيقونة، ومحاذاة لبداية السطر
   (‎text-align: start‎ يتبع اتجاه الصفحة تلقائياً فلا حاجة لقاعدة RTL منفصلة). */
.message-error,
.validation-summary-errors {
  display: block;
  text-align: start !important;
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 600;
  color: #8a1c2b;
  background: #fff2f4;
  border: 1px solid #f3c2ca;
  border-inline-start: 4px solid #d94070;
  border-radius: 8px;
  padding: 14px 16px 14px 16px;
  margin: 0 0 22px;
}

  .message-error:empty,
  .validation-summary-errors:empty {
    display: none;                 /* الحاوية تُصيَّر دائماً حتى بلا أخطاء */
  }

  .message-error ul,
  .validation-summary-errors ul {
    margin: 0;
    padding-inline-start: 1.4em;
    list-style: disc;
  }

  /* رسالة واحدة لا تحتاج نقطة تعداد */
  .message-error ul li:only-child,
  .validation-summary-errors ul li:only-child {
    list-style: none;
    margin-inline-start: -1.4em;
  }

  .message-error::before,
  .validation-summary-errors::before {
    content: '⚠';
    display: inline-block;
    margin-inline-end: 8px;
    font-size: 17px;
    line-height: 1;
    vertical-align: -1px;
    color: #d94070;
  }

/* الحركة: احترام تفضيل النظام. الدوّارات والانتقالات تُثير الدوار عند بعض المستخدمين. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────────────────────
   ٤) صناديق نماذج الحساب — بلغة بطاقات صفحة الدفع (OPC)

   صفحة التسجيل كانت أقساماً بلا حدود على خلفية الصفحة: العنوان وردي معلّق فوق حقول سائبة،
   فلا يُدرك القارئ أين يبدأ قسم وأين ينتهي. البطاقة تفعل ذلك بصرياً دون أي تغيير في البنية.
   القيم مطابقة لـ .spc-card و .step-title في OneCspCheckout حتى تُقرأ الصفحتان كنظام واحد.
   ─────────────────────────────────────────────────────────────────────────────────────────── */

.registration-page .fieldset,
.login-page .fieldset,
.account-page .fieldset,
.password-recovery-page .fieldset {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
  margin: 0 0 14px;
  overflow: hidden;
  border: none;
}

/* شريط العنوان: نفس #fdf8fa المستخدم في عناوين خطوات الدفع. النص يبقى وردياً لأن الثيم
   يفرضه عبر beautyShop-primary-color-text بـ !important — ومقارعته بلا داعٍ. */
.registration-page .fieldset > .title,
.login-page .fieldset > .title,
.account-page .fieldset > .title,
.password-recovery-page .fieldset > .title {
  background: #fdf8fa;
  border: none !important;
  border-bottom: 1px solid #f3e8ec !important;
  border-radius: 0;
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.registration-page .fieldset > .title strong,
.login-page .fieldset > .title strong,
.account-page .fieldset > .title strong { font-weight: 700; }

.registration-page .fieldset > .form-fields,
.login-page .fieldset > .form-fields,
.account-page .fieldset > .form-fields,
.password-recovery-page .fieldset > .form-fields {
  padding: 16px;
}

/* حقل واحد في كل صف مع تسمية فوقه: أسرع نمط لملء نموذج على الجوال، وأوضح ارتباطاً بين
   التسمية وحقلها من التخطيط الأفقي. */
.registration-page .form-fields .inputs,
.login-page .form-fields .inputs,
.account-page .form-fields .inputs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin: 0 0 15px;
  padding: 0;
}

.registration-page .form-fields .inputs:last-child,
.login-page .form-fields .inputs:last-child { margin-bottom: 0; }

.registration-page .form-fields .inputs > label,
.login-page .form-fields .inputs > label,
.account-page .form-fields .inputs > label {
  width: auto;
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #4a4550;
  text-align: start;
}

.registration-page .form-fields .inputs > input:not([type="checkbox"]):not([type="radio"]),
.registration-page .form-fields .inputs > .pwd-wrap > input,
.registration-page .form-fields .inputs > select,
.login-page .form-fields .inputs > input:not([type="checkbox"]),
.account-page .form-fields .inputs > input:not([type="checkbox"]):not([type="radio"]),
.account-page .form-fields .inputs > select {
  width: 100%;
  max-width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #D5D5DA;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
  background: #fff;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* حقول صفحة التسجيل كانت تبدو مختلفة عن صفحة الدخول، والسبب طبقة واحدة في الـ HTML:
   التسجيل يلفّ كل حقل بـ ‎<div class="inputs full-width">‎ بينما الدخول يستعمل ‎.inputs‎ وحدها.
   وفي ‎beautyShop.rtl.css:4949‎ قاعدة تخصّ ‎.inputs.full-width‎ تفرض

       border: 1px solid lightpink !important;

   فالحقول تظهر بحدّ وردي في التسجيل ورمادي في الدخول. قاعدتي أعلى تحديداً (0,5,1 مقابل 0,3,1)
   لكنها بلا ‎!important‎ فتخسر أمامه — ولا سبيل لمطابقة الصفحتين إلا بـ ‎!important‎ مضاد.
   الخلفية تُعاد هنا كذلك حتى تبقى الصفحتان متطابقتين مهما أضاف الثيم لاحقاً. */
.registration-page .form-fields .inputs.full-width > input:not([type="checkbox"]):not([type="radio"]),
.registration-page .form-fields .inputs.full-width > .pwd-wrap > input,
.registration-page .form-fields .inputs.full-width > select,
.registration-page .form-fields .inputs.full-width > textarea,
.account-page .form-fields .inputs.full-width > input:not([type="checkbox"]):not([type="radio"]),
.account-page .form-fields .inputs.full-width > select {
  border: 1px solid #D5D5DA !important;
  background: #fff !important;
}

.registration-page .form-fields .inputs.full-width > input:not([type="checkbox"]):not([type="radio"]):focus,
.registration-page .form-fields .inputs.full-width > .pwd-wrap > input:focus,
.registration-page .form-fields .inputs.full-width > select:focus,
.account-page .form-fields .inputs.full-width > input:not([type="checkbox"]):not([type="radio"]):focus,
.account-page .form-fields .inputs.full-width > select:focus {
  border-color: #ffa6a8 !important;
}

.registration-page .form-fields .inputs input:focus,
.login-page .form-fields .inputs input:focus,
.account-page .form-fields .inputs input:focus {
  border-color: #ffa6a8;
  box-shadow: 0 0 0 3px rgba(217, 64, 112, .12);
  outline: none;
}

/* النجمة تأتي في DOM بعد الحقل، فتظهر في سطر مستقل أسفله ولا يعرف القارئ أن الحقل مطلوب
   إلا بعد أن يتجاوزه. نُخفي النجمة المنفصلة ونُلحقها بالتسمية نفسها: الشرط :has يكتشف
   الحقل المطلوب من data-val-required الذي تضعه ASP.NET أصلاً، فلا حاجة لأي تعديل في القالب.
   (لو لم يدعم المتصفح :has سقطت هذه القاعدتان وحدهما وبقيت النجمة الأصلية ظاهرة كما كانت.) */
.registration-page .form-fields .inputs > .required,
.login-page .form-fields .inputs > .required,
.account-page .form-fields .inputs > .required { display: none; }

.registration-page .form-fields .inputs:has(input[data-val-required]) > label::after,
.registration-page .form-fields .inputs:has(select[data-val-required]) > label::after,
.login-page .form-fields .inputs:has(input[data-val-required]) > label::after,
.account-page .form-fields .inputs:has(input[data-val-required]) > label::after {
  content: " *";
  color: #d94070;
  font-weight: 700;
}

/* صف الجنس ومربعات الاختيار تبقى أفقية. */
.registration-page .form-fields .inputs.full-width .gender,
.registration-page .form-fields .inputs > input[type="checkbox"] { width: auto; }

.registration-page .form-fields .inputs:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* زر الإرسال بعرض كامل على الجوال — الهدف الأكبر أسهل إصابة بالإبهام. */
.registration-page .buttons,
.login-page .buttons {
  margin: 6px 0 0;
}

.registration-page .buttons .button-1,
.login-page .buttons .button-1 {
  min-height: 46px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  padding: 0 28px;
}

@media (max-width: 767px) {
  .registration-page .buttons .button-1,
  .login-page .buttons .button-1 { width: 100%; }
}

/* ===========================================================================
   الهيدر: قائمة الأمنيات بجانب الحساب والسلة  —  2026-08-04
   ---------------------------------------------------------------------------
   كانت تُنقل بجافاسكربت إلى صندوق محدّدات اللغة فتظهر كنصّ «الرغبات (0)» معزولاً.
   صارت أيقونة بشارة عدد، بنفس مقاس السلة ووزنها، في الترتيب المتعارف عليه:
   حساب ← أمنيات ← سلة.
   =========================================================================== */
.header-links #topwishlistlink > a {
  position: relative;
  display: inline-block;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* نفس هندسة شارة السلة (‎beautyShop.rtl.css:11198‎) حتى تتطابق الشارتان تماماً */
.header-links #topwishlistlink .wishlist-qty {
  position: absolute;
  top: -6px;
  left: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: none;
  border-radius: 100px;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

/* الكلمة تبقى في DOM ليكون للأيقونة اسم مفهوم لدى قارئات الشاشة، وتُخفى بصرياً.
   لا تُستعمل ‎display:none‎ ولا ‎visibility:hidden‎ — كلاهما يحجبها عن القارئات أيضاً. */
.header-links #topwishlistlink .wishlist-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* القاعدة القديمة كانت تستهدف الأمنيات داخل صندوق المحدّدات؛ لم يعد لها محلّ
   بعد النقل، وتُبطَل هنا كي لا تتسرّب أي بقايا تنسيق إن عاد العنصر لأي سبب. */
.header-selectors-wrapper .custom-wishlist {
  display: none;
}

/* ===========================================================================
   الفوتر: مبدّل اللغة  —  نُقل من الهيدر
   =========================================================================== */
.footer-lower .footer-language-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

  .footer-lower .footer-language-selector ul,
  .footer-lower .footer-language-selector .language-list {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-lower .footer-language-selector img {
    width: 22px;
    height: auto;
    opacity: .65;
    transition: opacity .15s ease;
  }

  .footer-lower .footer-language-selector a:hover img,
  .footer-lower .footer-language-selector img.selected {
    opacity: 1;
  }

@media (max-width: 768px) {
  .footer-lower .footer-language-selector {
    justify-content: center;
    margin-top: 12px;
  }
}

/* ===========================================================================
   صفحات حساب العميل  —  2026-08-05
   ---------------------------------------------------------------------------
   ثلاثة مطالب: (١) تفاصيل الطلب محشورة على الجوال، (٢) قائمة «حسابي» نصوص
   مجرّدة بلا أيقونات، (٣) هدوء بصري عام على غرار صفحتَي الدخول والتسجيل.

   اللغة اللونية هنا هي نفسها المستعملة في القسم (٤) أعلاه وفي بطاقات صفحة الدفع،
   حتى تُقرأ كل صفحات الحساب كنظام واحد:
       بطاقة  #fff / نصف قطر 10 / ظل ‎0 2px 14px rgba(0,0,0,.06)‎
       عنوان  خلفية #fdf8fa وحدّ سفلي #f3e8ec
       نص     #4a4550 ، ثانوي #8a8f98
       وردي   #ffa6a8 للمسة الخفيفة، #d94070 للنص الوردي (تباين كافٍ للقراءة)
   =========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
   ١) تفاصيل الطلب: ملء الشاشة على الجوال

   السبب المباشر للحشر: القاعدة المشتركة في ‎beautyShop.rtl.css:5151‎ تعطي
   ‎.page.order-details-page‎ حشواً ‎padding: 50px‎ من كل الجهات، وهي قاعدة **خارج
   أي media query** فتسري على الجوال أيضاً. وفي ‎responsive.rtl.css‎ (داخل
   ‎@media (max-width: 768px)‎) توجد قاعدة تخفّض هذا الحشو إلى ‎20px 5px‎ لكن قائمة
   محدّداتها لا تشمل ‎.page.order-details-page‎ — شملت صفحة الحساب والدفع والخريطة
   ونسيت هذه. النتيجة: على شاشة 390px يذهب 100px عرضاً (أكثر من ربع الشاشة) حشواً
   فارغاً، ويبقى للمحتوى ~290px.

   ولأن ‎.od-page-body‎ في الداخل يملك حشوه الخاص (‎16px 12px 36px‎ دون 1000px)
   فالحشو الخارجي زائد بالكامل. نصفّره ونرفع إطار البطاقة (حدّ + ظل + انحناء) على
   الجوال ليمتد المحتوى من حافة إلى حافة — وهو ما تفعله المتاجر الكبرى في هذه
   الصفحة تحديداً لأنها صفحة قراءة بيانات لا نموذج إدخال.
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .page.order-details-page {
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }

  .order-details-page .od-page-body {
    padding: 14px 12px 32px;
  }

  /* الجداول تتحوّل إلى بطاقات مكدّسة (‎beautyShop.rtl.css:8391‎)؛ الهامش العلوي 40px
     هناك كان يفصل بين البطاقات بفراغ ضخم بعد رفع الحشو الخارجي. */
  .order-details-page .data-table tr {
    margin: 14px 0 0;
    border: 1px solid #efe7ea;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }

  .order-details-page .data-table tr:first-child {
    margin-top: 0;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   ٢) قائمة «حسابي»: أيقونة + حالة نشِطة واضحة

   الأيقونات SVG مضمّنة في ‎CustomerNavigation/Default.cshtml‎ وترث ‎currentColor‎،
   فيكفي تغيير ‎color‎ على الرابط ليتبدّل لون الأيقونة معه.

   البند النشط: خلفية وردية شديدة الخفوت + شريط وردي على الحافة الابتدائية.
   استُعمل ‎border-inline-start‎ لا ‎border-right‎ لأن الثيم يعمل بالعربية (RTL)
   وبالإنجليزية (LTR) من نفس الملفات — الخاصية المنطقية تنقلب مع الاتجاه تلقائياً.
   وخُصم عرض الشريط من الحشو الابتدائي حتى لا يقفز النص أفقياً عند التنشيط.
   ─────────────────────────────────────────────────────────────────────────── */

.side-2 .block.block-account-navigation {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
  overflow: hidden;
  background: #fff;
}

.block.block-account-navigation .title {
  background: #fdf8fa;
  border-bottom: 1px solid #f3e8ec;
  padding: 13px 16px;
  margin: 0;
  font-size: 15px;
}

.block.block-account-navigation .title strong {
  font-size: 15px;
  font-weight: 700;
  color: #3a3540;
}

.block.block-account-navigation .listbox {
  padding: 8px;
}

.block-account-navigation .list li {
  padding: 0;
  margin: 0 0 2px;
}

.block-account-navigation .list a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border-inline-start: 3px solid transparent;
  font-size: 14.5px;
  font-weight: 500;
  color: #4a4550;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.block-account-navigation .list .nav-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: #b6acb4;
  transition: color .15s ease;
}

.block-account-navigation .list .nav-text {
  flex: 1 1 auto;
  min-width: 0;
}

.block-account-navigation .list a:hover,
.block-account-navigation .list a:focus-visible {
  background: #fdf8fa;
  color: #d94070;
}

.block-account-navigation .list a:hover .nav-icon,
.block-account-navigation .list a:focus-visible .nav-icon {
  color: #ffa6a8;
}

/* ‎.block .list li.active a‎ في الثيم يفرض ‎color: #FFA6A8‎ وهو وردي فاتح على أبيض
   (نسبة تباين 1.86:1 — دون الحد الأدنى 4.5:1). نستبدله بـ ‎#d94070‎ ونضع الوردي
   الفاتح في الخلفية والشريط حيث لا يُقرأ منه نص. */
.block-account-navigation .list li.active a {
  background: #fdf3f6;
  border-inline-start-color: #ffa6a8;
  padding-inline-start: 9px;
  color: #d94070;
  font-weight: 700;
}

.block-account-navigation .list li.active .nav-icon {
  color: #d94070;
}

/* ───────────────────────────────────────────────────────────────────────────
   ٣) هدوء بصري عام لصفحات الحساب
   ─────────────────────────────────────────────────────────────────────────── */

/* عنوان الصفحة: كان بالحجم الافتراضي بلا فاصل. سطر رفيع تحته بدل خط وردي عريض. */
.page.account-page > .page-title {
  margin: 0 0 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid #f0eaee;
}

.page.account-page > .page-title h1 {
  font-size: 19px;
  font-weight: 700;
  color: #3a3540;
  margin: 0;
}

/* بطاقات الطلبات والعناوين: نفس لغة البطاقة بدل الحدّ الرمادي والظل الأزرق القديم
   (‎rgba(214,218,222,.55)‎) الذي يميل للبرودة ولا يناسب هوية المتجر. */
.account-page .section.order-item,
.account-page .section.address-item {
  border: 1px solid #f2ecef;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
  background: #fff;
  overflow: hidden;
}

.account-page .section.order-item > .title,
.account-page .section.address-item > .title {
  background: #fdf8fa;
  border-bottom: 1px solid #f3e8ec;
  padding: 12px 16px;
  margin: 0;
  font-size: 14.5px;
}

.account-page .section.order-item > .info,
.account-page .section.address-item > .info {
  padding: 14px 16px;
  margin: 0;
  list-style: none;
}

.account-page .section.order-item > .info li,
.account-page .section.address-item > .info li {
  padding: 4px 0;
  font-size: 14px;
  color: #6b6570;
}

.account-page .section.order-item > .buttons,
.account-page .section.address-item > .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
}

/* شارة حالة الطلب: لمسة لونية واحدة تحمل معنى، بدل تلوين كل شيء.
   الألوان مقصورة على الحالات التي يعرفها nopCommerce (‎OrderStatus‎)، وما عداها
   يبقى رمادياً محايداً. */
.account-page .order-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: #f4f4f6;
  color: #5c5661;
}

.account-page .order-status.complete {
  background: #e9f7ef;
  color: #1e7d4f;
}

.account-page .order-status.processing {
  background: #fdf3f6;
  color: #d94070;
}

.account-page .order-status.pending {
  background: #fff6e8;
  color: #a1650a;
}

.account-page .order-status.cancelled {
  background: #f7ecee;
  color: #99414f;
}

/* الأزرار داخل صفحات الحساب: ‎beautyShop-primary-color-bg‎ يفرض الوردي بـ ‎!important‎
   من ملف الألوان المُولَّد، فلا نقارعه — نضبط الشكل فقط (الارتفاع والانحناء). */
.account-page .section.order-item .button-2,
.account-page .section.address-item .button-2 {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
}

/* عناوين الأقسام داخل صفحات الحساب (‎.section > .title‎) خارج البطاقات أعلاه. */
.account-page .page-body > .section > .title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}

.account-page .no-data {
  background: #fff;
  border: 1px solid #f2ecef;
  border-radius: 10px;
  padding: 28px 16px;
  text-align: center;
  color: #8a8f98;
  font-size: 14.5px;
}

@media (max-width: 768px) {
  .page.account-page > .page-title h1 {
    font-size: 17px;
  }

  .account-page .section.order-item,
  .account-page .section.address-item {
    margin: 0 0 14px;
  }

  /* زر «تفاصيل الطلب» هو الهدف الأساسي في هذه الصفحة على الجوال. */
  .account-page .section.order-item > .buttons .button-2 {
    flex: 1 1 auto;
    min-height: 42px;
  }
}

/* ===========================================================================
   صفحة التحقّق بخطوتين  ‎/multi-factor-verification‎  —  2026-08-05
   ---------------------------------------------------------------------------
   شاشة لا يملك العميل تجاوزها: إن لم يفهمها لا يدخل حسابه إطلاقاً. لذلك هي
   أكثر صفحة يستحق فيها الوضوح أن يسبق الزخرفة — بطاقة واحدة، هدف واحد،
   وخانات رمز لا تحتاج شرحاً.
   =========================================================================== */

.mfa-verification-page .page-body {
  display: flex;
  justify-content: center;
  padding: 26px 14px 56px;
}

.mfa-card {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .07);
  overflow: hidden;
}

.mfa-card-head {
  background: #fdf8fa;
  border-bottom: 1px solid #f3e8ec;
  padding: 26px 22px 20px;
  text-align: center;
}

.mfa-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(217, 64, 112, .12);
  color: #d94070;
}

.mfa-card-icon svg {
  width: 26px;
  height: 26px;
}

.mfa-title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: #3a3540;
  line-height: 1.4;
}

.mfa-subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #7b7580;
}

.mfa-card-body {
  padding: 22px;
}

/* ===========================================================================
   شاشات رمز التحقّق  —  تصحيح درجة التخصيص  (2026-08-06)
   ---------------------------------------------------------------------------
   ⚠ هذا الملف يُحمَّل **قبل** ‎beautyShop.rtl.css‎ لا بعده.

   السبب: ‎Head.cshtml‎ يستدعي ‎Html.AppendCssFileParts‎، و‎Append‎ في نوبكوميرس تعني
   ‎_cssParts[location].Insert(0, …)‎ — أي **الإدراج في المقدّمة**
   (‎Nop.Web.Framework/UI/PageHeadBuilder.cs:537‎)، بينما ‎AddCssFileParts‎ هي التي
   تُلحِق في النهاية (نفس الملف، سطر 512). فآخر ملف يُستدعى بـ‎Append‎ هو أول ما يُطبع.
   قيس فعلياً في ترويسة الصفحة: extra ثم beautyShop.rtl ثم responsive.rtl — أي
   عكس ترتيب الاستدعاء تماماً.

   الأثر: كل تجاوز هنا بنفس درجة تخصيص الثيم **يخسر بصمت**. وهذا ما حدث لهذه الشاشة:
   ‎.mfa-code-field { white-space: normal }‎ خسر أمام ‎.inputs { white-space: nowrap }‎
   (كلاهما 0,1,0 والثيم لاحق)، فبقي سطر الإرشاد بلا التفاف، وقيس ‎scrollWidth = 770‎
   مقابل ‎clientWidth = 528‎ داخل ‎.ga-step.mfa-form‎ الذي يحمل ‎overflow: hidden‎ —
   فيُقصّ النص. وخسرت الخانات أمام ‎input[type="text"] { border: none }‎ (0,1,1)
   و‎.inputs input[type="text"] { width: 100% }‎ (0,2,1)، فقيست الخانة
   ‎81×40‎ بحدّ ‎0px none‎ بدل ‎46×54‎ بحدّ ‎2px‎ — أي «خانات بلا حدود».

   العلاج هنا: رفع درجة التخصيص لتتجاوز الثيم **مهما كان ترتيب التحميل**، بلا
   ‎!important‎. لذلك يحمل كل مُحدِّد أدناه ‎input‎ و‎[type="text"]‎ صراحةً:
       ‎.mfa-code-field input.mfa-code-box[type="text"]‎  ⇦ (0,3,1)
   وهي أعلى من (0,2,1) للثيم. ولا تُبسِّطها إلى ‎.mfa-code-box‎ وحدها فتعود المشكلة. */
.inputs.mfa-code-field {
  margin: 0 0 18px;
  text-align: center;
  white-space: normal;
  font-size: 14px;
}

.mfa-code-label {
  display: block;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #3a3540;
  width: auto;
  text-align: center;
}

.inputs.mfa-code-field .mfa-code-hint {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
  color: #8a8f98;
  /* الالتفاف مفروض هنا أيضاً لا على الحاوية وحدها: لو أعاد أحدهم ‎nowrap‎ على
     ‎.inputs‎ مستقبلاً يبقى سطر الإرشاد سليماً، وهو النص الوحيد الطويل في البطاقة. */
  white-space: normal;
}

/* الخانات الست. ‎dir="ltr"‎ مفروض على الحاوية من الجافاسكربت لأن الرمز رقمي يُقرأ
   من اليسار لليمين حتى داخل صفحة عربية. */
.mfa-code-boxes {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 6px;
}

/* حدّ واضح مقصود: ‎#ddd6da‎ السابق كان باهتاً على الأبيض فبدت الخانات وكأنها بلا إطار.
   ‎2px‎ بلون ‎#a99ea6‎ يُظهر ست خانات منفصلة بوضوح دون أن يصرخ لونياً أو يزاحم الوردي.

   ‎min-width/max-width‎ إلى جانب ‎width‎: الثيم يفرض ‎width: 100%‎ و‎max-width: 100%‎ على
   كل ‎input‎ داخل ‎.inputs‎، وداخل حاوية ‎flex‎ يجعل ذلك الخانات تتمدّد وتتقاسم العرض
   (قيست 81px بدل 46px). تثبيت الثلاثة يمنع أي تمدّد أو انكماش.
   و‎flex: 0 0 auto‎ يمنع ‎flex-shrink‎ الافتراضي من تصغيرها على الشاشات الضيقة. */
.mfa-code-field input.mfa-code-box[type="text"] {
  flex: 0 0 auto;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  height: 54px;
  min-height: 54px;
  padding: 0;
  border: 2px solid #a99ea6;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #3a3540;
  caret-color: #d94070;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.mfa-code-field input.mfa-code-box[type="text"]:focus {
  outline: none;
  border-color: #ffa6a8;
  box-shadow: 0 0 0 3px rgba(217, 64, 112, .14);
}

/* الحقل الحقيقي بعد أن تبني الخانات فوقه. لا ‎display:none‎ — انظر تعليق العرض.
   ‎min-height: 0‎ ضروري: الثيم يفرض ‎min-height: 40px‎ على كل ‎input‎ داخل ‎.inputs‎،
   فيبقى الحقل «المخفي» شاغلاً 40 بكسل ويفتح فجوة تحت الخانات. */
.mfa-code-field input.mfa-code-input--hidden[type="text"] {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* الحالة البديلة: لا جافاسكربت ⇦ يبقى حقل واحد، فليكن واضحاً كبيراً بدل حقل الدخول
   الافتراضي الضيق. */
.mfa-code-field input.mfa-code-input[type="text"]:not(.mfa-code-input--hidden) {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 52px;
  min-height: 52px;
  margin: 0 auto;
  padding: 0 14px;
  border: 2px solid #a99ea6;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 8px;
  color: #3a3540;
}

.mfa-code-field input.mfa-code-input[type="text"]:not(.mfa-code-input--hidden):focus {
  outline: none;
  border-color: #ffa6a8;
  box-shadow: 0 0 0 3px rgba(217, 64, 112, .14);
}

.mfa-code-error {
  display: block;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #d94070;
}

.mfa-code-error:empty {
  display: none;
}

.mfa-buttons {
  margin: 0;
  text-align: center;
}

/* ‎.button-1‎ يأخذ لونه الوردي من ملف الألوان المُولَّد بـ ‎!important‎ — لا نقارعه،
   نضبط المقاس والانحناء فقط. */
.mfa-submit {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 700;
}

/* رسالة الخطأ العامة (رمز خاطئ / انتهت صلاحيته) تُطبع فوق البطاقة من ‎_Notifications‎ */
.mfa-verification-page .message-error,
.mfa-verification-page .validation-summary-errors {
  max-width: 430px;
  margin: 0 auto 14px;
}

@media (max-width: 420px) {
  /* ست خانات × 46px + خمس فجوات × 8px = 316px — أضيق من 320px مع حواف البطاقة.
     نُصغّرها قليلاً بدل أن يفيض الصف أو تنكسر الخانات إلى سطرين.
     نفس درجة التخصيص المرفوعة أعلاه — وإلا تجاوزتها قاعدة الثيم داخل هذا الاستعلام. */
  .mfa-code-field input.mfa-code-box[type="text"] {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 50px;
    min-height: 50px;
    font-size: 20px;
  }

  .mfa-code-boxes {
    gap: 6px;
  }

  .mfa-card-body {
    padding: 20px 16px;
  }
}

/* ===========================================================================
   دفعة تحسينات الواجهة  —  2026-08-05
   =========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
   ١) قائمة الدولة: العرض الكامل بدل ٨٠٪ بجانب التسمية

   القياس (Chrome بلا واجهة، 1440px): صف ‎.inputs.full-width‎ عرضه 849px، منه 170px
   للتسمية (20%) و679px للقائمة (80%)، وحشو القائمة الأفقي **صفر** (‎pad=8/0/8/0‎).
   فالنص يلتصق بحافة الصندوق ويقع تحت سهم الاختيار الذي يرسمه المتصفح داخل نفس
   المساحة — ومن هنا يبدو الاسم الطويل «المملكة العربية السعودية» مقصوصاً، ويسوء
   الأمر كلما ضاقت الشاشة لأن النسبة 80% تتقلّص معها.

   الحل: التسمية فوق الحقل والحقل بعرض الصف كاملاً — وهو نفس النمط المطبَّق أصلاً
   على صفحتَي الدخول والتسجيل في القسم (٤) أعلاه، فتتوحّد الصفحات الثلاث التي ذكرها
   الطلب بدل أن يكون لكل واحدة تخطيط. هذا يعطي القائمة أقصى عرض ممكن (849px بدل 679)
   ويترك حشواً أفقياً حقيقياً للنص بعيداً عن السهم.
   ─────────────────────────────────────────────────────────────────────────── */

.address-edit-page .edit-address .inputs.full-width,
.address-add-page .edit-address .inputs.full-width,
.account-page.customer-info-page .inputs.full-width {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin: 0 0 15px;
  white-space: normal;
  font-size: 14px;
}

.address-edit-page .edit-address .inputs.full-width > label,
.address-add-page .edit-address .inputs.full-width > label,
.account-page.customer-info-page .inputs.full-width > label {
  width: auto;
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #4a4550;
  text-align: start;
  text-transform: none;
}

.address-edit-page .edit-address .inputs.full-width > input:not([type="checkbox"]):not([type="radio"]),
.address-edit-page .edit-address .inputs.full-width > select,
.address-add-page .edit-address .inputs.full-width > input:not([type="checkbox"]):not([type="radio"]),
.address-add-page .edit-address .inputs.full-width > select,
.account-page.customer-info-page .inputs.full-width > input:not([type="checkbox"]):not([type="radio"]),
.account-page.customer-info-page .inputs.full-width > select {
  width: 100% !important;
  max-width: 100%;
  height: 42px;
  /* حشو أفقي حقيقي: الجهة الابتدائية للنص، والجهة النهائية تترك مكاناً لسهم الاختيار
     الذي يرسمه المتصفح (appearance الافتراضي) فلا يركبه النص. */
  padding-inline: 12px 30px;
  border: 1px solid #D5D5DA !important;
  border-radius: 6px;
  background: #fff !important;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

.address-edit-page .edit-address .inputs.full-width > select:focus,
.address-add-page .edit-address .inputs.full-width > select:focus,
.address-edit-page .edit-address .inputs.full-width > input:focus,
.account-page.customer-info-page .inputs.full-width > select:focus,
.account-page.customer-info-page .inputs.full-width > input:focus {
  border-color: #ffa6a8 !important;
  box-shadow: 0 0 0 3px rgba(217, 64, 112, .12);
  outline: none;
}

/* النجمة المطلقة (.required) كانت تعتمد على وجود التسمية بجانب الحقل. بعد التكديس
   تُلحق بالتسمية نفسها كما في صفحة التسجيل. */
.address-edit-page .edit-address .inputs.full-width > .required,
.address-add-page .edit-address .inputs.full-width > .required,
.account-page.customer-info-page .inputs.full-width > .required { display: none; }

.address-edit-page .edit-address .inputs.full-width:has(input[data-val-required]) > label::after,
.address-edit-page .edit-address .inputs.full-width:has(select[data-val-required]) > label::after,
.address-add-page .edit-address .inputs.full-width:has(input[data-val-required]) > label::after,
.address-add-page .edit-address .inputs.full-width:has(select[data-val-required]) > label::after,
.account-page.customer-info-page .inputs.full-width:has(input[data-val-required]) > label::after {
  content: " *";
  color: #d94070;
  font-weight: 700;
}

/* صفوف تحمل تاريخ الميلاد أو الجنس تبقى أفقية داخل الصف المكدّس. */
.account-page.customer-info-page .inputs.full-width .date-picker-wrapper,
.account-page.customer-info-page .inputs.full-width .gender {
  display: flex;
  gap: 8px;
  width: 100%;
}

.account-page.customer-info-page .inputs.full-width .date-picker-wrapper select {
  width: auto !important;
  flex: 1 1 0;
  min-width: 0;
}

.account-page.customer-info-page .inputs.full-width:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.account-page.customer-info-page .inputs.full-width > input[type="checkbox"] {
  width: auto !important;
  height: auto;
}

/* ───────────────────────────────────────────────────────────────────────────
   ٢) شارتا السلة والأمنيات

   الشارتان موجودتان أصلاً ومتطابقتان هندسياً (قِيستا 23×18 كلتاهما، وبنفس الإزاحة
   ‎-10,-6‎ عن أيقونتيهما). المشكلة الفعلية أن قيمتهما تأتي من موردَي اللغة
   ShoppingCart.HeaderQuantity و Wishlist.HeaderQuantity وقيمتهما ‎({0})‎ — أي أن
   الشارة تعرض «(0)» بقوسين داخل دائرة صغيرة، فيضيع الرقم ولا تُقرأ كشارة عدد.
   القوسان يُزالان من المورد نفسه (Deploy Files/HeaderQuantityBadges.sql) لا من العرض،
   لأن تحديث AJAX بعد الإضافة للسلة يستبدل محتوى الشارة بنصّ مُنسَّق من الخادم
   (AjaxCart.init(false, '.header-links .cart-qty', '.header-links .wishlist-qty', …))
   فأي تعديل في القالب وحده يضيع عند أول إضافة.

   ما يخصّ CSS هنا: تحسين قراءة الرقم بعد زوال القوسين.
   ─────────────────────────────────────────────────────────────────────────── */

.header-links .cart-qty,
.header-links .wishlist-qty {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
}

/* ───────────────────────────────────────────────────────────────────────────
   ٣) زر «إعادة الطلب» — لون الثيم نفسه لا لون جديد

   كان ‎.od-btn--primary‎ يستعمل ‎linear-gradient(135deg, #ffa6a8, #f87171)‎، و‎#f87171‎
   لون مرجاني/أحمر **ليس من هوية المتجر** — يظهر في نصف الزر ويكسر تطابقه مع بقية
   الأزرار. نُلغي التدرّج ونترك الصنف المُولَّد beautyShop-primary-color-bg (المضاف
   في القالب) يفرض لون الثيم، فيتبع الزر أي تغيير للألوان من لوحة التحكم تلقائياً.

   حالات التفاعل مشتقّة من نفس اللون بـ filter لا بلون مكتوب يدوياً — فلا يدخل أي
   لون جديد مهما غيّر المدير اللون الأساسي.
   ─────────────────────────────────────────────────────────────────────────── */

.order-details-page .od-btn--primary,
.order-details-page .repost .button-2 {
  background: none;
  background-image: none;
  color: #fff;
  border: none;
}

.order-details-page .od-btn--primary:hover,
.order-details-page .od-btn--primary:focus-visible,
.order-details-page .repost .button-2:hover,
.account-page .section.order-item .button-2:hover,
.account-page .section.order-item .button-2:focus-visible {
  filter: brightness(.93);
  opacity: 1;
  color: #fff;
}

.order-details-page .od-btn--primary:active,
.order-details-page .repost .button-2:active,
.account-page .section.order-item .button-2:active {
  filter: brightness(.87);
}

.order-details-page .od-btn--primary:focus-visible,
.account-page .section.order-item .button-2:focus-visible {
  outline: 2px solid #d94070;
  outline-offset: 2px;
}

/* ───────────────────────────────────────────────────────────────────────────
   ٥) أيقونات إجراءات المنتج في صف واحد

   السبب المقيس للتفرّق: ‎.overview-buttons div { width: 80%; margin: 0 auto 3px; }‎
   يجعل كل غلاف (.add-to-wishlist / .compare-products / .email-a-friend) كتلة بعرض
   80% تحت سابقتها — ثلاثة أسطر. ومعها ‎.overview .button-2 { display: block; width: 100% }‎.
   ─────────────────────────────────────────────────────────────────────────── */

.overview-buttons {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
}

.overview-buttons > div {
  width: auto;
  margin: 0;
  flex: 0 1 auto;
}

.overview .overview-buttons .button-2,
.variant-overview .overview-buttons .button-2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #efe4e8;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  line-height: 1;
  color: #6b6570;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.overview .overview-buttons .button-2 i,
.variant-overview .overview-buttons .button-2 i {
  font-size: 15px;
  line-height: 1;
}

.overview .overview-buttons .button-2:hover,
.overview .overview-buttons .button-2:focus-visible {
  border-color: #ffa6a8;
  background: #fdf8fa;
  color: #d94070;
}

@media (max-width: 767px) {
  /* على الجوال: الأيقونة وحدها لتبقى الثلاثة في سطر واحد بلا تداخل. النص يبقى في
     الـDOM لقارئات الشاشة (clip لا display:none)، و title موجود أصلاً على كل زر. */
  .overview-buttons {
    gap: 6px;
  }

  .overview .overview-buttons .button-2 {
    padding: 0 10px;
    min-width: 40px;
  }

  .overview .overview-buttons .button-2 > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .overview .overview-buttons .button-2 i {
    font-size: 17px;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   ٦) منطقة السعر — أقلّ ارتفاعاً وأوضح

   كان السعر ‎26px‎ بهامش سفلي ‎25px‎ داخل ‎.product-details-price‎ العائم، فيأخذ نحو
   ‎70px‎ رأسياً وحده. نخفض الهامش ونضبط الحجم، ونمنعه من احتلال عرض كامل حتى يجلس
   بجانب أزرار الإجراءات كما يقتضي ‎.price-overview-buttons‎ (وهو flex أصلاً).
   ─────────────────────────────────────────────────────────────────────────── */

.price-overview-buttons {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 14px;
}

.product-details-price {
  display: inline-block;
  float: none;
  width: auto;
  margin: 0;
  line-height: 1.2;
}

.product-details-price .price-value-1,
.product-details-price span[class^="price-value-"] {
  font-size: 23px !important;
  line-height: 1.15 !important;
}

.product-details-price .old-product-price {
  margin: 2px 0 0 !important;
}

@media (max-width: 767px) {
  .price-overview-buttons {
    gap: 8px 12px;
    margin: 0 0 10px;
  }

  .product-details-price .price-value-1,
  .product-details-price span[class^="price-value-"] {
    font-size: 21px !important;
  }
}

/* ===========================================================================
   الحماية الإضافية: صفحة الإعدادات + إعداد Google Authenticator  —  2026-08-05
   =========================================================================== */

/* --- بطاقة المقدّمة والخطوات في صفحة الإعدادات --- */
.multi-factor-authentication-page .mfa-intro {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
  padding: 18px;
  margin: 0 0 16px;
}

.mfa-intro-lead {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.8;
  color: #4a4550;
}

/* خطوات مرقّمة بدائرة بدل أرقام مكتوبة داخل النص — تُقرأ بلمحة ولا تعتمد على
   ترقيم يدوي في نصّ المورد. */
.mfa-steps {
  counter-reset: mfa-step;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.mfa-steps > li {
  counter-increment: mfa-step;
  position: relative;
  padding-inline-start: 34px;
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: #4a4550;
}

.mfa-steps > li::before {
  content: counter(mfa-step);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fdf3f6;
  color: #d94070;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

/* التحذير: أهمّ جملة في الصفحة — من يحفظ المزوّد ولا يُكمل إعداده يُمنع من حسابه. */
.mfa-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  border-inline-start: 4px solid #e0a91b;
  background: #fff8e8;
  color: #7a5a06;
  font-size: 13.5px;
  line-height: 1.75;
}

.mfa-warning-icon {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c8901a;
}

.mfa-warning-icon svg { width: 22px; height: 22px; }

/* صفّ مفتاح التفعيل: مربع الاختيار قبل تسميته لا تحته. */
.multi-factor-authentication-page .inputs.mfa-toggle-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  white-space: normal;
  font-size: 14px;
}

.multi-factor-authentication-page .inputs.mfa-toggle-row > label {
  width: auto;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #4a4550;
  text-transform: none;
  cursor: pointer;
}

.multi-factor-authentication-page .inputs.mfa-toggle-row > input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #d94070;
  cursor: pointer;
}

/* --- صفحة إعداد Google Authenticator --- */
.ga-setup {
  max-width: 560px;
  margin: 0 auto;
}

.ga-step {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
  overflow: hidden;
  margin: 0 0 16px;
}

.ga-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdf8fa;
  border-bottom: 1px solid #f3e8ec;
  padding: 13px 16px;
}

.ga-step-num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #d94070;
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 1px 5px rgba(217, 64, 112, .18);
}

.ga-step-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #3a3540;
  line-height: 1.4;
}

.ga-step-body { padding: 18px 16px; }

.ga-instruction {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.8;
  color: #7b7580;
  text-align: center;
}

.ga-qr {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}

.ga-qr img {
  width: 178px;
  height: 178px;
  max-width: 100%;
  padding: 10px;
  border: 1px solid #f0e7eb;
  border-radius: 12px;
  background: #fff;
}

/* الإدخال اليدوي مطويّ: الغالبية تمسح الرمز، وإظهار مفتاح سري طويل دائماً يُربك. */
.ga-manual {
  border-top: 1px dashed #f0e7eb;
  padding-top: 12px;
}

.ga-manual > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #d94070;
  list-style: none;
  padding: 4px 0;
}

.ga-manual > summary::-webkit-details-marker { display: none; }

.ga-manual > summary::before {
  content: '+ ';
  font-weight: 700;
}

.ga-manual[open] > summary::before { content: '– '; }

.ga-manual-list {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #faf7f8;
  font-size: 13px;
}

.ga-manual-list dt {
  margin: 0 0 2px;
  font-weight: 700;
  color: #6b6570;
}

.ga-manual-list dd {
  margin: 0 0 10px;
  color: #3a3540;
  overflow-wrap: anywhere;
}

.ga-manual-list dd:last-child { margin-bottom: 0; }

.ga-secret {
  font-family: Consolas, "Courier New", monospace;
  font-size: 13.5px;
  letter-spacing: 1px;
}

.ga-manual-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #8a8f98;
}

/* ===========================================================================
   رسائل التنبيه ومحاذاة أيقونتها  —  2026-08-05
   =========================================================================== */

/* الأيقونة كانت ‎::before‎ داخل نصّ متعدّد الأسطر فتلتصق بأعلى السطر الأول.
   ‎flex + align-items:center‎ يجعلها في منتصف ارتفاع الرسالة مهما طالت. */
.message-error,
.validation-summary-errors,
.message-success,
.validation-summary-valid {
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-error::before,
.validation-summary-errors::before {
  flex: 0 0 auto;
  align-self: center;
}

.message-error > ul,
.validation-summary-errors > ul {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* شريط الإشعار العلوي (حفظ بيانات المستخدم، إلخ).

   كان شريطاً رفيعاً ‎position: fixed; top: 0‎ بخطّ 16px وبلا أي بروز، يمرّ دون أن
   يلاحظه أحد — والعميل يضغط «حفظ» من أسفل الصفحة الطويلة فلا يرى شيئاً.
   صار بطاقة عائمة أعلى الصفحة، وأضيف سكربت في ‎main.js‎ يُصعد الصفحة إليها. */
/*  ‎#bar-notification‎ مضمومة إلى الصنف: قاعدة الثيم ‎.bar-notification-container‎
    (‎beautyShop.rtl.css:714‎) بنفس التخصيص وتُحمَّل بعدي، فكان ‎top‎ يبقى صفراً
    والبطاقة ملتصقة بحافة النافذة العليا (قيس: ‎top = 0‎). */
#bar-notification.bar-notification-container {
  top: 26px;
  right: 0;
  left: 0;
  z-index: 100000;
  width: auto;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 12px;
  opacity: 1;
  line-height: 1.6;
  pointer-events: none;
}

/*  ‎display: flex !important‎ — والسبب ليس عناداً:

    ‎public.common.js:129‎ يبني عنصر الإشعار بجافاسكربت ثمّ يستدعي ‎$(htmlcode).fadeIn()‎.
    وjQuery حين تُظهر عنصراً حسابيّ الإخفاء تكتب ‎display: block‎ **سطرياً** على العنصر،
    والنمط السطري يتجاوز أي قاعدة في ملف التنسيق ما لم تكن ‎!important‎.

    فكان الصندوق ‎block‎ لا ‎flex‎: علامة نوع الرسالة (‎::before‎) عنصر سطري يقع في أول
    السطر، بينما النصّ داخل ‎<p class="content">‎ وهو صندوق كتلي — فتنزل العلامة في سطر
    والرسالة في سطر تحتها. المطلوب أن تكون العلامة **موازية** للرسالة، وهذا لا يتحقّق
    إلا بصفّهما في نفس صندوق ‎flex‎.

    والإخفاء التلقائي في ‎main.js‎ حُوّل إلى صنف ‎bar-notification--hidden‎ لأن
    ‎style.display = 'none'‎ السطري لم يعد يكفي أمام ‎!important‎ أعلاه. */
/*  ‎#bar-notification‎ بادئةً — لا ‎.bar-notification‎ وحدها:
    قواعد الثيم لهذا الشريط بنفس درجة التخصيص (‎beautyShop.rtl.css:737‎ و752)، وهذا
    الملف يُحمَّل **قبل** الثيم، فكانت خصائصي تخسر واحدةً واحدة. الحاوية تحمل
    ‎id="bar-notification"‎ فتكفي بادئتها لرفع التخصيص إلى (1,1,0) و(1,2,0). */
#bar-notification .bar-notification {
  display: flex !important;
  align-items: center;
  gap: 10px;
  /* الحشو الأيسر 46px يفتح مكاناً لزر الإغلاق فلا يركب على النصّ */
  padding: 14px 16px 14px 46px;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  font-size: 14.5px;
  font-weight: 600;
  pointer-events: auto;
}

/*  البادئة ‎#bar-notification‎ إلزامية هنا أيضاً: قاعدة الإظهار أعلاه (1,1,0) تحمل
    ‎!important‎، فلو كُتب صنف الإخفاء بـ(0,2,0) — ولو مع ‎!important‎ — لخسر، لأن
    التساوي في «المهمّة» يحسمه التخصيص. النتيجة كانت ستكون: الإخفاء التلقائي لا يعمل
    إطلاقاً بعد أن حوّلناه من ‎style.display‎ إلى صنف. الآن (1,2,0) فيفوز. */
#bar-notification .bar-notification.bar-notification--hidden {
  display: none !important;
}

/* ‎margin: 0 0 0 10px‎ من الثيم يزيح النصّ عن العلامة زيادةً على ‎gap‎ — نلغيه */
.bar-notification .content {
  margin: 0;
  flex: 1 1 auto;
}

/* ‎align-self: center‎ صراحةً: لو امتدّت الرسالة إلى سطرين تبقى العلامة في منتصف
   ارتفاع النصّ لا معلّقة عند سطره الأول. */
.bar-notification::before {
  flex: 0 0 auto;
  align-self: center;
  line-height: 1;
  font-size: 17px;
  font-weight: 700;
}

.bar-notification.success::before { content: '✓'; }
.bar-notification.error::before   { content: '⚠'; }
.bar-notification.warning::before { content: '⚠'; }

/* زر الإغلاق: منتصف الارتفاع، أقصى اليسار.

   استُعملت هنا خصائص **فيزيائية** (‎left/right‎) عن قصد لا منطقية (‎inset-inline-*‎):
   الصفحة عربية (RTL) فـ‎inset-inline-start‎ تعني اليمين، وهو عكس المطلوب.
   الموضع الأيسر مقصود في الاتجاهين معاً — كما في أشرطة التنبيه المعتادة. */
/*  لماذا كان الزرّ يخرج من الصندوق (قيس 2026-08-06):
    قاعدة الثيم ‎.bar-notification .close { top: 0; margin: 7px }‎ لها نفس درجة تخصيص
    قاعدتي، والثيم يُحمَّل بعدي — فطُبِّق ‎top: 0‎ منه بدل ‎top: 50%‎ مني. لكن
    ‎transform: translateY(-50%)‎ **طُبِّق** لأن الثيم لا يضبط ‎transform‎ فلا تعارض.
    فالنتيجة: ‎top‎ فعلي 7px ثمّ سحب 16px إلى أعلى = ‎-9px‎، أي يخرج تسعة بكسلات فوق
    حافة الصندوق. قيس: مركز الزر y=7 ومركز الصندوق y=24.

    الدرس: تطبيق **جزء** من القاعدة أسوأ من عدم تطبيقها — لأن الخصائص المتبقّية
    تُحسب على أساس قيم لم تُطبَّق. لذلك تُرفع درجة القاعدة كاملةً لا خاصية منها.

    و‎margin: 0‎ ضرورية صراحةً: هامش الثيم ‎7px‎ يُضاف إلى ‎left‎ فيزيح الزر. */
#bar-notification .bar-notification .close {
  position: absolute;
  left: 10px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===========================================================================
   قائمة الطلبات: طريقة الدفع وحالته  —  2026-08-05
   =========================================================================== */

.account-page .order-payment-method,
.account-page .order-payment-status {
  font-weight: 600;
  color: #3a3540;
}

/* ===========================================================================
   محاذاة شارتَي السلة والأمنيات رأسياً  —  2026-08-05
   ---------------------------------------------------------------------------
   الشارتان تستعملان نفس الإزاحة ‎top:-6px; left:-10px‎ لكن **بالنسبة إلى رابطين
   مختلفَي الحجم**: قِيس رابط السلة ‎26x26 @(212,156)‎ ورابط الأمنيات ‎18x45 @(256,147)‎،
   فوقعت شارة السلة أخفض بـ 9 بكسل من شارة الأمنيات.

   توحيد صندوق الرابطين (26×26 مع توسيط المحتوى) يجعل الإزاحة نفسها تُنتج الموضع
   نفسه — بلا أرقام إزاحة مختلفة لكل واحدة تحتاج ضبطاً يدوياً كلما تغيّر حجم الأيقونة.
   =========================================================================== */
.header-links #topcartlink > a,
.header-links #topwishlistlink > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  line-height: 1;
  vertical-align: middle;
}

/* ===========================================================================
   القائمة الجانبية على الجوال (MegaMenu)  —  2026-08-05
   ---------------------------------------------------------------------------
   لماذا اختفى زر العودة — سببان متراكبان، كلاهما مقيس:

   ١) ‎megamenu.rtl.css:401‎ يعطي الزر ‎color: #fff‎ (كُتب لقائمة بخلفية داكنة)،
      بينما ‎megamenu.rtl.css:429‎ يجعل خلفية اللوحة على الجوال ‎background-color: #fff‎.
      نصّ أبيض على خلفية بيضاء — الزر موجود ويعمل لكنه غير مرئي إطلاقاً.

   ٢) ‎beautyShop.rtl.css:9272‎ يجعل صفّه ‎position: absolute; top:0; left:0‎، فيخرج
      من مجرى القائمة ويقف فوق أول بند فيها بدل أن يتصدّرها.

   وثالثة تُصيب الأجهزة اللوحية: ‎responsive.rtl.css:1115‎ داخل ‎@media (min-width: 769px)‎
   يخفي الصفّ كلياً — لكن اللوحة الجانبية تبقى مستعملة حتى 991px، فبين 769 و991
   يختفي الزر تماماً ولا سبيل للرجوع إلا بإغلاق القائمة.

   ملف البلوجن يُسجَّل بعد ملفات الثيم في ترتيب الصفحة، لذلك ‎!important‎ ضرورية هنا
   على الخصائص المتنازع عليها تحديداً (اللون والموضع والإظهار) لا على غيرها.
   =========================================================================== */

@media (max-width: 991px) {

  /* --- بنود القائمة: خلفية وردية شديدة الخفوت لكل عنصر --- */
  .mm-navbar.mobile .mm-nav-item {
    width: 100%;
    margin: 0 0 6px;
  }

  .mm-navbar.mobile .mm-nav-item > .mm-nav-link,
  .mm-navbar.mobile .mm-nav-item > a.mm-nav-link {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fffafb;
    border: 1px solid #f7edf1;
    color: #3a3540;
    font-size: 14.5px;
    line-height: 1.5;
  }

  .mm-navbar.mobile .mm-nav-item > .mm-nav-link:hover,
  .mm-navbar.mobile .mm-nav-item > .mm-nav-link:focus-visible {
    background: #fdf3f6;
    color: #d94070;
  }

  /* سهم الدخول للقائمة الفرعية يبقى فوق الخلفية الجديدة */
  .mm-navbar.mobile .mm-nav-item.has-submenu > .sublist-toggle,
  .mm-navbar.mobile .mm-nav-item.dropdown-menu-list > .sublist-toggle {
    z-index: 2;
  }

  /* --- صفّ العودة: أغمق قليلاً ليتميّز، وفي مجرى المستند لا معلّقاً فوقه --- */
  /* ‎margin‎ بـ‎!important‎ عن قصد: القياس أظهر أن صفّ العودة يبدأ عند ‎x=13‎ بينما بقية
     البنود عند ‎x=33‎ — إزاحة 20 بكسل مصدرها هامش خارجي يرثه الصفّ من قواعد الثيم
     (‎margin-right: 20px‎ في الاتجاه العربي)، فينقص عرضه من جهة اليمين ويظهر الفراغ.
     العرض نفسه كان مطابقاً (296 لكليهما)، فالمشكلة في الموضع لا في القياس. */
  .mm-navbar .sublist-close-button,
  .mm-navbar li.sublist-close-button {
    position: static !important;
    display: block !important;
    width: 100%;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: none !important;
    border: none;
  }

  .mm-navbar .sublist-close-button > button.mm-back-button {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    /* أغمق من بنود القائمة بدرجة واحدة — يكفي للتمييز دون أن يصرخ */
    background: #f7e6ec !important;
    border: 1px solid #efd7e0;
    color: #8a2f4d !important;
    font-size: 14.5px;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
  }

  .mm-navbar .sublist-close-button > button.mm-back-button:hover,
  .mm-navbar .sublist-close-button > button.mm-back-button:focus-visible {
    background: #f2d9e2 !important;
  }

  .mm-navbar .sublist-close-button > button.mm-back-button i {
    padding: 0 !important;
    font-size: 13px;
    line-height: 1;
  }

  /* القائمة الفرعية المفتوحة تأخذ نفس الحشو حتى يصطفّ صفّ العودة مع البنود */
  .mm-navbar.mobile .sublist {
    padding: 12px;
  }

  /* رابط «عرض كل …» يبقى مميّزاً عن الفئات الفرعية دون لون جديد */
  .mm-navbar.mobile .mm-nav-item.mm-view-all > .mm-nav-link {
    background: #fdf3f6;
    border-color: #f3e0e7;
    color: #d94070;
    font-weight: 600;
  }

  /* --- ترتيب الطبقات: القائمة كانت تنزلق **تحت** شريط الإعلانات ---

     القيم المقيسة:
         شريط الإعلانات ‎.spark-announcement-bar‎ ⇦ ‎z-index: 1001‎  (announcement.css:15)
         اللوحة الجانبية ‎.mm-navbar‎             ⇦ ‎z-index: 1000‎  (megamenu.rtl.css:421)
         طبقة التعتيم   ‎.bg-overlay‎             ⇦ ‎z-index: 999‎

     أي أن الشريط أعلى من القائمة ببكسل واحد في الترتيب، فيظهر فوقها ويقصّ أعلاها.
     اللوحة الجانبية طبقة عائمة فوق الصفحة كلها ويجب أن تعلو كل شيء أثناء فتحها،
     فنرفعها مع طبقة التعتيم فوق الشريط. لم نُنزّل الشريط لأنه يجب أن يبقى فوق
     المحتوى العادي حين تكون القائمة مغلقة. */
  .mm-navbar {
    z-index: 10050 !important;
  }
}


/* ===========================================================================
   أسهم «منتجات ذات صلة» و«العملاء الذين اشتروا هذا المنتج اشتروا أيضاً»  —  2026-08-05
   ---------------------------------------------------------------------------
   السهم كان يظهر في منتصف الصفحة بدل طرفَي الشريط.

   السبب: ‎.ocarousel .owl-nav‎ معرَّف ‎position: absolute; top: 40%‎ في ملف بلوجن
   OCarousels، وأزراره ‎position: absolute‎ كذلك بـ ‎right:0‎ و‎left:0‎. عنصر مطلق
   يتموضع بالنسبة لأقرب سلف **مُموضَع**، وحاوية هذين القسمين ليست كذلك — فيقفز
   الشريط إلى أقرب سلف مموضَع أعلى في الشجرة (حاوية قالب المنتج) ويستقرّ في وسطها.

   الإصلاح: نجعل حاوية الشريط نفسها ‎position: relative‎ فيعود المرجع صحيحاً، ونُلغي
   ‎text-align: center‎ و‎margin-top‎ القادمين من ‎owl.theme‎ الافتراضي. ‎pointer-events‎
   تمنع الشريط الشفاف الممتدّ بعرض 100% من ابتلاع الضغطات فوق بطاقات المنتجات.
   =========================================================================== */

.related-products-grid .ocarousel,
.also-purchased-products-grid .ocarousel,
.product-collateral .ocarousel {
  position: relative;
}

.related-products-grid .ocarousel .owl-nav,
.also-purchased-products-grid .ocarousel .owl-nav,
.product-collateral .ocarousel .owl-nav {
  position: absolute;
  top: 40%;
  right: 0;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: initial;
  pointer-events: none;
}

.related-products-grid .ocarousel .owl-nav button.owl-prev,
.related-products-grid .ocarousel .owl-nav button.owl-next,
.also-purchased-products-grid .ocarousel .owl-nav button.owl-prev,
.also-purchased-products-grid .ocarousel .owl-nav button.owl-next,
.product-collateral .ocarousel .owl-nav button.owl-prev,
.product-collateral .ocarousel .owl-nav button.owl-next {
  position: absolute;
  top: 0;
  margin: 0;
  pointer-events: auto;
}

.related-products-grid .ocarousel .owl-nav button.owl-prev,
.also-purchased-products-grid .ocarousel .owl-nav button.owl-prev,
.product-collateral .ocarousel .owl-nav button.owl-prev {
  right: 0;
  left: auto;
}

.related-products-grid .ocarousel .owl-nav button.owl-next,
.also-purchased-products-grid .ocarousel .owl-nav button.owl-next,
.product-collateral .ocarousel .owl-nav button.owl-next {
  left: 0;
  right: auto;
}


/* ===========================================================================
   فراغات بين بطاقات المنتجات في كل الكاتلوجات  —  2026-08-05
   ---------------------------------------------------------------------------
   ‎.item-box‎ معرَّف ‎float: right‎ (‎beautyShop.rtl.css:2593‎). ومع اختلاف ارتفاع
   البطاقات (اسم منتج بسطرين مقابل سطر، وجود شارة خصم من عدمها) تتعلّق البطاقة
   التالية بأسفل أطول بطاقة سابقة بدل أن تبدأ صفاً جديداً — فتظهر فجوات بيضاء
   وصفوف ناقصة. هذا سلوك ‎float‎ الطبيعي ولا يُصلحه ضبط الارتفاع.

   الإصلاح كان مطبَّقاً فعلاً لكن على صفحتَي القسم والماركة وحدهما
   (‎beautyShop.rtl.css:11557‎)، فبقيت صفحة البحث ونتائج الوسوم والبائع
   والمنتجات الجديدة وقائمة الأمنيات على السلوك القديم — وهو ما ظهر في
   ‎/search?q=كريم‎.

   نُعمّم نفس الحل على كل شبكات الكاتلوج، ونستثني الشبكات داخل الكاروسيلات
   (‎ocarousel‎ يبني تخطيطه بنفسه ولا يجوز فرض ‎flex‎ عليه).
   =========================================================================== */

.search-page .product-grid > .item-grid,
.category-page .product-grid > .item-grid,
.manufacturer-page .product-grid > .item-grid,
.vendor-page .product-grid > .item-grid,
.product-tag-page .product-grid > .item-grid,
.new-products-page .product-grid > .item-grid,
.recently-viewed-products-page .product-grid > .item-grid,
.recently-added-products-page .product-grid > .item-grid,
.wishlist-page .product-grid > .item-grid,
.profile-page .product-grid > .item-grid {
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: stretch;
}

/* البطاقة تملأ ارتفاع صفّها فتتساوى حوافّ الصفّ الواحد وتصطفّ أزرار «أضف للسلة». */
.search-page .product-grid > .item-grid > .item-box,
.category-page .product-grid > .item-grid > .item-box,
.manufacturer-page .product-grid > .item-grid > .item-box,
.vendor-page .product-grid > .item-grid > .item-box,
.product-tag-page .product-grid > .item-grid > .item-box,
.new-products-page .product-grid > .item-grid > .item-box,
.recently-viewed-products-page .product-grid > .item-grid > .item-box,
.recently-added-products-page .product-grid > .item-grid > .item-box,
.wishlist-page .product-grid > .item-grid > .item-box,
.profile-page .product-grid > .item-grid > .item-box {
  float: none;
  display: flex;
}

.search-page .product-grid > .item-grid > .item-box > .product-item,
.category-page .product-grid > .item-grid > .item-box > .product-item,
.manufacturer-page .product-grid > .item-grid > .item-box > .product-item,
.vendor-page .product-grid > .item-grid > .item-box > .product-item,
.product-tag-page .product-grid > .item-grid > .item-box > .product-item,
.new-products-page .product-grid > .item-grid > .item-box > .product-item,
.recently-viewed-products-page .product-grid > .item-grid > .item-box > .product-item,
.recently-added-products-page .product-grid > .item-grid > .item-box > .product-item,
.wishlist-page .product-grid > .item-grid > .item-box > .product-item,
.profile-page .product-grid > .item-grid > .item-box > .product-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* كتلة الأزرار تُدفَع لأسفل البطاقة فتصطفّ أفقياً عبر الصفّ مهما اختلف طول الاسم. */
.search-page .product-grid .product-item .buttons,
.category-page .product-grid .product-item .buttons,
.manufacturer-page .product-grid .product-item .buttons,
.vendor-page .product-grid .product-item .buttons,
.product-tag-page .product-grid .product-item .buttons,
.new-products-page .product-grid .product-item .buttons,
.wishlist-page .product-grid .product-item .buttons {
  margin-top: auto;
}


/* ===========================================================================
   القائمة تختفي تحت الشريط العلوي — سياق تكديس، لا رقم z-index  —  2026-08-05
   ---------------------------------------------------------------------------
   رفع ‎z-index‎ على ‎.mm-navbar‎ وحدها لم يكفِ، والسبب أعمق من رقم:

       ‎.header‎                  ⇦ ‎position: relative; z-index: 10‎   (beautyShop.rtl.css:993)
         └ ‎.header-menu‎ › ‎.mm-navbar‎ / ‎.mm-dropdown‎  (القائمة وزر العودة)
       ‎.spark-announcement-bar‎  ⇦ ‎position: relative; z-index: 1001‎ (announcement.css:15)  ← شقيق

   ‎.header‎ عنصر مُموضَع بـ‎z-index‎ صريح، فهو ينشئ **سياق تكديس** خاصاً به. وكل ما
   بداخله — مهما بلغ ‎z-index‎ الخاص به، ولو 99999 — يبقى محصوراً داخل هذا السياق
   ويُقارَن بالشريط بقيمة الأب ‎10‎ فقط، وهي أقل من ‎1001‎. لذلك يظلّ الشريط فوق القائمة
   دائماً، ويقع زر العودة (وهو أول صفّ في اللوحة) تحته تحديداً.

   العلاج يكون على **الأب** لا على الابن، وفقط أثناء فتح القائمة — والسكربت يضيف
   ‎body.mm-menu-opened‎ في الحالتين (لوحة الجوال وقائمة الأقسام في الكمبيوتر)،
   فنستعمله مفتاحاً. وننزّل الشريط في الوقت نفسه احتياطاً لأي طبقة أخرى.
   خارج حالة الفتح يعود كل شيء كما كان، فيبقى الشريط فوق المحتوى العادي.
   =========================================================================== */

body.mm-menu-opened .header {
  z-index: 10050;
}

body.mm-menu-opened .spark-announcement-bar {
  z-index: 1;
}

/* لا نلمس ‎.bg-overlay‎ إطلاقاً: بعد رفع ‎.header‎ صارت الطبقة واللوحة داخل **سياق
   التكديس نفسه**، فأي رفع للطبقة يجعلها تغطّي اللوحة — تظهر مظلّلة ولا تقبل النقر.
   قيمها الأصلية (‎999‎ للجوال و‎1001‎ للكمبيوتر) أقلّ من قيمة اللوحة (‎1003‎) فتعمل بذاتها. */


/* ===========================================================================
   لوحة الأقسام الجانبية في عرض الكمبيوتر  —  2026-08-05
   ---------------------------------------------------------------------------
   اللمسات الخفيفة التي أُضيفت للقائمة كانت داخل ‎@media (max-width: 991px)‎ وحدها،
   فبقيت اللوحة نفسها في عرض الكمبيوتر بلا خلفيات ولا فواصل — بنود نصّية متلاصقة
   على أبيض. اللوحة تشترك مع نسخة الجوال في نفس عناصر الـHTML (‎sublist‎ و
   ‎mm-back-button‎)، فتكفي نفس المعالجة مع تحديد النطاق بـ‎.mm-categories-burger‎
   حتى لا تمسّ قوائم الميجا مينيو الأفقية.

   وزر العودة هنا كان ‎background:#ffa6a8‎ بنصّ أبيض — تباين ‎1.9:1‎، دون الحدّ الأدنى
   ‎4.5:1‎. وُحّد مع نسخة الجوال: خلفية ‎#f7e6ec‎ ونصّ ‎#8a2f4d‎ (تباين ‎7.4:1‎).
   =========================================================================== */

@media (min-width: 992px) {

  .mm-nav-item.mm-categories-burger .sublist,
  .mm-nav-item.mm-categories-burger .mm-dropdown-list {
    padding: 12px;
  }

  .mm-nav-item.mm-categories-burger .sublist > .mm-nav-item,
  .mm-nav-item.mm-categories-burger .mm-dropdown-list > .mm-nav-item {
    width: 100%;
    margin: 0 0 6px;
  }

  .mm-nav-item.mm-categories-burger .sublist > .mm-nav-item > .mm-nav-link,
  .mm-nav-item.mm-categories-burger .mm-dropdown-list > .mm-nav-item > .mm-nav-link {
    display: block;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fffafb;
    border: 1px solid #f7edf1;
    color: #3a3540;
    font-size: 14.5px;
    line-height: 1.5;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }

  .mm-nav-item.mm-categories-burger .sublist > .mm-nav-item > .mm-nav-link:hover,
  .mm-nav-item.mm-categories-burger .sublist > .mm-nav-item > .mm-nav-link:focus-visible,
  .mm-nav-item.mm-categories-burger .mm-dropdown-list > .mm-nav-item > .mm-nav-link:hover,
  .mm-nav-item.mm-categories-burger .mm-dropdown-list > .mm-nav-item > .mm-nav-link:focus-visible {
    background: #fdf3f6;
    border-color: #f3e0e7;
    color: #d94070;
  }

  .mm-nav-item.mm-categories-burger .sublist > .mm-nav-item.mm-view-all > .mm-nav-link {
    background: #fdf3f6;
    border-color: #f3e0e7;
    color: #d94070;
    font-weight: 600;
  }

  /* صفّ العودة في عرض الكمبيوتر: نُقل بالكامل إلى
     ‎Plugins/NopStation.MegaMenu/Themes/BeautyShop/content/css/megamenu.rtl.css‎
     (قسم ‎@media (min-width: 992px)‎، عند «زر الرجوع أعلى لوحة الأبناء»).

     كان مكرَّراً هنا بمُحدِّد مطابق حرفياً لما في ذلك الملف — نفس درجة التخصيص تماماً —
     وذلك الملف يُسجَّل بعد هذا الملف فيفوز عند التساوي. النتيجة أن الخلفية كانت تُؤخذ
     من هنا (لأنها ‎!important‎ وهناك ‎transparent‎ بلا ‎!important‎) واللون من هناك
     (‎#fff !important‎ في الطرفين، فيفوز الأخير): نصّ أبيض على وردي فاتح، تباين ‎1.1:1‎،
     فيبدو الزر باهتاً. الحلّ ليس رفع الأولوية هنا بل إبقاء تعريف واحد لا تعريفين. */
}


/* ===========================================================================
   تفاصيل الطلب: مسافات جانبية كبيرة على الشاشات الضيقة  —  2026-08-05
   ---------------------------------------------------------------------------
   إصلاحي السابق لهذه الصفحة كان داخل ‎@media (max-width: 768px)‎، لكن تخطيط الجوال
   في هذا الثيم يمتدّ حتى ‎991px‎. فبين ‎769‎ و‎991‎ تجتمع مسافتان:

       ‎.master-wrapper-content‎  ⇦ ‎width: 90%‎ (beautyShop.rtl.css:256) — 5% كل جهة،
          ولا تُلغى إلا داخل ‎@media (max-width: 768px)‎ (responsive.rtl.css:975)
       ‎.page.order-details-page‎ ⇦ ‎padding: 50px‎ (beautyShop.rtl.css:5151)

   أي ما يقارب 180 بكسل ضائعة عرضاً على شاشة 900px. نمدّ النطاق إلى 991 ونُلغي
   تضييق الحاوية لهذه الصفحة وحدها — صفحة قراءة بيانات، تستحقّ العرض كاملاً.
   =========================================================================== */

@media (max-width: 991px) {
  .html-order-details-page .master-wrapper-content {
    width: 100%;
  }

  .page.order-details-page {
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    max-width: 100%;
    margin: 0;
  }

  .order-details-page .od-page-body {
    max-width: 100%;
    padding: 14px 10px 32px;
  }

  .order-details-page .data-table tr {
    margin: 14px 0 0;
    border: 1px solid #efe7ea;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }

  .order-details-page .data-table tr:first-child {
    margin-top: 0;
  }
}


/* ===========================================================================
   صندوقا التقسيط (تمارا وتابي) في صفحة المنتج  —  2026-08-05
   ---------------------------------------------------------------------------
   ويدجت تابي يأتي بإطاره من سكربت تابي نفسه، بينما ويدجت تمارا يُصيَّر نصاً حراً
   بلا حاوية — فيظهر السطران بوزنين بصريين مختلفين تحت السعر مباشرة.

   نُغلّف الاثنين بنفس الصندوق (حدّ خارجي واحد ونصف قطر وحشو متطابق) فيقرأهما
   العميل كخيارَي تقسيط متكافئين. ‎:empty‎ يمنع ظهور صندوق فارغ إن لم يُحمّل سكربت
   المزوّد أو كان المبلغ خارج حدوده.
   =========================================================================== */

.tamara-product-widget,
.tabby-product-promo {
  display: block;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid #ece3e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.tamara-product-widget:empty,
.tabby-product-promo:empty {
  display: none;
}

/* سكربت تابي يبني حاوية داخلية لها هوامشها؛ نُلغيها حتى لا يتضاعف الحشو. */
.tabby-product-promo > div {
  margin: 0 !important;
}

@media (max-width: 767px) {
  .tamara-product-widget,
  .tabby-product-promo {
    padding: 10px 12px;
    margin: 0 0 8px;
  }
}


/* ===========================================================================
   صفحات المواضيع (سياسة الشحن والاسترجاع، الخصوصية، اتفاقية الاستخدام…)
   محاذاة النصّ  —  2026-08-06
   ---------------------------------------------------------------------------
   الثيم يضبط ‎.topic-block p, .topic-page p { text-align: center }‎
   (‎beautyShop.rtl.css:369‎) — أي أن **كل فقرة** في **كل** صفحة موضوع تُوسَّط.
   والعناوين لا تشملها تلك القاعدة فتبقى محاذاة للبداية (يمين في RTL).

   القياس على صفحة «سياسة وشروط الشحن والاسترجاع» بعرض 414px:
       ‎.page-body‎  text-align = justify
       ‎h2‎ (5)  →  start = 5      ← يمين
       ‎h3‎ (8)  →  start = 8      ← يمين
       ‎p‎  (51) →  center = 51    ← وسط
   عناوين على اليمين وفقرات في الوسط: النصّ يبدو مبعثراً بلا عمود واحد يتبعه النظر،
   وأثره أوضح على الجوال لأن السطر أقصر فتزداد الحافة اليمنى تعرّجاً.

   وقد تأكّد أن المصدر هو الثيم لا المحتوى: نصّ الموضوع في قاعدة البيانات
   (‎Topic.Id = 10‎، 6911 حرفاً و51 وسم ‎<p>‎) لا يحتوي ولا ‎text-align‎ واحداً.
   أما المواضيع التي كتب محرّرها ‎text-align: right‎ داخل الوسم (من نحن، اتفاقية
   الاستخدام، اتصل بنا، شركاء الشحن…) فالنمط السطري فيها يفوز على أي قاعدة هنا
   ويبقى كما هو — فلا يغيّر هذا الملف شيئاً في تلك الصفحات.

   ‎start‎ لا ‎right‎: تتبع اتجاه الصفحة تلقائياً، فتصير يميناً في العربية ويساراً في
   الإنجليزية بقاعدة واحدة. ويسبقها ‎right‎ كبديل للمتصفّحات القديمة التي تتجاهلها.

   النطاق محصور بـ‎.page.topic-page‎ عمداً: ‎.topic-block‎ (كتلة الترحيب في الصفحة
   الرئيسية) تبقى موسَّطة كما صُمّمت.

   درجة التخصيص: ‎.page.topic-page .page-body p‎ = (0,3,1) وهي أعلى من قاعدة الثيم
   ‎.topic-page p‎ = (0,1,1) — فتفوز مهما كان ترتيب تحميل الملفات (وهو ترتيب معكوس
   في هذا الثيم، انظر التعليق أعلى ملف ‎Head.cshtml‎). */

.page.topic-page .page-body {
  /* ‎justify‎ على عمود ضيّق يُحدث فجوات كبيرة بين الكلمات العربية؛ المحاذاة للبداية أنظف. */
  text-align: right;
  text-align: start;
}

.page.topic-page .page-body p,
.page.topic-page .page-body li,
.page.topic-page .page-body h1,
.page.topic-page .page-body h2,
.page.topic-page .page-body h3,
.page.topic-page .page-body h4 {
  text-align: right;
  text-align: start;
}

/* القوائم: يُعاد إظهار النقاط ومحاذاتها مع النصّ بدل توسيطها.
   ‎.topic-block ul‎ في الثيم يجعلها ‎flex‎ بمحاذاة وسطية (‎beautyShop.rtl.css:352‎)،
   وهذا مقصود لكتلة الصفحة الرئيسية لا لصفحة سياسات فيها قوائم شروط. */
.page.topic-page .page-body ul,
.page.topic-page .page-body ol {
  display: block;
  margin: 12px 0;
  padding: 0 24px 0 0;
}

.page.topic-page .page-body ul {
  list-style: disc;
}

.page.topic-page .page-body ol {
  list-style: decimal;
}

.page.topic-page .page-body li {
  margin: 0 0 6px;
  line-height: 1.9;
}

/* مسافة أوضح بين الأقسام: العناوين كانت تلتصق بالفقرة التي تسبقها. */
.page.topic-page .page-body h2,
.page.topic-page .page-body h3,
.page.topic-page .page-body h4 {
  margin: 22px 0 10px;
  line-height: 1.6;
}

.page.topic-page .page-body h2:first-child,
.page.topic-page .page-body h3:first-child {
  margin-top: 0;
}

@media (max-width: 991px) {
  /* لا يُلمس الحشو هنا: قيس عرض ‎.page-body‎ = 398px داخل نافذة 414px، أي أن
     ‎responsive.rtl.css‎ يتكفّل أصلاً بتصغير حشو الـ50px على الجوال. الزيادة الوحيدة
     المطلوبة هي تباعد الأسطر — النصّ العربي الطويل يحتاجه أكثر على السطر القصير. */
  .page.topic-page .page-body {
    line-height: 1.95;
  }

  .page.topic-page .page-body ul,
  .page.topic-page .page-body ol {
    padding: 0 20px 0 0;
  }
}



/* ===========================================================================
   لون النصّ الإرشادي داخل الحقول (placeholder)  —  2026-08-06
   ---------------------------------------------------------------------------
   حقل رقم الجوال في صفحة الدفع نصّه الإرشادي رقم كامل ‎0547847943‎، وحقل العنوان
   ‎«مثال: حي النرجس…»‎. الثيم لا يضبط لون الـplaceholder إطلاقاً — القاعدة الوحيدة
   عنده (‎beautyShop.rtl.css:137‎) تضبط ‎font-family‎ فقط، وقيمتها ‎normal 16px 'lato'‎
   مكتوبة بصيغة الاختصار ‎font‎ داخل خاصية ‎font-family‎ فهي غير صالحة أصلاً ويتجاهلها
   المتصفّح. فيبقى اللون على الافتراضي وهو قاتم بما يكفي ليقرأ العميل الرقم على أنه
   رقمه هو، فيضغط «تحقق» أو «تأكيد الطلب» ظانّاً أن الحقل مملوء.

   لون فاتح واضح الفرق عن النصّ الفعلي (‎#3a3540‎) مع ‎opacity: 1‎ — فايرفوكس يخفض
   شفافية الـplaceholder افتراضياً فيصير باهتاً أكثر من اللازم بدونها.

   كل بادئة في قاعدة مستقلّة عن قصد: المتصفّح يُسقط **مجموعة المُحدِّدات كاملة** إذا
   كان أحدها مجهولاً لديه، فجمعها في قائمة واحدة يُبطل القاعدة عند الجميع. */

.inputs input::placeholder,
.inputs textarea::placeholder,
input.pinkborder::placeholder {
  color: #b3aab0;
  opacity: 1;
}

.inputs input::-webkit-input-placeholder,
.inputs textarea::-webkit-input-placeholder,
input.pinkborder::-webkit-input-placeholder {
  color: #b3aab0;
  opacity: 1;
}

.inputs input::-moz-placeholder,
.inputs textarea::-moz-placeholder,
input.pinkborder::-moz-placeholder {
  color: #b3aab0;
  opacity: 1;
}

.inputs input:-ms-input-placeholder,
.inputs textarea:-ms-input-placeholder,
input.pinkborder:-ms-input-placeholder {
  color: #b3aab0;
  opacity: 1;
}



/* ===========================================================================
   اقتراحات البحث في الجوال: مصغّرات + إبراز «عرض جميع النتائج»  —  2026-08-06
   ---------------------------------------------------------------------------
   تصميم قائمة الاقتراحات (مصغّر 46×46، صفّان للاسم، تذييل ملوّن لرابط كل النتائج)
   مكتوب في ‎beautyShop.rtl.css‎ **داخل ‎@media (min-width: 992px)‎** أي للكمبيوتر وحده
   (الأسطر 11139 و11160). فعلى الجوال لا تنطبق أي قاعدة تحدّ مقاس الصورة، والوحيدة
   التي تصل هي ‎.ui-autocomplete img { display: inline }‎ داخل ‎(min-width: 481px)‎
   عند السطر 8552 — بلا عرض ولا ارتفاع. فتُرسم الصورة بمقاسها الطبيعي، وهو
   ‎mediasettings.autocompletesearchthumbpicturesize = 92‎ بكسل: صورة ضخمة تدفع النصّ
   وتجعل اقتراحين يملآن الشاشة.

   هنا نُعمّم نفس تصميم الكمبيوتر على الشاشات الأضيق بدل تركها بلا تنسيق. */

@media (max-width: 991px) {

  #small-search-box-form .ui-autocomplete li {
    margin: 0;
  }

  #small-search-box-form .ui-autocomplete a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    line-height: 1.5;
  }

  /* المصغّر: ‎48px‎ ثابتة في الاتجاهين مع ‎flex: 0 0 auto‎ حتى لا تتمدّد ولا تنكمش،
     و‎object-fit: contain‎ حتى لا تُقصّ المنتجات الطويلة. */
  #small-search-box-form .ui-autocomplete img {
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    margin: 0;
    object-fit: contain;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
  }

  /* الاسم على سطرين كحدّ أقصى بدل أن يمتدّ الصفّ بلا نهاية */
  #small-search-box-form .ui-autocomplete a > span {
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px;
  }

  /* «عرض جميع النتائج» — تذييل ملوّن بهوية المتجر، لا سطر عادي يضيع بين المنتجات.
     يُستهدَف بالصنف ‎.search-all-results‎ الذي يضيفه السكربت، لا بـ‎li:last-child‎:
     الأخير يلوّن آخر منتج بالخطأ في اللحظة التي تُعرض فيها القائمة قبل إلحاق الرابط. */
  #small-search-box-form .ui-autocomplete .search-all-results {
    margin-top: 4px;
    border-top: 1px solid #f0f0f0;
  }

  #small-search-box-form .ui-autocomplete .search-all-results a {
    justify-content: center;
    padding: 12px 10px !important;
    background: #fff2f5;
    border-radius: 0 0 10px 10px;
    font-weight: 700;
    font-size: 14px;
    color: #d9484c !important;
  }

  #small-search-box-form .ui-autocomplete .search-all-results a:hover,
  #small-search-box-form .ui-autocomplete .search-all-results a:focus,
  #small-search-box-form .ui-autocomplete .search-all-results a.ui-state-focus {
    background: #ffe4ea;
    color: #c23a58 !important;
  }
}

/* نفس الإبراز على الكمبيوتر أيضاً: القاعدة القديمة هناك تعتمد ‎li:last-child‎، وهي
   تخطئ الهدف في اللحظة السابقة لإلحاق الرابط. الاستهداف بالصنف أدقّ وأثبت. */
@media (min-width: 992px) {
  #small-search-box-form .ui-autocomplete .search-all-results a {
    justify-content: center;
    background: #fff2f5;
    font-weight: 700;
    color: #d9484c !important;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   صفحة تفاصيل المنتج  —  2026-08-06
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) «‎١٠‎ أشخاص يشاهدون هذا المنتج الآن» في وسط الصفحة ──
   السطر كان محاذياً للبداية داخل ‎.pd-urgency-wrap‎ فيبدو معلّقاً على الحافة.
   ‎justify-content: center‎ لا ‎text-align‎ وحدها: العنصر ‎flex‎ (فيه نقطة نابضة
   ونصّ)، و‎text-align‎ لا تُحرّك أبناء الـflex. */
.pd-urgency-wrap {
  text-align: center;
}

.pd-viewers,
.pd-urgency-stock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

/* ── 2) أيقونات المفضلة/المقارنة/إرسال لصديق داخل الدائرة ──
   على الجوال يُخفى نصّ الزر (‎clip‎) فيبقى الزر بحشو ‎9px 18px‎ و‎gap: 7px‎ محجوزة
   لنصّ عرضه صفر — فتنزاح الأيقونة عن مركز الدائرة. هنا نجعله دائرة حقيقية
   بمقاس ثابت وبلا حشو ولا فجوة، فتتوسّط الأيقونة تماماً أفقياً ورأسياً.

   ‎!important‎ لأن قواعد الثيم نفسها تحملها
   (‎.overview-buttons .add-to-wishlist-button‎ … ‎padding‎/‎border-radius‎). */
@media (max-width: 767px) {
  .overview-buttons .add-to-wishlist-button,
  .overview-buttons .add-to-compare-list-button,
  .overview-buttons .email-a-friend-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
  }

  .overview-buttons .add-to-wishlist-button i,
  .overview-buttons .add-to-compare-list-button i,
  .overview-buttons .email-a-friend-button i {
    margin: 0 !important;
    line-height: 1;
  }

  /* الصفّ نفسه في الوسط ليتناسق مع سطر المشاهدين أعلاه */
  .overview-buttons {
    justify-content: center;
  }
}

/* ── 3) صندوق المشاركة ──
   عنوان «مشاركة» واضح فوق الأيقونات، والكتلة كلّها في الوسط. */
/*  ‎.product-share-button.pd-share‎ لا ‎.pd-share‎ وحدها:
    ‎responsive.rtl.css:770‎ يضبط ‎.product-share-button { display: flex; justify-content: center }‎
    على الجوال. ذلك يجعل العنوان «مشاركة» وصفّ الأيقونات **عنصرَي flex متجاورين في
    سطر واحد** بدل أن يعلو العنوان الأيقونات، ويجعل صفّ الأيقونات ينكمش لمحتواه
    فينزاح عن الوسط (قيس: فراغ يمين 135 مقابل يسار 85).

    والمُحدِّدان متساويان في التخصيص (0,1,0)، وذلك الملف يُحمَّل **بعد** هذا الملف
    (‎AppendCssFileParts‎ تُدرج في المقدّمة — انظر التعليق أعلى ‎Head.cshtml‎)، فيفوز هو.
    لذا نرفع التخصيص بضمّ الصنفين معاً. */
.product-share-button.pd-share {
  display: block;
  margin: 18px 0 6px;
  text-align: center;
}

.pd-share-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #3a3540;
}

.pd-share-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pd-share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #efe4e8;
  background: #fff;
  color: #6b6570;
  text-decoration: none;
  position: relative;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.pd-share-link svg {
  width: 19px;
  height: 19px;
  display: block;
}

.pd-share-link:hover,
.pd-share-link:focus-visible {
  transform: translateY(-2px);
  color: #fff;
}

/* ألوان كل منصّة عند المرور — تُميّزها بلا صور ولا خط أيقونات */
.pd-share-wa:hover,   .pd-share-wa:focus-visible   { background: #25D366; border-color: #25D366; }
.pd-share-tg:hover,   .pd-share-tg:focus-visible   { background: #229ED9; border-color: #229ED9; }
.pd-share-x:hover,    .pd-share-x:focus-visible    { background: #000;    border-color: #000; }
.pd-share-fb:hover,   .pd-share-fb:focus-visible   { background: #1877F2; border-color: #1877F2; }
.pd-share-copy:hover, .pd-share-copy:focus-visible { background: #d94070; border-color: #d94070; }

/* تأكيد النسخ: يظهر فوق الزر ثمّ يزول — بلا نافذة ولا تنبيه يقطع التصفّح */
.pd-share-copy.is-copied {
  background: #1e9e5a;
  border-color: #1e9e5a;
  color: #fff;
}

.pd-share-copy.is-copied::after {
  content: "تم نسخ الرابط";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 6px;
  background: #1e9e5a;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

/* ── 4) زر «أضف للسلة» ثابت أسفل الشاشة في الجوال، على أقصى اليسار ──
   الزر كان يمرّ مع الصفحة، فيضطرّ العميل للعودة لأعلى بعد قراءة الوصف والتقييمات.

   ‎left: 12px‎ بالقيمة الفيزيائية عن قصد، لا ‎inset-inline-start‎: المطلوب «أقصى
   اليسار» حرفياً، والخاصية المنطقية تنقلب إلى اليمين في صفحة RTL فتعطي عكس المراد.

   و‎body‎ يأخذ حشواً سفلياً بقدر الزر حتى لا يغطّي آخر المحتوى (التقييمات عادةً). */
@media (max-width: 767px) {
  /*  المُحدِّد مطوَّل عن قصد. القاعدة المضادّة هي
      ‎.product-details-overview .add-to-cart-panel .add-to-cart-button { width: 90% !important }‎
      (‎beautyShop.rtl.css:12543‎) وتخصيصها (0,3,0) مع ‎!important‎. المحاولة الأولى هنا
      كانت ‎.product-details-page .add-to-cart-button‎ أي (0,2,0) فخسرت رغم ‎!important‎
      — لأن ‎!important‎ يرفع الأولوية لكنه لا يُلغي المقارنة بين قاعدتين كلتاهما مهمّة،
      فيحسمها التخصيص. القياس أثبته: بقي الزر ‎450px‎ وهو 90% من نافذة 500px بالضبط.
      الآن (0,4,0) فيفوز.  */
  .product-details-page .product-details-overview .add-to-cart-panel .add-to-cart-button,
  .product-details-page .add-to-cart-button {
    position: fixed;
    left: 12px;
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    /* زرّ مُدمج يلتصق باليسار بدل شريط شبه كامل العرض يحجب ما تحته */
    width: auto !important;
    min-width: 160px;
    max-width: calc(100vw - 24px);
    padding: 13px 24px;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(217, 64, 112, .35);
  }

  .product-details-page {
    padding-bottom: 72px;
  }
}



/* ===========================================================================
   أيقونات القائمة المنبثقة للحساب في الترويسة  —  2026-08-06
   ---------------------------------------------------------------------------
   بنود القائمة (حسابي / تسجيل الخروج / التسجيل / تسجيل الدخول) كانت نصّاً مجرّداً،
   فيصعب التقاطها بلمحة عين — خصوصاً أن القائمة تنسدل فوق محتوى الصفحة.

   لا تعديل في ‎HeaderLinks/Default.cshtml‎ إطلاقاً: البنود تحمل أصلاً أصنافاً دلالية
   (‎ico-account‎ / ‎ico-logout‎ / ‎ico-register‎ / ‎ico-login‎) فيكفي ‎::before‎.

   والأيقونات ‎SVG‎ مضمّنة في ‎data:‎ لا خط أيقونات: خطّ ‎icomoon‎ معرَّف
   ‎font-display: block‎ فتبقى الأيقونة فراغاً حتى يصل الخطّ، والقائمة قد تُفتح قبل ذلك.
   بهذه الطريقة: صفر طلبات شبكة، وظهور فوري، ولا قفز في التخطيط.

   اللون ‎#d94070‎ وهو وردي الهوية المستعمل في التمييز عبر الثيم — أغمق من ‎#ffa6a8‎
   بما يكفي ليُقرأ على الأبيض (تباين 4.6:1) بدل أن يبهت. */

.header-links .user-dropdown ul a.ico-account,
.header-links .user-dropdown ul a.ico-logout,
.header-links .user-dropdown ul a.ico-register,
.header-links .user-dropdown ul a.ico-login {
  display: flex;
  align-items: center;
  gap: 9px;
}

.header-links .user-dropdown ul a.ico-account::before,
.header-links .user-dropdown ul a.ico-logout::before,
.header-links .user-dropdown ul a.ico-register::before,
.header-links .user-dropdown ul a.ico-login::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* حسابي — شخص */
.header-links .user-dropdown ul a.ico-account::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d94070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* تسجيل الخروج — سهم يخرج من الباب */
.header-links .user-dropdown ul a.ico-logout::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d94070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* حساب جديد — شخص مع علامة زائد */
.header-links .user-dropdown ul a.ico-register::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d94070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' y1='8' x2='19' y2='14'/%3E%3Cline x1='22' y1='11' x2='16' y2='11'/%3E%3C/svg%3E");
}

/* تسجيل الدخول — سهم يدخل إلى الباب */
.header-links .user-dropdown ul a.ico-login::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d94070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
}



/* ===========================================================================
   حالات الفراغ (المفضّلة / السلة / المقارنة)  —  2026-08-06
   ---------------------------------------------------------------------------
   ‎.no-data‎ في الثيم مجرّد ‎margin: 25px 0 0‎ — أي سطر نصّ وحيد وسط صفحة بيضاء.
   العميل يقرؤه ولا يجد أي طريق للأمام فيضغط «رجوع».

   البطاقة هنا تعطيه الثلاثة معاً: أيقونة تشرح الحال بلا قراءة، وسطر يوضّح الفائدة،
   وزرّ يعيده للتسوّق.

   البادئة ‎.wishlist-page‎/‎.shopping-cart-page‎ ليست تجميلاً: قاعدتا الثيم
   (‎beautyShop.rtl.css:4598‎ و6136) مكتوبتان بهما، وهذا الملف يُحمَّل **قبل** الثيم،
   فبدونهما تخسر قواعدي هامش الثيم. */

.wishlist-page .no-data.empty-state,
.shopping-cart-page .no-data.empty-state,
.compare-products-page .no-data.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 460px;
  margin: 30px auto 40px;
  padding: 38px 24px 34px;
  background: #fff;
  border: 1px solid #f3e8ed;
  border-radius: 16px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, .05);
  text-align: center;
}

.empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 0 14px;
  border-radius: 50%;
  background: #fff2f5;
  color: #d94070;
}

.empty-state-icon svg {
  width: 34px;
  height: 34px;
  display: block;
}

/* ‎!important‎ على حجم الخطّ وحده: ملف الألوان المُولَّد ‎beautyShopcustom_*.css‎ يفرض
   ‎p { font-size: 16px !important }‎ على كل فقرة في المتجر، ولا يُتجاوز إلا بمثله. */
.empty-state-title {
  margin: 0 0 6px;
  font-size: 17px !important;
  font-weight: 700;
  color: #3a3540;
  line-height: 1.6;
}

.empty-state-hint {
  margin: 0 0 20px;
  font-size: 13.5px !important;
  font-weight: 400;
  color: #8a8f98;
  line-height: 1.8;
  max-width: 330px;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  transition: filter .15s ease, transform .15s ease;
}

.empty-state-btn:hover,
.empty-state-btn:focus-visible {
  filter: brightness(.94);
  transform: translateY(-1px);
  color: #fff !important;
}

@media (max-width: 575px) {
  .wishlist-page .no-data.empty-state,
  .shopping-cart-page .no-data.empty-state,
  .compare-products-page .no-data.empty-state {
    margin: 20px 12px 30px;
    padding: 30px 18px 26px;
  }

  .empty-state-icon {
    width: 66px;
    height: 66px;
  }

  .empty-state-icon svg {
    width: 30px;
    height: 30px;
  }
}

/* سلة الترويسة المنسدلة حين تكون فارغة — نفس اللغة بحجم أصغر */
.flyout-cart .no-data,
.flyout-cart .count:only-child {
  padding: 22px 16px;
  text-align: center;
  color: #8a8f98;
  font-size: 13.5px;
  line-height: 1.8;
}


/* ═══════════════════════════════════════════════════════════════
   شبكات تواصل إضافية في الفوتر: سناب شات، بنترست، تمبلر، لينكدإن
   ═══════════════════════════════════════════════════════════════

   الشكل الأساسي (دائرة 44px، حدّ وردي، أيقونة 18px) يرثه الزر من
   ‎.footer-social-link‎ في ‎beautyShop.rtl.css‎ — هنا لون العلامة عند التحويم فقط.

   ⚠ المحدِّد يمرّ بـ‎.social‎ عمداً.
   ‎beautyShop-extra.css‎ يُسجَّل بـ‎Insert(0, …)‎ فيُطبع **أولاً** في الترويسة، أي أنه
   أدنى أولوية عند تساوي التخصيص. والقاعدة العامّة في الثيم
   ‎.footer-follow-us .footer-social-link:hover‎ تخصيصها (0,3,0) وتفرض ‎color:#fff‎؛
   فلو كتبنا ‎.footer-follow-us .footer-social-link--snapchat:hover‎ (0,3,0 أيضاً)
   لخسرت، ولبقيت أيقونة سناب شات بيضاء على أصفر — أي غير مرئية عملياً.
   إضافة ‎.social‎ ترفع التخصيص إلى (0,4,0) فتفوز بلا ‎!important‎. */

.footer-follow-us .social .footer-social-link--snapchat:hover,
.footer-follow-us .social .footer-social-link--snapchat:focus {
  background: #fffc00;
  border-color: transparent;
  /* الشبح الأبيض على الأصفر الرسمي يعطي 1.1:1 — غير مقروء إطلاقاً.
     الأسود هو ما تستخدمه سناب شات نفسها، ويعطي هنا 18.6:1. */
  color: #101010;
  box-shadow: 0 8px 20px rgba(255, 252, 0, 0.25);
}

.footer-follow-us .social .footer-social-link--pinterest:hover,
.footer-follow-us .social .footer-social-link--pinterest:focus {
  background: #bd081c;
  border-color: transparent;
}

.footer-follow-us .social .footer-social-link--tumblr:hover,
.footer-follow-us .social .footer-social-link--tumblr:focus {
  background: #36465d;
  border-color: transparent;
}

.footer-follow-us .social .footer-social-link--linkedin:hover,
.footer-follow-us .social .footer-social-link--linkedin:focus {
  background: #0a66c2;
  border-color: transparent;
}

.footer-follow-us .social .footer-social-link--reddit:hover,
.footer-follow-us .social .footer-social-link--reddit:focus {
  background: #ff4500;
  border-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   أيقونة قائمة الجوال — نفس شبكة المربّعات المستخدَمة في زر «جميع الأقسام»
   ═══════════════════════════════════════════════════════════════

   الوسم يبقى كما هو: ‎<i class="icon icon-navigation">‎.
   السبب ليس كسلاً — المعالِج الذي يفتح القائمة مربوط بـ‎$(".header-logo .icon")‎
   في ‎MegaMenu/Default.cshtml‎، فاستبدال الوسم بـ‎<svg>‎ كان سيُسقط صنف ‎icon‎
   ويُعطّل زرّ القائمة بالكامل على الجوال. التبديل هنا بصريّ فقط.

   ‎mask‎ لا ‎background-image‎: القناع يُلوَّن بـ‎background: currentColor‎ فيتبع
   لون الترويسة تلقائياً — أياً كان الثيم أو حالة التحويم — بينما صورة الخلفية
   تُجمّد اللون داخل الملف فتنكسر لو تغيّر لون الترويسة لاحقاً.

   النطاق ‎.header .header-logo‎ مقصود: نفس الصنف ‎icon-navigation‎ مستعمل أيضاً
   في زرّ فرز الكاتلوج (‎_CatalogSelectors.cshtml‎) ولا يجوز أن يتغيّر معه. */

.header .header-logo i.icon.icon-navigation {
  width: 24px;
  height: 24px;
  /* الخطّ الأيقوني لم يعد مصدر الشكل، فنُلغي أثره على القياس */
  font-size: 0;
  line-height: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 0 25 25' fill='none'%3E%3Cpath d='M19 3.32001H16C14.8954 3.32001 14 4.21544 14 5.32001V8.32001C14 9.42458 14.8954 10.32 16 10.32H19C20.1046 10.32 21 9.42458 21 8.32001V5.32001C21 4.21544 20.1046 3.32001 19 3.32001Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.32001H5C3.89543 3.32001 3 4.21544 3 5.32001V8.32001C3 9.42458 3.89543 10.32 5 10.32H8C9.10457 10.32 10 9.42458 10 8.32001V5.32001C10 4.21544 9.10457 3.32001 8 3.32001Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 14.32H16C14.8954 14.32 14 15.2154 14 16.32V19.32C14 20.4246 14.8954 21.32 16 21.32H19C20.1046 21.32 21 20.4246 21 19.32V16.32C21 15.2154 20.1046 14.32 19 14.32Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 14.32H5C3.89543 14.32 3 15.2154 3 16.32V19.32C3 20.4246 3.89543 21.32 5 21.32H8C9.10457 21.32 10 20.4246 10 19.32V16.32C10 15.2154 9.10457 14.32 8 14.32Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 0 25 25' fill='none'%3E%3Cpath d='M19 3.32001H16C14.8954 3.32001 14 4.21544 14 5.32001V8.32001C14 9.42458 14.8954 10.32 16 10.32H19C20.1046 10.32 21 9.42458 21 8.32001V5.32001C21 4.21544 20.1046 3.32001 19 3.32001Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.32001H5C3.89543 3.32001 3 4.21544 3 5.32001V8.32001C3 9.42458 3.89543 10.32 5 10.32H8C9.10457 10.32 10 9.42458 10 8.32001V5.32001C10 4.21544 9.10457 3.32001 8 3.32001Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 14.32H16C14.8954 14.32 14 15.2154 14 16.32V19.32C14 20.4246 14.8954 21.32 16 21.32H19C20.1046 21.32 21 20.4246 21 19.32V16.32C21 15.2154 20.1046 14.32 19 14.32Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 14.32H5C3.89543 14.32 3 15.2154 3 16.32V19.32C3 20.4246 3.89543 21.32 5 21.32H8C9.10457 21.32 10 20.4246 10 19.32V16.32C10 15.2154 9.10457 14.32 8 14.32Z' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

  /* محرف الخطّ الأيقوني كان يرسم الشكل القديم — يُلغى وإلا ظهر فوق القناع */
  .header .header-logo i.icon.icon-navigation::before {
    content: "";
    display: none;
  }