/* =========================================================
   مدينة الأحبار — CSS مخصص (النسخة الكاملة المطوّرة)
   1. المتغيرات (الهوية اللونية)
   2. الخلفية: أمواج وسحب الحبر
   3. الهيدر والقائمة الرئيسية
   4. عناوين الأقسام
   5. البنرات
   6. بطاقات المنتجات والأزرار
   7. المميزات
   8. الفوتر الموجي
   9. شريط التمرير والأزرار العائمة
   10. الجوال وتقليل الحركة
   11. الروابط السريعة (قسم الثيم)
   12. شريط الإعلانات المتحرك
   13. الهيدر ومربع البحث
   14. حجم وعدد بطاقات المنتجات
   15. أداء الجوال
   ========================================================= */


/* ========== 1. المتغيرات (الهوية اللونية) ========== */
:root {
  /* ألوان الحبر الأساسية */
  --cyan:          #00AEEF;
  --magenta:       #EC008C;
  --yellow:        #FFF200;

  /* درجات أعمق للنصوص والأزرار (تباين واضح مع الأبيض) */
  --cyan-deep:     #0077b6;
  --magenta-deep:  #b0006a;
  --yellow-deep:   #8a6d00;

  /* درجات فاتحة للخلفيات الخفيفة */
  --cyan-soft:     #e3f6fd;
  --magenta-soft:  #fde6f2;
  --yellow-soft:   #fffbd1;

  --ink:           #1d2433;   /* النصوص الداكنة */
  --paper:         #FBFCFD;   /* خلفية الصفحة */
  --footer-bg:     #0f2e4a;   /* لون الفوتر (لو غيّرته غيّر لون الموجة في القسم 8) */

  --marquee-h:     38px;   /* ارتفاع شريط الإعلانات (اجعله 0px إذا ألغيت الشريط) */

  --wave-opacity:  0.20;
  --cloud-opacity: 0.30;
  --wave-speed:    40s;
  --cloud-speed:   35s;
}


/* ========== 2. الخلفية: أمواج وسحب الحبر ========== */
html { background-color: var(--paper); }

body {
  background: transparent !important;
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--wave-opacity);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cpath fill='%2300AEEF' d='M0 100 C200 30 400 30 600 100 S1000 170 1200 100 S1400 30 1600 100 V200 H0Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cpath fill='%23EC008C' d='M0 90 C266 160 533 160 800 90 S1333 20 1600 90 V200 H0Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cpath fill='%23FFF200' d='M0 110 C400 40 400 170 800 110 S1200 40 1600 110 V200 H0Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1600px 38vh, 1600px 32vh, 1600px 28vh;
  background-position: 0 100%, 0 100%, 0 100%;
  background-blend-mode: multiply;
  /* تلاشي أسفل الأمواج حتى لا يظهر شريط رمادي حيث تتداخل الألوان الثلاثة */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  animation:
    waves-flow var(--wave-speed) linear infinite,
    waves-bob 9s ease-in-out infinite alternate;
}

@keyframes waves-flow {
  from { background-position:      0 100%,      0 100%,      0 100%; }
  to   { background-position: 1600px 100%, -1600px 100%, 3200px 100%; }
}

@keyframes waves-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-2.5vh); }
}

body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  opacity: var(--cloud-opacity);
  background:
    radial-gradient(ellipse 30% 18% at 22% 22%, var(--cyan)    0, transparent 70%),
    radial-gradient(ellipse 22% 14% at 35% 30%, var(--cyan)    0, transparent 70%),
    radial-gradient(ellipse 28% 16% at 75% 28%, var(--magenta) 0, transparent 70%),
    radial-gradient(ellipse 20% 12% at 62% 20%, var(--magenta) 0, transparent 70%),
    radial-gradient(ellipse 30% 15% at 50% 50%, var(--yellow)  0, transparent 70%),
    radial-gradient(ellipse 18% 12% at 85% 55%, var(--cyan)    0, transparent 70%),
    radial-gradient(ellipse 20% 12% at 12% 55%, var(--magenta) 0, transparent 70%);
  background-blend-mode: multiply;
  filter: blur(30px);
  animation: clouds-drift var(--cloud-speed) ease-in-out infinite alternate;
}

@keyframes clouds-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-4%, 2%) scale(1.06); }
  66%  { transform: translate(3%, -2%) scale(0.97); }
  100% { transform: translate(-2%, 3%) scale(1.04); }
}


/* ========== 3. الهيدر والقائمة الرئيسية ========== */
header,
.store-header,
.main-nav-container {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg,
    var(--cyan) 0 33.3%, var(--magenta) 33.3% 66.6%, var(--yellow) 66.6% 100%) 1;
}

.header--mini #main-nav:not(.fixed-pinned) .main-nav__content {
  padding: 0 1.5rem;
}

#mobile-menu::after {
  background-color: var(--cyan-deep) !important;
  color: #fff !important;
}

@media (min-width: 1024px) {

  .quicklinks {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(0, 174, 239, 0.18);
    box-shadow: 0 8px 24px -16px rgba(236, 0, 140, 0.35);
    position: relative;
    z-index: 20;
    color: var(--ink) !important;
  }
  .quicklinks::before { opacity: 0 !important; }

  .quicklinks::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow), var(--cyan));
    background-size: 300% 100%;
    animation: menu-ink-line 12s linear infinite;
    opacity: 0.8;
  }
  @keyframes menu-ink-line {
    to { background-position: 300% 0; }
  }

  .quicklinks__inner { min-height: 58px !important; }

  .quicklinks .main-menu {
    display: flex !important;
    align-items: center;
    gap: 4px;
  }

  .quicklinks .main-menu > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px !important;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
  }
  .quicklinks .main-menu > li > a,
  .quicklinks .main-menu > li > a * {
    color: var(--ink) !important;
    text-shadow: none !important;
  }

  .quicklinks .main-menu > li > a::after {
    content: "";
    position: absolute;
    inset-inline: 18px;
    bottom: 4px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s cubic-bezier(.6, .05, .3, 1);
  }

  .quicklinks .main-menu > li:hover > a,
  .quicklinks .main-menu > li > a:focus-visible {
    background-color: rgba(0, 174, 239, 0.10);
    transform: translateY(-1px);
  }
  .quicklinks .main-menu > li:hover > a,
  .quicklinks .main-menu > li:hover > a * {
    color: var(--cyan-deep) !important;
  }
  .quicklinks .main-menu > li:hover > a::after,
  .quicklinks .main-menu > li > a:focus-visible::after {
    transform: scaleX(1);
  }

  .quicklinks .main-menu > li > a.active,
  .quicklinks .main-menu > li.active > a,
  .quicklinks .main-menu > li > a[aria-current="page"] {
    background: linear-gradient(135deg, rgba(0,174,239,.16), rgba(236,0,140,.12));
  }
  .quicklinks .main-menu > li > a.active,
  .quicklinks .main-menu > li > a.active *,
  .quicklinks .main-menu > li.active > a,
  .quicklinks .main-menu > li.active > a * {
    color: var(--magenta-deep) !important;
  }

  .quicklinks .main-menu a:focus-visible {
    outline: 2px solid var(--magenta);
    outline-offset: 2px;
  }

  .quicklinks .main-menu .sub-menu,
  .quicklinks .main-menu li > ul {
    background:
      linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow)) top / 100% 3px no-repeat,
      rgba(255, 255, 255, 0.97) !important;
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 12px !important;
    overflow: hidden;
    min-width: 220px;
    box-shadow: 0 18px 40px -12px rgba(0, 60, 100, 0.25) !important;
    padding: 8px !important;
    animation: submenu-in .25s ease-out;
  }
  @keyframes submenu-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .quicklinks .main-menu .sub-menu li,
  .quicklinks .main-menu li ul li {
    background: transparent !important;
  }

  .quicklinks .main-menu .sub-menu a,
  .quicklinks .main-menu li ul a {
    display: block;
    padding: 9px 14px !important;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease, padding .2s ease;
  }
  .quicklinks .main-menu .sub-menu a,
  .quicklinks .main-menu .sub-menu a *,
  .quicklinks .main-menu li ul a,
  .quicklinks .main-menu li ul a * {
    color: #2b3445 !important;
  }

  .quicklinks .main-menu .sub-menu a:hover,
  .quicklinks .main-menu li ul a:hover {
    background-color: rgba(236, 0, 140, 0.08);
    padding-inline-start: 20px !important;
  }
  .quicklinks .main-menu .sub-menu a:hover,
  .quicklinks .main-menu .sub-menu a:hover *,
  .quicklinks .main-menu li ul a:hover,
  .quicklinks .main-menu li ul a:hover * {
    color: var(--magenta-deep) !important;
  }
}


/* ========== 4. عناوين الأقسام (علامة معايرة CMY) ========== */
.s-block__title h2,
.s-block__title h3 {
  position: relative;
  color: var(--ink);
  font-weight: 700;
  padding-bottom: 12px;
}

/* ثلاث شرطات C - M - Y تحت العنوان مثل علامة معايرة الطباعة */
.s-block__title h2::after,
.s-block__title h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;                 /* العناوين في المنتصف، فالعلامة في المنتصف */
  transform: translateX(-50%);
  width: 66px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--cyan)    0 30%,  transparent 30% 35%,
    var(--magenta) 35% 65%, transparent 65% 70%,
    var(--yellow)  70% 100%);
}

/* زر "عرض الكل" تحت العنوان
   الألوان مضبوطة من إعدادات الثيم (خيارات الصفحة الرئيسية)، هنا الشكل فقط */
.s-block__title a,
.s-block__title button,
.s-block__title .s-button-element {
  border-radius: 999px !important;
  font-weight: 600;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

@media (hover: hover) {
  .s-block__title a:hover,
  .s-block__title button:hover,
  .s-block__title .s-button-element:hover {
    transform: translateY(-1px);
  }
}

.s-block__title a:focus-visible,
.s-block__title button:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}


/* ========== 5. البنرات ========== */
.s-block--fixed-banner:first-of-type {
  margin-top: 0 !important;
}

.s-block--fixed-banner:first-of-type .container {
  max-width: 100% !important;
  padding: 0 !important;
}

.index .s-block--fixed-banner img {
  background-color: transparent !important;
  border-radius: 0;
}


/* ========== 6. بطاقات المنتجات والأزرار ========== */
/* ألوان الحدود والسعر المخفض والشارات وزر السلة مضبوطة من إعدادات الثيم
   (خيارات بطاقة المنتج)، هنا الشكل والحركة فقط */
custom-salla-product-card {
  background-color: #fff !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px -4px rgba(15, 46, 74, 0.12);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* ترتفع البطاقة ويظهر تحتها ظل بألوان الحبر (للأجهزة التي فيها ماوس فقط) */
@media (hover: hover) {
  custom-salla-product-card:hover {
    transform: translateY(-6px);
    box-shadow:
      -10px 14px 28px -14px rgba(0, 174, 239, 0.55),
       10px 14px 28px -14px rgba(236, 0, 140, 0.45);
  }
}

/* زر أضف للسلة (ألوانه من إعدادات الثيم) */
salla-add-product-button button {
  border-radius: 10px !important;
  font-weight: 600;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

salla-add-product-button button * {
  color: inherit !important;
}

/* الجوال: النص كان يُقص إلى "أضف إلى ال..." فنصغّر الهوامش والخط */
@media (max-width: 768px) {
  salla-add-product-button button {
    padding-inline: 6px !important;
    gap: 4px !important;
    font-size: 13px !important;
    font-weight: 600;
  }
  salla-add-product-button button * {
    font-size: inherit !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
  }
  salla-add-product-button button i,
  salla-add-product-button button svg {
    font-size: 15px !important;
    width: 15px;
    height: 15px;
    margin: 0 !important;
  }
}

salla-add-product-button button:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}


/* ========== 7. المميزات ========== */
.s-block--features > div {
  border: 0 !important;
}

.s-block--features .s-block--features__item {
  border: 0;
  border-radius: 0;
  background-color: transparent !important;
  text-align: center;
}

/* الأيقونة داخل دائرة بلون حبر مختلف لكل ميزة */
.s-block--features .s-block--features__item .feature-icon {
  width: 104px;
  height: 104px;
  margin: 10px auto 24px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: unset !important;
  background-color: var(--cyan-soft) !important;
  transition: transform .3s ease;
}

.s-block--features .s-block--features__item .feature-icon i {
  font-size: 56px;
  color: var(--cyan-deep) !important;
}

.s-block--features .s-block--features__item:nth-child(3n+2) .feature-icon {
  background-color: var(--magenta-soft) !important;
}
.s-block--features .s-block--features__item:nth-child(3n+2) .feature-icon i {
  color: var(--magenta-deep) !important;
}

.s-block--features .s-block--features__item:nth-child(3n+3) .feature-icon {
  background-color: var(--yellow-soft) !important;
}
.s-block--features .s-block--features__item:nth-child(3n+3) .feature-icon i {
  color: var(--yellow-deep) !important;
}

@media (hover: hover) {
  .s-block--features .s-block--features__item:hover .feature-icon {
    transform: translateY(-4px) rotate(-6deg);
  }
}

/* الجوال: المميزات الثلاث في صف واحد بدل أن تأخذ كل واحدة شاشة كاملة */
@media (max-width: 768px) {
  .ink-features-grid,
  .s-block--features :has(> .s-block--features__item),
  .s-block--features .grid,
  .s-block--features [class*="grid-cols"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .s-block--features .s-block--features__item {
    padding: 8px 2px !important;
    margin: 0 !important;
  }
  .s-block--features .s-block--features__item .feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
  }
  .s-block--features .s-block--features__item .feature-icon i {
    font-size: 30px;
  }
  .s-block--features .s-block--features__item h2,
  .s-block--features .s-block--features__item h3,
  .s-block--features .s-block--features__item h4 {
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }
  .s-block--features .s-block--features__item p {
    font-size: 12px !important;
    line-height: 1.5;
  }
}


/* ========== 8. الفوتر الموجي ========== */
footer {
  position: relative;
  margin-top: 110px !important;
  background-color: var(--footer-bg) !important;
  border-radius: 0 !important;
}

/* موجتان أعلى الفوتر: سماوية خلفية + موجة بلون الفوتر أمامها
   ملاحظة: fill='%230f2e4a' هو لون الفوتر، غيّره هنا إذا غيّرت --footer-bg */
footer::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  right: 0;
  height: 90px;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 100' preserveAspectRatio='none'%3E%3Cpath fill='%230f2e4a' d='M0 60 C266 10 533 10 800 60 S1333 110 1600 60 V100 H0Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 100' preserveAspectRatio='none'%3E%3Cpath fill='%2300AEEF' fill-opacity='0.45' d='M0 40 C400 90 400 0 800 40 S1200 90 1600 40 V100 H0Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1600px 100%, 1600px 100%;
  background-position: 0 100%, 0 100%;
  animation: footer-wave 30s linear infinite;
}

@keyframes footer-wave {
  from { background-position: 0 100%, 0 100%; }
  to   { background-position: 1600px 100%, -1600px 100%; }
}

.store-footer__inner {
  position: relative;
  z-index: 2;
  background-color: transparent !important;
  padding-bottom: 0;
  border-radius: 0 !important;
}

/* كل نصوص الفوتر فاتحة (روابط، السجل التجاري، الحقوق...) */
footer,
footer * {
  color: rgba(255, 255, 255, 0.88) !important;
}

footer h3,
footer h4,
footer b,
footer strong {
  color: #fff !important;
  font-weight: 700;
}

footer a:hover,
footer a:hover * {
  color: var(--cyan) !important;
}

/* الشريط السفلي (الحقوق + التواصل + وسائل الدفع):
   كان يظهر أبيض منفصلاً عن الفوتر، فنوحّده مع الخلفية الداكنة */
footer div:has(> .copyright-text),
footer div:has(> salla-social),
footer div:has(> salla-payments),
footer > div:last-child {
  background-color: #0a2236 !important;
}

/* أيقونات التواصل الاجتماعي: دوائر بإطار فاتح */
footer salla-social a,
footer .s-social-link {
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
  transition: border-color .2s ease, background-color .2s ease;
}
footer salla-social a:hover,
footer .s-social-link:hover {
  border-color: var(--cyan) !important;
  background-color: rgba(0, 174, 239, 0.12) !important;
}

/* شعارات الدفع: بطاقات بيضاء صغيرة حتى تبقى واضحة فوق الكحلي */
footer salla-payments img,
footer .s-payments-list img,
footer [class*="payment"] img {
  background: #fff !important;
  padding: 4px 6px;
  border-radius: 6px;
  box-sizing: content-box;
}


.store-footer__inner .container {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.store-footer__inner .container > div {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-left: 0;
  padding-bottom: 20px;
}

.store-footer__inner .container > div:nth-of-type(1) {
  grid-column: span 1 / span 2;
}

.store-footer__inner > div a h3 {
  display: none;
}

/* شعار المتجر في الفوتر: نصه أسود فكان يختفي على الكحلي،
   فنضعه على بطاقة بيضاء صغيرة */
.store-footer__inner .container > div:nth-of-type(1) a img,
.store-footer__inner .container > div:nth-of-type(1) > img,
footer img[alt*="CITY"],
footer img[alt*="City"],
footer img[alt*="مدينة"] {
  background: #fff;
  padding: 10px 16px;
  border-radius: 14px;
  box-sizing: content-box;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
}

/* شريط الحقوق: أغمق قليلاً مع خط CMY فوقه */
.store-footer__inner + div {
  background-color: #0a2236 !important;
  max-width: 100%;
  justify-content: space-around;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg,
    var(--cyan) 0 33.3%, var(--magenta) 33.3% 66.6%, var(--yellow) 66.6% 100%) 1;
}

@media (max-width: 992px) {
  .store-footer__inner .container {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}


/* ========== 9. شريط التمرير والأزرار العائمة ========== */
html {
  scrollbar-color: var(--cyan-deep) #eef6fa;   /* فايرفوكس */
}

::-webkit-scrollbar       { width: 10px; }
::-webkit-scrollbar-track { background: #eef6fa; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan), var(--magenta), var(--yellow));
  border-radius: 10px;
  border: 2px solid #eef6fa;
}

.progress-wrap {
  bottom: 100px !important;   /* فوق زر واتساب حتى لا يختفي خلفه */
  background: var(--magenta);
  z-index: 9999;
  cursor: pointer;
  border: none !important;
  box-shadow: 0 6px 18px -6px rgba(236, 0, 140, 0.6) !important;
}

.progress-circle {
  width: 100%;
  height: 100%;
}

.progress-circle path {
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 6 !important;
}

.floating-contacts__icon {
  background-color: var(--magenta) !important;
}


/* ========== 10. الجوال وتقليل الحركة ========== */
@media (max-width: 768px) {
  :root {
    --wave-opacity:  0.16;
    --cloud-opacity: 0.24;
  }
  /* الخلفية ثابتة على الجوال: نفس الشكل، وتصفح أسلس وبطارية أقل */
  body::before {
    background-size: 900px 26vh, 900px 22vh, 900px 19vh;
    background-position: 0 100%, 300px 100%, 600px 100%;
    animation: none;
  }
  /* بدون ضبابية على الجوال: التدرجات ناعمة أصلاً، والضبابية مكلفة جداً على المعالج */
  body::after {
    filter: none;
    animation: none;
    inset: 0;
  }

  footer { margin-top: 70px !important; }
  footer::before {
    height: 55px;
    background-size: 900px 100%, 900px 100%;
    animation: none;
  }

  .progress-wrap { bottom: 90px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  footer::before,
  .quicklinks::after,
  .quicklinks .main-menu .sub-menu,
  .quicklinks .main-menu li > ul { animation: none; }

  .quicklinks .main-menu > li > a,
  .quicklinks .main-menu > li > a::after,
  custom-salla-product-card,
  .s-block--features .s-block--features__item .feature-icon { transition: none; }

  custom-salla-product-card:hover,
  .s-block--features .s-block--features__item:hover .feature-icon { transform: none !important; }
}


/* ========== 11. الروابط السريعة (قسم الثيم "روابط سريعة") ==========
   القسم يُبنى من الثيم مباشرة فلا تتحرك الصفحة عند ظهوره.
   نحدده بصوره الملونة حتى لا يتأثر أي قسم آخر في الموقع */
.s-block--categories:has(img[src*="i.postimg.cc/"]) {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}

/* الكمبيوتر: شبكة بعرض الصفحة، 6 في الصف
   (على التابلت والجوال نترك السلايدر يعمل بالسحب كما صممه الثيم) */
@media (min-width: 1024px) {
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper {
    overflow: visible !important;
  }
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 28px !important;
    max-width: 1360px;
    margin: 0 auto !important;
    transform: none !important;
  }
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide {
    width: auto !important;
    margin: 0 !important;
  }
}

/* إلغاء البطاقة الرمادية والهوامش التي يضعها الثيم حول كل صورة */
.s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide,
.s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide * {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide a,
.s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide > div {
  padding: 0 !important;
}

/* الصورة كاملة بلا قص (كانت تقص أطراف أسماء الأقسام) */
.s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide img {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: 230px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  filter: drop-shadow(0 6px 10px rgba(15, 46, 74, 0.12));
  transition: filter .4s ease;
}
/* حاوية الصورة لا تفرض نسبة أبعاد */
.s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide :has(> img) {
  height: auto !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

/* تأثير المرور: ارتفاع + ظل بلون المربع (سماوي / أرجواني / أصفر) */
.s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide {
  --glow: rgba(0, 174, 239, 0.45);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide:nth-child(3n+2) {
  --glow: rgba(236, 0, 140, 0.40);
}
.s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide:nth-child(3n+3) {
  --glow: rgba(230, 200, 0, 0.50);
}

@media (hover: hover) {
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide:hover {
    transform: translateY(-10px);
  }
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide:hover img {
    filter: drop-shadow(0 16px 18px var(--glow));
  }
}

.s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide:active {
  transform: scale(.96);
}

.s-block--categories:has(img[src*="i.postimg.cc/"]) a:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 4px;
}

/* التابلت والجوال: سلايدر الثيم يُسحب بالإصبع، ونحدد فقط عرض كل بطاقة */
@media (max-width: 1023px) {
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide {
    width: 28% !important;          /* التابلت: 3 ونصف تقريباً */
  }
}

@media (max-width: 640px) {
  .s-block--categories:has(img[src*="i.postimg.cc/"]) {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide {
    width: 38% !important;          /* الجوال: بطاقتان ونصف، ليظهر أن هناك المزيد */
  }
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide img {
    height: 165px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide,
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide img {
    transition: none;
  }
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide:hover,
  .s-block--categories:has(img[src*="i.postimg.cc/"]) .swiper-slide:active {
    transform: none !important;
  }
}


/* ========== 12. شريط الإعلانات المتحرك (يُبنى من ملف JavaScript) ========== */
/* المساحة محجوزة من أول لحظة لتحميل الصفحة، فيدخل الشريط مكانها
   دون أن يدفع الصفحة للأسفل (هذا كان سبباً رئيسياً لـ CLS) */
body {
  padding-top: var(--marquee-h) !important;
}

.ink-marquee {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--marquee-h);
  z-index: 40;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--footer-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  direction: ltr;   /* ضروري: يبدأ الشريط من اليسار فلا تظهر فراغات في الصفحة العربية */
}

.ink-marquee__track {
  display: flex;
  width: max-content;
  animation: ink-marquee var(--marquee-duration, 45s) linear infinite;
  will-change: transform;
}

.ink-marquee:hover .ink-marquee__track {
  animation-play-state: paused;   /* يتوقف عند المرور للقراءة */
}

.ink-marquee__group {
  display: flex;
  flex-shrink: 0;
}

.ink-marquee__item {
  direction: rtl;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding: 0 28px;
}

/* نقطة ملونة قبل كل رسالة بالتناوب C / M / Y */
.ink-marquee__item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-inline-end: 12px;
  background: var(--cyan);
}
.ink-marquee__item:nth-child(3n+2)::before { background: var(--magenta); }
.ink-marquee__item:nth-child(3n+3)::before { background: var(--yellow); }

/* النص يدخل من اليمين ويتحرك لليسار ليُقرأ من بدايته */
@keyframes ink-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  :root { --marquee-h: 34px; }
  .ink-marquee { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ink-marquee__track { animation: none; }
}



/* ========== 13. الهيدر ومربع البحث ========== */

/* هيدر زجاجي ثابت الشكل: نفس المظهر أعلى الصفحة وأثناء التمرير */
.store-header .top-navbar,
.main-nav-container .inner,
.main-nav-container.fixed-pinned .inner,
#mainnav .inner {
  background-color: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(0, 119, 182, 0.10);
}

.main-nav-container.fixed-pinned .inner {
  box-shadow: 0 6px 20px -12px rgba(15, 46, 74, 0.35);
}

/* مربع البحث: كبسولة ناعمة بإطار سماوي وحلقة تركيز ملونة */
.s-search-container,
salla-search .s-search-container {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

salla-search input,
.s-search-input,
header input[type="search"] {
  height: 46px !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  border: 1.5px solid rgba(0, 119, 182, 0.22) !important;
  box-shadow: 0 4px 14px -8px rgba(0, 119, 182, 0.35) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  padding-inline: 46px 18px !important;   /* مساحة لأيقونة البحث */
  transition: border-color .2s ease, box-shadow .2s ease;
}

salla-search input::placeholder,
.s-search-input::placeholder,
header input[type="search"]::placeholder {
  color: #7a8597 !important;
}

salla-search input:focus,
.s-search-input:focus,
header input[type="search"]:focus {
  outline: none !important;
  border-color: var(--cyan) !important;
  box-shadow:
    0 0 0 4px rgba(0, 174, 239, 0.15),
    0 6px 18px -8px rgba(236, 0, 140, 0.35) !important;
}

/* أيقونة البحث بلون المتجر */
salla-search .s-search-icon-wrap,
salla-search .s-search-icon-wrap *,
salla-search svg {
  color: var(--cyan-deep) !important;
  fill: currentColor;
}

/* نتائج البحث المنسدلة */
salla-search .s-search-results {
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 18px 40px -12px rgba(0, 60, 100, 0.25) !important;
  overflow: hidden;
}

@media (max-width: 768px) {
  salla-search input,
  .s-search-input,
  header input[type="search"] {
    height: 42px !important;
    font-size: 14px !important;
  }
}



/* ========== 14. حجم وعدد بطاقات المنتجات ==========
   بطاقات أعرض وعدد أقل في الصف لتظهر الصور والأسماء بوضوح.
   غيّر الأرقام هنا فقط للتحكم في العدد:                       */
:root {
  --cards-desktop: 4;      /* صفحات الأقسام والبحث: عدد البطاقات في الصف على الكمبيوتر */
  --cards-tablet:  3;      /* على التابلت */
  --cards-mobile:  2;      /* على الجوال */
  --cards-gap:     24px;

  --slider-tablet:  2.6;   /* سلايدر "أحدث المنتجات" وأمثاله: عدد البطاقات الظاهرة */
  --slider-mobile:  1.6;   /* بطاقة ونصف تقريباً، ليظهر طرف التالية فيعرف الزائر أنه يمرر */
  --slider-gap:     20px;
}

/* --- صفحات الأقسام ونتائج البحث (شبكة) --- */
salla-products-list .s-products-list-wrapper,
.s-products-list-wrapper {
  display: grid !important;
  grid-template-columns: repeat(var(--cards-desktop), minmax(0, 1fr)) !important;
  gap: var(--cards-gap) !important;
}

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

/* --- محتوى البطاقة يستفيد من العرض الإضافي --- */
custom-salla-product-card {
  height: 100%;
}

/* اسم المنتج: أوضح وبحد أقصى سطرين */
custom-salla-product-card .s-product-card-content-title,
custom-salla-product-card .s-product-card-content-title a {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 600;
  color: var(--ink) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* السعر أكبر وأوضح */
custom-salla-product-card .s-product-card-price,
custom-salla-product-card .s-product-card-sale-price h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* مسافات داخلية مريحة */
custom-salla-product-card .s-product-card-content {
  padding: 14px 16px 16px !important;
}

/* --- التابلت --- */
@media (max-width: 1024px) {
  salla-products-list .s-products-list-wrapper,
  .s-products-list-wrapper {
    grid-template-columns: repeat(var(--cards-tablet), minmax(0, 1fr)) !important;
  }
  salla-products-slider .swiper-slide,
  .s-products-slider-card {
    width: calc((100% - (var(--slider-tablet) - 1) * var(--slider-gap)) / var(--slider-tablet)) !important;
    max-width: none !important;
    height: auto !important;
  }
}

/* --- الجوال --- */
@media (max-width: 640px) {
  :root {
    --cards-gap:  12px;
    --slider-gap: 12px;
  }
  salla-products-list .s-products-list-wrapper,
  .s-products-list-wrapper {
    grid-template-columns: repeat(var(--cards-mobile), minmax(0, 1fr)) !important;
  }
  salla-products-slider .swiper-slide,
  .s-products-slider-card {
    width: calc((100% - (var(--slider-mobile) - 1) * var(--slider-gap)) / var(--slider-mobile)) !important;
  }
  custom-salla-product-card .s-product-card-content {
    padding: 10px 10px 12px !important;
  }
  custom-salla-product-card .s-product-card-content-title,
  custom-salla-product-card .s-product-card-content-title a {
    font-size: 14px !important;
  }
}


/* ========== 15. أداء الجوال ==========
   تأثير الزجاج (backdrop-filter) مكلف أثناء التمرير على الجوالات،
   فنستبدله بخلفية بيضاء شبه معتمة بنفس المظهر تقريباً */
@media (max-width: 1024px) {
  .store-header .top-navbar,
  .main-nav-container .inner,
  .main-nav-container.fixed-pinned .inner,
  #mainnav .inner,
  salla-search input,
  .s-search-input {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .store-header .top-navbar,
  .main-nav-container .inner,
  .main-nav-container.fixed-pinned .inner,
  #mainnav .inner {
    background-color: rgba(255, 255, 255, 0.96) !important;
  }
}