/* ═══════════════════════════════════════════════════════════════════
   LOCA — حاسبة المقاسات  |  تبويب CSS
   ───────────────────────────────────────────────────────────────────
   ⚠️ هذا البلوك يُضاف لِما هو موجود عندك — لا يستبدله.
      الصقه في نهاية تبويب CSS المخصص، تحت أي كود حالي.
      (ما أقدر أقرأ كودك الحالي: تبويب الكود المخصص غير متاح عبر
       واجهة سلة البرمجية، فتأكد بنفسك أنك ما مسحت شيئًا.)

   الثيم: سيليا — نفس ثيم ماقلا، فالمحدِّدات تنطبق كما هي.
   البادئة loca- ولازم تتطابق مع ملف الـ JS. لا تغيّر واحدة دون الثانية.
   ═══════════════════════════════════════════════════════════════════ */


/* ── خط حرير (اختياري) ─────────────────────────────────────────────
   الحاسبة تشتغل بخط الثيم إذا تركت هذا معلّقًا — بس بخط حرير تصير
   على هوية لوكا.

   كيف تفعّله بدون رفع أي ملف:
     افتح بلوك HTML الخاص بشبكة أقسام ماقلا عندك، وانسخ منه أول
     قاعدتَي @font-face كاملتين (الاثنتان تبدآن بـ
     @font-face{font-family:'Harir-MG' … base64 … }) والصقهما هنا
     مكان هذا التعليق — حرفيًا، بلا أي تعديل.

   ليش بلا تعديل: الخط هناك مسمّى 'Harir-MG'، وأنا ضبطت المتغيّر
   --loca-font تحت على نفس الاسم. فالنسخ واللصق يكفي.
   وليش base64 أصلًا: عشان ما يمر بمدير الملفات ولا يعتمد على رابط
   يقدر ينكسر — الملف مكتفٍ بذاته.
*/


:root {
  --loca-primary: #000000;        /* أسود لوكا */
  --loca-accent:  #000000;        /* أحادي اللون */
  --loca-bg:      #ffffff;
  --loca-soft:    #f7f5f3;        /* لوحات بيضاء مائلة */
  --loca-text:    #111111;
  --loca-muted:   #8a8a8a;
  --loca-rule:    #c9c9c9;
  --loca-radius:  14px;
  --loca-pad:     24px;           /* مصدر واحد للحشو الجانبي */

  /* حرير للعربي. حرير ما فيه محارف لاتينية، فاللاتيني (S/M/L…)
     ينزل تلقائيًا للخط الثاني — وهذا مقصود. */
  --loca-font:    'Harir-MG', 'Helvetica Neue', Arial, sans-serif;
  --loca-latin:   'Helvetica Neue', Arial, sans-serif;
}


/* ── زر فتح الحاسبة ────────────────────────────────────────────────
   يُحقن داخل صف عنوان "المقاسات" (شوف الـ JS). box-sizing مكتوب هنا
   لأن هذا الزر يعيش خارج .loca-drawer فما توصله قاعدة الدرج العامة. */
.loca-size-btn {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 12px 0; padding: 14px 18px;
  background: var(--loca-primary); color: #fff;
  border: 1.5px solid var(--loca-primary); border-radius: 999px;
  font-family: var(--loca-font); font-size: 15px; font-weight: 700;
  line-height: 1.2; text-align: center;
  cursor: pointer; transition: background .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;   /* لا وميض رمادي على iOS */
}
/* ينعكس عند المرور. لأجهزة المؤشّر فقط: على اللمس :hover يعلق بعد
   النقر ويترك الزر عالقًا في الحالة المعكوسة. */
@media (hover: hover) {
  .loca-size-btn:hover { background: #fff; color: var(--loca-primary); }
}
.loca-size-btn:active { opacity: .9; }
.loca-size-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

@media (max-width: 480px) {
  .loca-size-btn { padding: 15px 16px; font-size: 15px; margin: 10px 0; }
  .loca-size-btn svg { width: 17px; height: 17px; }
}


/* ── الطبقة السوداء والدرج ─────────────────────────────────────────
   ملاحظة z-index: المتجر الحي فيه ودجات طرف ثالث مثبّتة على أقصى
   قيمة ممكنة (2147483647) — شارة تقييم Google تجلس هناك. عند قيمة
   أقل كانت ترتسم فوق الدرج وتغطي أسفله. الدرج الآن يساوي السقف؛
   ولأنه يُضاف أخيرًا فهو يكسب التعادل. والشارة تُخفى أثناء فتح الدرج
   (شوف .loca-drawer-open) عشان ما يطفو شيء فوق اللوحة على الجوال. */
.loca-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  z-index: 2147483646;
}
.loca-overlay.open { opacity: 1; pointer-events: auto; }

/* أثناء فتح الدرج: جمّد الصفحة خلفه وأبعد الشارات العائمة.
   الاثنان يرجعان عند الإغلاق. */
html.loca-drawer-open, body.loca-drawer-open { overflow: hidden; }
body.loca-drawer-open #___ratingbadge_0,
body.loca-drawer-open #___ratingbadge_1,
body.loca-drawer-open .wa-selia { display: none !important; }

/* كل صندوق داخل الودجت يُقاس من حد لحد، فما يقدر شيء يوسّع الدرج
   أكثر من نفسه. بدونها حقول الأرقام تفيض ويضيف المتصفح شريط تمرير
   أفقي. */
.loca-drawer, .loca-drawer * { box-sizing: border-box; }

.loca-drawer {
  position: fixed; top: 0; bottom: 0; right: -420px; width: 400px; max-width: 92vw;
  background: var(--loca-bg); z-index: 2147483647; direction: rtl;
  font-family: var(--loca-font); color: var(--loca-text);
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
  transition: right .3s cubic-bezier(.25,.8,.25,1);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;   /* يقتل الشريط الأفقي */
}
.loca-drawer.open { right: 0; }

.loca-dh {
  padding: 22px var(--loca-pad) 18px; background: var(--loca-soft);
  border-bottom: 1px solid #ece8e3; position: relative;
}
.loca-dh h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--loca-primary); }
.loca-dh p  { margin: 0; font-size: 13px; color: var(--loca-muted); }
.loca-close {
  position: absolute; top: 16px; left: 16px; width: 32px; height: 32px;
  border: none; background: transparent; font-size: 20px; cursor: pointer; color: var(--loca-muted);
}

.loca-body { padding: 20px var(--loca-pad); flex: 1; min-width: 0; }

/* مكدّس لا صف: أسماء الفساتين طويلة، وبالصف تجبر الدرج يتوسّع. */
.loca-product-tag {
  background: var(--loca-soft); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px; min-width: 0;
}
.loca-product-tag span {
  display: block; font-size: 11.5px; color: var(--loca-muted); margin-bottom: 3px;
}
.loca-product-tag b {
  display: block; color: var(--loca-primary); font-size: 13.5px; line-height: 1.5;
  overflow-wrap: anywhere;            /* الأسماء الطويلة تلتف ولا تفيض */
}

.loca-guide {
  display: flex; gap: 14px; align-items: center;
  background: var(--loca-soft); border-radius: var(--loca-radius);
  padding: 16px; margin-bottom: 18px;
}
.loca-diagram { flex: 0 0 84px; width: 84px; height: auto; display: block; }

.loca-guide-item { margin-bottom: 10px; }
.loca-guide-item:last-child { margin-bottom: 0; }
.loca-guide-item b {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--loca-primary);
}

/* دائرة الترقيم. ثلاثة أشياء تثبّت الرقم في المنتصف تمامًا:
   - خط لاتيني (أرقام حرير تجلس عاليًا في صندوق الـ em وكانت تدفع
     "1" و"2" لأعلى يمين الدائرة)
   - line-height مساوٍ لارتفاع الدائرة
   - vertical-align: middle حتى لا ترتفع الدائرة فوق خط الصدر/الخصر */
.loca-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--loca-accent); color: #fff;
  font-family: var(--loca-latin);
  font-size: 12px; font-weight: 700;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  flex: 0 0 auto;
}

/* الوصف تحت الصدر/الخصر — ابن مباشر فقط، حتى لا تطول القاعدة رقم
   .loca-num المتداخل داخل الـ <b>. */
.loca-guide-item > span {
  display: block; font-size: 12px; color: var(--loca-primary);
  font-weight: 400; margin-top: 2px;
}

/* عنوان قسم الحقول — inline-block عشان الخط السفلي يحضن عرض النص */
.loca-fields-header {
  display: inline-block;
  font-size: 13px; font-weight: 700; color: var(--loca-text);
  margin: 0 0 12px; padding-bottom: 6px;
  border-bottom: 1px solid #d9d9d9;
}

.loca-fields { display: flex; gap: 12px; margin-bottom: 16px; }
/* min-width:0 يخلي الحقلين يتشاركان الصف فعلًا بدل ما يصرّ كل واحد
   على عرضه الطبيعي ويتجاوز حافة الدرج */
.loca-field { flex: 1 1 0; min-width: 0; }
.loca-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.loca-field label i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--loca-accent); margin-left: 4px; font-style: normal;
}
.loca-field .wrap {
  display: flex; align-items: center; border: 1.5px solid #e2e2e2;
  border-radius: 10px; padding: 0 12px; transition: border-color .15s;
  min-width: 0;
}
.loca-field .wrap:focus-within { border-color: var(--loca-primary); }
.loca-field input {
  flex: 1 1 0; min-width: 0; width: 100%;
  border: none; outline: none; padding: 12px 4px;
  font-family: var(--loca-font); font-size: 15px; background: transparent; text-align: right;
  -moz-appearance: textfield;          /* إزالة سهمَي فايرفوكس */
}
/* إزالة أسهم WebKit — تضيف عرضًا ميتًا وشكلها أخرق */
.loca-field input::-webkit-outer-spin-button,
.loca-field input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.loca-field .unit { font-size: 12px; color: var(--loca-muted); }

.loca-calc {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  background: var(--loca-primary); color: #fff;
  font-family: var(--loca-font); font-size: 16px; font-weight: 800; cursor: pointer;
  transition: opacity .15s;
}
.loca-calc:hover { opacity: .88; }


/* ── بطاقة النتيجة ─────────────────────────────────────────────────
   لوحة سوداء داخل الدرج الأبيض: حرف المقاس بخط لاتيني خفيف، فاصل
   رمادي، وتلميح المقاس التالي. */
.loca-result {
  display: none; margin-top: 18px; text-align: center;
  background: #000; color: #fff;
  border-radius: var(--loca-radius);
  padding: 32px 20px 28px;
}
.loca-result.show { display: block; animation: locaFade .35s ease; }
@keyframes locaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.loca-result .size-big {
  font-family: var(--loca-latin);
  font-size: 84px; font-weight: 300; line-height: 1;
  letter-spacing: .01em; color: #fff;
  margin: 0 0 26px;
}
.loca-result .main {
  font-size: 15px; font-weight: 400; margin: 0 0 18px; color: #fff;
}
.loca-result .divider {
  width: 62%; height: 1px; background: #8a8a8a;
  border: none; margin: 0 auto 18px;
}
.loca-result .hint { font-size: 14px; color: #fff; margin: 0; }
.loca-result .hint .nx { font-family: var(--loca-latin); }

/* عند الضغط على "احسبي" بلا قياسات — نبقى داخل البطاقة السوداء */
.loca-result .prompt { font-size: 14px; color: #fff; margin: 0; padding: 8px 0; }

/* ملاحظة القَصّة / اختلاف الصدر: لوحة أفتح داخل البطاقة السوداء */
.loca-result .fitnote {
  margin: 18px 0 0; padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: 13px; color: #fff; text-align: right;
}
/* خارج النطاق */
.loca-result .oor {
  margin: 0; padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,.08);
  font-size: 13px; color: #fff; text-align: right; line-height: 1.7;
}
.loca-result .oor b { font-family: var(--loca-latin); }


/* ── جدول المقاسات ─────────────────────────────────────────────── */
.loca-chart-toggle {
  display: block; width: 100%; margin-top: 18px; padding: 12px;
  background: none; border: 1px dashed #ddd; border-radius: 10px;
  font-family: var(--loca-font); font-size: 13px; cursor: pointer; color: var(--loca-text);
}
.loca-chart-wrap { display: none; margin-top: 10px; }
.loca-chart-wrap.show { display: block; }
.loca-chart-wrap table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.loca-chart-wrap th, .loca-chart-wrap td {
  border: 1px solid #eee; padding: 8px 6px; text-align: center;
}
.loca-chart-wrap th { background: var(--loca-soft); font-weight: 700; }
/* صف "المقاسات بالإنش": أخف وأصغر */
.loca-chart-wrap tr.units-row th {
  background: transparent; font-weight: 400; font-size: 11px;
  color: var(--loca-muted); padding: 4px 6px; border: none; border-bottom: 1px solid #eee;
}


/* ── التذييل ───────────────────────────────────────────────────── */
.loca-foot { padding: 14px var(--loca-pad) 22px; border-top: 1px solid #f0f0f0; }

/* زر الحفظ والخصوصية على صف واحد.
   في RTL أول ابن يظهر يمينًا — فالخصوصية أولًا عشان 🔒 يمين
   وزر الحفظ الصغير يسار. */
.loca-save-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.loca-save {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--loca-primary); background: #fff;
  font-family: var(--loca-font); font-size: 12.5px; font-weight: 700;
  color: var(--loca-primary); white-space: nowrap;
  transition: background .15s, color .15s;
}
.loca-save:hover { background: var(--loca-primary); color: #fff; }
.loca-privacy {
  margin: 0; font-size: 11.5px; color: var(--loca-muted); text-align: right;
}

.loca-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding: 11px; border-radius: 10px; text-decoration: none;
  background: #eafff1; color: #1c7c45; font-size: 13.5px; font-weight: 700;
}

@media (max-width: 480px) {
  /* ⚠️ إصلاح خطأ موروث من نسخة ماقلا: القاعدة الأصلية تكتب
     width:100vw فقط، لكن القاعدة الأساسية فوقها فيها max-width:92vw —
     والـ max-width يغلب الـ width دائمًا. فالنتيجة أن الدرج على
     الجوال كان يطلع 92vw لا 100vw، ويترك شريحة ٨٪ من الصفحة مكشوفة
     على الحافة. قِيس: 359px بدل 390px على شاشة 390.
     لازم يُلغى max-width هنا أيضًا. */
  .loca-drawer { width: 100vw; max-width: 100vw; right: -100vw; }
}


/* ═══════════════════════════════════════════════════════════════════
   موضع الزر على صف عنوان "المقاسات" (الجوال)
   ───────────────────────────────────────────────────────────────────
   الـ JS يحقن الزر شقيقًا تاليًا لعنوان الخيار، وهذا البلوك يحوّل
   .s-product-options-option لصف flex ملتف:

       المقاسات *  اختر            [ اعرفي مقاسك ]
       [ S ][ M ][ L ][ XL ][ XXL ]

   العنوان والزر يتشاركان السطر الأول؛ وإجبار صندوق المحتوى على
   flex-basis 100% يدفع الشرائح لسطر خاص بعرض كامل، فتاخذ العمود كله
   بدل ما تتقاسمه مع الزر.

   ⚠️ هذا البلوك مطلوب — بدونه الزر يقع في مكان غلط على الجوال.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px){
  body.product-single .s-product-options-option{
    display:flex !important; flex-wrap:wrap !important; align-items:center !important;
    column-gap:10px !important; row-gap:8px !important; }

  body.product-single .s-product-options-option > .s-product-options-option-label{
    flex:1 1 auto !important; min-width:0 !important; margin:0 !important; }

  body.product-single .s-product-options-option > .loca-size-btn{
    flex:0 0 auto !important; width:auto !important; margin:0 !important;
    padding:8px 12px !important; font-size:12.5px !important;
    white-space:nowrap !important; gap:6px !important; }

  /* أيقونة المسطرة تبقى — فيه مساحة على سطر العنوان */
  body.product-single .s-product-options-option > .loca-size-btn svg{
    display:block !important; width:15px !important; height:15px !important; }

  /* سطر كامل خاص بالشرائح */
  body.product-single .s-product-options-option > .s-product-options-option-content{
    flex:0 0 100% !important; width:100% !important; }

  /* الشرائح: صف واحد دائمًا. flex:1 1 0 يخليها متساوية وتتقاسم
     العمود كامل، و nowrap يمنع أي مقاس من بدء سطر ثانٍ.
     min-width:0 على الـ span أساسي — بدونه الشريحة ترفض تصغر تحت
     عرض نصّها فيفيض الصف عن العمود.
     لوكا عندها ٥ مقاسات فقط، فالصف مريح. */
  body.product-single .s-product-options-option-content > .s-product-options-grid-mode{
    flex-wrap:nowrap !important; gap:6px !important; }
  body.product-single .s-product-options-option-content > .s-product-options-grid-mode > label{
    flex:1 1 0 !important; min-width:0 !important; }
  body.product-single .s-product-options-option-content .s-product-options-grid-mode-span{
    /* box-sizing صريح: مع width:100% + حشو جانبي، أي شريحة بلا
       border-box تحسب الحشو فوق الـ100% فيفيض الصف. سيليا يضبطها
       عالميًا، لكن الاعتماد على ذلك هشّ — سطر واحد يحصّنها. */
    box-sizing:border-box !important;
    width:100% !important; min-width:0 !important; text-align:center !important;
    padding-left:2px !important; padding-right:2px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   إصلاح قفزة التصميم — شارة تقييمات جوجل
   ───────────────────────────────────────────────────────────────────
   سبب ٠.٣٦٤ من أصل ٠.٣٦٥ في مقياس CLS (تقرير PageSpeed ٢٨ يوليو ٢٠٢٦).
   سكربت جوجل يحقن هذه العناصر داخل تدفّق الصفحة أولًا ثم يحوّلها إلى
   position:fixed — واللحظة بين الحالتين تزحلق كل ما تحتها.
   هذه القاعدة تجعلها خارج التدفّق من أول لحظة، فتختفي الزحلقة.
   وضع الشارة النهائي على الشاشة لا يتغيّر إطلاقًا.
   ═══════════════════════════════════════════════════════════════════ */
body > div[id^="___ratingbadge"]{
  position: fixed !important;
  contain: layout style;
}

/* ═══════════════════════════════════════════════════════════════════
   لوكا — صفحة «تقديم طلب استبدال واسترجاع»
   محصور بالكلاس .lcr فلا يؤثر على أي صفحة أخرى.
   الحقول والزر يبنيها كود JavaScript في لوحة «تخصيص باستخدام JavaScript»،
   لأن سلة تحذف form/input/select/button من محتوى الصفحة.
   ═══════════════════════════════════════════════════════════════════ */
.lcr{
  --ink:#050505; --dim:#6B6B72; --line:rgba(0,0,0,.12); --bg:#FFFFFF;
  --soft:#F7F7F9; --err:#B91C1C;
  direction:rtl; color:var(--ink); font-size:15px; line-height:1.75;
}
.lcr *{ box-sizing:border-box; }
.lcr__in{ max-width:640px; margin-inline:auto; padding:clamp(18px,4vw,32px) 10px; }
.lcr__head{ text-align:center; margin-bottom:clamp(20px,4vw,30px); }
.lcr__head h2{ margin:0 0 8px; font-size:clamp(1.15rem,4vw,1.5rem); font-weight:700; line-height:1.4; }
.lcr__head p{ margin:0; color:var(--dim); font-size:clamp(.8rem,2.6vw,.9375rem); }

/* نوع الطلب */
.lcr__type{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.lcr__type label{ position:relative; display:block; cursor:pointer; margin:0; }
.lcr__type input{ position:absolute; opacity:0; pointer-events:none; }
.lcr__type span{ display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 10px; border:1.5px solid var(--line); border-radius:12px; background:var(--bg);
  font-weight:600; font-size:14.5px; text-align:center;
  transition:border-color .25s ease, background .25s ease; }
.lcr__type span small{ font-weight:400; font-size:11.5px; color:var(--dim); }
.lcr__type input:checked + span{ border-color:var(--ink); background:var(--soft); }

/* الحقول */
.lcr__f{ margin-bottom:15px; }
.lcr__f label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.lcr__f label i{ font-style:normal; color:var(--err); }
.lcr__f input, .lcr__f select, .lcr__f textarea{
  width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--ink); font:inherit; font-size:15px;
  transition:border-color .25s ease; }
.lcr__f textarea{ min-height:88px; resize:vertical; }
.lcr__f input:focus, .lcr__f select:focus, .lcr__f textarea:focus{ outline:none; border-color:var(--ink); }
.lcr__f small{ display:block; margin-top:5px; font-size:11.5px; color:var(--dim); }
.lcr__f.is-bad input, .lcr__f.is-bad select, .lcr__f.is-bad textarea{ border-color:var(--err); }
.lcr__err{ display:none; margin-top:5px; font-size:12px; color:var(--err); }
.lcr__f.is-bad .lcr__err{ display:block; }

/* الزر */
.lcr__send{ width:100%; margin-top:6px; padding:15px; border:0; border-radius:12px;
  background:var(--ink); color:#fff; font:inherit; font-size:16px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:9px; }
.lcr__send:hover{ opacity:.88; }
.lcr__hint{ margin:10px 0 0; text-align:center; font-size:12px; color:var(--dim); }

/* الشروط */
.lcr__terms{ margin-top:clamp(24px,5vw,36px); border-top:1px solid var(--line); padding-top:clamp(18px,4vw,26px); }
.lcr__terms h3{ margin:0 0 14px; font-size:15px; font-weight:700; }
.lcr__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.lcr__card{ border:1px solid var(--line); border-radius:12px; padding:13px 14px; background:var(--soft); }
.lcr__card b{ display:block; font-size:13.5px; margin-bottom:3px; }
.lcr__card span{ display:block; font-size:12.5px; color:var(--dim); line-height:1.65; }
.lcr__card em{ display:block; font-style:normal; font-size:13px; font-weight:700; margin-top:5px; }
.lcr__list{ margin:0; padding-inline-start:18px; }
.lcr__list li{ font-size:13px; color:var(--dim); margin-bottom:7px; line-height:1.7; }
.lcr__note{ margin-top:14px; padding:12px 14px; border-radius:10px;
  background:var(--soft); border:1px solid var(--line); font-size:12.5px; line-height:1.7; }

@media (max-width:420px){ .lcr__grid{ grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════════
   لوكا — تنسيق أسفل الصفحة (الفوتر) — نسخة ٢
   ───────────────────────────────────────────────────────────────────
   بنية مليحة: شعار وجملة جنب بعض، بطاقة توثيق عريضة، شهادات في صف
   بأيقونة فوق الرقم، وروابط كمربعات بأيقونة فوق النص.
   الأيقونات SVG مضمّنة داخل الـCSS — صفر طلبات شبكة.
   تنسيق بحت: لا يضيف ولا يحذف عنصرًا. التراجع = حذف هذه الكتلة.
   ═══════════════════════════════════════════════════════════════════ */
.store-footer{
  --lcf-ink:#111111; --lcf-dim:#6B6B72; --lcf-line:rgba(0,0,0,.11);
  --lcf-card:#FFFFFF; --lcf-r:14px;
}

/* ── ترتيب الفوتر على الجوال واللوحي ────────────────────────
   ترتيب الثيم الأصلي: الشعار ← الجملة ← الشهادات ← منصة الأعمال.
   المطلوب: الشعار والجملة ← منصة الأعمال عريضة ← الشهادات جنب بعض.
   الشهادات مدفونة داخل عمود العلامة وبطاقة منصة الأعمال خارجه، فنفكّ
   العمود بـ display:contents ليصير أبناؤه إخوةً لبطاقة منصة الأعمال،
   ثم نرتّب الكل بـ order. سطح المكتب يبقى على تخطيط الثيم كما هو. */
@media (max-width:1023px){
  .store-footer .store-footer__inner > .container{
    display:flex !important; flex-wrap:wrap; align-items:center;
    gap:12px 14px;
  }
  .store-footer [data-selia="footer-brand-column"]{ display:contents; }

  /* الصف الأول: الجملة يمينًا والشعار يسارًا */
  .store-footer [data-selia="footer-brand-column"] .footer-description{
    order:1; flex:1 1 190px; margin:0 !important; text-align:start;
    font-size:13px; line-height:1.85; color:var(--lcf-dim);
  }
  .store-footer [data-selia="footer-brand-column"] > a{
    order:2; flex:0 0 auto; margin:0 !important;
  }
  .store-footer [data-selia="footer-brand-column"] > p:not(.footer-description){
    order:3; flex:1 1 100%; margin:0;
  }

  /* ثم منصة الأعمال، ثم الشهادات، ثم اللغة/العملة، ثم الروابط */
  .store-footer [data-selia="footer-apps-section"]{ order:4; flex:1 1 100%; }
  .store-footer .footer-badges{ order:5; flex:1 1 100%; }
  .store-footer [data-selia="footer-brand-column"] > div:not(.footer-badges){
    order:6; flex:1 1 100%;
  }
  .store-footer [data-selia="footer-links-column"]{ order:7; flex:1 1 100%; }
}

/* ── بطاقة منصة الأعمال — عريضة في الأعلى ──────────────────── */
.store-footer [data-selia="footer-apps-section"]{ max-width:540px; margin:20px auto 10px; }
.store-footer [data-selia="footer-sbc-link"]{
  flex-direction:row !important; justify-content:center; gap:12px;
  padding:14px 16px; background:var(--lcf-card);
  border:1px solid var(--lcf-line); border-radius:var(--lcf-r);
  font-size:13px; font-weight:700; color:var(--lcf-ink);
  transition:border-color .3s ease;
}
.store-footer [data-selia="footer-sbc-link"] img{ width:38px !important; margin:0 !important; }

/* ── الشهادات: صف واحد، أيقونة فوق الرقم ───────────────────── */
.store-footer .footer-badges{
  display:grid !important; grid-template-columns:1fr 1fr; gap:10px;
  max-width:540px; margin:0 auto;
}
.store-footer salla-trust-badges{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 10px; background:var(--lcf-card);
  border:1px solid var(--lcf-line); border-radius:var(--lcf-r); text-align:center;
}
.store-footer .s-trust-badges-image{ width:34px; height:auto; }
.store-footer .s-trust-badges-content{ min-width:0; text-align:center; }
.store-footer .s-trust-badges-label{ margin:0; font-size:11px; color:var(--lcf-dim); line-height:1.5; }
.store-footer .s-trust-badges-number{
  display:block; font-size:12.5px; font-weight:700; color:var(--lcf-ink);
  font-variant-numeric:tabular-nums; direction:ltr;
}

/* ── الروابط: مربعات بأيقونة فوق النص ──────────────────────── */
.store-footer [data-selia="footer-links-column"] h3{
  text-align:center; font-size:14.5px; font-weight:700; color:var(--lcf-ink); margin-bottom:14px;
}
.store-footer .footer-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:9px;
  max-width:540px; margin-inline:auto;
}
.store-footer .footer-list li{ margin:0; }
.store-footer .footer-list li a{
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; height:100%; min-height:86px;
  margin:0 !important; padding:14px 9px;
  background:var(--lcf-card); border:1px solid var(--lcf-line); border-radius:var(--lcf-r);
  font-size:12px !important; line-height:1.5 !important; font-weight:600; color:var(--lcf-ink);
  transition:border-color .3s ease, transform .3s ease;
}
.store-footer .footer-list li a::before{
  content:""; display:block; width:24px; height:24px; flex:none;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5h8L19 8v12.5H6.5z'/><path d='M14 3.5V8h4.5'/><path d='M9.5 12.5h6M9.5 16h4'/></svg>");
  opacity:.85;
}
.store-footer .footer-list li a[href*="/blog"]::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.5h11M4 10h11M4 14.5h7'/><path d='M17.5 13.5l3 3-3.5 1.5.5-4.5z'/></svg>"); }
.store-footer .footer-list li a[href*="page-233194910"]::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10a8 8 0 0113.7-5.7L20 6.5'/><path d='M20 3v3.5h-3.5'/><path d='M20 14a8 8 0 01-13.7 5.7L4 17.5'/><path d='M4 21v-3.5h3.5'/></svg>"); }
.store-footer .footer-list li a[href*="page-1270613206"]::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.2l7 2.8v5.6c0 4-2.9 7.6-7 9-4.1-1.4-7-5-7-9V6l7-2.8z'/><path d='M9 12.2l2 2 4-4.2'/></svg>"); }
.store-footer .footer-list li a[href*="page-630793175"]::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 3.5h8L19 8v12.5H6.5z'/><path d='M14 3.5V8h4.5'/><path d='M9.5 12.5h6M9.5 16h4'/></svg>"); }
.store-footer .footer-list li a[href*="page-2003190480"]::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9.5h18v5H3z'/><path d='M7 9.5v2.5M11 9.5v3.5M15 9.5v2.5M19 9.5v3.5'/></svg>"); }
.store-footer .footer-list li a[href*="page-1094934993"]::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><path d='M9.6 9.6c0-1.4 1.1-2.4 2.4-2.4s2.4 1 2.4 2.4c0 1.8-2.4 1.8-2.4 3.6'/><path d='M12 16.6h.01'/></svg>"); }
.store-footer .footer-list li a[href*="page-873894955"]::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 7.5L12 4l7.5 3.5v9L12 20l-7.5-3.5z'/><path d='M4.5 7.5L12 11l7.5-3.5M12 11v9'/></svg>"); }

@media (hover:hover){
  .store-footer .footer-list li a:hover{ border-color:rgba(0,0,0,.34); transform:translateY(-2px); }
  .store-footer [data-selia="footer-sbc-link"]:hover{ border-color:rgba(0,0,0,.34); }
}

/* ── أزرار التواصل في صف ───────────────────────────────────── */
.store-footer .store-footer__contacts-row selia-contacts > div{
  display:grid !important; grid-template-columns:repeat(3,1fr); gap:9px;
  max-width:540px; margin-inline:auto;
}
.store-footer selia-contacts a{
  flex-direction:column !important; gap:6px; justify-content:center;
  padding:13px 6px; background:var(--lcf-card);
  border:1px solid var(--lcf-line); border-radius:var(--lcf-r);
  font-size:11.5px; font-weight:600; color:var(--lcf-ink);
  transition:border-color .3s ease; text-align:center;
}
.store-footer selia-contacts a i{ margin:0 !important; font-size:19px; }
@media (hover:hover){ .store-footer selia-contacts a:hover{ border-color:rgba(0,0,0,.34); } }

/* ── السوشال دائري ─────────────────────────────────────────── */
.store-footer .s-social-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.store-footer .s-social-link{ margin:0 !important; }
.store-footer .s-social-link a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--lcf-card); border:1px solid var(--lcf-line); color:var(--lcf-ink);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
@media (hover:hover){
  .store-footer .s-social-link a:hover{ background:var(--lcf-ink); color:#fff; border-color:var(--lcf-ink); }
}

/* ── الشريط السفلي ─────────────────────────────────────────── */
.store-footer .footer-bottom{ border-top:1px solid var(--lcf-line); }
.store-footer .footer-rights{ font-size:11.5px; color:var(--lcf-dim); }
.store-footer .s-payments-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.store-footer .s-payments-list-item{ margin:0 !important; }

/* ── شاشات أوسع: أربعة مربعات في صف ────────────────────────── */
@media (min-width:640px){
  .store-footer .footer-list{ grid-template-columns:repeat(4,1fr); max-width:760px; }
  .store-footer .footer-badges{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:379px){
  .store-footer .footer-badges{ grid-template-columns:1fr; }
  .store-footer .store-footer__contacts-row selia-contacts > div{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════
   تعديلات ٣٠ يوليو — الشعار بالنص، توحيد المربعات، بطاقة الرقم الضريبي
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1023px){

  /* ١) الشعار في المنتصف بصف مستقل، والجملة تحته */
  .store-footer [data-selia="footer-brand-column"] > a{
    order:1; flex:1 1 100% !important; width:100%;
    justify-content:center !important; margin:0 0 6px !important;
  }
  .store-footer [data-selia="footer-brand-column"] .footer-description{
    order:2; flex:1 1 100% !important;
    text-align:center !important; margin:0 auto 4px !important;
    max-width:330px;
  }

  /* ٢) مربعات الروابط بارتفاع موحّد تمامًا */
  .store-footer [data-selia="footer-link"]{
    min-height:96px !important; height:100% !important;
    display:flex !important; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
    text-align:center; padding:12px 8px !important;
  }
  .store-footer .footer-list > li{ display:flex; }
  .store-footer .footer-list > li > *{ width:100%; }

  /* ٣) لو بقي مربع وحيد في السطر الأخير — يتوسّط */
  .store-footer .footer-list > li:last-child:nth-child(odd){
    grid-column:1 / -1;
    width:calc(50% - 6px); margin-inline:auto;
  }

}


/* ── بطاقة الرقم الضريبي ─────────────────────────────────────
   البنية: .footer-badges > [ salla-trust-badges , .footer-tax ]
   .footer-tax شقيقة للمكوّن لا ابنة له. لا نلمس أبناء المكوّن
   إطلاقًا — هناك يقع شعار السجل التجاري. */
@media (max-width:1023px){
  .store-footer .footer-badges{
    display:grid !important; grid-template-columns:1fr 1fr;
    gap:10px; align-items:stretch;
  }
  .store-footer .footer-badges > salla-trust-badges{
    margin:0 !important;
    display:flex; align-items:center; justify-content:center;
  }
  .store-footer .footer-badges > .footer-tax{
    background:#fff;
    border:1px solid var(--lcf-line, #e8e6e3);
    border-radius:14px; padding:12px 8px; margin:0;
    align-items:center !important; justify-content:center;
  }
}
@media (max-width:379px){
  .store-footer .footer-badges{ grid-template-columns:1fr !important; }
}


/* ── بطاقة منصة الأعمال بنفس ارتفاع بطاقتي الضريبة والسجل ──
   المقيس قبل التعديل: منصة الأعمال ٥٦px، الضريبة والسجل ٧٦px. */
@media (max-width:1023px){
  .store-footer [data-selia="footer-sbc-link"]{
    min-height:76px !important;
    padding:12px 16px !important;
    gap:6px;
  }
  .store-footer [data-selia="footer-sbc-link"] img{
    width:auto !important; max-width:52px; height:auto;
    margin-bottom:2px !important;
  }
}
/* == LOCA 2026-08-06: تصغير زر واتساب + حجز مساحة الصور لتقليل CLS == */
.wa-selia{transform:scale(.68);transform-origin:center;}
@media (max-width:767px){
  .advanced-slider__slide{aspect-ratio:3/4;}
  .advanced-slider__slide .advanced-slider__image{width:100%;height:100%;object-fit:cover;}
}
.details-slider .swiper-slide.magnify-wrapper{aspect-ratio:3/4;}