/* ==========================================================================
   ZIUS — أكواد التنسيق الموحّدة (الإصدار الثاني)
   تُلصق كاملة في: تصميم المتجر ← أكواد التنسيق
   تستبدل كل الأكواد السابقة بالكامل — لا تُضاف فوقها

   الفهرس
   00) الخطوط والمتغيرات
   01) شاشة الافتتاحية
   02) الخلفية والنسيج
   03) النصوص والأساسيات
   04) الشريط العلوي
   05) الهيدر والقائمة والأيقونات
   06) البانر الرئيسي والبانر العريض
   07) البانرات المربعة
   08) عناوين الأقسام وأسهم السلايدر
   09) التصنيفات
   10) المميزات الثلاثة
   11) بطاقات المنتجات
   12) صورة المنتج: التعتيم واللمعة وتبديل الصورة
   13) الأزرار
   14) معرض الصور
   15) الفوتر
   16) صفحة المنتج
   17) تفاصيل عامة
   18) الجوال وتقليل الحركة
   19) زر «اختاري الآن»
   ========================================================================== */


/* ==========================================================================
   00) الخطوط والمتغيرات
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&display=swap');

:root {
  /* البيج والذهبي — أساس الهوية */
  --zius-cream:      #F7F2EA;
  --zius-ivory:      #FFFDF9;
  --zius-sand:       #E9DDCC;
  --zius-gold:       #C2984F;
  --zius-gold-soft:  #E3C98E;
  --zius-gold-deep:  #A07A33;

  /* العنابي — لون الأفعال والحركة (اللون الوحيد للأزرار والشارات) */
  --zius-wine:       #6E3448;
  --zius-wine-deep:  #4A1E2C;
  --zius-wine-soft:  #8E4C61;
  --zius-wine-tint:  #EEDCE2;
  --zius-wine-line:  rgba(110, 52, 72, .22);
  --zius-on-wine:    #F5E9EC;

  /* النصوص */
  --zius-ink:        #3B2F26;
  --zius-ink-soft:   #7A6A5C;

  /* الظلال */
  --zius-shadow-sm:  0 2px 10px rgba(59, 47, 38, .06);
  --zius-shadow-md:  0 10px 30px rgba(59, 47, 38, .10);
  --zius-shadow-wine: 0 18px 36px rgba(74, 30, 44, .14);

  /* الهالة الفاتحة حول النص العنابي فوق الصور */
  --zius-halo:       0 0 14px rgba(255, 253, 249, .85), 0 0 3px rgba(255, 253, 249, .70);

  /* الحركة */
  --zius-ease:       cubic-bezier(.22, .61, .36, 1);
  --zius-fast:       .25s var(--zius-ease);
  --zius-slow:       .45s var(--zius-ease);

  --zius-radius:     14px;
}


/* ==========================================================================
   01) شاشة الافتتاحية
   تُبنى هنا لتظهر قبل رسم الصفحة — يخفيها الكود البرمجي فور الجاهزية
   ========================================================================== */

html::before {
  content: "";

  position: fixed;
  inset: 0;
  z-index: 2147483000;

  background-color: #FFFFFF;
  background-image: url('https://cdn.files.salla.network/theme/2142083749/a5cebce1-c2ef-48ae-a2bd-7454b9f11b69_400x400.jpeg');
  background-repeat: no-repeat;
  background-position: center calc(50% - 26px);
  background-size: clamp(140px, 24vw, 210px) auto;

  animation: ziusSplashOut .7s var(--zius-ease) 4.3s forwards;
}

html::after {
  content: "";

  position: fixed;
  z-index: 2147483001;

  top: calc(50% + 78px);
  left: 50%;
  transform: translateX(-50%);

  width: clamp(110px, 18vw, 165px);
  height: 1.5px;
  border-radius: 999px;

  background:
    linear-gradient(90deg, transparent 0%, var(--zius-wine) 50%, transparent 100%) no-repeat,
    #EFE7DA;
  background-size: 40% 100%, 100% 100%;

  animation:
    ziusSplashBar 1.4s ease-in-out infinite,
    ziusSplashOut .7s var(--zius-ease) 4.3s forwards;
}

@keyframes ziusSplashBar {
  from { background-position: -45% 0, 0 0; }
  to   { background-position: 105% 0, 0 0; }
}

@keyframes ziusSplashOut {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

html.zius-ready::before,
html.zius-ready::after {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
  transition: opacity .6s var(--zius-ease), visibility .6s var(--zius-ease) !important;
}


/* ==========================================================================
   02) الخلفية والنسيج
   ========================================================================== */

body {
  position: relative;
  background-color: var(--zius-cream) !important;
  -webkit-font-smoothing: antialiased;
}

/* ضربات فرشاة ناعمة */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(128deg,
      transparent 0%, transparent 12%,
      rgba(255, 252, 246, .88) 19%,
      rgba(255, 252, 246, .58) 27%,
      rgba(226, 207, 184, .16) 34%,
      transparent 43%),
    linear-gradient(128deg,
      transparent 24%,
      rgba(222, 201, 177, .24) 33%,
      rgba(255, 250, 243, .78) 42%,
      rgba(222, 201, 177, .16) 51%,
      transparent 62%),
    linear-gradient(128deg,
      transparent 45%,
      rgba(255, 252, 246, .82) 54%,
      rgba(219, 197, 172, .20) 63%,
      rgba(255, 250, 243, .42) 69%,
      transparent 77%),
    radial-gradient(ellipse 55% 20% at 20% 35%, rgba(255, 253, 248, .48), transparent 70%),
    radial-gradient(ellipse 60% 24% at 78% 65%, rgba(224, 202, 178, .16), transparent 72%),
    var(--zius-cream);

  background-size:
    900px 850px, 1100px 1000px, 1000px 900px,
    1100px 800px, 1200px 900px, auto;

  background-position:
    0 0, 220px -100px, -100px 300px, 0 0, 100% 100%, 0 0;
}

/* حبيبات إضافية خفيفة */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .8;

  background:
    linear-gradient(118deg, transparent 0%, rgba(205, 184, 159, .055) 30%, transparent 48%),
    linear-gradient(118deg, transparent 42%, rgba(255, 255, 255, .35) 55%, transparent 70%);

  background-size: 700px 700px, 900px 900px;
  background-position: 0 0, 350px 200px;
}

/* إبقاء المحتوى فوق النسيج
   المحتوى الرئيسي في الطبقة ١ — والهيدر أعلى منه (القسم ٠٥) */
#app,
main,
.store-footer,
footer {
  position: relative;
  z-index: 1;
}

/* إزالة الخلفيات الرمادية الباردة */
main,
.s-block,
section {
  background-color: transparent !important;
}


/* ==========================================================================
   03) النصوص والأساسيات
   ========================================================================== */

body,
button,
input,
textarea,
select {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  color: var(--zius-ink);
}

/* خط العناوين الكلاسيكي — لعناوين الأقسام فقط */
.s-block__title,
.s-block-title,
.section-title,
.store-footer h3,
footer h3 {
  font-family: 'Amiri', 'IBM Plex Sans Arabic', serif;
  font-weight: 700;
  color: var(--zius-ink);
  line-height: 1.6;
}

a {
  color: #3F3832;
  transition: color var(--zius-fast);
}

a:hover {
  color: var(--zius-wine);
}

::selection {
  background: var(--zius-wine-tint);
  color: var(--zius-wine-deep);
}

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--zius-cream); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--zius-wine-soft), var(--zius-wine));
  border-radius: 20px;
}

/* وضوح التنقل بلوحة المفاتيح */
a:focus-visible,
button:focus-visible,
.s-button-element:focus-visible {
  outline: 2px solid var(--zius-wine);
  outline-offset: 3px;
  border-radius: 6px;
}

/* إخفاء الخلفية البيضاء للوجو */
img[src*="a5cebce1-c2ef-48ae-a2bd-7454b9f11b69"] {
  background: transparent !important;
  mix-blend-mode: multiply !important;
}


/* ==========================================================================
   04) الشريط العلوي — خلفية عنابية ونص فاتح
   ========================================================================== */

.top-navbar,
.header-top {
  background: var(--zius-wine-deep) !important;
  border-bottom: 0 !important;
  color: var(--zius-on-wine) !important;
}

.top-navbar a,
.top-navbar span,
.top-navbar p,
.top-navbar i,
.top-navbar button,
.header-top a,
.header-top span,
.header-top p,
.header-top i,
.header-top button {
  color: var(--zius-on-wine) !important;
}

.top-navbar a:hover,
.header-top a:hover {
  color: var(--zius-gold-soft) !important;
}

/* خط المرور تحت الروابط يصبح ذهبيًا فوق العنابي */
.top-navbar a::after,
.header-top a::after {
  background: var(--zius-gold-soft) !important;
}

/* مربع البحث داخل الشريط يبقى فاتحًا ونصه غامقًا */
.top-navbar input,
.header-top input {
  background: var(--zius-ivory) !important;
  border-color: transparent !important;
  color: var(--zius-ink) !important;
}

.top-navbar input::placeholder,
.header-top input::placeholder {
  color: var(--zius-ink-soft) !important;
}

.top-navbar salla-search *,
.top-navbar .s-search-container *,
.header-top salla-search *,
.header-top .s-search-container * {
  color: var(--zius-ink) !important;
}


/* ==========================================================================
   05) الهيدر والقائمة والأيقونات
   ========================================================================== */

/* الهيدر أعلى من المحتوى الرئيسي حتى لا تُقص القوائم المنسدلة */
.store-header {
  position: relative;
  z-index: 60 !important;
  background: rgba(247, 242, 234, .96);
  border-bottom: 1px solid var(--zius-sand);
}

#mainnav,
.main-nav-container {
  z-index: 61;
  background: rgba(247, 242, 234, .94);
}

/* الضبابية في طبقة خلفية مستقلة — لا تحبس القوائم المنسدلة */
.main-nav-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
}

/* القوائم المنسدلة فوق كل شيء داخل الهيدر */
.store-header .dropdown__menu,
.store-header .sub-menu,
.s-user-menu-dropdown,
.s-user-menu-dropdown-content,
salla-user-menu .dropdown__menu {
  z-index: 70 !important;
}

/* قائمة الجوال الجانبية بلا ضبابية */
.mm-menu,
.mm-wrapper__blocker,
.main-menu {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.main-menu a,
.mainmenu-list > li > a,
.store-menu a {
  position: relative;
  color: var(--zius-ink);
}

.main-menu a::after,
.mainmenu-list > li > a::after,
.store-menu a::after {
  content: '';
  position: absolute;
  inset-inline: 50%;
  bottom: -6px;
  height: 1.5px;
  background: var(--zius-wine);
  transition: inset-inline var(--zius-fast);
}

.main-menu a:hover::after,
.mainmenu-list > li > a:hover::after,
.store-menu a:hover::after {
  inset-inline: 0;
}

.main-menu a:hover,
.store-menu a:hover {
  color: var(--zius-wine);
}

.s-cart-summary-count,
.cart-count,
.badge-cart {
  background: var(--zius-wine) !important;
  box-shadow: 0 0 0 3px rgba(110, 52, 72, .16);
}

.s-search-input,
.header-search input,
input[type="search"] {
  background: var(--zius-ivory);
  border: 1px solid var(--zius-sand);
  border-radius: 999px;
  transition: box-shadow var(--zius-fast), border-color var(--zius-fast);
}

.s-search-input:focus,
.header-search input:focus,
input[type="search"]:focus {
  border-color: var(--zius-wine-tint);
  box-shadow: 0 0 0 4px rgba(110, 52, 72, .10);
}

/* أيقونات السلة والحساب */
.store-header .s-cart-summary-wrapper,
.store-header salla-user-menu .s-user-menu-trigger,
.store-header .header-btn {
  border-radius: 999px;
  transition: transform var(--zius-fast), box-shadow var(--zius-fast);
}

@keyframes ziusWiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-12deg); }
  50%      { transform: rotate(9deg); }
  75%      { transform: rotate(-5deg); }
}

@media (hover: hover) and (pointer: fine) {
  .store-header .s-cart-summary-wrapper:hover,
  .store-header salla-user-menu .s-user-menu-trigger:hover,
  .store-header .header-btn:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 3px rgba(110, 52, 72, .14),
      0 8px 18px rgba(74, 30, 44, .12);
  }

  .store-header salla-cart-summary:hover .sicon-shopping-bag,
  .store-header .s-cart-summary-wrapper:hover .sicon-shopping-bag {
    display: inline-block;
    transform-origin: 50% 10%;
    animation: ziusWiggle .6s var(--zius-ease);
  }
}


/* ==========================================================================
   06) البانر الرئيسي والبانر العريض
   ========================================================================== */

section:has(img[alt^="ZIUS image-slider-"]) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

section:has(img[alt^="ZIUS image-slider-"]) .s-slider-container {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

section:has(img[alt^="ZIUS image-slider-"]) .swiper-wrapper {
  width: 100% !important;
}

section:has(img[alt^="ZIUS image-slider-"]) .swiper-slide {
  width: 100% !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
}

section:has(img[alt^="ZIUS image-slider-"]) .swiper-slide img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* البانر العريض — تقريب بطيء ولمعة ذهبية */
.s-block--fixed-banner a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--zius-radius);
}

.s-block--fixed-banner img {
  transition: transform 8s linear;
}

.s-block--fixed-banner a:hover img {
  transform: scale(1.05);
}

/* اللمعة الذهبية العابرة — مشتركة بين البانر العريض والبانرات المربعة */
.s-block--fixed-banner a::after,
.s-block--banners .banner-entry::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -80% !important;
  right: auto !important;
  z-index: 2 !important;

  width: 55% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;

  background: linear-gradient(100deg,
    rgba(255, 248, 232, 0) 0%,
    rgba(255, 244, 222, .50) 50%,
    rgba(255, 248, 232, 0) 100%) !important;

  opacity: 0 !important;
  transform: skewX(-18deg) !important;
  animation: none !important;
  pointer-events: none !important;
  transition: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .s-block--fixed-banner a:hover::after,
  .s-block--banners .banner-entry:hover::after {
    left: 130% !important;
    opacity: 1 !important;
    transition: left 1s var(--zius-ease), opacity .25s ease !important;
  }
}

/* أسهم ونقاط السلايدر */
.swiper-button-next,
.swiper-button-prev,
.s-slider-nav button,
.s-slider-block__title-nav button {
  background: rgba(255, 253, 249, .9) !important;
  color: var(--zius-wine) !important;
  border: 1px solid var(--zius-sand) !important;
  border-radius: 50% !important;
  box-shadow: var(--zius-shadow-sm);
  transition: transform var(--zius-fast), background var(--zius-fast),
              color var(--zius-fast), border-color var(--zius-fast);
}

.swiper-button-next:hover,
.swiper-button-prev:hover,
.s-slider-nav button:hover,
.s-slider-block__title-nav button:hover {
  background: var(--zius-wine) !important;
  border-color: var(--zius-wine) !important;
  color: #FFFFFF !important;
  transform: scale(1.08);
}

.s-slider-block__title-nav button:hover i,
.s-slider-nav button:hover i {
  color: #FFFFFF !important;
}

.swiper-button-disabled,
.s-slider-block__title-nav button:disabled {
  opacity: .45 !important;
  transform: none !important;
}

.swiper-pagination-bullet-active {
  background: var(--zius-wine) !important;
  width: 22px !important;
  border-radius: 999px;
  transition: width var(--zius-fast);
}


/* ==========================================================================
   07) البانرات المربعة — بلا تعتيم ونص عنابي
   ========================================================================== */

.s-block--banners .banner-entry {
  position: relative !important;
  overflow: hidden !important;

  /* لون ثابت يظهر إلى أن تُحمَّل الصورة */
  background-color: var(--zius-sand) !important;
  background-blend-mode: normal !important;
  filter: none !important;

  border-radius: var(--zius-radius) !important;
  box-shadow: none !important;

  transition: transform var(--zius-slow), box-shadow var(--zius-slow) !important;
}

/* إلغاء طبقة التعتيم التي يضيفها القالب */
.s-block--banners .banner-entry::before,
.s-block--banners .banner-entry.has-overlay::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

.s-block--banners .banner-entry__text {
  z-index: 3;
}

/* إطار النص ذهبي رفيع */
.s-block--banners .text-with-border {
  background: transparent !important;
  border: 1px solid rgba(194, 152, 79, .75) !important;
  border-radius: 6px !important;
  transition: border-color var(--zius-slow) !important;
}

.s-block--banners .text-with-border::before,
.s-block--banners .text-with-border::after {
  content: none !important;
  display: none !important;
}

.s-block--banners .banner__title {
  font-family: 'Amiri', 'IBM Plex Sans Arabic', serif !important;
  font-size: clamp(19px, 1.9vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: var(--zius-wine) !important;
  text-shadow: var(--zius-halo) !important;
}

.s-block--banners .banner__description {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
  color: var(--zius-wine-deep) !important;
  text-shadow: var(--zius-halo) !important;
}

@media (hover: hover) and (pointer: fine) {
  .s-block--banners .banner-entry:hover {
    transform: translateY(-5px);
    box-shadow: var(--zius-shadow-wine) !important;
  }

  .s-block--banners .banner-entry:hover .text-with-border {
    border-color: var(--zius-wine) !important;
  }
}


/* ==========================================================================
   08) عناوين الأقسام — خط عنابي ومعيّن صغير
   ========================================================================== */

.s-block__title,
.s-block-title,
.section-title {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 26px;
  font-size: clamp(20px, 2.4vw, 28px);
}

.s-block__title::after,
.s-block-title::after,
.section-title::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;

  width: 64px !important;
  height: 2px !important;
  border-radius: 2px;

  background: var(--zius-wine) !important;
  transform: none !important;
}

.s-block__title::before,
.s-block-title::before,
.section-title::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: auto !important;
  bottom: -3px !important;
  inset-inline-start: 70px !important;
  inset-inline-end: auto !important;

  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;

  background: var(--zius-wine) !important;
  transform: rotate(45deg) !important;
}


/* ==========================================================================
   09) التصنيفات — الصورة نفسها هي البطاقة
   ========================================================================== */

.s-slider-container .swiper-slide.slide--one-sixth {
  padding: 0 8px !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.s-slider-container .slide--cat-entry {
  position: relative !important;
  display: block !important;

  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;

  background-color: transparent !important;
  border: 0 !important;
  border-radius: var(--zius-radius) !important;
  box-shadow: none !important;

  overflow: hidden !important;
  text-decoration: none !important;

  transition: transform var(--zius-slow);
}

.s-slider-container .slide--cat-entry img,
.s-slider-container .slide--cat-entry img.rounded-full {
  display: block !important;

  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;

  object-fit: cover !important;
  object-position: center center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: var(--zius-radius) !important;
  background: transparent !important;
  box-shadow: none !important;

  transform: scale(1);
  transition: transform .55s var(--zius-ease);
}

/* طبقة عنابية تظهر عند المرور */
.s-slider-container .slide--cat-entry::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;

  border-radius: var(--zius-radius);

  background: linear-gradient(
    to top,
    rgba(74, 30, 44, .78) 0%,
    rgba(74, 30, 44, .30) 40%,
    rgba(74, 30, 44, 0) 72%
  );

  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--zius-ease);
}

.s-slider-container .slide--cat-entry h2 {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 22px !important;
  z-index: 3 !important;

  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 10px 9px !important;

  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #FFFFFF !important;
  text-align: center !important;

  opacity: 0 !important;
  transform: translateY(10px);
  transition: opacity .35s var(--zius-ease), transform .35s var(--zius-ease);
}

.s-slider-container .slide--cat-entry h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;

  width: 24px;
  height: 1.5px;
  transform: translateX(-50%);

  background: #FFFFFF;
  opacity: 0;
  transition: width .35s var(--zius-ease), opacity .35s var(--zius-ease);
}

@media (hover: hover) and (pointer: fine) {
  .s-slider-container .slide--cat-entry:hover          { transform: translateY(-6px); }
  .s-slider-container .slide--cat-entry:hover img      { transform: scale(1.06); }
  .s-slider-container .slide--cat-entry:hover::after   { opacity: 1; }

  .s-slider-container .slide--cat-entry:hover h2 {
    opacity: 1 !important;
    transform: translateY(0);
  }

  .s-slider-container .slide--cat-entry:hover h2::after {
    width: 34px;
    opacity: 1;
  }
}

.s-slider-container .swiper-slide,
.s-slider-container .slide--cat-entry,
.s-slider-container .slide--cat-entry > * {
  box-shadow: none !important;
}


/* توسيط التصنيفات في منتصف الصفحة على الشاشات الكبيرة
   (عددها أقل من سعة السلايدر، فكانت تترك مساحة فارغة على اليسار) */
@media (min-width: 1024px) {
  .s-slider-container .swiper-wrapper:has(> .slide--one-sixth) {
    display: flex !important;
    justify-content: center !important;
    transform: none !important;
  }

  /* الهوامش التلقائية توسّط الصور حتى لو تجاهل السلايدر خاصية التوسيط */
  .s-slider-container .swiper-wrapper > .swiper-slide.slide--one-sixth:first-child {
    margin-inline-start: auto !important;
  }

  .s-slider-container .swiper-wrapper > .swiper-slide.slide--one-sixth:last-child {
    margin-inline-end: auto !important;
  }
}


/* ==========================================================================
   10) المميزات الثلاثة — حلقة عنابية وأيقونة ذهبية
   ========================================================================== */

.s-block--features__item {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 245px;
  padding: 30px 24px;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  text-align: center;
  transition: transform .35s var(--zius-ease);
}

.s-block--features__item > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.s-block--features__item::before,
.s-block--features__item::after {
  content: none !important;
  display: none !important;
}

.s-block--features__item .feature-icon {
  position: relative;

  width: 112px;
  height: 112px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 22px;

  background: transparent !important;
  border: none !important;
  border-radius: 50%;

  color: var(--zius-gold);
  transition: transform .35s var(--zius-ease);
}

/* الدائرة الداخلية */
.s-block--features__item .feature-icon::before {
  content: "";
  position: absolute;
  z-index: 0;

  width: 82px;
  height: 82px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background: #F1E8DC;
  border-radius: 50%;

  transition: background .4s var(--zius-ease);
}

/* الحلقة المنقّطة — عنابية دائمًا */
.s-block--features__item .feature-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 1;

  border: 2px dotted var(--zius-wine);
  border-radius: 50%;
  opacity: .75;

  transition: transform .35s var(--zius-ease), opacity .35s var(--zius-ease);
}

.s-block--features__item .feature-icon i {
  position: relative;
  z-index: 2;

  font-size: 34px !important;
  line-height: 1;
  font-weight: normal;

  color: var(--zius-gold) !important;
  transition: transform .35s var(--zius-ease), color .35s var(--zius-ease);
}

.s-block--features__item h2 {
  margin: 0 0 8px !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.6;
  color: #3F3B36 !important;
  transition: color .35s var(--zius-ease);
}

.s-block--features__item p {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.8;
  color: #817B73 !important;
}

/* الهوفر — الدائرة تمتلئ بالعنابي والأيقونة تصبح بيضاء */
@media (hover: hover) and (pointer: fine) {
  .s-block--features__item:hover                       { transform: translateY(-4px); }
  .s-block--features__item:hover .feature-icon         { transform: scale(1.03); }
  .s-block--features__item:hover .feature-icon::before { background: var(--zius-wine) !important; }

  .s-block--features__item:hover .feature-icon::after {
    border-style: solid !important;
    opacity: 1;
    transform: scale(1.04);
  }

  .s-block--features__item:hover .feature-icon i {
    color: #FFFFFF !important;
    transform: scale(1.08);
  }

  .s-block--features__item:hover h2 {
    color: var(--zius-wine-deep) !important;
  }
}

@media (min-width: 768px) {
  .s-block--features > div {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ==========================================================================
   11) بطاقات المنتجات
   ========================================================================== */

.s-product-card,
.s-product-card-entry,
.product-entry {
  position: relative;

  background-color: var(--zius-ivory) !important;

  border: 1px solid transparent !important;
  border-radius: var(--zius-radius);
  overflow: hidden;

  transition:
    transform var(--zius-slow),
    box-shadow var(--zius-slow),
    border-color var(--zius-slow);
}

.s-product-card-content {
  background-color: var(--zius-ivory) !important;
}

.s-product-card:hover,
.s-product-card-entry:hover,
.product-entry:hover {
  transform: translateY(-10px);
  border-color: var(--zius-wine-line) !important;
  box-shadow: 0 22px 44px rgba(74, 30, 44, .14);
}

/* خط عنابي ينمو أسفل البطاقة */
.s-product-card::after,
.s-product-card-entry::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 3;

  width: 0;
  height: 2px;
  transform: translateX(-50%);

  background: linear-gradient(90deg, var(--zius-wine-soft), var(--zius-wine));
  transition: width var(--zius-slow);
}

.s-product-card:hover::after,
.s-product-card-entry:hover::after {
  width: 100%;
}

/* منطقة الصورة — مع خط عنابي رفيع ثابت أسفلها */
.s-product-card__image,
.s-product-card-image,
.s-product-card .image-wrapper,
.product-entry .product-image {
  position: relative !important;
  overflow: hidden !important;
  background-color: #F9F3EB !important;
  border-bottom: 1px solid var(--zius-wine-line) !important;
}

/* اسم المنتج */
.s-product-card-content-title,
.s-product-card-content-title a,
.product-entry .product-title a {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--zius-ink);
  transition: color var(--zius-fast);
}

.s-product-card:hover .s-product-card-content-title a,
.s-product-card-entry:hover .s-product-card-content-title a {
  color: var(--zius-wine) !important;
}

/* السعر */
.s-product-card-price,
.s-product-card-price h4,
.s-product-card-sale-price,
.product-entry .product-price {
  font-family: 'Amiri', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--zius-gold-deep);
}

.s-product-card-price-sale,
.s-product-card-price del,
.product-entry .product-price del {
  font-size: 14px;
  color: var(--zius-ink-soft);
}

/* زر المفضلة — قلب عنابي بحلقة وردية */
salla-button.s-product-card-wishlist-btn {
  z-index: 6 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

button.s-product-card-wishlist-btn,
.product-entry .wishlist-btn {
  background: rgba(255, 253, 249, .94) !important;
  border: 1px solid var(--zius-wine-tint) !important;
  border-radius: 50% !important;
  color: var(--zius-wine) !important;
  box-shadow: 0 0 0 3px rgba(110, 52, 72, .06) !important;
  transition: transform var(--zius-fast), color var(--zius-fast),
              background var(--zius-fast), border-color var(--zius-fast) !important;
}

button.s-product-card-wishlist-btn i,
.product-entry .wishlist-btn i {
  color: var(--zius-wine) !important;
  transition: color var(--zius-fast);
}

button.s-product-card-wishlist-btn:hover,
button.s-product-card-wishlist-btn.added,
button.s-product-card-wishlist-btn.favorited,
.product-entry .wishlist-btn:hover {
  background: var(--zius-wine) !important;
  border-color: var(--zius-wine) !important;
  color: #FFFFFF !important;
}

button.s-product-card-wishlist-btn:hover {
  transform: scale(1.12);
}

button.s-product-card-wishlist-btn:hover i,
button.s-product-card-wishlist-btn.added i,
button.s-product-card-wishlist-btn.favorited i,
.product-entry .wishlist-btn:hover i {
  color: #FFFFFF !important;
}

/* الشارات */
.s-product-card-promotion-title,
.s-product-card-sale-badge,
.s-product-card-out-badge,
.product-entry .product-badge {
  background: var(--zius-wine) !important;
  background-image: none !important;

  color: #FFFFFF !important;

  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: .2px !important;

  box-shadow: 0 4px 14px rgba(110, 52, 72, .25) !important;
}


/* ==========================================================================
   12) صورة المنتج: التعتيم واللمعة وتبديل الصورة
   الطبقات على رابط الصورة وبخصائص مفروضة كاملة
   حتى لا تتعارض مع طبقات القالب (سبب المربع البنفسجي سابقًا)
   ========================================================================== */

.s-product-card-image > a,
.s-product-card__image > a,
.product-entry .product-image > a {
  position: relative !important;
  display: block !important;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

.s-product-card-image img,
.s-product-card__image img,
.product-entry .product-image img {
  transition: transform .65s var(--zius-ease), opacity .45s var(--zius-ease) !important;
}

/* طبقة التعتيم العنابي + اللمعة الذهبية في طبقة واحدة */
.s-product-card-image > a::before,
.s-product-card__image > a::before,
.product-entry .product-image > a::before {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 4 !important;

  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;

  background-color: transparent !important;
  background-image:
    linear-gradient(105deg,
      rgba(255, 246, 226, 0) 35%,
      rgba(255, 246, 226, .55) 50%,
      rgba(255, 246, 226, 0) 65%),
    linear-gradient(to top,
      rgba(74, 30, 44, .40) 0%,
      rgba(74, 30, 44, .10) 45%,
      rgba(74, 30, 44, 0) 75%) !important;
  background-repeat: no-repeat !important;
  background-size: 250% 100%, 100% 100% !important;
  background-position: 160% 0, 0 0 !important;

  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
  pointer-events: none !important;

  transition: opacity .4s var(--zius-ease) !important;
}

/* شريط عرض التفاصيل */
.s-product-card-image > a::after,
.s-product-card__image > a::after,
.product-entry .product-image > a::after {
  content: "عرض التفاصيل" !important;
  display: block !important;

  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 16px !important;
  left: 50% !important;
  z-index: 5 !important;

  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px 22px !important;
  border: 0 !important;
  border-radius: 999px !important;

  background: rgba(255, 253, 249, .95) !important;
  color: var(--zius-wine-deep) !important;

  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;

  box-shadow: 0 6px 18px rgba(74, 30, 44, .22) !important;

  opacity: 0 !important;
  transform: translate(-50%, 14px) !important;
  animation: none !important;
  pointer-events: none !important;

  transition: opacity .35s var(--zius-ease), transform .35s var(--zius-ease) !important;
}

/* زر المفضلة فوق كل الطبقات */
.s-product-card-image salla-button,
.s-product-card-image .s-product-card-wishlist-btn {
  z-index: 6 !important;
}

/* الصورة البديلة — تُضاف بالكود البرمجي داخل الرابط */
.zius-alt-image {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 3 !important;

  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;

  object-fit: cover !important;
  object-position: center !important;
  background: #F9F3EB !important;

  opacity: 0 !important;
  transform: scale(1.02);
  pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {

  /* التقريب */
  .s-product-card:hover .s-product-card-image img,
  .s-product-card-entry:hover .s-product-card-image img,
  .s-product-card-entry:hover .s-product-card__image img,
  .product-entry:hover .product-image img {
    transform: scale(1.1) !important;
  }

  /* ظهور التعتيم ومرور اللمعة */
  .s-product-card:hover .s-product-card-image > a::before,
  .s-product-card-entry:hover .s-product-card-image > a::before,
  .s-product-card-entry:hover .s-product-card__image > a::before,
  .product-entry:hover .product-image > a::before {
    opacity: 1 !important;
    background-position: -60% 0, 0 0 !important;
    transition: opacity .4s var(--zius-ease), background-position 1s var(--zius-ease) !important;
  }

  /* ظهور شريط التفاصيل */
  .s-product-card:hover .s-product-card-image > a::after,
  .s-product-card-entry:hover .s-product-card-image > a::after,
  .s-product-card-entry:hover .s-product-card__image > a::after,
  .product-entry:hover .product-image > a::after {
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
  }

  /* تبديل الصورة بتلاشٍ ناعم */
  .s-product-card:hover .zius-alt-image,
  .s-product-card-entry:hover .zius-alt-image,
  .product-entry:hover .zius-alt-image {
    opacity: 1 !important;
    transform: scale(1.1);
  }

  .s-product-card:hover .zius-has-alt img:not(.zius-alt-image),
  .s-product-card-entry:hover .zius-has-alt img:not(.zius-alt-image),
  .product-entry:hover .zius-has-alt img:not(.zius-alt-image) {
    opacity: 0 !important;
  }
}


/* ==========================================================================
   13) الأزرار — عنابي مصمت والنص أبيض دائمًا
   ========================================================================== */

salla-add-product-button .s-button-element,
.s-add-product-button-main,
.s-button-primary,
.s-button-primary-outline:not(.s-button-icon),
.btn--primary {
  position: relative !important;
  overflow: hidden !important;

  background-color: var(--zius-wine) !important;
  background-image: none !important;

  border: 1px solid var(--zius-wine) !important;
  border-radius: 999px !important;

  color: #FFFFFF !important;
  font-weight: 500 !important;

  box-shadow: 0 4px 14px rgba(110, 52, 72, .22) !important;

  transition:
    background-color .3s var(--zius-ease),
    border-color .3s var(--zius-ease),
    box-shadow .3s var(--zius-ease),
    transform .3s var(--zius-ease) !important;
}

/* النص والأيقونة داخل الزر أبيض بلا استثناء */
salla-add-product-button .s-button-element *,
.s-add-product-button-main *,
.s-button-primary *,
.s-button-primary-outline:not(.s-button-icon) *,
.btn--primary * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* منع أي طبقات قديمة على الزر */
salla-add-product-button .s-button-element::before,
salla-add-product-button .s-button-element::after,
.s-add-product-button-main::before,
.s-button-primary::before,
.btn--primary::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

salla-add-product-button .s-button-element:hover,
.s-add-product-button-main:hover,
.s-button-primary:hover,
.s-button-primary-outline:not(.s-button-icon):hover,
.btn--primary:hover {
  background-color: var(--zius-wine-deep) !important;
  border-color: var(--zius-wine-deep) !important;

  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(74, 30, 44, .32) !important;
}

salla-add-product-button .s-button-element:active,
.s-button-primary:active,
.btn--primary:active {
  transform: translateY(0) scale(.985);
}

/* قفزة أيقونة الحقيبة داخل زر السلة */
@keyframes ziusBagHop {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-4px); }
  65%      { transform: translateY(1px); }
}

salla-add-product-button .s-button-element i {
  display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
  salla-add-product-button .s-button-element:hover i {
    animation: ziusBagHop .5s var(--zius-ease);
  }
}

/* الزر الثانوي — لا يشمل زر المفضلة ولا أزرار الأيقونات */
.btn--outline,
.s-button-secondary,
.s-button-outline:not(.s-button-primary-outline):not(.s-button-icon) {
  background: transparent !important;
  border: 1px solid var(--zius-gold) !important;
  color: var(--zius-gold-deep) !important;
  border-radius: 999px !important;
  transition: background var(--zius-fast), color var(--zius-fast);
}

.btn--outline:hover,
.s-button-secondary:hover,
.s-button-outline:not(.s-button-primary-outline):not(.s-button-icon):hover {
  background: var(--zius-gold) !important;
  color: #FFFFFF !important;
}

/* أزرار البانرات مثل «اختاري الآن» — امتلاء عنابي مع سهم ينزلق */
.s-block a.btn,
.s-block .banner-entry__btn,
.s-block [class*="banner"] a.s-button-element {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  background-color: var(--zius-gold) !important;
  background-image: linear-gradient(var(--zius-wine), var(--zius-wine)) !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% 0% !important;

  border: 1px solid var(--zius-gold) !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;

  transition:
    background-size .4s var(--zius-ease),
    border-color .4s var(--zius-ease),
    box-shadow .35s var(--zius-ease),
    transform .35s var(--zius-ease) !important;
}

.s-block a.btn::after,
.s-block .banner-entry__btn::after,
.s-block [class*="banner"] a.s-button-element::after {
  content: "←" !important;
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  font-size: .95em;
  line-height: 1;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transform: translateX(6px);
  transition: opacity .3s var(--zius-ease), transform .3s var(--zius-ease), max-width .3s var(--zius-ease) !important;
}

@media (hover: hover) and (pointer: fine) {
  .s-block a.btn:hover,
  .s-block .banner-entry__btn:hover,
  .s-block [class*="banner"] a.s-button-element:hover {
    background-size: 100% 100% !important;
    border-color: var(--zius-wine) !important;
    box-shadow: 0 10px 24px rgba(74, 30, 44, .28) !important;
    transform: translateY(-2px);
  }

  .s-block a.btn:hover::after,
  .s-block .banner-entry__btn:hover::after,
  .s-block [class*="banner"] a.s-button-element:hover::after {
    opacity: 1;
    max-width: 1.5em;
    transform: translateX(0);
  }
}


/* ==========================================================================
   14) معرض الصور — تقريب ناعم وإطار عنابي داخلي
   ========================================================================== */

.s-block--photos-gallery a,
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--zius-radius);
}

.s-block--photos-gallery img,
.gallery-item img {
  border-radius: var(--zius-radius);
  transition: transform .7s var(--zius-ease);
}

.s-block--photos-gallery a::after,
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;

  border: 1.5px solid var(--zius-wine);
  border-radius: calc(var(--zius-radius) - 6px);
  box-shadow: 0 0 0 1px rgba(255, 253, 249, .55);

  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  transition: opacity .4s var(--zius-ease), transform .5s var(--zius-ease);
}

@media (hover: hover) and (pointer: fine) {
  .s-block--photos-gallery a:hover img,
  .s-block--photos-gallery img:hover,
  .gallery-item:hover img {
    transform: scale(1.06);
  }

  .s-block--photos-gallery a:hover::after,
  .gallery-item:hover::after {
    opacity: 1;
    transform: scale(1);
  }
}


/* ==========================================================================
   15) الفوتر — فاتح مع شريط حقوق عنابي
   ========================================================================== */

.store-footer,
footer {
  background: linear-gradient(180deg, rgba(110, 52, 72, .05), rgba(110, 52, 72, .09)) !important;
  border-top: 1px solid var(--zius-wine-tint) !important;
}

.store-footer a,
footer a {
  color: var(--zius-ink-soft);
  transition: color var(--zius-fast), padding-inline-start var(--zius-fast);
}

.store-footer a:hover,
footer a:hover {
  color: var(--zius-wine-deep);
  padding-inline-start: 5px;
}

/* شريط الحقوق السفلي — يمتد بعرض الشاشة كاملًا */
.store-footer__bottom,
.footer-bottom,
.store-footer div:has(> .copyright-text) {
  background: var(--zius-wine-deep) !important;
  box-shadow: 0 0 0 100vmax var(--zius-wine-deep) !important;
  clip-path: inset(0 -100vmax) !important;
  border-top: 0 !important;
  color: var(--zius-on-wine) !important;
}

.store-footer__bottom *,
.footer-bottom *,
.store-footer div:has(> .copyright-text) * {
  color: var(--zius-on-wine) !important;
}

.store-footer__bottom a:hover,
.footer-bottom a:hover,
.store-footer div:has(> .copyright-text) a:hover {
  color: var(--zius-gold-soft) !important;
}

/* أيقونات الدفع واضحة فوق العنابي */
.payment-icons img,
salla-payments img,
.store-footer__bottom img,
.footer-bottom img,
.store-footer div:has(> .copyright-text) img {
  background: var(--zius-ivory) !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  filter: none !important;
  transition: transform var(--zius-fast);
}

.payment-icons img:hover,
salla-payments img:hover {
  transform: translateY(-2px);
}

/* أيقونات التواصل */
.store-footer .s-social-list a,
.store-footer salla-social a,
footer .social-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px;
  height: 38px;
  padding: 0 !important;

  background: var(--zius-ivory);
  border: 1px solid var(--zius-wine-tint);
  border-radius: 50%;
  color: var(--zius-wine) !important;

  transition: background var(--zius-fast), border-color var(--zius-fast),
              color var(--zius-fast), transform var(--zius-fast), box-shadow var(--zius-fast);
}

.store-footer .s-social-list a i,
.store-footer salla-social a i,
footer .social-links a i {
  color: var(--zius-wine) !important;
  transition: color var(--zius-fast);
}

.store-footer .s-social-list a svg,
.store-footer salla-social a svg,
footer .social-links a svg {
  fill: var(--zius-wine) !important;
  transition: fill var(--zius-fast);
}

.store-footer .s-social-list a:hover,
.store-footer salla-social a:hover,
footer .social-links a:hover {
  background: var(--zius-wine);
  border-color: var(--zius-wine);
  padding: 0 !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(74, 30, 44, .22);
}

.store-footer .s-social-list a:hover i,
.store-footer salla-social a:hover i,
footer .social-links a:hover i {
  color: #FFFFFF !important;
}

.store-footer .s-social-list a:hover svg,
.store-footer salla-social a:hover svg,
footer .social-links a:hover svg {
  fill: #FFFFFF !important;
}


/* ==========================================================================
   16) صفحة المنتج
   ========================================================================== */

/* الصور المصغرة */
.s-slider-thumbs .swiper-slide,
.details-slider-thumbs .swiper-slide {
  border: 1px solid transparent !important;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--zius-fast), box-shadow var(--zius-fast);
}

.s-slider-thumbs .swiper-slide:hover,
.details-slider-thumbs .swiper-slide:hover {
  border-color: var(--zius-wine-line) !important;
}

.s-slider-thumbs .swiper-slide-thumb-active,
.details-slider-thumbs .swiper-slide-thumb-active {
  border-color: var(--zius-wine) !important;
  box-shadow: 0 0 0 2px rgba(110, 52, 72, .12);
}

/* الصورة الرئيسية — تقريب عند المرور */
.details-slider .swiper-slide:not(.s-slider-thumbs .swiper-slide) {
  overflow: hidden;
}

.details-slider .swiper-slide:not(.s-slider-thumbs .swiper-slide) img {
  transition: transform .6s var(--zius-ease);
}

@media (hover: hover) and (pointer: fine) {
  .details-slider .swiper-slide:not(.s-slider-thumbs .swiper-slide):hover img {
    transform: scale(1.04);
  }
}

/* خيارات المنتج */
salla-product-options label {
  transition: border-color var(--zius-fast), box-shadow var(--zius-fast), color var(--zius-fast);
}

salla-product-options label:hover {
  border-color: var(--zius-wine-line) !important;
  color: var(--zius-wine);
}

salla-product-options input:checked + label {
  border-color: var(--zius-wine) !important;
  box-shadow: 0 0 0 2px rgba(110, 52, 72, .12);
}

/* أزرار الكمية */
salla-quantity-input button,
.s-quantity-input-button {
  transition: background var(--zius-fast), color var(--zius-fast);
}

salla-quantity-input button:hover,
.s-quantity-input-button:hover {
  background: var(--zius-wine-tint) !important;
  color: var(--zius-wine) !important;
}


/* ==========================================================================
   17) تفاصيل عامة
   ========================================================================== */

.whatsapp-btn,
.s-floating-whatsapp {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: transform var(--zius-fast);
}

.whatsapp-btn:hover,
.s-floating-whatsapp:hover {
  transform: scale(1.08);
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: 10px !important;
  border-color: var(--zius-sand) !important;
  transition: border-color var(--zius-fast), box-shadow var(--zius-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--zius-wine-tint) !important;
  box-shadow: 0 0 0 4px rgba(110, 52, 72, .10) !important;
}


/* ==========================================================================
   18) الجوال وتقليل الحركة
   ========================================================================== */

@media (max-width: 767px) {

  :root { --zius-radius: 10px; }

  .s-product-card:hover,
  .s-product-card-entry:hover,
  .product-entry:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(74, 30, 44, .08);
  }

  /* لا طبقات مرور على صور المنتجات */
  .s-product-card-image > a::before,
  .s-product-card-image > a::after,
  .s-product-card__image > a::before,
  .s-product-card__image > a::after,
  .product-entry .product-image > a::before,
  .product-entry .product-image > a::after {
    content: none !important;
    display: none !important;
  }

  .zius-alt-image { display: none !important; }

  .s-block__title,
  .section-title {
    font-size: 19px;
    margin-bottom: 18px;
  }

  .s-block__title::after,
  .s-block-title::after,
  .section-title::after {
    width: 48px !important;
  }

  .s-block__title::before,
  .s-block-title::before,
  .section-title::before {
    inset-inline-start: 54px !important;
    width: 7px !important;
    height: 7px !important;
  }

  .s-product-card-content-title,
  .s-product-card-content-title a {
    font-size: 13.5px;
  }

  /* البانرات المربعة */
  .s-block--banners .banner-entry {
    height: 230px !important;
    transform: none !important;
  }

  .s-block--banners .banner__title {
    font-size: 19px !important;
  }

  .s-block--banners .banner__description {
    font-size: 13px !important;
  }

  .s-block--banners .banner-entry::after,
  .s-block--fixed-banner a::after {
    display: none !important;
  }

  /* التصنيفات — الاسم ظاهر دائمًا */
  .s-slider-container .swiper-slide.slide--one-sixth {
    padding: 0 5px !important;
  }

  .s-slider-container .slide--cat-entry::after {
    opacity: 1;
    background: linear-gradient(
      to top,
      rgba(74, 30, 44, .65) 0%,
      rgba(74, 30, 44, .18) 42%,
      transparent 72%
    );
  }

  .s-slider-container .slide--cat-entry h2 {
    bottom: 14px !important;
    font-size: 14px !important;
    opacity: 1 !important;
    transform: translateY(0);
  }

  .s-slider-container .slide--cat-entry h2::after {
    width: 20px;
    opacity: 1;
  }

  /* المميزات */
  .s-block--features__item {
    min-height: 190px;
    padding: 24px 12px;
  }

  .s-block--features__item .feature-icon {
    width: 88px;
    height: 88px;
    margin-bottom: 16px;
  }

  .s-block--features__item .feature-icon::before {
    width: 66px;
    height: 66px;
  }

  .s-block--features__item .feature-icon::after { inset: 2px; }
  .s-block--features__item .feature-icon i { font-size: 29px !important; }
  .s-block--features__item h2 { font-size: 16px !important; }

  .s-block--features__item p {
    font-size: 12px !important;
    line-height: 1.7;
  }

  /* أيقونات التواصل */
  .store-footer .s-social-list a,
  .store-footer salla-social a,
  footer .social-links a {
    width: 34px;
    height: 34px;
  }

}

@media (min-width: 1200px) {
  .s-slider-container .swiper-slide.slide--one-sixth {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  html::before,
  html::after {
    animation: ziusSplashOut .01ms 2s forwards !important;
  }

  .s-block--banners .banner-entry::after,
  .s-block--fixed-banner a::after {
    display: none !important;
  }
}


/* ==========================================================================
   19) زر «اختاري الآن» — عاجي بنص عنابي فوق الخلفية العنابية
   الكود البرمجي يضيف له الفئة zius-cta تلقائيًا
   ========================================================================== */

a.zius-cta,
button.zius-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  background-color: var(--zius-ivory) !important;
  background-image: none !important;

  border: 1px solid var(--zius-ivory) !important;
  border-radius: 999px !important;

  color: var(--zius-wine) !important;
  font-weight: 600 !important;

  box-shadow: 0 8px 22px rgba(30, 10, 18, .22) !important;

  transition:
    background-color .35s var(--zius-ease),
    color .35s var(--zius-ease),
    border-color .35s var(--zius-ease),
    box-shadow .35s var(--zius-ease),
    transform .35s var(--zius-ease) !important;
}

a.zius-cta *,
button.zius-cta * {
  color: inherit !important;
  fill: currentColor !important;
}

a.zius-cta::before,
button.zius-cta::before {
  content: none !important;
  display: none !important;
}

/* سهم صغير يظهر عند المرور */
a.zius-cta::after,
button.zius-cta::after {
  content: "←" !important;
  display: inline-block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 0;
  overflow: hidden;
  background: none !important;
  font-size: .95em;
  line-height: 1;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .3s var(--zius-ease), transform .3s var(--zius-ease), max-width .3s var(--zius-ease) !important;
}

/* عند المرور — يتحول لإطار عاجي شفاف */
@media (hover: hover) and (pointer: fine) {
  a.zius-cta:hover,
  button.zius-cta:hover {
    background-color: transparent !important;
    border-color: var(--zius-ivory) !important;
    color: var(--zius-ivory) !important;
    box-shadow: 0 10px 26px rgba(30, 10, 18, .30) !important;
    transform: translateY(-2px);
  }

  a.zius-cta:hover::after,
  button.zius-cta:hover::after {
    opacity: 1;
    max-width: 1.5em;
    transform: translateX(0);
  }
}

a.zius-cta:active,
button.zius-cta:active {
  transform: translateY(0) scale(.985);
}
salla-advertisement {
  display: block !important;
  position: relative !important;
  z-index: 60 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

salla-advertisement .s-advertisement {
  display: flex !important;
}