/* =========================================================
   ODEN — CSS نهائي مرتب لمتجر سلة
   الهوية: كريمي + بيج + بني شوكولاتة
   استبدل به الأكواد القديمة المتكررة
========================================================= */

/* =========================
   1) متغيرات الهوية
========================= */
:root {
  --oden-primary: #f3f0e5;
  --oden-secondary: #e7dfd0;
  --oden-soft: #faf8f2;
  --oden-bg: #fbfaf6;
  --oden-white: #ffffff;

  --oden-brown: #5b3526;
  --oden-brown-dark: #43261c;
  --oden-accent: #a8764c;

  --oden-text: #332e2a;
  --oden-muted: #7e766e;
  --oden-border: #e4dccf;

  --oden-radius-sm: 10px;
  --oden-radius-md: 14px;
  --oden-radius-lg: 18px;

  --oden-shadow-sm: 0 4px 14px rgba(67, 38, 28, 0.05);
  --oden-shadow-md: 0 12px 30px rgba(67, 38, 28, 0.09);
}

/* =========================
   2) إصلاحات عامة
========================= */
html,
body {
  overflow-x: hidden !important;
  background: var(--oden-bg) !important;
  color: var(--oden-text) !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main,
.app-inner,
.page-wrapper {
  background: var(--oden-bg) !important;
}

.container {
  padding-inline: 14px !important;
}

section {
  margin-bottom: 34px !important;
}

img {
  max-width: 100%;
}

div#wa-angel {
  display: none !important;
}

button,
a,
.s-button-element {
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease,
    opacity 0.22s ease !important;
}

/* =========================
   3) شريط الإعلان
========================= */
.salla-advertisement,
.salla-advertisement.bottom-4,
.top-navbar,
.header-ad {
  min-height: 34px !important;
  background: var(--oden-brown-dark) !important;
  color: var(--oden-white) !important;
  border: 0 !important;
}

.salla-advertisement p,
.salla-advertisement span,
.salla-advertisement a,
.top-navbar a,
.header-ad a {
  color: var(--oden-white) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.salla-advertisement svg,
.top-navbar svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--oden-white) !important;
}

/* =========================
   4) الهيدر
========================= */
.store-header,
.store-header .header-inner,
.main-nav-container,
.main-nav-container.fixed-header {
  background: var(--oden-primary) !important;
  border-bottom: 1px solid rgba(91, 53, 38, 0.07) !important;
  box-shadow: none !important;
}

.store-header .header-inner,
.main-nav-container .container {
  min-height: 72px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.store-header .logo img,
.navbar-brand img,
.main-nav-container .navbar-brand img {
  width: auto !important;
  max-width: 106px !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

.store-header button,
.store-header a,
.main-nav-container button,
.main-nav-container a {
  color: var(--oden-text) !important;
}

.store-header .header-btn,
.main-nav-container .header-btn,
.s-user-menu-trigger,
.s-cart-summary-wrapper,
button[aria-label*="بحث"],
button[aria-label*="القائمة"],
button[aria-label*="menu"],
button[aria-label*="search"] {
  width: 39px !important;
  height: 39px !important;
  min-width: 39px !important;
  min-height: 39px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.store-header svg,
.main-nav-container svg {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 1.8 !important;
}

.s-cart-summary-total {
  color: var(--oden-brown) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.s-cart-summary-count {
  background: var(--oden-accent) !important;
  color: var(--oden-white) !important;
  border: 2px solid var(--oden-primary) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

/* =========================
   5) القائمة الجانبية
========================= */
.mm-ocd__content {
  background: var(--oden-white) !important;
  border-left: 1px solid var(--oden-border) !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08) !important;
}

.mobile-menu {
  padding-top: 14px !important;
}

.mobile-menu li {
  border-bottom: 1px solid #f2eee7 !important;
}

.mobile-menu li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 15px 18px !important;
  color: var(--oden-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.mobile-menu li:hover {
  background: var(--oden-soft) !important;
}

.mobile-menu li:hover a {
  color: var(--oden-brown) !important;
}

.btn-close-mm {
  width: 40px !important;
  height: 40px !important;
  top: 14px !important;
  left: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--oden-soft) !important;
  color: var(--oden-text) !important;
  border: 1px solid var(--oden-border) !important;
  border-radius: 50% !important;
}

/* =========================
   6) البنرات
========================= */
.s-block--banners,
.s-block--hero-slider,
.s-slider-block--full-width,
section.s-block--banners {
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 30px !important;
  padding: 0 !important;
}

.s-block--banners .container,
.s-block--hero-slider .container,
.s-slider-block--full-width .container {
  padding-inline: 14px !important;
}

.s-block--banners img,
.s-block--hero-slider img,
.s-slider-block--full-width img,
.s-block--banners a,
.s-block--hero-slider a {
  border-radius: 12px !important;
}

.s-block--banners img,
.s-block--hero-slider img,
.s-slider-block--full-width img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

.s-block--banners a,
.s-block--hero-slider a {
  overflow: hidden !important;
  box-shadow: var(--oden-shadow-sm) !important;
}

/* =========================
   7) عناوين الأقسام
========================= */
.s-block__title,
.s-slider-block__title,
.s-slider-block__title-right,
.s-block__title-right {
  width: 100% !important;
  margin: 0 0 15px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.s-block__title > div,
.s-slider-block__title > div,
.s-slider-block__title-right,
.s-block__title-right {
  min-width: 0 !important;
}

.s-block__title h2,
.s-block__title h3,
.s-slider-block__title h2,
.s-slider-block__title h3,
.s-slider-block__title-right h2,
.s-slider-block__title-right h3,
.s-block__title-right h2,
.s-block__title-right h3,
.s-block-blog__title {
  position: relative !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-right: 12px !important;
  color: var(--oden-brown) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  text-align: right !important;
}

.s-block__title h2::before,
.s-block__title h3::before,
.s-slider-block__title h2::before,
.s-slider-block__title h3::before,
.s-slider-block__title-right h2::before,
.s-slider-block__title-right h3::before,
.s-block__title-right h2::before,
.s-block__title-right h3::before,
.s-block-blog__title::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  width: 3px !important;
  height: 21px !important;
  background: var(--oden-accent) !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
}

.s-block__title h2::after,
.s-block__title h3::after,
.s-slider-block__title h2::after,
.s-slider-block__title h3::after,
.s-slider-block__title-right h2::after,
.s-slider-block__title-right h3::after {
  content: none !important;
  display: none !important;
}

.s-block__title p,
.s-slider-block__title p {
  margin: 4px 12px 0 0 !important;
  color: var(--oden-muted) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

.s-block__title a,
.s-slider-block__title a,
.s-slider-block__title-right a,
.s-block__title-right a,
.s-block__title .s-button-element,
.s-slider-block__title .s-button-element {
  flex: 0 0 auto !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 6px 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: var(--oden-white) !important;
  color: var(--oden-brown) !important;
  border: 1px solid var(--oden-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

@media (hover: hover) {
  .s-block__title a:hover,
  .s-slider-block__title a:hover,
  .s-slider-block__title-right a:hover,
  .s-block__title-right a:hover {
    background: var(--oden-brown) !important;
    color: var(--oden-white) !important;
    border-color: var(--oden-brown) !important;
    transform: translateY(-1px) !important;
  }
}

/* =========================
   8) قسم التصنيفات
========================= */
.s-block--categories,
.s-block--fixed-banner,
.s-block--square-categories {
  overflow: hidden !important;
}

.s-block--categories .swiper,
.s-block--square-categories .swiper {
  overflow: visible !important;
}

.s-block--categories .swiper-wrapper,
.s-block--square-categories .swiper-wrapper {
  align-items: stretch !important;
}

.s-block--categories .swiper-slide,
.s-block--square-categories .swiper-slide {
  height: auto !important;
}

.s-block--categories .swiper-slide > a,
.s-block--square-categories .swiper-slide > a,
.s-block--categories .category-entry,
.s-block--square-categories .category-entry {
  height: 100% !important;
  padding: 7px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: var(--oden-white) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-align: center !important;
}

.s-block--categories img,
.s-block--square-categories img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  background: var(--oden-primary) !important;
  border-radius: 9px !important;
}

.s-block--categories h3,
.s-block--categories span,
.s-block--square-categories h3,
.s-block--square-categories span {
  min-height: 38px !important;
  margin: 8px 0 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  color: var(--oden-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}


/* =========================
   10) الأزرار والحقول
========================= */
input,
select,
textarea,
.s-form-control,
.form-control {
  min-height: 44px !important;
  background: var(--oden-white) !important;
  color: var(--oden-text) !important;
  border: 1px solid var(--oden-border) !important;
  border-radius: var(--oden-radius-sm) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.s-form-control:focus,
.form-control:focus {
  border-color: var(--oden-accent) !important;
  box-shadow: 0 0 0 3px rgba(168, 118, 76, 0.12) !important;
  outline: none !important;
}

.s-button-primary,
.btn-primary,
button[type="submit"] {
  background: var(--oden-brown) !important;
  color: var(--oden-white) !important;
  border: 1px solid var(--oden-brown) !important;
  border-radius: var(--oden-radius-sm) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* =========================
   11) التقييمات
========================= */
.s-block--testimonials {
  padding: 28px 0 !important;
  background: var(--oden-primary) !important;
  overflow: hidden !important;
}

.s-block--testimonials .swiper-wrapper {
  align-items: stretch !important;
}

.s-block--testimonials .swiper-slide {
  height: auto !important;
  display: flex !important;
}

.s-block--testimonials .swiper-slide > div,
.s-block--testimonials .s-slider-item,
.s-block--testimonials .testimonial {
  width: 100% !important;
  min-height: 210px !important;
  padding: 18px 15px !important;
  background: var(--oden-white) !important;
  border: 1px solid var(--oden-border) !important;
  border-radius: 15px !important;
  box-shadow: var(--oden-shadow-sm) !important;
  text-align: center !important;
}

/* =========================
   12) السلة والدفع
========================= */
body.cart .shadow-default,
body.cart .cart-item,
body.checkout .checkout-step,
body.checkout .cart-summary,
body.checkout .payment-method {
  background: var(--oden-white) !important;
  border: 1px solid var(--oden-border) !important;
  border-radius: var(--oden-radius-lg) !important;
  box-shadow: var(--oden-shadow-sm) !important;
}

body.cart .cart-submit-wrap .s-button-element,
body.cart salla-button[hook="cart:submit"] button,
button.s-fast-checkout-button.outline.rtl {
  width: 100% !important;
  min-height: 50px !important;
  background: var(--oden-brown) !important;
  color: var(--oden-white) !important;
  border: 1px solid var(--oden-brown) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

/* =========================
   13) الفوتر
========================= */
.store-footer {
  padding: 32px 0 0 !important;
  background: var(--oden-soft) !important;
  color: var(--oden-text) !important;
  border-top: 1px solid var(--oden-border) !important;
  text-align: center !important;
  overflow: hidden !important;
}

.store-footer .container {
  max-width: 1180px !important;
  padding-inline: 16px !important;
}

.store-footer .footer-profile img,
.store-footer .store-footer__profile img,
.store-footer .footer-logo img {
  max-width: 120px !important;
  height: auto !important;
  margin: 0 auto 12px !important;
  display: block !important;
}

.store-footer .footer-description,
.store-footer .footer-profile p {
  max-width: 380px !important;
  margin: 0 auto 18px !important;
  color: #625c54 !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

.store-footer .footer-middle {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.store-footer h3,
.store-footer h4,
.store-footer .footer-title {
  margin: 0 0 12px !important;
  color: var(--oden-brown) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.store-footer h3::after,
.store-footer h4::after,
.store-footer .footer-title::after {
  content: "" !important;
  width: 28px !important;
  height: 2px !important;
  margin: 7px auto 0 !important;
  display: block !important;
  background: var(--oden-accent) !important;
  border-radius: 999px !important;
}

.store-footer ul:not(.s-social-list):not(.s-payments-list),
.store-footer .footer-links {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  list-style: none !important;
}

.store-footer a {
  color: var(--oden-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.store-footer ul.s-social-list {
  margin: 12px auto 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
}

.store-footer ul.s-social-list li a {
  width: 37px !important;
  height: 37px !important;
  min-width: 37px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--oden-white) !important;
  color: var(--oden-brown) !important;
  border: 1px solid var(--oden-border) !important;
  border-radius: 10px !important;
}

.store-footer .footer-bottom {
  width: 100% !important;
  margin-top: 24px !important;
  padding: 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--oden-white) !important;
  border-top: 1px solid var(--oden-border) !important;
  border-radius: 16px 16px 0 0 !important;
}

.store-footer salla-payments,
.store-footer .s-payments-list {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.store-footer .s-payments-list img,
.store-footer salla-payments img {
  width: auto !important;
  max-height: 22px !important;
  object-fit: contain !important;
}

/* =========================
   14) الجوال
========================= */
@media (max-width: 767px) {
  .container {
    padding-inline: 12px !important;
  }

  section {
    margin-bottom: 30px !important;
  }

  .store-header .header-inner,
  .main-nav-container .container {
    min-height: 67px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .store-header .logo img,
  .navbar-brand img,
  .main-nav-container .navbar-brand img {
    max-width: 96px !important;
    max-height: 43px !important;
  }

  .s-block--banners .container,
  .s-block--hero-slider .container,
  .s-slider-block--full-width .container {
    padding-inline: 12px !important;
  }

  .s-block__title,
  .s-slider-block__title,
  .s-slider-block__title-right,
  .s-block__title-right {
    margin-bottom: 12px !important;
    gap: 7px !important;
  }

  .s-block__title h2,
  .s-block__title h3,
  .s-slider-block__title h2,
  .s-slider-block__title h3,
  .s-slider-block__title-right h2,
  .s-slider-block__title-right h3,
  .s-block__title-right h2,
  .s-block__title-right h3,
  .s-block-blog__title {
    padding-right: 10px !important;
    font-size: 14px !important;
  }

  .s-block__title h2::before,
  .s-block__title h3::before,
  .s-slider-block__title h2::before,
  .s-slider-block__title h3::before,
  .s-slider-block__title-right h2::before,
  .s-slider-block__title-right h3::before,
  .s-block__title-right h2::before,
  .s-block__title-right h3::before,
  .s-block-blog__title::before {
    height: 17px !important;
  }

  .s-block__title a,
  .s-slider-block__title a,
  .s-slider-block__title-right a,
  .s-block__title-right a {
    min-height: 29px !important;
    padding: 5px 10px !important;
    font-size: 9.5px !important;
  }

  /* 4 تصنيفات كاملة بدون قص */
  .s-block--categories .swiper-slide,
  .s-block--square-categories .swiper-slide {
    width: calc((100vw - 48px) / 4) !important;
    max-width: calc((100vw - 48px) / 4) !important;
  }

  .s-block--categories .swiper-slide > a,
  .s-block--square-categories .swiper-slide > a,
  .s-block--categories .category-entry,
  .s-block--square-categories .category-entry {
    padding: 4px !important;
    border-radius: 10px !important;
  }

  .s-block--categories h3,
  .s-block--categories span,
  .s-block--square-categories h3,
  .s-block--square-categories span {
    min-height: 34px !important;
    margin-top: 6px !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
  }

  custom-salla-product-card.s-product-card-entry,
  .s-product-card-entry {
    padding: 4px !important;
    border-radius: 11px !important;
  }

 
  .store-footer {
    padding: 24px 8px 0 !important;
  }

  .store-footer .footer-middle {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .store-footer .footer-bottom {
    margin-top: 18px !important;
    padding: 14px 8px !important;
  }
}

/* =========================
   15) الشاشات الصغيرة جدًا
========================= */
@media (max-width: 380px) {
  .s-block__title h2,
  .s-block__title h3,
  .s-slider-block__title h2,
  .s-slider-block__title h3 {
    font-size: 13px !important;
  }

  .s-block--categories h3,
  .s-block--categories span,
  .s-block--square-categories h3,
  .s-block--square-categories span {
    font-size: 8.4px !important;
  }

  .s-product-card-entry .s-product-card-content-title,
  .s-product-card-entry h3,
  .s-product-card-entry h3 a {
    font-size: 9.4px !important;
  }

  .s-product-card-entry salla-add-product-button button,
  .s-product-card-entry .s-add-product-button,
  .s-product-card-entry .s-button-element {
    padding-inline: 3px !important;
    font-size: 8px !important;
  }
}


 

/* تكبير عناوين الأقسام */
.s-block__title h2,
.s-block__title h3,
.s-slider-block__title h2,
.s-slider-block__title h3,
.s-slider-block__title-right h2,
.s-slider-block__title-right h3,
.s-block__title-right h2,
.s-block__title-right h3,
.s-block-blog__title {
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

 
 

/* ==================================================
   ترتيب قائمة الجوال - متجر أودن
   احذف أي كود سابق خاص بالقائمة قبل إضافته
================================================== */

@media (max-width: 1024px) {

  /* القائمة الجانبية كاملة */
  #main-menu {
    width: min(88vw, 360px) !important;
    max-width: 360px !important;
    height: 100dvh !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.14) !important;
  }

  /* إلغاء المساحات الزائدة */
  #main-menu .main-menu {
    width: 100% !important;
    margin: 0 !important;
    padding: 64px 12px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* جميع عناصر القائمة */
  #main-menu .main-menu > li {
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    list-style: none !important;
  }

  /* إخفاء العناصر الفارغة */
  #main-menu .main-menu > li:empty {
    display: none !important;
  }

  /* روابط القائمة */
  #main-menu .main-menu > li > a {
    position: relative !important;
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    color: #352a27 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: right !important;
    text-decoration: none !important;

    transition: background-color 0.2s ease,
                color 0.2s ease !important;
  }

  /* خط فاصل بسيط */
  #main-menu .main-menu > li:not(:last-child) > a {
    border-bottom: 1px solid #f1ecea !important;
    border-radius: 0 !important;
  }

  /* عند الضغط أو المرور */
  #main-menu .main-menu > li > a:hover,
  #main-menu .main-menu > li > a:focus,
  #main-menu .main-menu > li.active > a {
    color: #8b685f !important;
    background: #f8f4f2 !important;
    border-radius: 10px !important;
  }

  /* أيقونات القائمة */
  #main-menu .main-menu > li > a i,
  #main-menu .main-menu > li > a svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    color: #9d7a72 !important;
  }

  /* إصلاح أحجام الخط التي يفرضها الثيم */
  #main-menu .text-sm,
  #main-menu .md\:text-lg,
  #main-menu .font-bold {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  /* السلايدر الموجود داخل القائمة */
  #main-menu salla-slider,
  #main-menu .menu-slider,
  #main-menu .swiper,
  #main-menu .swiper-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #main-menu .swiper-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    gap: 4px !important;
  }

  #main-menu .swiper-slide {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  #main-menu .swiper-slide > a {
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 14px !important;

    display: flex !important;
    align-items: center !important;

    color: #352a27 !important;
    background: transparent !important;
    border-bottom: 1px solid #f1ecea !important;

    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: right !important;
  }

  /* زر إغلاق القائمة */
  #main-menu .close-mobile-menu,
  #main-menu .btn--close-sm,
  #main-menu button[aria-label="Close"],
  #main-menu button[aria-label="close"] {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 50 !important;

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

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

    color: #493833 !important;
    background: #f7f3f1 !important;
    border: 1px solid #e9dfdc !important;
    border-radius: 50% !important;
  }

  /* روابط أسفل القائمة */
  #main-menu .main-menu > li.social-text,
  #main-menu .main-menu > li.links {
    margin-top: 6px !important;
  }

  #main-menu .main-menu > li.social-text > a,
  #main-menu .main-menu > li.links > a {
    color: #765950 !important;
    background: #f8f4f2 !important;
    border: 0 !important;
    border-radius: 10px !important;
  }

  /* شريط التمرير */
  #main-menu::-webkit-scrollbar {
    width: 4px !important;
  }

  #main-menu::-webkit-scrollbar-track {
    background: transparent !important;
  }

  #main-menu::-webkit-scrollbar-thumb {
    background: #c7b2ac !important;
    border-radius: 20px !important;
  }

  /* خلفية الصفحة خلف القائمة */
  .mm-ocd__backdrop {
    background: rgba(26, 20, 18, 0.45) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
}
/* =========================================================
   المنتجات - 3 منتجات كاملة فقط على الجوال
========================================================= */
@media (max-width: 767px) {

  /* حاوية المنتجات */
  salla-products-slider {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* منطقة Swiper */
  salla-products-slider .swiper,
  salla-products-slider .swiper-container,
  salla-products-slider .s-slider-container {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow: hidden !important;
  }

  /* Wrapper */
  salla-products-slider .swiper-wrapper {
    width: 100% !important;

    gap: 0 !important;

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

    align-items: stretch !important;
  }

  /* ========================================
     المنتج = ثلث العرض بالضبط
  ======================================== */
  salla-products-slider .swiper-wrapper > .swiper-slide,
  salla-products-slider .swiper-wrapper > .s-products-slider-card,
  salla-products-slider .swiper-wrapper > .s-products-slider-card.swiper-slide {

    width: 33.333333% !important;
    min-width: 33.333333% !important;
    max-width: 33.333333% !important;

    flex: 0 0 33.333333% !important;
    flex-basis: 33.333333% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;

    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;

    padding: 0 3px !important;

    box-sizing: border-box !important;
  }

  /* الكرت الداخلي */
  salla-products-slider custom-salla-product-card,
  salla-products-slider custom-salla-product-card.s-product-card-entry,
  salla-products-slider .s-product-card-entry {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 3px !important;

    box-sizing: border-box !important;

    border-radius: 9px !important;
  }

  /* لا نغيّر حجم أو ارتفاع الصورة */
  salla-products-slider .s-product-card-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* المحتوى */
  salla-products-slider .s-product-card-content {
    width: 100% !important;
    min-width: 0 !important;

    padding: 4px 2px !important;
  }

  /* اسم المنتج */
  salla-products-slider .s-product-card-content-title,
  salla-products-slider .s-product-card-content-title a,
  salla-products-slider .s-product-card-entry h3,
  salla-products-slider .s-product-card-entry h3 a {

    font-size: 10px !important;
    line-height: 1.4 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
  }

  /* السعر */
  salla-products-slider .s-product-card-price,
  salla-products-slider .s-product-card-sale-price,
  salla-products-slider .s-product-card-starting-price {
    font-size: 10px !important;
  }

  /* زر السلة */
  salla-products-slider .s-product-card-content-footer .s-button-btn,
  salla-products-slider .s-product-card-entry salla-add-product-button button {

    min-height: 27px !important;
    height: 27px !important;

    padding: 2px 3px !important;

    font-size: 8.5px !important;
    border-radius: 7px !important;
  }
}
@media (max-width: 767px) {

  /* صورة المنتج */
  salla-products-slider .s-product-card-image {
    position: relative !important;
    width: 100% !important;
    height: 145px !important;
    min-height: 145px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: #fff !important;
  }

  salla-products-slider .s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;

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

    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
  }

  /* أزرار المفضلة والعرض السريع */
  salla-products-slider .s-product-card-actions {
    position: absolute !important;
    top: 8px !important;
    left: 7px !important;
    right: auto !important;

    z-index: 20 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* أزرار المفضلة + العرض السريع */
  salla-products-slider .s-product-card-wishlist-btn,
  salla-products-slider .s-product-card-quick-view-btn,
  salla-products-slider .s-product-card-actions .s-button-element,
  salla-products-slider .s-product-card-actions button {
    position: relative !important;

    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;

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

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

    background: rgba(255,255,255,.92) !important;
    color: #5b3526 !important;

    border: 1px solid rgba(91,53,38,.12) !important;
    border-radius: 50% !important;

    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* حجم الأيقونة */
  salla-products-slider .s-product-card-actions svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* منع أي طبقة من تغطية الصورة */
  salla-products-slider .s-product-card-image::before,
  salla-products-slider .s-product-card-image::after {
    pointer-events: none !important;
  }
}


.s-product-card-entry {
     border-color: #d3c9bd !important;
    border-width: 1px;
  }