:root {
  /* اللون الأسود الرئيسي: النصوص، الأزرار، والفوتر. */
  --azla-ink: #0b0b0b;

  /* أسود أخف قليلًا للنصوص الطويلة حتى تكون القراءة مريحة. */
  --azla-ink-soft: #25231f;

  /* العاجي المستخرج من هوية وشعار AZLA. */
  --azla-ivory: #faf8de;

  /* خلفية المتجر؛ أفتح من العاجي حتى تبقى المنتجات واضحة. */
  --azla-surface: #fffef8;

  /* الذهبي الهادئ المستخدم في اللمسات والعناصر المهمة. */
  --azla-gold: #b89255;

  /* ذهبي داكن للنصوص والروابط حتى يظل التباين واضحًا. */
  --azla-gold-dark: #8f6d38;

  /* لون النصوص الثانوية. */
  --azla-muted: #726d62;

  /* لون الحدود الخفيفة بين العناصر. */
  --azla-line: rgba(11, 11, 11, 0.11);

  /* ظلال موحدة بدل استخدام ظلال مختلفة وعشوائية. */
  --azla-shadow-sm: 0 6px 18px rgba(11, 11, 11, 0.06);
  --azla-shadow-md: 0 16px 40px rgba(11, 11, 11, 0.10);

  /* تدوير الحواف: صغير، متوسط، وكبير. */
  --azla-radius-sm: 12px;
  --azla-radius-md: 18px;
  --azla-radius-lg: 26px;

  /* حركة ناعمة موحدة للعناصر التفاعلية. */
  --azla-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ربط ألوان سلة الأساسية بألوان علامة AZLA. */
  --color-primary: var(--azla-ink);
  --color-primary-dark: #000;
  --color-primary-reverse: var(--azla-ivory);
}

/* يجعل الانتقال إلى أقسام الصفحة ناعمًا. */
html {
  scroll-behavior: smooth;
}

/* الخلفية والنص الأساسي في جميع صفحات المتجر. */
body {
  background: var(--azla-surface) !important;
  color: var(--azla-ink-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ألوان النص عندما يحدده الزائر بالماوس. */
::selection {
  color: var(--azla-ivory);
  background: var(--azla-ink);
}

/* إطار واضح عند التنقل بلوحة المفاتيح لتحسين سهولة الاستخدام. */
:focus-visible {
  outline: 2px solid var(--azla-gold) !important;
  outline-offset: 3px;
}

/* ==========================================================
   02) رأس الصفحة والهيدر
   يشمل شريط البحث، الشعار، القائمة، السلة وأيقونات الحساب.
   ========================================================== */

/* الشريط العلوي بلون عاجي مطابق للهوية. */
.top-navbar {
  color: var(--azla-ink) !important;
  background: var(--azla-ivory) !important;
  border-bottom: 1px solid rgba(11, 11, 11, 0.07);
}

/* حقل البحث بشكل كبسولة هادئة. */
.top-navbar .s-search-input {
  color: var(--azla-ink) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(11, 11, 11, 0.08) !important;
  border-radius: 999px !important;
}

/* خلفية القائمة الرئيسية والخط الفاصل أسفلها. */
.main-nav-container .inner {
  background: rgba(255, 254, 248, 0.97) !important;
  border-bottom: 1px solid var(--azla-line);
}

/* عند ثبات الهيدر أثناء النزول: ظل خفيف وتأثير زجاجي. */
.main-nav-container.fixed-pinned .inner,
.main-nav-container.fixed-header .inner {
  box-shadow: 0 10px 28px rgba(11, 11, 11, 0.07) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* التحكم بمقاس شعار AZLA داخل الهيدر على الكمبيوتر. */
.navbar-brand img {
  width: auto !important;
  max-width: 190px !important;
  max-height: 58px !important;
  object-fit: contain;
}

/* شكل أيقونات الحساب والسلة والقائمة. */
.header-btn__icon {
  color: var(--azla-ink) !important;
  background: var(--azla-surface) !important;
  border-color: rgba(11, 11, 11, 0.13) !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

/* انعكاس لون الأيقونة عند مرور الماوس. */
.header-btn:hover .header-btn__icon {
  color: var(--azla-ivory) !important;
  background: var(--azla-ink) !important;
  border-color: var(--azla-ink) !important;
}

/* الدائرة التي تعرض عدد المنتجات داخل السلة. */
.s-cart-summary-count {
  color: var(--azla-ink) !important;
  background: var(--azla-gold) !important;
}

/* تنسيقات قائمة سطح المكتب فقط؛ لا تطبق على الجوال. */
@media (min-width: 1024px) {
  /* لون ووزن روابط القائمة الرئيسية. */
  #mainnav .main-menu > li > a {
    position: relative;
    color: var(--azla-ink-soft) !important;
    font-weight: 650;
    transition: color 180ms ease;
  }

  /* خط ذهبي يظهر أسفل رابط القائمة النشط أو عند المرور عليه. */
  #mainnav .main-menu > li > a::after {
    position: absolute;
    right: 20%;
    bottom: 13px;
    width: 60%;
    height: 2px;
    content: "";
    background: var(--azla-gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 220ms var(--azla-ease);
  }

  #mainnav .main-menu > li > a:hover,
  #mainnav .main-menu > li.is-active > a {
    color: var(--azla-gold-dark) !important;
  }

  #mainnav .main-menu > li > a:hover::after,
  #mainnav .main-menu > li.is-active > a::after {
    transform: scaleX(1);
  }
}

/* ==========================================================
   03) البنر الرئيسي Hero Slider
   ينسق صورة الحملة، طبقة التعتيم، العنوان والوصف والزر.
   ========================================================== */

/* منع خروج الصورة من حدود البنر ووضع لون احتياطي قبل تحميلها. */
.s-block--hero-slider .swiper-slide {
  overflow: hidden;
  background: var(--azla-ivory) !important;
}

/* تعبئة مساحة البنر بالصورة بدون تشويه أبعادها. */
.s-block--hero-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* تدرج داكن للعربية حتى يظل النص الأبيض واضحًا فوق الصورة. */
html[dir="rtl"] .s-block--hero-slider .overlay-bg::after,
html[dir="rtl"] .s-block--hero-slider .swiper-lazy::after {
  background: linear-gradient(
    90deg,
    rgba(11, 11, 11, 0.04) 0%,
    rgba(11, 11, 11, 0.14) 44%,
    rgba(11, 11, 11, 0.68) 100%
  ) !important;
}

/* عكس التدرج تلقائيًا إذا تم تفعيل اللغة الإنجليزية. */
html[dir="ltr"] .s-block--hero-slider .overlay-bg::after,
html[dir="ltr"] .s-block--hero-slider .swiper-lazy::after {
  background: linear-gradient(
    270deg,
    rgba(11, 11, 11, 0.04) 0%,
    rgba(11, 11, 11, 0.14) 44%,
    rgba(11, 11, 11, 0.68) 100%
  ) !important;
}

/* عنوان البنر: clamp يجعل الحجم يتكيف بين الجوال والكمبيوتر. */
.s-block--hero-slider h3 {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.035em;
}

/* وصف البنر ومنع امتداده بعرض كبير يصعب قراءته. */
.s-block--hero-slider p {
  max-width: 560px;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem) !important;
  line-height: 1.9 !important;
}

/* زر "تسوقي الآن" بالذهبي وشكل كبسولة. */
.s-block--hero-slider .s-button-element,
.s-block--hero-slider a[class*="btn"] {
  color: var(--azla-ink) !important;
  background: var(--azla-gold) !important;
  border-color: var(--azla-gold) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* ==========================================================
   04) المسافات وعناوين الأقسام
   يوحد شكل عناوين: أحدث المنتجات، الأكثر مبيعًا، وغيرها.
   ========================================================== */

/* مسافة رأسية موحدة قبل كل قسم. */
.s-block {
  margin-top: 52px;
}

.s-slider-block__title,
.s-block__title {
  align-items: center !important;
  margin-bottom: 24px !important;
}

/* النص الرئيسي لعناوين الأقسام. */
.s-slider-block__title-right h2,
.s-block__title h2 {
  position: relative;
  color: var(--azla-ink) !important;
  font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  padding-inline-start: 14px;
}

/* العلامة الذهبية الصغيرة بجانب كل عنوان. */
.s-slider-block__title-right h2::before,
.s-block__title h2::before {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 3px;
  height: 24px;
  content: "";
  background: var(--azla-gold);
  border-radius: 999px;
  transform: translateY(-50%);
}

/* زر "عرض الكل" الموجود بجانب بعض الأقسام. */
.s-slider-block__display-all {
  display: inline-flex !important;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px !important;
  color: var(--azla-ink) !important;
  background: transparent !important;
  border: 1px solid var(--azla-line) !important;
  border-radius: 999px !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.s-slider-block__display-all:hover {
  color: var(--azla-ivory) !important;
  background: var(--azla-ink) !important;
  border-color: var(--azla-ink) !important;
}

/* أسهم التنقل بين المنتجات داخل السلايدر. */
.s-slider-nav-arrow {
  color: var(--azla-ink) !important;
  background: var(--azla-surface) !important;
  border: 1px solid var(--azla-line) !important;
  box-shadow: var(--azla-shadow-sm) !important;
}

/* ==========================================================
   05) بطاقات التصنيفات
   مثل: فساتين، جلابيات، عبايات، بيجامات وإكسسوارات.
   ========================================================== */
.s-block--categories .swiper-wrapper {
  padding-block: 10px 18px;
}

/* شكل بطاقة التصنيف الأساسية. */
.s-block--categories .slide--cat-entry {
  min-height: 142px;
  padding: 20px 14px !important;
  color: var(--azla-ink) !important;
  background: linear-gradient(145deg, #fffef8, #f8f4e8) !important;
  border: 1px solid var(--azla-line) !important;
  border-radius: var(--azla-radius-md) !important;
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.035);
  transition: transform 240ms var(--azla-ease), border-color 240ms ease, box-shadow 240ms ease;
}

/* الدائرة المحيطة بأيقونة التصنيف. */
.s-block--categories .slide--cat-entry i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 12px !important;
  color: var(--azla-gold-dark) !important;
  background: rgba(184, 146, 85, 0.13);
  border-radius: 50%;
  font-size: 1.75rem !important;
}

/* اسم التصنيف. */
.s-block--categories .slide--cat-entry h2 {
  color: var(--azla-ink) !important;
  font-size: 0.95rem !important;
  font-weight: 750 !important;
}

/* تأثير المرور يطبق فقط على الأجهزة التي تستخدم مؤشر ماوس. */
@media (hover: hover) {
  .s-block--categories .slide--cat-entry:hover {
    color: var(--azla-ink) !important;
    border-color: rgba(184, 146, 85, 0.7) !important;
    box-shadow: var(--azla-shadow-md);
    transform: translateY(-4px);
  }
}

/* ==========================================================
   06) بطاقات المنتجات
   يشمل الصورة، الاسم، السعر، المفضلة، زر إضافة للسلة والحركة.
   ========================================================== */
.s-products-slider-wrapper,
.s-slider-swiper-wrapper {
  padding-block: 10px 18px !important;
}

/* الحاوية الكاملة لبطاقة المنتج. */
custom-salla-product-card.s-product-card-entry {
  overflow: hidden;
  height: 100%;
  padding: 8px !important;
  background: #fff !important;
  border: 1px solid var(--azla-line) !important;
  border-radius: var(--azla-radius-md) !important;
  box-shadow: 0 8px 26px rgba(11, 11, 11, 0.045) !important;
  transition: transform 260ms var(--azla-ease), border-color 260ms ease, box-shadow 260ms ease !important;
}

/* إطار صورة المنتج بنسبة طول مناسبة للأزياء النسائية. */
.s-product-card-image {
  overflow: hidden;
  background: #f5f1e7 !important;
  border-radius: 14px !important;
  aspect-ratio: 4 / 5;
}

/* قص الصورة بطريقة احترافية دون تمديد أو تشويه. */
.s-product-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 500ms var(--azla-ease) !important;
}

/* المسافات الداخلية لمنطقة معلومات المنتج. */
.s-product-card-content {
  padding: 14px 8px 5px !important;
}

/* اسم المنتج. */
.s-product-card-content-title a {
  color: var(--azla-ink) !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
}

/* السعر العادي وسعر التخفيض. */
.s-product-card-price,
.s-product-card-sale-price {
  color: var(--azla-ink) !important;
  font-weight: 800 !important;
}

/* زر القلب وإضافة المنتج للمفضلة. */
.s-product-card-wishlist-btn {
  color: var(--azla-ink) !important;
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(11, 11, 11, 0.08) !important;
  border-radius: 50% !important;
  box-shadow: var(--azla-shadow-sm) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* زر إضافة المنتج للسلة. */
.s-product-card-content-footer .s-button-element {
  min-height: 44px;
  color: var(--azla-ivory) !important;
  background: var(--azla-ink) !important;
  border: 1px solid var(--azla-ink) !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease !important;
}

/* تأثيرات الماوس؛ لا تعمل على شاشات اللمس حتى لا تسبب إزعاجًا. */
@media (hover: hover) {
  custom-salla-product-card.s-product-card-entry:hover {
    border-color: rgba(184, 146, 85, 0.65) !important;
    box-shadow: var(--azla-shadow-md) !important;
    transform: translateY(-5px) !important;
  }

  custom-salla-product-card.s-product-card-entry:hover .s-product-card-image img {
    transform: scale(1.035);
  }

  .s-product-card-content-footer .s-button-element:hover {
    color: var(--azla-ink) !important;
    background: var(--azla-gold) !important;
    border-color: var(--azla-gold) !important;
  }
}

/* ==========================================================
   07) مميزات المتجر
   مثل: تسوق آمن، خدمة العملاء، وشحن سريع.
   ========================================================== */
.s-block--features__item {
  background: #fff !important;
  border: 1px solid var(--azla-line);
  border-radius: var(--azla-radius-md) !important;
  box-shadow: 0 8px 26px rgba(11, 11, 11, 0.04);
}

/* خلفية أيقونة الميزة. */
.s-block--features__item .feature-icon {
  color: var(--azla-ivory) !important;
  background: var(--azla-ink) !important;
}

.s-block--features__item .feature-icon i {
  color: var(--azla-ivory) !important;
}

/* عنوان الميزة. */
.s-block--features__item h2 {
  color: var(--azla-ink) !important;
}

/* الوصف القصير أسفل عنوان الميزة. */
.s-block--features__item p {
  color: var(--azla-muted) !important;
}

/* ==========================================================
   08) مسار التنقل Breadcrumbs
   مثال: الرئيسية ← فساتين ← اسم المنتج.
   ========================================================== */
.container--breadcrumbs {
  padding-block: 6px !important;
}

.s-breadcrumb-wrapper {
  gap: 4px;
  margin: 0 !important;
  padding: 10px 0 !important;
  font-size: 0.84rem !important;
}

/* الروابط السابقة داخل مسار التنقل. */
.s-breadcrumb-item a {
  color: var(--azla-muted) !important;
  border-radius: 8px;
  transition: color 180ms ease, background 180ms ease;
}

.s-breadcrumb-item a:hover {
  color: var(--azla-ink) !important;
  background: rgba(184, 146, 85, 0.10);
}

/* الصفحة الحالية تظهر بلون ووزن أوضح. */
.s-breadcrumb-item:last-child {
  color: var(--azla-ink) !important;
  font-weight: 700;
}

/* ==========================================================
   09) تذييل المتجر Footer
   هذا الإصدار ثابت. سنضيف فتح وإغلاق أقسام الجوال في JavaScript v2.
   ========================================================== */
.store-footer {
  color: rgba(250, 248, 222, 0.82) !important;
  background: var(--azla-ink) !important;
}

.store-footer__inner {
  background: var(--azla-ink) !important;
  border-bottom-color: rgba(250, 248, 222, 0.12) !important;
}

/* عناوين أعمدة الفوتر بالذهبي. */
.store-footer h3,
.store-footer .s-contacts-title {
  color: var(--azla-gold) !important;
  font-weight: 800 !important;
}

/* النصوص والروابط داخل الفوتر. */
.store-footer p,
.store-footer a,
.store-footer .s-menu-footer-item,
.store-footer .s-contacts-item {
  color: rgba(250, 248, 222, 0.80) !important;
}

.store-footer a:hover {
  color: var(--azla-gold) !important;
  opacity: 1 !important;
}

.store-footer .contact-social {
  border-top-color: rgba(250, 248, 222, 0.12) !important;
}

/* توحيد أيقونات حسابات التواصل داخل دوائر متناسقة. */
.store-footer .social-link,
.store-footer .contact-social a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  color: var(--azla-ivory) !important;
  background: rgba(250, 248, 222, 0.06) !important;
  border: 1px solid rgba(250, 248, 222, 0.20) !important;
  border-radius: 50% !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.store-footer .social-link:hover,
.store-footer .contact-social a:hover {
  color: var(--azla-ink) !important;
  background: var(--azla-gold) !important;
  border-color: var(--azla-gold) !important;
  transform: translateY(-2px);
}

/* حقوق المتجر أسفل الفوتر بلون أقل بروزًا. */
.copyright-text p {
  color: rgba(250, 248, 222, 0.58) !important;
}

/* ==========================================================
   10) تحسينات الجوال
   جميع القواعد هنا تعمل عندما يكون عرض الشاشة 767px أو أقل.
   ========================================================== */
@media (max-width: 767px) {
  /* شعار أصغر حتى لا يزاحم أيقونات الهيدر. */
  .navbar-brand img {
    max-width: 138px !important;
    max-height: 44px !important;
  }

  /* تقليل المسافة بين الأقسام على الشاشات الصغيرة. */
  .s-block {
    margin-top: 32px;
  }

  /* ارتفاع مناسب للبنر العمودي الخاص بالجوال. */
  .s-block--hero-slider .swiper-slide {
    height: 390px !important;
  }

  .s-block--hero-slider h3 {
    font-size: 1.85rem !important;
  }

  .s-slider-block__title,
  .s-block__title {
    margin-bottom: 18px !important;
  }

  .s-slider-block__title-right h2,
  .s-block__title h2 {
    font-size: 1.2rem !important;
  }

  /* تصغير بطاقات التصنيفات قليلًا. */
  .s-block--categories .slide--cat-entry {
    min-height: 124px;
    border-radius: 15px !important;
  }

  /* ظل أخف لبطاقات المنتجات لتحسين شكلها وأداء الجوال. */
  custom-salla-product-card.s-product-card-entry {
    border-radius: 15px !important;
    box-shadow: 0 5px 16px rgba(11, 11, 11, 0.04) !important;
  }

  .s-product-card-content-footer .s-button-element {
    min-height: 42px;
  }

  /* يسمح بسحب مسار التنقل أفقيًا إذا كان طويلًا. */
  .s-breadcrumb-wrapper {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    scrollbar-width: none;
  }

  /* إخفاء شريط التمرير مع الإبقاء على إمكانية السحب. */
  .s-breadcrumb-wrapper::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================
   11) سهولة الوصول وتقليل الحركة
   إذا اختار الزائر تقليل الحركة من إعدادات جهازه، نحترم اختياره.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================
   12) AZLA — اللمسات النهائية النظيفة
   عناوين بلا زخارف، بنر متوازن، وهيدر وفوتر أخف.
   ========================================================== */

:root {
  --azla-gold: #a67c3b;
  --azla-gold-dark: #7d5a29;
  --azla-ivory: #faf7ef;
  --azla-surface: #fffdf8;
}

/* إخفاء البريد من الشريط العلوي للحفاظ على هيدر نظيف. */
.store-header .s-contacts-header {
  display: none !important;
}

/* هيدر هادئ بخلفية شبه شفافة. */
.store-header .main-nav-container,
.store-header .main-nav-container .inner {
  background: rgba(255, 253, 248, 0.97) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* عنوان البنر ووصفه في منتصف الصورة. */
#main-slider-0 .home-slider__content,
.s-block--hero-slider .home-slider__content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: 20px !important;
}

#main-slider-0 .home-slider__content > div,
.s-block--hero-slider .home-slider__content > div {
  width: 100% !important;
  max-width: 800px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

#main-slider-0 .home-slider__content h2,
#main-slider-0 .home-slider__content h3,
#main-slider-0 .home-slider__content p,
.s-block--hero-slider .home-slider__content h2,
.s-block--hero-slider .home-slider__content h3,
.s-block--hero-slider .home-slider__content p {
  margin-inline: auto !important;
  text-align: center !important;
}

#main-slider-0 .home-slider__content h2,
.s-block--hero-slider .home-slider__content h2 {
  max-width: 780px !important;
  font-size: clamp(2rem, 3.2vw, 3rem) !important;
  line-height: 1.3 !important;
}

/* عناوين الأقسام في المنتصف بدون خطوط أو زخارف. */
.s-slider-block__title,
.s-block__title {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
}

.s-slider-block__title-right,
.s-block__title > div:first-child {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

.s-slider-block__title-right h2,
.s-block__title h2 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.s-slider-block__title-right h2::before,
.s-slider-block__title-right h2::after,
.s-block__title h2::before,
.s-block__title h2::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  content: none !important;
}

/* إبقاء عرض الكل بعيدًا عن عنوان القسم. */
.s-slider-block__display-all {
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* صور البنرات بحواف هادئة. */
.s-block--fixed-banner,
.s-block--full-banner {
  overflow: hidden;
  border-radius: var(--azla-radius-md);
}

.s-block--fixed-banner img,
.s-block--full-banner img {
  display: block;
  width: 100%;
  border-radius: inherit;
}

/* أسماء المنتجات في سطرين وارتفاع ثابت. */
.s-product-card-content-title {
  min-height: 52px;
}

.s-product-card-content-title a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* تصحيح أيقونات التواصل وفق محددات ثيم رائد الفعلية. */
.store-footer .s-social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  color: var(--azla-ivory) !important;
  background: rgba(250, 247, 239, 0.06) !important;
  border: 1px solid rgba(250, 247, 239, 0.24) !important;
  border-radius: 50% !important;
  transition: all 180ms ease;
}

.store-footer .s-social-link:hover {
  color: var(--azla-ink) !important;
  background: var(--azla-gold) !important;
  border-color: var(--azla-gold) !important;
  transform: translateY(-2px);
}

.store-footer {
  border-top: 1px solid rgba(166, 124, 59, 0.55);
}

/* ضبط الجوال. */
@media (max-width: 767px) {
  .s-block--hero-slider .swiper-slide {
    height: 390px !important;
    min-height: 390px !important;
  }

  #main-slider-0 .home-slider__content > div,
  .s-block--hero-slider .home-slider__content > div {
    width: 94% !important;
    max-width: 94% !important;
  }

  #main-slider-0 .home-slider__content h2,
  .s-block--hero-slider .home-slider__content h2 {
    font-size: 1.45rem !important;
  }

  #main-slider-0 .home-slider__content p,
  .s-block--hero-slider .home-slider__content p {
    font-size: 0.8rem !important;
    line-height: 1.75 !important;
  }

  .s-slider-block__title {
    min-height: 76px !important;
    align-items: flex-start !important;
  }

  .s-slider-block__display-all {
    top: auto !important;
    bottom: 0 !important;
    inset-inline-start: 50% !important;
    transform: translateX(-50%) !important;
  }

  .s-block--fixed-banner,
  .s-block--full-banner {
    border-radius: 10px;
  }
}