/* ════════════════════════════════════════════════════════════════════════════════
   DUWAIDI FACTORY — SALLA THEME CSS v12.0 FINAL
   مصنع دُوَيْدي | الكود النهائي الشامل المنظم والمدمج
   ════════════════════════════════════════════════════════════════════════════════

   فهرس الأقسام:

   [ 01 ] VARIABLES & GLOBAL      — متغيرات الثيم + إعدادات عامة
   [ 02 ] SPLASH SCREEN           — صفحة تحميل CSS-only (body::before/::after)
   [ 03 ] TICKER                  — شريط الإعلانات المتحرك
   [ 04 ] STICKY WRAP             — حاوية الهيدر الثابتة
   [ 05 ] HEADER BASE             — إطار الهيدر
   [ 06 ] HEADER LOGO             — الشعار
   [ 07 ] HEADER ICONS            — أيقونات موحدة (هامبرغر/يوزر)
   [ 08 ] CART BUTTON             — زر السلة + badge محسّن
   [ 09 ] MAIN MENU               — قائمة الديسكتوب
   [ 10 ] PREMIUM MOBILE MENU     — القائمة الجانبية الفاخرة
   [ 11 ] HEADER RESPONSIVE       — التجاوب
   [ 12 ] BREADCRUMB              — مسار التصفح
   [ 13 ] PRODUCT GALLERY         — معرض المنتج
   [ 14 ] PRODUCT INFO            — معلومات المنتج
   [ 15 ] STICKY PRODUCT BAR      — شريط الكمية والسلة
   [ 16 ] PRODUCT CARDS           — بطاقات المنتجات
   [ 17 ] SECTION TITLES          — عناوين الأقسام
   [ 18 ] SCROLL REVEAL           — الظهور عند التمرير
   [ 19 ] FLOATING ELEMENTS       — العناصر العائمة
   [ 20 ] FEATURES BLOCK          — قسم المميزات
   [ 21 ] FOOTER                  — الفوتر

   ════════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   [ 01 ] VARIABLES & GLOBAL
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap');

:root {
  --br:  #5C1F0E;
  --br2: #3B1008;
  --gd:  #C8A96E;
  --gd2: #E5C68A;
  --cr:  #F5EDE0;
  --f:   'Tajawal', Georgia, serif;
  --nav-h: 72px;
  --icon-size: 42px;
}

html { scroll-behavior: smooth !important; }

body {
  font-family: var(--f) !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 02 ] SPLASH SCREEN — CSS-only (يظهر من أول فريم)
   ══════════════════════════════════════════════════════════════════════
   body::before = الخلفية الكاملة
   body::after  = لوقو DUWAIDI بتدرج ذهبي متحرك
   JS يضيف .dw-loaded على body لإخفائه
   ══════════════════════════════════════════════════════════════════════ */

body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(200,169,110,.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(92,31,14,.08) 0%, transparent 40%),
    linear-gradient(135deg, #FAF5EC 0%, #F5EDE0 50%, #FAF5EC 100%) !important;
  z-index: 2147483646 !important;
  pointer-events: all !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .7s ease, visibility .7s !important;
}

body::after {
  content: 'DUWAIDI' !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: 'Tajawal', Georgia, serif !important;
  font-size: clamp(38px, 6vw, 56px) !important;
  font-weight: 900 !important;
  letter-spacing: 14px !important;
  text-indent: 14px !important;
  background: linear-gradient(135deg,
    #5C1F0E 0%,
    #C8A96E 35%,
    #E5C68A 50%,
    #C8A96E 65%,
    #3B1008 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: dw-splash-logo-shine 2.8s linear infinite !important;
  z-index: 2147483647 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition: opacity .7s ease, visibility .7s !important;
}

@keyframes dw-splash-logo-shine {
  to { background-position: 250% center; }
}

body.dw-loaded::before,
body.dw-loaded::after {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.dw-navigating::before,
body.dw-navigating::after {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 03 ] TICKER — شريط إعلانات متحرك
   ══════════════════════════════════════════════════════════════════════ */

#dw-ticker {
  width: 100%;
  height: 36px;
  background: #2A0C04;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(200,169,110,.2);
  position: relative;
  flex-shrink: 0;
  z-index: 1002;
}

#dw-ticker::before,
#dw-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 2;
  pointer-events: none;
}
#dw-ticker::before { left: 0;  background: linear-gradient(to right, #2A0C04, transparent); }
#dw-ticker::after  { right: 0; background: linear-gradient(to left,  #2A0C04, transparent); }

.dw-track {
  display: flex;
  white-space: nowrap;
  align-items: center;
  animation: dw-scroll 44s linear infinite;
  will-change: transform;
}
.dw-track:hover { animation-play-state: paused; }

@keyframes dw-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.dw-ti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  font-family: var(--f);
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(200,169,110,.75);
  white-space: nowrap;
}
.dw-ti strong { color: #EED48A; font-weight: 700; }
.dw-ti .dg {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--gd);
  transform: rotate(45deg);
  opacity: .5;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 04 ] STICKY WRAP
   ══════════════════════════════════════════════════════════════════════ */

#dw-top-wrap {
  position: sticky !important;
  top: 0 !important;
  z-index: 1001 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 05 ] HEADER BASE
   ══════════════════════════════════════════════════════════════════════ */

.top-navbar,
.top-navbar *,
.s-menu-topnav-list,
salla-contacts.s-contacts-header,
.header-search,
salla-search {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

.store-header {
  background: transparent !important;
  padding: 0 !important;
}

#mainnav {
  background: var(--cr) !important;
  height: var(--nav-h) !important;
  min-height: var(--nav-h) !important;
  max-height: var(--nav-h) !important;
  border-bottom: 1px solid rgba(92,31,14,.12) !important;
  box-shadow: 0 2px 16px rgba(92,31,14,.08) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#mainnav .inner {
  width: 100% !important;
  height: var(--nav-h) !important;
  min-height: var(--nav-h) !important;
  max-height: var(--nav-h) !important;
  display: flex !important;
  align-items: center !important;
  background: var(--cr) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

#dw-top-wrap.scrolled #mainnav,
#dw-top-wrap.scrolled #mainnav .inner {
  background: rgba(245,237,224,.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 24px rgba(92,31,14,.12) !important;
}

#mainnav .inner .container {
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

#mainnav .inner .flex.items-stretch.justify-between,
#mainnav .inner > .container > .flex {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: var(--nav-h) !important;
  overflow: visible !important;
  gap: 16px !important;
}

#mainnav .inner .flex.items-center:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 06 ] HEADER LOGO
   ══════════════════════════════════════════════════════════════════════ */

.navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  height: calc(var(--nav-h) - 20px) !important;
}

.navbar-brand img {
  height: 100% !important;
  width: auto !important;
  max-width: 180px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  display: block !important;
}

.navbar-brand h1.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 07 ] HEADER ICONS — هامبرغر + يوزر (دوائر موحدة)
   ══════════════════════════════════════════════════════════════════════ */

a.mburger,
.s-user-menu-login-btn {
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
  min-width: var(--icon-size) !important;
  min-height: var(--icon-size) !important;
  max-width: var(--icon-size) !important;
  max-height: var(--icon-size) !important;
  flex: 0 0 var(--icon-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 1.5px solid rgba(92,31,14,.22) !important;
  border-radius: 50% !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all .25s cubic-bezier(0.34,1.56,0.64,1) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  position: relative !important;
  color: var(--br) !important;
  flex-shrink: 0 !important;
}

a.mburger:hover,
.s-user-menu-login-btn:hover {
  border-color: var(--br) !important;
  background: rgba(92,31,14,.08) !important;
  transform: translateY(-1px) !important;
}

a.mburger i.sicon-menu,
a.mburger .sicon-menu {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  color: var(--br) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.s-user-menu-login-btn svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  fill: var(--br) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

@media (min-width: 1024px) {
  a.mburger { display: none !important; }
}

#mainnav .inner .flex.items-center.justify-end {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: var(--nav-h) !important;
}

button.btn--close-sm { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════
   [ 08 ] CART BUTTON — مع badge محسّن
   ══════════════════════════════════════════════════════════════════════ */

.s-cart-summary-wrapper {
  height: var(--icon-size) !important;
  min-height: var(--icon-size) !important;
  max-height: var(--icon-size) !important;
  padding: 0 16px 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: var(--br) !important;
  border: 1.5px solid rgba(200,169,110,.3) !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: all .25s cubic-bezier(0.34,1.56,0.64,1) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: visible !important;
  line-height: 1 !important;
}

.s-cart-summary-wrapper:hover {
  background: var(--br2) !important;
  transform: translateY(-1px) !important;
  border-color: var(--gd) !important;
  box-shadow: 0 8px 22px rgba(92,31,14,.28) !important;
}

#s-cart-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  line-height: 1 !important;
}

slot-fb[name="icon"][hidden] { display: none !important; }

.header-btn__icon.sicon-shopping-bag,
#s-cart-icon i.sicon-shopping-bag,
.s-cart-summary-wrapper i.sicon-shopping-bag {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  color: var(--gd) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform .25s !important;
}

.s-cart-summary-wrapper:hover .header-btn__icon.sicon-shopping-bag,
.s-cart-summary-wrapper:hover #s-cart-icon i {
  transform: scale(1.1) !important;
}

.s-cart-summary-content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gd) !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.s-cart-summary-content b,
.s-cart-summary-total {
  font-family: var(--f) !important;
  font-weight: 700 !important;
  color: var(--gd) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.s-cart-summary-content .sicon-sar {
  font-size: 11px !important;
  opacity: .9 !important;
  line-height: 1 !important;
}

/* ── Badge العداد (outline بدل border لتجنب الخط على الأيقونة) ── */
.s-cart-summary-count {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  left: auto !important;
  min-width: 18px !important;
  width: auto !important;
  height: 18px !important;
  padding: 0 5px !important;
  background: linear-gradient(135deg, var(--gd2), var(--gd)) !important;
  color: var(--br2) !important;
  font-family: var(--f) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  border: none !important;
  outline: 2px solid var(--br) !important;
  outline-offset: -1px !important;
  border-radius: 50% !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.3) !important;
  letter-spacing: 0 !important;
  transition: opacity .3s, transform .3s !important;
  pointer-events: none !important;
}

[dir="ltr"] .s-cart-summary-count {
  left: -6px !important;
  right: auto !important;
}

/* إخفاء العداد عند الصفر (JS يضيف attribute) */
.s-cart-summary-count[data-dw-empty="1"] {
  opacity: 0 !important;
  transform: scale(0) !important;
  visibility: hidden !important;
}

.s-cart-summary-count:empty {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 09 ] MAIN MENU — قائمة الديسكتوب
   ══════════════════════════════════════════════════════════════════════ */

custom-main-menu {
  display: none;
  align-items: center !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
  height: var(--nav-h) !important;
  min-width: 0 !important;
}

@media (min-width: 1024px) {
  custom-main-menu { display: flex !important; }

  custom-main-menu nav#mobile-menu,
  custom-main-menu .mobile-menu {
    display: contents !important;
    visibility: visible !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
  }

  custom-main-menu nav#mobile-menu .btn--close,
  custom-main-menu nav#mobile-menu .close-mobile-menu,
  custom-main-menu nav#mobile-menu button.close-mobile-menu {
    display: none !important;
  }

  custom-main-menu ul.main-menu,
  custom-main-menu nav#mobile-menu ul.main-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    height: var(--nav-h) !important;
    overflow: visible !important;
    width: auto !important;
  }

  custom-main-menu ul.main-menu > li.lg\:hidden,
  custom-main-menu nav#mobile-menu ul.main-menu > li.lg\:hidden {
    display: none !important;
  }

  custom-main-menu ul.main-menu > li.\!hidden.lg\:\!block,
  custom-main-menu ul.main-menu > li.root-level,
  custom-main-menu nav#mobile-menu ul.main-menu > li.root-level,
  custom-main-menu nav#mobile-menu ul.main-menu > li.\!hidden.lg\:\!block {
    display: flex !important;
    align-items: center !important;
    height: var(--nav-h) !important;
    position: relative !important;
    visibility: visible !important;
  }

  custom-main-menu ul.main-menu > li > a,
  custom-main-menu nav#mobile-menu ul.main-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 0 14px !important;
    font-family: var(--f) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--br) !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
    text-overflow: unset !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    letter-spacing: .3px !important;
    border-radius: 8px !important;
    transition: background .2s, color .2s !important;
    clip: auto !important;
    clip-path: none !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
  }

  custom-main-menu ul.main-menu > li > a:hover,
  custom-main-menu ul.main-menu > li > a:focus,
  custom-main-menu nav#mobile-menu ul.main-menu > li > a:hover,
  custom-main-menu nav#mobile-menu ul.main-menu > li > a:focus {
    background: rgba(92,31,14,.08) !important;
    color: var(--br2) !important;
  }

  custom-main-menu ul.main-menu > li.active > a,
  custom-main-menu ul.main-menu > li > a[aria-current="page"],
  custom-main-menu nav#mobile-menu ul.main-menu > li.active > a {
    background: rgba(92,31,14,.1) !important;
    color: var(--br2) !important;
    font-weight: 700 !important;
  }

  custom-main-menu ul.main-menu > li.active > a::after,
  custom-main-menu ul.main-menu > li > a[aria-current="page"]::after,
  custom-main-menu nav#mobile-menu ul.main-menu > li.active > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 14px !important;
    right: 14px !important;
    height: 2px !important;
    background: var(--gd) !important;
    border-radius: 2px 2px 0 0 !important;
  }

  custom-main-menu ul.main-menu > li > a.text-gray-500 {
    color: var(--br) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   [ 10 ] PREMIUM MOBILE MENU — القائمة الجانبية الفاخرة
   ══════════════════════════════════════════════════════════════════════
   13 لمسة فاخرة: gradients متعددة، shimmer bar، logo shine،
   staggered animation، icons ذهبية، hover فاخر، footer، scrollbar أنيق
   ══════════════════════════════════════════════════════════════════════ */

/* إخفاء في الديسكتوب */
@media (min-width: 1024px) {
  .mm-ocd,
  .mm-ocd--right,
  .mm-ocd__backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  body.mm-ocd-opened { overflow: auto !important; }
}

@media (max-width: 1023px) {

  /* ── [1] الحاوية الرئيسية مع selectors شاملة للفتح ── */
  .mm-ocd {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }

  body.mm-ocd-opened .mm-ocd,
  html.mm-ocd-opened .mm-ocd,
  .mm-ocd.mm-ocd-opened,
  .mm-ocd--opened,
  .mm-ocd-opened {
    pointer-events: auto !important;
  }

  body.mm-ocd-opened,
  html.mm-ocd-opened {
    overflow: hidden !important;
  }

  /* ── Backdrop محسن بـ radial gradient + blur ── */
  .mm-ocd__backdrop {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(
      ellipse at center,
      rgba(59,16,8,.5) 0%,
      rgba(59,16,8,.7) 70%,
      rgba(30,8,4,.85) 100%
    ) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    opacity: 0 !important;
    transition: opacity .35s ease !important;
    pointer-events: none !important;
    cursor: pointer !important;
  }

  body.mm-ocd-opened .mm-ocd__backdrop,
  html.mm-ocd-opened .mm-ocd__backdrop,
  .mm-ocd.mm-ocd-opened .mm-ocd__backdrop,
  .mm-ocd--opened .mm-ocd__backdrop,
  .mm-ocd-opened .mm-ocd__backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  /* ── محتوى القائمة مع خلفية فاخرة ── */
  .mm-ocd__content {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 320px !important;
    max-width: 87vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    background:
      radial-gradient(circle at 90% 0%, rgba(200,169,110,.18) 0%, transparent 45%),
      radial-gradient(circle at 10% 100%, rgba(92,31,14,.1) 0%, transparent 50%),
      linear-gradient(180deg, #FAF5EC 0%, var(--cr) 40%, #FAF5EC 100%) !important;
    box-shadow:
      -25px 0 70px rgba(59,16,8,.35),
      -4px 0 16px rgba(92,31,14,.15),
      inset 1px 0 0 rgba(200,169,110,.2) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 100000 !important;
    transform: translateX(100%) !important;
    transition: transform .45s cubic-bezier(.4,0,.2,1) !important;
    pointer-events: auto !important;
  }

  [dir="ltr"] .mm-ocd__content {
    right: auto !important;
    left: 0 !important;
    box-shadow:
      25px 0 70px rgba(59,16,8,.35),
      4px 0 16px rgba(92,31,14,.15),
      inset -1px 0 0 rgba(200,169,110,.2) !important;
    transform: translateX(-100%) !important;
  }

  /* حالة الفتح - selectors شاملة */
  body.mm-ocd-opened .mm-ocd__content,
  html.mm-ocd-opened .mm-ocd__content,
  .mm-ocd.mm-ocd-opened .mm-ocd__content,
  .mm-ocd--opened .mm-ocd__content,
  .mm-ocd-opened .mm-ocd__content {
    transform: translateX(0) !important;
  }

  [dir="ltr"] body.mm-ocd-opened .mm-ocd__content,
  [dir="ltr"] html.mm-ocd-opened .mm-ocd__content,
  [dir="ltr"] .mm-ocd.mm-ocd-opened .mm-ocd__content,
  [dir="ltr"] .mm-ocd--opened .mm-ocd__content,
  [dir="ltr"] .mm-ocd-opened .mm-ocd__content {
    transform: translateX(0) !important;
  }

  /* ── [2] Shimmer Bar علوي متحرك ── */
  .mm-ocd__content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(200,169,110,.3) 15%,
      var(--gd) 30%,
      var(--gd2) 45%,
      #FFF5DC 50%,
      var(--gd2) 55%,
      var(--gd) 70%,
      rgba(200,169,110,.3) 85%,
      transparent 100%) !important;
    background-size: 200% 100% !important;
    animation: dw-menu-shimmer 4s linear infinite !important;
    z-index: 50 !important;
    pointer-events: none !important;
  }

  @keyframes dw-menu-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ── [3] Watermark مائل في الخلفية ── */
  .mm-ocd__content::after {
    content: 'DUWAIDI' !important;
    position: absolute !important;
    bottom: 90px !important;
    right: -25px !important;
    font-family: var(--f) !important;
    font-size: 78px !important;
    font-weight: 900 !important;
    letter-spacing: 12px !important;
    color: rgba(92,31,14,.04) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    white-space: nowrap !important;
    transform: rotate(-90deg) !important;
    transform-origin: right bottom !important;
    line-height: 1 !important;
  }

  [dir="ltr"] .mm-ocd__content::after {
    right: auto !important;
    left: -25px !important;
    transform: rotate(90deg) !important;
    transform-origin: left bottom !important;
  }

  /* ── [4] زر الإغلاق X (glassmorphism) ── */
  .mm-ocd__content button.btn--close,
  .mm-ocd__content .btn--close,
  .mm-ocd__content button.close-mobile-menu,
  .mm-ocd__content .close-mobile-menu {
    position: absolute !important;
    top: 22px !important;
    left: 20px !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255,255,255,.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(92,31,14,.15) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .4s cubic-bezier(.34,1.56,.64,1) !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    box-shadow:
      0 4px 14px rgba(59,16,8,.12),
      inset 0 0 0 1px rgba(200,169,110,.1) !important;
  }

  .mm-ocd__content button.btn--close::before,
  .mm-ocd__content button.btn--close::after,
  .mm-ocd__content .btn--close::before,
  .mm-ocd__content .btn--close::after,
  .mm-ocd__content button.close-mobile-menu::before,
  .mm-ocd__content button.close-mobile-menu::after {
    content: '' !important;
    position: absolute !important;
    width: 18px !important;
    height: 2px !important;
    background: var(--br) !important;
    border-radius: 2px !important;
    transition: background .3s ease !important;
  }

  .mm-ocd__content button.btn--close::before,
  .mm-ocd__content .btn--close::before,
  .mm-ocd__content button.close-mobile-menu::before {
    transform: rotate(45deg) !important;
  }

  .mm-ocd__content button.btn--close::after,
  .mm-ocd__content .btn--close::after,
  .mm-ocd__content button.close-mobile-menu::after {
    transform: rotate(-45deg) !important;
  }

  .mm-ocd__content button.btn--close > *,
  .mm-ocd__content .btn--close > *,
  .mm-ocd__content button.close-mobile-menu > *,
  .mm-ocd__content .close-mobile-menu > * {
    display: none !important;
  }

  .mm-ocd__content button.btn--close:hover,
  .mm-ocd__content .btn--close:hover,
  .mm-ocd__content button.close-mobile-menu:hover {
    background: var(--br) !important;
    border-color: var(--br) !important;
    transform: rotate(90deg) scale(1.08) !important;
    box-shadow:
      0 10px 28px rgba(92,31,14,.4),
      inset 0 0 0 1px rgba(200,169,110,.4) !important;
  }

  .mm-ocd__content button.btn--close:hover::before,
  .mm-ocd__content button.btn--close:hover::after,
  .mm-ocd__content .btn--close:hover::before,
  .mm-ocd__content .btn--close:hover::after {
    background: var(--gd) !important;
  }

  [dir="ltr"] .mm-ocd__content button.btn--close,
  [dir="ltr"] .mm-ocd__content .btn--close,
  [dir="ltr"] .mm-ocd__content button.close-mobile-menu {
    left: auto !important;
    right: 20px !important;
  }

  /* ── [5] nav Container ── */
  .mm-ocd__content nav#mobile-menu,
  .mm-ocd__content nav.mobile-menu {
    background: transparent !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* ── [6] Header Logo (DUWAIDI بتدرج ذهبي متحرك) ── */
  .mm-ocd__content nav#mobile-menu::before {
    content: 'DUWAIDI' !important;
    display: block !important;
    text-align: center !important;
    font-family: var(--f) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: 10px !important;
    text-indent: 10px !important;
    padding: 85px 20px 28px !important;
    background: linear-gradient(135deg,
      var(--br) 0%,
      var(--gd) 40%,
      var(--gd2) 50%,
      var(--gd) 60%,
      var(--br2) 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: dw-logo-shine 4s linear infinite !important;
    position: relative !important;
    border-bottom: 1px solid rgba(200,169,110,.25) !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  @keyframes dw-logo-shine {
    to { background-position: 200% center; }
  }

  /* ── [7] UL القائمة + Separator ذهبي ── */
  .mm-ocd__content ul.main-menu,
  .mm-ocd__content nav ul.main-menu {
    list-style: none !important;
    padding: 0 16px 20px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    background: transparent !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .mm-ocd__content nav#mobile-menu > ul.main-menu::before {
    content: '' !important;
    display: block !important;
    width: 32px !important;
    height: 1px !important;
    background: linear-gradient(to left, transparent, var(--gd), transparent) !important;
    margin: 16px auto 20px !important;
    opacity: .8 !important;
  }

  /* ── [8] إخفاء عناصر الديسكتوب ── */
  .mm-ocd__content ul.main-menu > li[class*="!hidden"],
  .mm-ocd__content ul.main-menu > li[class*="root-level"],
  .mm-ocd__content ul.main-menu > li[class*="lg:!block"],
  .mm-ocd__content ul.main-menu > li[class*="lg:!inline-block"],
  .mm-ocd__content ul.main-menu > li.\!hidden,
  .mm-ocd__content ul.main-menu > li.root-level,
  .mm-ocd__content ul.main-menu > li.lg\:\!block,
  .mm-ocd__content ul.main-menu > li.lg\:\!inline-block {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* ── [9] عناصر القائمة (مرئية افتراضياً) ── */
  .mm-ocd__content ul.main-menu > li[class*="lg:hidden"],
  .mm-ocd__content ul.main-menu > li.lg\:hidden,
  .mm-ocd__content ul.main-menu > li {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    height: auto !important;
    width: 100% !important;
    left: auto !important;
    overflow: visible !important;
    border-radius: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: background .25s ease !important;
  }

  /* Staggered animation عند فتح القائمة (0 → 1) */
  body.mm-ocd-opened .mm-ocd__content ul.main-menu > li,
  html.mm-ocd-opened .mm-ocd__content ul.main-menu > li,
  .mm-ocd.mm-ocd-opened .mm-ocd__content ul.main-menu > li,
  .mm-ocd-opened .mm-ocd__content ul.main-menu > li {
    animation: dw-menu-item-enter .5s cubic-bezier(.34,1.56,.64,1) both !important;
  }

  @keyframes dw-menu-item-enter {
    0%   { opacity: 0; transform: translateX(30px); }
    100% { opacity: 1; transform: translateX(0); }
  }

  [dir="ltr"] body.mm-ocd-opened .mm-ocd__content ul.main-menu > li,
  [dir="ltr"] .mm-ocd-opened .mm-ocd__content ul.main-menu > li {
    animation-name: dw-menu-item-enter-ltr !important;
  }

  @keyframes dw-menu-item-enter-ltr {
    0%   { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
  }

  /* تأخيرات متدرجة */
  body.mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(1),
  .mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(1) { animation-delay: 0.20s !important; }
  body.mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(2),
  .mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(2) { animation-delay: 0.25s !important; }
  body.mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(3),
  .mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(3) { animation-delay: 0.30s !important; }
  body.mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(4),
  .mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(4) { animation-delay: 0.35s !important; }
  body.mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(5),
  .mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(5) { animation-delay: 0.40s !important; }
  body.mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(6),
  .mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(6) { animation-delay: 0.45s !important; }
  body.mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(7),
  .mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(7) { animation-delay: 0.50s !important; }
  body.mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(8),
  .mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(8) { animation-delay: 0.55s !important; }
  body.mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(n+9),
  .mm-ocd-opened .mm-ocd__content ul.main-menu > li:nth-child(n+9) { animation-delay: 0.60s !important; }

  /* ── [10] روابط القائمة (Hover فاخر) ── */
  .mm-ocd__content ul.main-menu li a,
  .mm-ocd__content ul.main-menu > li.lg\:hidden a,
  .mm-ocd__content ul.main-menu > li a {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 15px 18px !important;
    font-family: var(--f) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--br) !important;
    text-decoration: none !important;
    border: 1.5px solid transparent !important;
    border-radius: 12px !important;
    transition: all .3s cubic-bezier(.4,0,.2,1) !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,.3) !important;
    letter-spacing: .3px !important;
    overflow: hidden !important;
  }

  .mm-ocd__content ul.main-menu li a::before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--gd) !important;
    transform: rotate(45deg) !important;
    flex-shrink: 0 !important;
    transition: all .35s cubic-bezier(.34,1.56,.64,1) !important;
    opacity: .6 !important;
    box-shadow: 0 0 0 0 rgba(200,169,110,0) !important;
  }

  .mm-ocd__content ul.main-menu li a::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
      transparent,
      rgba(200,169,110,.2),
      transparent) !important;
    transition: left .7s ease !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .mm-ocd__content ul.main-menu li a:hover {
    background: linear-gradient(135deg,
      rgba(200,169,110,.22) 0%,
      rgba(92,31,14,.08) 50%,
      rgba(200,169,110,.15) 100%) !important;
    border-color: rgba(200,169,110,.45) !important;
    color: var(--br2) !important;
    transform: translateX(-5px) !important;
    box-shadow:
      0 6px 16px rgba(92,31,14,.12),
      inset 0 1px 0 rgba(255,255,255,.5) !important;
  }

  [dir="ltr"] .mm-ocd__content ul.main-menu li a:hover {
    transform: translateX(5px) !important;
  }

  .mm-ocd__content ul.main-menu li a:hover::before {
    background: var(--br) !important;
    opacity: 1 !important;
    transform: rotate(45deg) scale(1.5) !important;
    box-shadow: 0 0 0 4px rgba(200,169,110,.25) !important;
  }

  .mm-ocd__content ul.main-menu li a:hover::after {
    left: 100% !important;
  }

  /* ── [11] Active State ── */
  .mm-ocd__content ul.main-menu li.active a,
  .mm-ocd__content ul.main-menu li a[aria-current="page"] {
    background: linear-gradient(135deg,
      rgba(92,31,14,.1) 0%,
      rgba(200,169,110,.22) 50%,
      rgba(92,31,14,.1) 100%) !important;
    border-color: rgba(200,169,110,.5) !important;
    color: var(--br2) !important;
    font-weight: 700 !important;
  }

  .mm-ocd__content ul.main-menu li.active a::before,
  .mm-ocd__content ul.main-menu li a[aria-current="page"]::before {
    background: var(--br) !important;
    opacity: 1 !important;
    transform: rotate(45deg) scale(1.3) !important;
    box-shadow: 0 0 0 3px rgba(200,169,110,.3) !important;
  }

  .mm-ocd__content ul.main-menu li a span {
    flex: 1 !important;
    line-height: 1.5 !important;
    color: inherit !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .mm-ocd__content ul.main-menu li a.text-gray-500,
  .mm-ocd__content ul.main-menu li a.text-sm {
    color: var(--br) !important;
  }

  .mm-ocd__content ul.main-menu li a.text-gray-500 span {
    color: var(--br) !important;
  }

  /* ── [12] Footer Copyright داخل القائمة ── */
  .mm-ocd__content nav#mobile-menu::after {
    content: '© DUWAIDI FACTORY · 2022' !important;
    display: block !important;
    text-align: center !important;
    font-family: var(--f) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    color: var(--gd) !important;
    opacity: .65 !important;
    padding: 24px 20px 22px !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(200,169,110,.2) !important;
    background: linear-gradient(to top, rgba(92,31,14,.04), transparent) !important;
    text-transform: uppercase !important;
    position: relative !important;
  }

  /* ── [13] Scrollbar ذهبي أنيق ── */
  .mm-ocd__content nav#mobile-menu::-webkit-scrollbar {
    width: 5px !important;
  }

  .mm-ocd__content nav#mobile-menu::-webkit-scrollbar-track {
    background: rgba(92,31,14,.04) !important;
    border-radius: 3px !important;
  }

  .mm-ocd__content nav#mobile-menu::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gd), var(--gd2)) !important;
    border-radius: 3px !important;
    opacity: .6 !important;
  }

  .mm-ocd__content nav#mobile-menu::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--br), var(--gd)) !important;
  }

  .mm-ocd__content nav#mobile-menu {
    scrollbar-width: thin !important;
    scrollbar-color: var(--gd) rgba(92,31,14,.04) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   [ 11 ] HEADER RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1800px) {
  :root { --nav-h: 76px; --icon-size: 44px; }
  .navbar-brand img { max-height: 56px !important; }
  custom-main-menu ul.main-menu > li > a { font-size: 15px !important; }
}

@media (min-width: 1280px) and (max-width: 1799px) {
  :root { --nav-h: 72px; --icon-size: 42px; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --nav-h: 68px; --icon-size: 40px; }
  custom-main-menu ul.main-menu > li > a {
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --nav-h: 64px; --icon-size: 40px; }
  .navbar-brand img { max-height: 44px !important; }
  #mainnav .inner .container { padding: 0 16px !important; }
  a.mburger i.sicon-menu { font-size: 18px !important; }
  .s-user-menu-login-btn svg { width: 18px !important; height: 18px !important; }
  .header-btn__icon.sicon-shopping-bag { font-size: 17px !important; }
}

@media (max-width: 767px) {
  :root { --nav-h: 58px; --icon-size: 38px; }
  .navbar-brand img {
    max-height: 38px !important;
    max-width: 140px !important;
  }
  #mainnav .inner .container { padding: 0 12px !important; }
  a.mburger i.sicon-menu { font-size: 18px !important; }
  .s-user-menu-login-btn svg { width: 18px !important; height: 18px !important; }
  .header-btn__icon.sicon-shopping-bag { font-size: 17px !important; }

  .s-cart-summary-wrapper {
    width: var(--icon-size) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }
  .s-cart-summary-content { display: none !important; }
  .s-cart-summary-count {
    top: -6px !important;
    right: -6px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
  }
  [dir="ltr"] .s-cart-summary-count {
    left: -6px !important;
    right: auto !important;
  }
}

@media (max-width: 380px) {
  :root { --nav-h: 54px; --icon-size: 36px; }
  .navbar-brand img {
    max-height: 34px !important;
    max-width: 120px !important;
  }
  #mainnav .inner .flex.items-center.justify-end { gap: 6px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   [ 12 ] BREADCRUMB
   ══════════════════════════════════════════════════════════════════════ */

.breadcrumbs { padding: 24px 0 16px !important; }

.s-breadcrumb-wrapper {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.s-breadcrumb-item {
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.s-breadcrumb-item a {
  color: rgba(92,31,14,.6) !important;
  text-decoration: none !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  transition: all .25s ease !important;
  display: inline-block !important;
}

.s-breadcrumb-item a:hover {
  color: var(--br) !important;
  background: rgba(200,169,110,.12) !important;
  transform: translateY(-1px) !important;
}

.s-breadcrumb-item:last-child {
  color: var(--br2) !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  background: linear-gradient(135deg, rgba(200,169,110,.18), rgba(92,31,14,.05)) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(200,169,110,.3) !important;
}

.s-breadcrumb-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: .35 !important;
}
.s-breadcrumb-arrow svg {
  width: 14px !important;
  height: 14px !important;
  fill: var(--br) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 13 ] PRODUCT GALLERY
   ══════════════════════════════════════════════════════════════════════ */

.sidebar { position: relative !important; }

.details-slider {
  border-radius: 20px !important;
  overflow: visible !important;
  position: relative !important;
}

.details-slider .s-slider-container {
  border-radius: 20px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, var(--cr) 0%, #faf5ec 100%) !important;
  box-shadow:
    0 20px 60px rgba(92,31,14,.1),
    0 8px 20px rgba(92,31,14,.06),
    inset 0 0 0 1px rgba(200,169,110,.15) !important;
}

.sidebar .swiper-slide,
.sidebar .magnify-wrapper {
  overflow: hidden !important;
  border-radius: 20px !important;
  background: var(--cr) !important;
  transition: box-shadow 0.4s ease !important;
  position: relative !important;
}

.details-slider .swiper-slide img,
.sidebar .swiper-slide img,
.sidebar .magnify-wrapper img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease !important;
  transform-origin: center center !important;
  will-change: transform !important;
  cursor: zoom-in !important;
}

.details-slider .swiper-slide:hover img,
.sidebar .swiper-slide:hover img,
.sidebar .magnify-wrapper:hover img {
  transform: scale(1.08) !important;
  filter: brightness(1.04) contrast(1.03) !important;
}

.details-slider .swiper-slide::after,
.sidebar .magnify-wrapper::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg,
    rgba(200,169,110,0.04) 0%,
    transparent 40%,
    rgba(92,31,14,0.05) 100%) !important;
  border-radius: 20px !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.details-slider .swiper-slide:hover::after,
.sidebar .magnify-wrapper:hover::after { opacity: 1 !important; }

@keyframes imageReveal {
  from { opacity: 0; transform: scale(0.96); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}
.details-slider .swiper-slide-active img {
  animation: imageReveal 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
}

/* ── الصور المصغرة ── */
.s-slider-thumbs {
  margin-top: 16px !important;
  padding: 0 4px !important;
}

.s-slider-thumbs .swiper-slide {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  transition: all .3s cubic-bezier(0.34,1.56,0.64,1) !important;
  opacity: 0.55 !important;
  cursor: pointer !important;
  position: relative !important;
}

.s-slider-thumbs .swiper-slide:hover {
  opacity: 0.9 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(92,31,14,.15) !important;
}

.s-slider-thumbs .swiper-slide.swiper-slide-thumb-active {
  border-color: var(--gd) !important;
  opacity: 1 !important;
  transform: translateY(-4px) !important;
  box-shadow:
    0 10px 28px rgba(200,169,110,.3),
    0 0 0 3px rgba(200,169,110,.15) !important;
}

.s-slider-thumbs img { transition: transform .4s ease, filter .3s ease !important; }
.s-slider-thumbs .swiper-slide:hover img { transform: scale(1.1) !important; }
.s-slider-thumbs .swiper-slide.swiper-slide-thumb-active img { filter: brightness(1.05) !important; }

/* ── زر المفضلة على الصورة (موضع ثابت) ── */
.btn--wishlist.sws,
.s-slider-container .btn--wishlist,
.details-slider .btn--wishlist,
[data-magnify] .btn--wishlist {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 10 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(92,31,14,.12) !important;
  border-radius: 50% !important;
  transition: all .3s cubic-bezier(.34,1.56,.64,1) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

html[dir="ltr"] .btn--wishlist.sws,
html[dir="ltr"] .s-slider-container .btn--wishlist,
html:not([dir="rtl"]) .btn--wishlist.sws,
html:not([dir="rtl"]) .s-slider-container .btn--wishlist {
  left: 16px !important;
  right: auto !important;
}

.btn--wishlist.sws:hover,
.s-slider-container .btn--wishlist:hover {
  background: rgba(92,31,14,.06) !important;
  transform: scale(1.12) !important;
  border-color: rgba(200,169,110,.5) !important;
  box-shadow: 0 6px 22px rgba(92,31,14,.18) !important;
}

.btn--wishlist.sws .sicon-heart,
.s-slider-container .btn--wishlist .sicon-heart {
  font-size: 16px !important;
  color: var(--br) !important;
  transition: transform .25s, color .25s !important;
}

.btn--wishlist.sws:hover .sicon-heart,
.s-slider-container .btn--wishlist:hover .sicon-heart {
  transform: scale(1.15) !important;
  color: var(--br2) !important;
}

/* ── أسهم التنقل ── */
.s-slider-nav-arrow {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(92,31,14,.1) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  transition: all .3s cubic-bezier(0.34,1.56,0.64,1) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.1) !important;
}

.s-slider-nav-arrow:hover:not(:disabled) {
  background: var(--br) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 8px 24px rgba(92,31,14,.3) !important;
  border-color: var(--br) !important;
}
.s-slider-nav-arrow:hover:not(:disabled) svg path { fill: white !important; }
.s-slider-nav-arrow svg { transition: fill .25s ease !important; }


/* ══════════════════════════════════════════════════════════════════════
   [ 14 ] PRODUCT INFO
   ══════════════════════════════════════════════════════════════════════ */

.main-content { padding-top: 8px !important; }

.main-content h1 {
  font-family: var(--f) !important;
  font-size: clamp(24px, 2.6vw, 36px) !important;
  font-weight: 900 !important;
  color: var(--br2) !important;
  letter-spacing: .5px !important;
  line-height: 1.25 !important;
  margin-bottom: 20px !important;
  position: relative !important;
  padding-bottom: 16px !important;
}

.main-content h1::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 70px !important;
  height: 3px !important;
  background: linear-gradient(to left, var(--gd), var(--gd2), transparent) !important;
  border-radius: 3px !important;
}

[dir="ltr"] .main-content h1::after {
  right: auto !important;
  left: 0 !important;
  background: linear-gradient(to right, var(--gd), var(--gd2), transparent) !important;
}

/* ── السعر العلوي مع shine ── */
.main-content > .flex.whitespace-nowrap.gap-4.items-center {
  display: inline-flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 22px !important;
  background: linear-gradient(135deg,
    rgba(200,169,110,.15) 0%,
    rgba(245,237,224,.6) 50%,
    rgba(200,169,110,.1) 100%) !important;
  border: 1px solid rgba(200,169,110,.3) !important;
  border-radius: 14px !important;
  margin-bottom: 20px !important;
  box-shadow:
    0 4px 14px rgba(200,169,110,.12),
    inset 0 1px 0 rgba(255,255,255,.5) !important;
  position: relative !important;
  overflow: hidden !important;
}

.main-content > .flex.whitespace-nowrap.gap-4.items-center::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent) !important;
  animation: price-shine 4s ease-in-out infinite !important;
}

@keyframes price-shine {
  0%, 100% { left: -100%; }
  50%      { left: 100%; }
}

.main-content .text-red-800 {
  color: var(--br) !important;
  font-family: var(--f) !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  position: relative !important;
  z-index: 1 !important;
}

.main-content .text-gray-500.line-through {
  color: rgba(59,16,8,.45) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  position: relative !important;
  z-index: 1 !important;
}

.main-content .sicon-sar {
  font-size: .8em !important;
  margin: 0 3px !important;
  opacity: .85 !important;
}

/* ── Social Share + Wishlist (متطابقين) ── */
.flex.rtl\:space-x-reverse.space-x-3 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}

.flex.rtl\:space-x-reverse.space-x-3 > .s-social-share-btn,
.flex.rtl\:space-x-reverse.space-x-3 > .btn--wishlist,
.flex.rtl\:space-x-reverse.space-x-3 > salla-button,
.flex.rtl\:space-x-reverse.space-x-3 > button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(92,31,14,.15) !important;
  background: #fff !important;
  box-sizing: border-box !important;
  transition: all .25s ease !important;
  vertical-align: middle !important;
}

.flex.rtl\:space-x-reverse.space-x-3 > *:hover {
  border-color: var(--gd) !important;
  background: rgba(200,169,110,.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(92,31,14,.1) !important;
}

.flex.rtl\:space-x-reverse.space-x-3 .sicon-heart,
.flex.rtl\:space-x-reverse.space-x-3 svg {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  color: var(--br) !important;
  fill: var(--br) !important;
}

.flex.rtl\:space-x-reverse.space-x-3 > * + * {
  margin: 0 !important;
}

.sicon-heart { transition: color .25s, transform .25s !important; }

/* ── Select المقاس ── */
.s-product-options-wrapper { margin-bottom: 4px !important; }
.s-product-options-option-content { margin-top: 10px !important; }

.s-product-options-option select.s-form-control,
select[id^="option-"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 100% !important;
  height: 54px !important;
  font-family: var(--f) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--br2) !important;
  line-height: 1 !important;
  border: 1.5px solid rgba(92,31,14,.25) !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C1F0E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 2px 8px rgba(92,31,14,.06), inset 0 1px 3px rgba(0,0,0,.03) !important;
  transition: all .25s !important;
  cursor: pointer !important;
  outline: none !important;
  padding: 0 18px 0 44px !important;
  background-position: right 16px center !important;
}

[dir="ltr"] .s-product-options-option select.s-form-control,
[dir="ltr"] select[id^="option-"] {
  padding: 0 44px 0 18px !important;
  background-position: left 16px center !important;
}

.s-product-options-option select.s-form-control:hover,
select[id^="option-"]:hover {
  border-color: var(--br) !important;
  box-shadow: 0 6px 18px rgba(92,31,14,.14), inset 0 1px 3px rgba(0,0,0,.03) !important;
  background-color: #fdf8f4 !important;
  transform: translateY(-1px) !important;
}

.s-product-options-option select.s-form-control:focus,
select[id^="option-"]:focus {
  border-color: var(--br) !important;
  box-shadow: 0 0 0 4px rgba(200,169,110,.2), 0 4px 16px rgba(92,31,14,.1) !important;
  background-color: #fff !important;
}

.s-product-options-option select.s-form-control option,
select[id^="option-"] option {
  font-family: var(--f) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--br2) !important;
  padding: 10px 16px !important;
  background: #fff !important;
}

.s-product-options-option select.s-form-control option[value=""],
select[id^="option-"] option[value=""] {
  color: rgba(92,31,14,.4) !important;
  font-weight: 400 !important;
}

.s-product-options-option-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.s-product-options-option-label b {
  font-family: var(--f) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--br) !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}

.s-product-options-option-label b span {
  color: var(--gd) !important;
  font-size: 12px !important;
}

.s-product-options-option-label small {
  font-size: 12px !important;
  color: rgba(92,31,14,.45) !important;
  font-weight: 400 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 15 ] STICKY PRODUCT BAR
   ══════════════════════════════════════════════════════════════════════ */

section.flex.bg-white.p-5 {
  background: linear-gradient(135deg, #fff 0%, rgba(245,237,224,.5) 100%) !important;
  padding: 20px 24px !important;
  border-radius: 16px 16px 0 0 !important;
  border: 1px solid rgba(200,169,110,.2) !important;
  border-bottom: none !important;
  position: relative !important;
  margin-top: 16px !important;
}

section.flex.bg-white.p-5::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 2px !important;
  background: linear-gradient(to left, transparent, var(--gd), transparent) !important;
  opacity: .7 !important;
}

section.flex.bg-white.p-5 .form-label b {
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--br) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  opacity: .9 !important;
}

section.flex.bg-white.p-5 .total-price.text-red-800 {
  color: var(--br) !important;
  font-family: var(--f) !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  letter-spacing: -.3px !important;
  text-shadow: 0 2px 4px rgba(92,31,14,.12) !important;
}

section.flex.bg-white.p-5 .before-price {
  color: rgba(59,16,8,.4) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.sticky-product-bar {
  border-top: 1px solid rgba(92,31,14,.06) !important;
  background: rgba(255,255,255,.98) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 0 0 16px 16px !important;
  padding: 22px 24px !important;
  box-shadow: 0 10px 32px rgba(92,31,14,.1) !important;
  border: 1px solid rgba(200,169,110,.2) !important;
  border-top: 1px solid rgba(92,31,14,.04) !important;
  transition: box-shadow .3s !important;
}

.sticky-product-bar:hover {
  box-shadow: 0 14px 40px rgba(92,31,14,.14) !important;
}

.sticky-product-bar__quantity { margin-bottom: 20px !important; }

.sticky-product-bar__quantity .form-label {
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--br) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  opacity: .9 !important;
}

.s-quantity-input-container {
  border: 1.5px solid rgba(92,31,14,.2) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all .25s !important;
  background: linear-gradient(135deg, #fff, rgba(245,237,224,.4)) !important;
}

.s-quantity-input-container:focus-within {
  border-color: var(--br) !important;
  box-shadow: 0 0 0 4px rgba(200,169,110,.2), 0 4px 12px rgba(92,31,14,.08) !important;
  transform: translateY(-1px) !important;
}

.s-quantity-input-button {
  transition: all .2s !important;
  color: var(--br) !important;
}

.s-quantity-input-button:hover {
  background: rgba(200,169,110,.18) !important;
  color: var(--br2) !important;
  transform: scale(1.12) !important;
}

.s-quantity-input-input {
  font-family: var(--f) !important;
  font-weight: 700 !important;
  color: var(--br2) !important;
  font-size: 16px !important;
}

.s-button-primary,
.s-add-product-button-main .s-button-element {
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--br) 0%, var(--br2) 100%) !important;
  border: 1.5px solid rgba(200,169,110,.35) !important;
  color: var(--gd) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  padding: 15px 22px !important;
  font-size: 15px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all .3s cubic-bezier(0.34,1.56,0.64,1) !important;
  box-shadow:
    0 6px 20px rgba(92,31,14,.22),
    inset 0 1px 0 rgba(200,169,110,.2) !important;
}

.s-button-primary::before,
.s-add-product-button-main .s-button-element::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(200,169,110,.3), transparent) !important;
  transition: left .7s ease !important;
  pointer-events: none !important;
}

.s-button-primary:hover::before,
.s-add-product-button-main .s-button-element:hover::before {
  left: 100% !important;
}

.s-button-primary:hover,
.s-add-product-button-main .s-button-element:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(92,31,14,.32) !important;
  background: linear-gradient(135deg, var(--br2) 0%, var(--br) 100%) !important;
  border-color: var(--gd) !important;
}

.s-button-primary:active,
.s-add-product-button-main .s-button-element:active {
  transform: translateY(0) scale(0.98) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 16 ] PRODUCT CARDS
   ══════════════════════════════════════════════════════════════════════ */

custom-salla-product-card.s-product-card-entry {
  display: block !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(92,31,14,.08) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
  position: relative !important;
}

custom-salla-product-card.s-product-card-entry:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(92,31,14,.16) !important;
}

custom-salla-product-card.s-product-card-entry::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(to left, transparent, var(--gd), transparent) !important;
  opacity: 0 !important;
  transition: opacity .3s !important;
  z-index: 4 !important;
}

custom-salla-product-card.s-product-card-entry:hover::before {
  opacity: 1 !important;
}

.s-product-card-image {
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
  background: var(--cr) !important;
}

.s-product-card-image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

img.s-product-card-image-contain {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transition: transform .5s ease !important;
}

custom-salla-product-card.s-product-card-entry:hover img.s-product-card-image-contain {
  transform: scale(1.06) !important;
}

.s-product-card-content {
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.s-product-card-content-title a {
  font-family: var(--f) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--br2) !important;
  text-decoration: none !important;
  display: block !important;
}

.s-product-card-content-title a:hover {
  color: var(--br) !important;
}

.s-product-card-sale-price {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.s-product-card-sale-price h4 {
  font-family: var(--f) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--br2) !important;
  margin: 0 !important;
}

.s-product-card-sale-price span {
  font-size: 11px !important;
  color: rgba(59,16,8,.38) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
}

.s-product-card-content-footer {
  display: flex !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.s-button-element.s-button-primary-outline {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: var(--br) !important;
  color: var(--gd) !important;
  border: 1px solid rgba(200,169,110,.3) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  font-family: var(--f) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s !important;
}

.s-button-element.s-button-primary-outline:hover {
  background: var(--br2) !important;
  border-color: var(--gd) !important;
}

.s-button-element.s-button-primary-outline .s-button-text {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.s-product-card-wishlist-btn.s-button-element {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--cr) !important;
  border: 1px solid rgba(92,31,14,.15) !important;
  cursor: pointer !important;
  transition: all .2s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

.s-product-card-wishlist-btn.s-button-element:hover {
  background: rgba(200,169,110,.15) !important;
  border-color: var(--gd) !important;
}

.s-product-card-wishlist-btn .sicon-heart {
  font-size: 14px !important;
  color: var(--gd) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 17 ] SECTION TITLES
   ══════════════════════════════════════════════════════════════════════ */

.s-block__title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(92,31,14,.1) !important;
}

.s-block__title h2 {
  font-family: var(--f) !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 700 !important;
  color: var(--br) !important;
  letter-spacing: 2px !important;
  margin: 0 !important;
}

.s-products-list-horizontal-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
}

@media (min-width: 1200px) {
  .s-products-list-horizontal-cards {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .s-products-list-horizontal-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   [ 18 ] SCROLL REVEAL
   ══════════════════════════════════════════════════════════════════════ */

.dw-rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

.dw-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 19 ] FLOATING ELEMENTS
   ══════════════════════════════════════════════════════════════════════ */

#dw-wm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(60px, 12vw, 130px);
  font-weight: 900;
  letter-spacing: 10px;
  color: rgba(92,31,14,.022);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  user-select: none;
  font-family: var(--f);
}

#dw-st {
  position: fixed;
  bottom: 96px;
  left: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--br2);
  color: var(--gd);
  border: 1px solid rgba(200,169,110,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 997;
  opacity: 0;
  transform: translateY(10px);
  transition: all .3s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

#dw-st.show {
  opacity: 1;
  transform: translateY(0);
}

#dw-st:hover {
  background: var(--br);
  transform: translateY(-2px) !important;
}

#dw-wa {
  position: fixed;
  bottom: 22px;
  left: 18px;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px 10px 12px;
  border-radius: 50px;
  font-family: var(--f);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  z-index: 996;
  box-shadow: 0 4px 18px rgba(37,211,102,.32);
  transition: all .3s ease;
  animation: dw-wap 3s ease-in-out infinite;
}

#dw-wa:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
}

@keyframes dw-wap {
  0%, 100% { box-shadow: 0 4px 18px rgba(37,211,102,.3); }
  50%      { box-shadow: 0 4px 26px rgba(37,211,102,.52); }
}

@media (max-width: 480px) {
  #dw-wa span { display: none; }
  #dw-wa {
    padding: 12px !important;
    border-radius: 50% !important;
  }
}

#dw-toast {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  background: var(--br2);
  color: var(--gd);
  font-family: var(--f);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 11px 24px;
  border-radius: 20px;
  border: 1px solid rgba(200,169,110,.25);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  z-index: 9999;
  opacity: 0;
  transition: all .3s ease;
  white-space: nowrap;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 20 ] FEATURES BLOCK
   ══════════════════════════════════════════════════════════════════════ */

.s-block--features .s-block--features__item {
  text-align: center !important;
  padding: 20px 16px !important;
}

.s-block--features .feature-icon {
  font-size: 28px !important;
  color: var(--br) !important;
  margin-bottom: 8px !important;
}

.s-block--features h2 {
  font-family: var(--f) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--br) !important;
  letter-spacing: 1px !important;
  margin: 0 0 4px !important;
}

.s-block--features p {
  font-size: 12px !important;
  color: rgba(59,16,8,.55) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   [ 21 ] FOOTER
   ══════════════════════════════════════════════════════════════════════ */

#dw-footer {
  background: linear-gradient(180deg, var(--br2) 0%, #2A0C04 100%) !important;
  color: var(--cr);
  padding: 52px 32px 0;
  position: relative;
  overflow: hidden;
  font-family: var(--f);
  border-top: 1px solid rgba(200,169,110,.15);
}

#dw-footer::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

#dw-footer > * {
  position: relative;
  z-index: 2;
}

.dw-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.dw-fb-name {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 6px;
  margin-bottom: 5px;
  display: inline-block;
  background: linear-gradient(135deg, #F5EDE0 0%, #E5C68A 50%, #F5EDE0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dw-footer-name-shine 5s linear infinite;
}

@keyframes dw-footer-name-shine {
  to { background-position: 200% center; }
}

.dw-fb-sub {
  font-size: 9px;
  letter-spacing: 5px;
  color: var(--gd);
  opacity: .7;
  margin-bottom: 16px;
}

.dw-fb-rule {
  width: 36px;
  height: 2px;
  background: linear-gradient(to left, var(--gd), transparent);
  opacity: .5;
  margin-bottom: 18px;
  border-radius: 2px;
}

#dw-footer .dw-footer-brand p {
  font-size: 13px;
  color: rgba(245,237,224,.5);
  line-height: 1.85;
  max-width: 280px;
  margin-bottom: 22px;
}

.dw-socials {
  display: flex;
  gap: 10px;
}

.dw-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(200,169,110,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gd);
  opacity: .55;
  transition: all .3s cubic-bezier(0.34,1.56,0.64,1);
  text-decoration: none;
}

.dw-socials a:hover {
  opacity: 1;
  border-color: var(--gd);
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 6px 20px rgba(200,169,110,.25);
  background: rgba(200,169,110,.08);
}

.dw-socials svg {
  width: 14px;
  height: 14px;
  transition: transform .3s;
}

.dw-socials a:hover svg {
  transform: scale(1.15);
}

.dw-footer-col h4 {
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--gd);
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(200,169,110,.15);
  position: relative;
}

.dw-footer-col h4::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 24px;
  height: 1px;
  background: var(--gd);
  opacity: .8;
}

[dir="ltr"] .dw-footer-col h4::after {
  right: auto;
  left: 0;
}

.dw-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dw-footer-col ul li a {
  font-size: 13px;
  color: rgba(245,237,224,.55);
  transition: all .25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 2px 0;
}

.dw-footer-col ul li a::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: var(--gd);
  transform: rotate(45deg);
  opacity: .35;
  flex-shrink: 0;
  transition: all .25s;
}

.dw-footer-col ul li a:hover {
  color: var(--gd) !important;
  transform: translateX(-4px);
}

[dir="ltr"] .dw-footer-col ul li a:hover {
  transform: translateX(4px);
}

.dw-footer-col ul li a:hover::before {
  opacity: 1;
  transform: rotate(45deg) scale(1.3);
}

.dw-ci {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.dw-ci svg {
  width: 15px;
  height: 15px;
  stroke: var(--gd);
  flex-shrink: 0;
  margin-top: 2px;
  opacity: .75;
  transition: all .2s;
}

.dw-ci:hover svg {
  opacity: 1;
  transform: scale(1.1);
}

.dw-ci span {
  font-size: 12px;
  color: rgba(245,237,224,.48);
  line-height: 1.65;
  transition: color .2s;
}

.dw-ci:hover span {
  color: rgba(245,237,224,.7);
}

.dw-footer-bottom {
  border-top: 1px solid rgba(200,169,110,.1);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.dw-footer-bottom p {
  font-size: 11px;
  color: rgba(245,237,224,.3);
  letter-spacing: 1.5px;
  margin: 0;
}

@media (max-width: 768px) {
  .dw-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  #dw-footer { padding: 36px 20px 0; }
}

@media (max-width: 480px) {
  .dw-footer-grid { grid-template-columns: 1fr; }
  .dw-footer-bottom {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}


/* ════════════════════════════════════════════════════════════════════════════════
   END — DUWAIDI FACTORY CSS v12.0 FINAL
   ════════════════════════════════════════════════════════════════════════════════ */