/* Add custom CSS styles below */ 
/* =========================================
   حركة دخول التصنيفات من اليمين إلى اليسار
   متجر ركن راقي
   ========================================= */

@keyframes ruknCategoriesIn {
    from {
        opacity: 0;
        transform: translateX(70px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* تطبيق الحركة على بطاقات التصنيفات */

.s-block--categories .category-item,
.s-block--categories .swiper-slide,
.s-block--categories .s-category-card {
    opacity: 0;
    animation: ruknCategoriesIn 0.7s ease-out forwards;
}


/* تأخير متدرج للتصنيفات */

.s-block--categories .swiper-slide:nth-child(1),
.s-block--categories .category-item:nth-child(1) {
    animation-delay: 0.1s;
}

.s-block--categories .swiper-slide:nth-child(2),
.s-block--categories .category-item:nth-child(2) {
    animation-delay: 0.2s;
}

.s-block--categories .swiper-slide:nth-child(3),
.s-block--categories .category-item:nth-child(3) {
    animation-delay: 0.3s;
}

.s-block--categories .swiper-slide:nth-child(4),
.s-block--categories .category-item:nth-child(4) {
    animation-delay: 0.4s;
}

.s-block--categories .swiper-slide:nth-child(5),
.s-block--categories .category-item:nth-child(5) {
    animation-delay: 0.5s;
}

.s-block--categories .swiper-slide:nth-child(6),
.s-block--categories .category-item:nth-child(6) {
    animation-delay: 0.6s;
}

.s-block--categories .swiper-slide:nth-child(7),
.s-block--categories .category-item:nth-child(7) {
    animation-delay: 0.7s;
}

.s-block--categories .swiper-slide:nth-child(8),
.s-block--categories .category-item:nth-child(8) {
    animation-delay: 0.8s;
}


/* حركة ناعمة عند المرور */

.s-block--categories .swiper-slide img,
.s-block--categories .category-item img {
    transition: transform 0.4s ease;
}

.s-block--categories .swiper-slide:hover img,
.s-block--categories .category-item:hover img {
    transform: scale(1.03);
}


/* تقليل الحركة لمن يفضل ذلك */

@media (prefers-reduced-motion: reduce) {
    .s-block--categories .category-item,
    .s-block--categories .swiper-slide,
    .s-block--categories .s-category-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}




/* *********************************** */

/* الكود الجديد  */

/* ==========================================================
   ركن راقي — نظام الحركة والتنسيق لكل صفحات المتجر
   يوضع في: تخصيص متقدم ← تخصيص باستخدام CSS
   (ضعه بعد كود الفوتر، أو ادمج الملفين معاً)
   ----------------------------------------------------------
   مبدأ العمل: لا يُخفى أي عنصر إلا بعد أن يضيف الجافاسكربت
   الكلاس rr-ready على وسم html. لو تعطّل السكربت لأي سبب،
   يظهر المتجر كاملاً بشكله الطبيعي.
   ========================================================== */

/* ---------- 1) رموز التصميم ---------- */
#app {
  --rr-gold:    #c38d37;
  --rr-gold-lt: #e2b463;
  --rr-navy:    #0e1d33;
  --rr-navy-lt: #1b3253;

  /* منحنى «التعشيق»: انطلاقة سريعة ثم استقرار حاسم */
  --rr-ease: cubic-bezier(.16, .84, .24, 1);
  --rr-dur:  .58s;
  --rr-rise: 20px;
}

/* ==========================================================
   2) محرك الظهور عند التمرير
   ========================================================== */
html.rr-ready #app [data-rr-reveal] {
  opacity: 0;
  transform: translateY(var(--rr-rise));
  will-change: opacity, transform;
}

html.rr-ready #app [data-rr-reveal].rr-in {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--rr-dur) var(--rr-ease) var(--rr-delay, 0ms),
    transform var(--rr-dur) var(--rr-ease) var(--rr-delay, 0ms);
}

/* الكروت تدخل بانزياح جانبي خفيف — إحساس القطعة الداخلة في مقعدها */
html.rr-ready #app [data-rr-reveal="card"] {
  transform: translateY(16px) scale(.985);
}
html.rr-ready #app [data-rr-reveal="card"].rr-in { transform: none; }

/* بعد اكتمال الحركة نزيل will-change لتخفيف الحمل */
html.rr-ready #app [data-rr-reveal].rr-done { will-change: auto; }

/* ==========================================================
   3) توقيع العناوين: خط قياس هندسي يُرسم
   ========================================================== */
#app .s-block__title .right-side h2,
#app .section-main-title h2,
#app .s-slider-block__title-right h2,
#app .faqs-title h3,
#app .s-block-blog__title {
  position: relative;
}

#app .s-block__title .right-side h2::after,
#app .section-main-title h2::after,
#app .s-slider-block__title-right h2::after,
#app .faqs-title h3::after,
#app .s-block-blog__title::after {
  content: "";
  display: block;
  width: 0;
  height: 7px;
  margin-top: 9px;
  border-top: 1px solid var(--rr-gold);
  border-inline-start: 1px solid var(--rr-gold);
  border-inline-end: 1px solid var(--rr-gold);
  opacity: .9;
  transition: width .75s var(--rr-ease) .18s;
}

/* العناوين الموسّطة يتوسّط خطها */
#app .faqs-title h3::after,
#app .s-block-blog__title::after { margin-inline: auto; }

#app .rr-in .s-block__title .right-side h2::after,
#app .rr-in .section-main-title h2::after,
#app .rr-in .s-slider-block__title-right h2::after,
#app .rr-in .faqs-title h3::after,
#app .rr-in .s-block-blog__title::after,
#app .rr-title-seen::after { width: 46px; }

/* ==========================================================
   4) كروت المنتجات — في كل الصفحات
   ========================================================== */
#app .product-block {
  position: relative;
  transition:
    transform .34s var(--rr-ease),
    box-shadow .34s var(--rr-ease);
}

@media (hover: hover) {
  #app .product-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 34px rgba(14, 29, 51, .16);
  }
}

/* خيط ذهبي يمتد أسفل الكرت عند المرور */
#app .product-block::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(to left, transparent, var(--rr-gold), transparent);
  transform: scaleX(0);
  transition: transform .38s var(--rr-ease);
  pointer-events: none;
}
#app .product-block:hover::after { transform: scaleX(1); }

/* ميلان ثلاثي الأبعاد خفيف للصورة، يتبع مؤشر الفأرة (يضبطه الجافاسكربت) */
@media (hover: hover) {
  #app .product-block .thumb-wrapper {
    perspective: 700px;
  }
  #app .product-block .thumb-wrapper img {
    transition: transform .35s var(--rr-ease);
    transform:
      rotateX(var(--rr-rx, 0deg))
      rotateY(var(--rr-ry, 0deg))
      scale(var(--rr-sc, 1));
  }
  #app .product-block:hover .thumb-wrapper img { --rr-sc: 1.045; }
}

/* زر العرض السريع يظهر بهدوء */
#app .showPreviewBtn {
  transition: opacity .25s var(--rr-ease), transform .25s var(--rr-ease);
}
@media (hover: hover) {
  #app .product-block .showPreviewBtn { opacity: 0; transform: translateY(-6px); }
  #app .product-block:hover .showPreviewBtn { opacity: 1; transform: none; }
}

/* السعر بأرقام جدولية ثابتة العرض */
#app .price-wrapper,
#app .s-price-wrapper,
#app .product-price {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* شارة المنتج */
#app .badge--ribbon {
  background: linear-gradient(135deg, var(--rr-navy), var(--rr-navy-lt)) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(14, 29, 51, .28);
  letter-spacing: .01em;
}

/* ==========================================================
   5) الأزرار — أضف للسلة وغيرها
   ========================================================== */
#app .s-button-element,
#app .btn-primary,
#app .btn-secondary {
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--rr-ease), box-shadow .25s var(--rr-ease);
}

/* بريق معدني يمر مرة واحدة عند المرور */
#app .s-button-element::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
      transparent 32%,
      rgba(255, 255, 255, .30) 50%,
      transparent 68%);
  transform: translateX(-130%);
  pointer-events: none;
}
@media (hover: hover) {
  #app .s-button-element:hover::after {
    transform: translateX(130%);
    transition: transform .75s var(--rr-ease);
  }
  #app .s-button-element:hover { box-shadow: 0 8px 22px rgba(14, 29, 51, .22); }
}
#app .s-button-element:active { transform: scale(.975); }

/* نبضة «استقرار القطعة» بعد الإضافة للسلة */
#app .rr-seated { animation: rr-seat .58s var(--rr-ease); }
@keyframes rr-seat {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(195,141,55,.55); }
  45%  { transform: scale(.965); }
  100% { transform: scale(1); box-shadow: 0 0 0 16px rgba(195,141,55,0); }
}

/* ==========================================================
   6) أسهم السلايدرات
   ========================================================== */
#app .s-slider-nav-arrow {
  transition: background .25s var(--rr-ease), color .25s var(--rr-ease),
              border-color .25s var(--rr-ease), transform .25s var(--rr-ease);
}
@media (hover: hover) {
  #app .s-slider-nav-arrow:not(.swiper-button-disabled):hover {
    background: var(--rr-gold);
    border-color: var(--rr-gold);
    color: #fff;
    transform: scale(1.08);
  }
}

/* ==========================================================
   7) بطاقات التصنيفات والماركات
   ========================================================== */
#app .aali-categ-item a { display: block; }
#app .aali-categ-image-wrapper {
  overflow: hidden;
  transition: box-shadow .3s var(--rr-ease), transform .3s var(--rr-ease);
}
#app .aali-categ-image-wrapper img {
  transition: transform .45s var(--rr-ease);
}
@media (hover: hover) {
  #app .aali-categ-item:hover .aali-categ-image-wrapper {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(14, 29, 51, .16);
  }
  #app .aali-categ-item:hover .aali-categ-image-wrapper img { transform: scale(1.07); }
}

#app .brand-item img {
  filter: grayscale(.55);
  opacity: .82;
  transition: filter .35s var(--rr-ease), opacity .35s var(--rr-ease), transform .35s var(--rr-ease);
}
@media (hover: hover) {
  #app .brand-item:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
  }
}

/* بطاقات مميزات المتجر */
#app .slide--cat-entry {
  transition: transform .3s var(--rr-ease), border-color .3s var(--rr-ease), box-shadow .3s var(--rr-ease);
}
#app .slide--cat-entry i { transition: transform .35s var(--rr-ease), color .25s var(--rr-ease); }
@media (hover: hover) {
  #app .slide--cat-entry:hover {
    transform: translateY(-4px);
    border-color: var(--rr-gold);
    box-shadow: 0 10px 26px rgba(14, 29, 51, .14);
  }
  #app .slide--cat-entry:hover i { transform: scale(1.15); color: var(--rr-gold); }
}

/* ==========================================================
   8) الأسئلة الشائعة
   ========================================================== */
#app .faq-item {
  border: 1px solid transparent;
  transition: border-color .3s var(--rr-ease), box-shadow .3s var(--rr-ease);
}
#app .faq-item:hover { border-color: rgba(195, 141, 55, .45); }
#app .faq-item:has(input:checked) {
  border-color: var(--rr-gold);
  box-shadow: 0 8px 24px rgba(14, 29, 51, .10);
}
#app .faq-icon { transition: transform .3s var(--rr-ease), background .25s var(--rr-ease); }
#app .faq-item:has(input:checked) .faq-icon { transform: rotate(135deg); }

/* ==========================================================
   9) آراء العملاء والإنجازات
   ========================================================== */
#app .special-testimonial {
  transition: transform .3s var(--rr-ease), box-shadow .3s var(--rr-ease);
}
@media (hover: hover) {
  #app .special-testimonial:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(14, 29, 51, .12);
  }
}

#app .injaz_count {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
#app .injaz {
  position: relative;
  transition: transform .3s var(--rr-ease);
}
#app .injaz::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin: 8px auto 0;
  background: var(--rr-gold);
  transition: width .7s var(--rr-ease) .25s;
}
#app .rr-in .injaz::after { width: 28px; }

/* ==========================================================
   10) بطاقات المدونة
   ========================================================== */
#app .s-block-blog__post-entry {
  overflow: hidden;
  transition: transform .3s var(--rr-ease), box-shadow .3s var(--rr-ease);
}
#app .s-block-blog__post-entry__image img { transition: transform .5s var(--rr-ease); }
@media (hover: hover) {
  #app .s-block-blog__post-entry:hover { transform: translateY(-5px); }
  #app .s-block-blog__post-entry:hover .s-block-blog__post-entry__image img { transform: scale(1.06); }
}

/* ==========================================================
   11) الهيدر عند التمرير
   ========================================================== */
#app .main-nav-container {
  transition: box-shadow .3s var(--rr-ease), background-color .3s var(--rr-ease);
}
#app.rr-scrolled .main-nav-container {
  box-shadow: 0 6px 26px rgba(14, 29, 51, .12);
}
#app .header-inner-wrapper {
  transition: padding .3s var(--rr-ease);
}
#app.rr-scrolled .header-inner-wrapper {
  padding-top: .15rem !important;
  padding-bottom: .15rem !important;
}
#app .navbar-brand img { transition: max-height .3s var(--rr-ease); }
#app.rr-scrolled .navbar-brand img { max-height: 3rem; }

/* ==========================================================
   12) شريط الإعلانات المتحرك — يتوقف عند المرور
   ========================================================== */
#app .animated-ads-outer:hover .ad-ul,
#app .animated-ads--content:hover .ad-ul {
  animation-play-state: paused;
}
#app .ad-ul { transition: opacity .25s var(--rr-ease); }
#app .animated-ads-outer:hover .ad-ul { opacity: .88; }

/* ==========================================================
   13) الصفحات الداخلية — أقسام ومنتج ومدونة
   ========================================================== */

/* مسار التنقل */
#app .breadcrumbs a,
#app .s-breadcrumb a {
  transition: color .2s var(--rr-ease);
}
#app .breadcrumbs a:hover,
#app .s-breadcrumb a:hover { color: var(--rr-gold); }

/* عنوان صفحة المنتج: خط قياس يُرسم تحته */
#app .product__title,
#app h1.product-title,
#app .product-single h1 {
  position: relative;
}
#app .product__title::after,
#app h1.product-title::after,
#app .product-single h1::after {
  content: "";
  display: block;
  width: 0;
  height: 7px;
  margin-top: 10px;
  border-top: 1px solid var(--rr-gold);
  border-inline-start: 1px solid var(--rr-gold);
  border-inline-end: 1px solid var(--rr-gold);
  transition: width .8s var(--rr-ease) .2s;
}
html.rr-ready #app .rr-title-seen::after { width: 52px; }

/* صور معرض المنتج */
#app .product-single .swiper-slide img,
#app .s-product-card-image img { transition: transform .45s var(--rr-ease); }

/* خيارات المنتج والكمية */
#app salla-quantity-input .s-quantity-input-button,
#app .s-quantity-input-button {
  transition: background .2s var(--rr-ease), color .2s var(--rr-ease), transform .2s var(--rr-ease);
}
#app .s-quantity-input-button:hover {
  background: var(--rr-gold);
  color: #fff;
  transform: scale(1.06);
}

/* شبكة نتائج القسم: كل كرت يدخل بتأخير متدرّج يضبطه الجافاسكربت */
#app .s-products-list-wrapper { min-height: 1px; }

/* حقول الفلاتر */
#app .s-filters-wrapper label,
#app .filter-item label { transition: color .2s var(--rr-ease); }
#app .s-filters-wrapper label:hover,
#app .filter-item label:hover { color: var(--rr-gold); }

/* التقييمات */
#app .s-rating-stars-selected svg { color: var(--rr-gold); fill: var(--rr-gold); }

/* ==========================================================
   14) لمسة على شريط التنقل السفلي في الجوال
   ========================================================== */
#app .mobile-nav--item { transition: transform .22s var(--rr-ease); }
#app .mobile-nav--item:active { transform: scale(.9); }

/* ==========================================================
   15) إتاحة الوصول
   ========================================================== */
#app a:focus-visible,
#app button:focus-visible {
  outline: 2px solid var(--rr-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================
   16) احترام تقليل الحركة — يلغي كل ما سبق من حركة
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html.rr-ready #app [data-rr-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  #app *,
  #app *::before,
  #app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* عند الطباعة يظهر كل شيء */
@media print {
  #app [data-rr-reveal] { opacity: 1 !important; transform: none !important; }
}



/* ********************* */

/* الفوتر  */

/* ==========================================================
   ركن راقي — تنسيق الفوتر الحالي
   يوضع في: تخصيص متقدم ← تخصيص باستخدام CSS
   ----------------------------------------------------------
   لا يحذف ولا يستبدل أي عنصر. كل ما في الفوتر يبقى كما هو:
   الشعار، الوصف، السوشال، السجل التجاري، التواصل،
   الروابط، وسائل الدفع، وحقوق النشر.
   ========================================================== */

/* ---------- 1) الأساس واللوحة اللونية ---------- */
#app footer.store-footer {
  --rr-navy:     #0e1d33;   /* الكحلي — من شريط الإعلانات وزر أضف للسلة */
  --rr-navy-2:   #142642;   /* لوح مرفوع */
  --rr-gold:     #c38d37;   /* الذهبي — لون علامتك الأساسي */
  --rr-gold-lt:  #e2b463;
  --rr-ink:      #e9edf4;   /* نص أساسي */
  --rr-muted:    #9aa7bb;   /* نص ثانوي */

  --footer-bg-color: var(--rr-navy) !important;
  --footer-text-color: var(--rr-ink) !important;

  position: relative;
  background-color: var(--rr-navy) !important;
  background-image: none !important;
  color: var(--rr-ink) !important;
  font-family: 'Rubik', var(--font-main), system-ui, sans-serif;

  border-top: 2px solid var(--rr-gold) !important;
  border-image: linear-gradient(to left,
      rgba(195,141,55,0) 0%, var(--rr-gold) 18%,
      var(--rr-gold-lt) 50%, var(--rr-gold) 82%,
      rgba(195,141,55,0) 100%) 1 !important;
}

/* توهج ذهبي خافت أعلى اليمين يعطي عمق بدل اللون المسطّح */
#app footer.store-footer .store-footer__inner {
  position: relative;
  background:
    radial-gradient(115% 85% at 88% 0%, rgba(195,141,55,.16) 0%, transparent 58%),
    radial-gradient(70% 60% at 6% 100%, rgba(195,141,55,.07) 0%, transparent 55%);
  padding-top: 2.5rem;
}

/* ---------- 2) الترس — العنصر المميّز ---------- */
/* مأخوذ من شعار ركن راقي، يدور ببطء شديد خلف المحتوى */
#app footer.store-footer .store-footer__inner::before {
  content: "";
  position: absolute;
  inset-inline-start: -110px;
  bottom: -150px;
  width: 400px;
  height: 400px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23c38d37%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M179.3%2089.3L195.7%2092.7L195.7%20107.3L179.3%20110.7L176.1%20124.7L189.4%20134.9L183.1%20148.1L166.8%20144.1L157.8%20155.3L165.4%20170.3L154.0%20179.4L141.0%20168.7L128.1%20174.9L128.4%20191.7L114.2%20194.9L107.2%20179.7L92.8%20179.7L85.8%20194.9L71.6%20191.7L71.9%20174.9L59.0%20168.7L46.0%20179.4L34.6%20170.3L42.2%20155.3L33.2%20144.1L16.9%20148.1L10.6%20134.9L23.9%20124.7L20.7%20110.7L4.3%20107.3L4.3%2092.7L20.7%2089.3L23.9%2075.3L10.6%2065.1L16.9%2051.9L33.2%2055.9L42.2%2044.7L34.6%2029.7L46.0%2020.6L59.0%2031.3L71.9%2025.1L71.6%208.3L85.8%205.1L92.8%2020.3L107.2%2020.3L114.2%205.1L128.4%208.3L128.1%2025.1L141.0%2031.3L154.0%2020.6L165.4%2029.7L157.8%2044.7L166.8%2055.9L183.1%2051.9L189.4%2065.1L176.1%2075.3Z%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2268%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2224%22%2F%3E%3Ccircle%20cx%3D%22145.0%22%20cy%3D%22100.0%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22122.5%22%20cy%3D%22139.0%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2277.5%22%20cy%3D%22139.0%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2255.0%22%20cy%3D%22100.0%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2277.5%22%20cy%3D%2261.0%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22122.5%22%20cy%3D%2261.0%22%20r%3D%226%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: .10;
  pointer-events: none;
  z-index: 0;
  animation: rr-gear 140s linear infinite;
}
@keyframes rr-gear { to { transform: rotate(360deg); } }

#app footer.store-footer .footer-container,
#app footer.store-footer .footer-foot,
#app footer.store-footer .line { position: relative; z-index: 1; }

/* ---------- 3) الشعار ---------- */
/* لوح أبيض يضمن وضوح الشعار على الخلفية الكحلية.
   إذا كان شعارك فاتحاً أصلاً، احذف هذه الكتلة. */
#app footer.store-footer .footer_logo {
  background: #ffffff;
  padding: .55rem .85rem;
  border-radius: .5rem;
  width: -moz-fit-content;
  width: fit-content;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* ---------- 4) وصف المتجر ---------- */
#app footer.store-footer .footer_top p {
  color: var(--rr-muted);
  font-weight: 300;
  max-width: 44ch;
  line-height: 1.85;
}

/* ---------- 5) عناوين الأعمدة + خط قياس هندسي ---------- */
#app footer.store-footer .footer-links h3,
#app footer.store-footer .s-contacts-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
}
#app footer.store-footer .footer-links h3::after,
#app footer.store-footer .s-contacts-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 6px;
  margin-top: 10px;
  border-top: 1px solid var(--rr-gold);
  border-inline-start: 1px solid var(--rr-gold);
  border-inline-end: 1px solid var(--rr-gold);
  opacity: .85;
}

/* ---------- 6) أيقونات السوشال ---------- */
#app footer.store-footer .s-social-list {
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
#app footer.store-footer .s-social-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(233,237,244,.16);
  border-radius: 8px;
  color: var(--rr-gold);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
#app footer.store-footer .s-social-link a:hover {
  border-color: var(--rr-gold);
  background: rgba(195,141,55,.12);
  transform: translateY(-2px);
}
#app footer.store-footer .s-social-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* ---------- 7) السجل التجاري ---------- */
#app footer.store-footer .s-trust-badges-wrapper {
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(233,237,244,.14);
  border-radius: 6px;
  background: var(--rr-navy-2);
  width: -moz-fit-content;
  width: fit-content;
  transition: border-color .2s ease;
}
#app footer.store-footer .s-trust-badges-wrapper:hover { border-color: rgba(195,141,55,.55); }
#app footer.store-footer .s-trust-badges-image {
  background: #fff;
  border-radius: 5px;
  padding: 3px;
}
#app footer.store-footer .s-trust-badges-label {
  color: var(--rr-muted);
  font-size: 11.5px;
  margin: 0;
}
#app footer.store-footer .s-trust-badges-number {
  color: var(--rr-gold);
  font-size: 14px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ---------- 8) وسائل التواصل ---------- */
#app footer.store-footer .s-contacts-list-vertical { gap: 12px; }

#app footer.store-footer .s-contacts-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--rr-ink);
  transition: color .2s ease;
}
#app footer.store-footer .s-contacts-item:hover { color: var(--rr-gold-lt); }

#app footer.store-footer .s-contacts-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(233,237,244,.16);
  border-radius: 50%;
  color: var(--rr-gold);
  transition: border-color .2s ease, background .2s ease;
}
#app footer.store-footer .s-contacts-item:hover .s-contacts-icon {
  border-color: var(--rr-gold);
  background: rgba(195,141,55,.12);
}
#app footer.store-footer .s-contacts-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
#app footer.store-footer .s-contacts-item .unicode {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  font-size: 14px;
}

/* ---------- 9) الروابط المهمة ---------- */
#app footer.store-footer .footer-list__item a {
  position: relative;
  display: inline-block;
  color: var(--rr-muted);
  font-weight: 300;
  transition: color .2s ease;
}
#app footer.store-footer .footer-list__item a::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: -15px;
  width: 0;
  height: 1px;
  background: var(--rr-gold);
  transition: width .22s ease;
}
#app footer.store-footer .footer-list__item a:hover { color: var(--rr-ink); }
#app footer.store-footer .footer-list__item a:hover::before { width: 10px; }

/* ---------- 10) الفاصل السفلي ---------- */
#app footer.store-footer .line {
  border-top-color: var(--rr-gold) !important;
  opacity: .22 !important;
}

/* ---------- 11) الشريط السفلي وحقوق النشر ---------- */
#app footer.store-footer .footer-foot { padding-bottom: .5rem; }
#app footer.store-footer .footer-foot p,
#app footer.store-footer .footer-foot .text-gray-400 {
  color: var(--rr-muted) !important;
  font-weight: 300;
}
#app footer.store-footer .footer-foot a {
  color: var(--rr-ink);
  transition: color .2s ease;
}
#app footer.store-footer .footer-foot a:hover { color: var(--rr-gold) !important; }

/* ---------- 12) وسائل الدفع ---------- */
#app footer.store-footer .s-payments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
#app footer.store-footer .s-payments-list-item {
  background: #fff;
  border-radius: 6px;
  padding: 3px 5px;
  display: inline-flex;
  align-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
#app footer.store-footer .s-payments-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
#app footer.store-footer .s-payments-list-item img {
  width: auto;
  height: 26px;
  object-fit: contain;
}

/* ---------- 13) إتاحة الوصول ---------- */
#app footer.store-footer a:focus-visible,
#app footer.store-footer button:focus-visible {
  outline: 2px solid var(--rr-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 14) الجوال ---------- */
@media (max-width: 1023px) {
  #app footer.store-footer .store-footer__inner { padding-top: 1.75rem; }
  #app footer.store-footer .store-footer__inner::before {
    width: 300px;
    height: 300px;
    bottom: -120px;
    opacity: .07;
  }
  #app footer.store-footer .footer_top p { max-width: none; }
  #app footer.store-footer .s-contacts-list-horizontal { gap: 10px; }
}

/* ---------- 15) احترام تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  #app footer.store-footer .store-footer__inner::before { animation: none; }
  #app footer.store-footer *,
  #app footer.store-footer *::before { transition-duration: .01ms !important; }
}