/* ==============================================
   1. خلفية المتجر وسكشن الدوائر والمميزات
   ============================================== */
body, 
.site-wrapper, 
main,
.s-block,
.s-block--features,
.store-features,
.s-block--banners,
.s-block--categories,
section.s-block {
  background-color: #F5F5F5 !important;
}

.s-block-html-content div[style*="background-color"] {
  background-color: #F5F5F5 !important;
}

/* ==============================================
   2. ضبط عداد السلة بلون اللوجو
   ============================================== */
.s-cart-summary-count,
#s-cart-icon .badge,
.s-user-menu-login-btn + a .badge,
.s-cart-summary-wrapper .badge,
[class*="cart-count"],
[class*="cart-badge"],
.badge-danger,
header [class*="badge"] {
  background-color: #c5a47e !important;
  background: #c5a47e !important;
  color: #241c18 !important;
  border: 1px solid #ffffff !important;
  font-weight: 700 !important;
}

/* ==============================================
   3. البانر
   ============================================== */
.s-block:first-of-type,
section[class*="banner"]:first-of-type,
.s-block-banner:first-of-type,
.s-block:has(a[href*="wadha"]):first-of-type,
.s-block:first-child {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  display: block !important;
  clear: both !important;
}

.s-block:first-of-type .container,
section[class*="banner"]:first-of-type .container,
.s-block-banner:first-of-type .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.s-block:first-of-type img,
section[class*="banner"]:first-of-type img,
.s-block-banner:first-of-type img,
.s-block:first-of-type .banner-entry {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  display: block !important;
  object-fit: cover !important;
}

.s-block:first-of-type + .s-block,
.s-block:first-child + .s-block,
.store-features,
.s-block--features {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  clear: both !important;
}

/* ==============================================
   4. السلايدر والعناوين
   ============================================== */
.s-products-slider-wrapper,
.s-block-products-slider,
section.s-block:has(.s-product-card-entry) {
  width: 100% !important;
  max-width: 1220px !important;
  margin-inline: auto !important;
  padding-inline: 10px !important;
  padding-block: 20px 40px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.s-products-slider-wrapper .s-slider-block__title {
  position: relative;
  justify-content: center !important;
  min-height: 40px;
  margin-bottom: 20px !important;
  text-align: center;
}

.s-products-slider-wrapper .s-slider-block__title h2 {
  width: 100%;
  color: #111111 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.s-products-slider-wrapper .s-slider-block__title-left {
  display: none !important;
}

/* ==============================================
   5. توزيع الكروت وضبط الموبايل والدوائر
   ============================================== */

/* للشاشات الكبيرة (الكمبيوتر) */
@media (min-width: 992px) {
  .s-block .swiper-slide {
    width: calc((100% - 48px) / 4) !important;
    max-width: calc((100% - 48px) / 4) !important;
    flex: 0 0 calc((100% - 48px) / 4) !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    box-sizing: border-box !important;
  }

  .s-product-card-entry .s-product-card-image,
  .s-product-card-entry .s-product-card-image img {
    height: 275px !important;
  }
}

/* للموبايل: حل الدوائر + منع الكارت الثالث نهائياً */
@media (max-width: 991px) {
  .s-block-html-content div[style*="overflow-x"],
  .s-block-categories .swiper-wrapper,
  div:has(> a[href*="category"]) {
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 15px 8px !important;
    overflow-x: hidden !important;
    flex-wrap: nowrap !important;
  }

  .s-block-html-content div[style*="overflow-x"] > div,
  .s-block-categories .swiper-slide,
  div:has(> a[href*="category"]) > a {
    width: calc(20% - 6px) !important;
    min-width: 0 !important;
    flex: 0 0 calc(20% - 6px) !important;
    margin: 0 !important;
    text-align: center !important;
  }

  .s-block-html-content img,
  .s-block-categories img {
    width: 54px !important;
    height: 54px !important;
    margin: 0 auto !important;
  }

  .s-block-html-content span,
  .s-block-categories span {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .s-products-slider-wrapper,
  .s-block-products-slider,
  .s-products-slider-wrapper .swiper,
  .s-products-slider-wrapper .swiper-container {
    overflow: hidden !important;
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  .s-block .swiper-slide {
    width: calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
    min-width: calc((100% - 10px) / 2) !important;
    flex: 0 0 calc((100% - 10px) / 2) !important;
    margin-left: 2.5px !important;
    margin-right: 2.5px !important;
    box-sizing: border-box !important;
  }

  .s-product-card-entry .s-product-card-image,
  .s-product-card-entry .s-product-card-image img {
    height: 230px !important;
    max-height: 230px !important;
  }
}

/* ==============================================
   6. تنسيق الكارت ورفع زر السلة
   ============================================== */
custom-salla-product-card.s-product-card-entry,
.s-product-card-entry {
  box-sizing: border-box !important;
  border: 1.5px solid #d4af37 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  padding: 10px 10px 14px 10px !important;
}

.s-product-card-entry .s-product-card-image {
  width: 100% !important;
  border-radius: 8px !important;
}

.s-product-card-entry .s-product-card-image img {
  width: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 8px !important;
}

.s-product-card-entry .s-product-card-content {
  padding-top: 10px !important;
  padding-bottom: 0 !important;
  text-align: center !important;
}

.s-product-card-entry .s-product-card-content-title {
  margin-top: auto !important;
  margin-bottom: 4px !important;
  text-align: center !important;
}

.s-product-card-entry .s-product-card-content-title a {
  display: block !important;
  color: #151515 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.s-product-card-entry .s-product-card-content-sub,
.s-product-card-entry .s-product-card-price,
.s-product-card-entry [class*="price"] {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 2px auto 10px auto !important;
  text-align: center !important;
}

.s-product-card-entry .s-product-card-price * {
  margin: 0 !important;
  padding: 0 !important;
}

.s-product-card-entry .s-button-primary-outline,
.s-product-card-entry .s-button-outline,
.s-product-card-entry button {
  border: 1px solid #d4af37 !important;
  border-radius: 8px !important;
  color: #d4af37 !important;
  background: transparent !important;
  font-size: 12px !important;
  padding: 7px 0 !important;
  width: 100% !important;
  margin-bottom: 2px !important;
  transition: all 0.25s ease-in-out !important;
}

.s-product-card-entry .s-button-primary-outline:hover,
.s-product-card-entry .s-button-outline:hover,
.s-product-card-entry button:hover {
  background-color: #523e32 !important;
  border-color: #523e32 !important;
  color: #ffffff !important;
}

.s-product-card-entry .s-button-primary-outline:hover *,
.s-product-card-entry .s-button-outline:hover *,
.s-product-card-entry button:hover * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ==============================================
   7. الفوتر الفاخر
   ============================================== */
.store-footer *::after,
.store-footer *::before,
.store-footer__inner h3::after,
.store-footer__inner h4::after {
  content: none !important;
  display: none !important;
}

footer.store-footer,
.store-footer,
.store-footer__inner {
  background: linear-gradient(135deg, #1f1815 0%, #3a2b23 50%, #241c18 100%) !important;
  color: #f5f5f5 !important;
  border-top-left-radius: 36px !important;
  border-top-right-radius: 36px !important;
  overflow: hidden !important;
  margin-top: 40px !important;
}

footer.store-footer > .md\:flex.container,
.store-footer > div {
  background: transparent !important;
  border-top: none !important;
}

.store-footer__inner > div > div:first-child h3,
.store-footer__inner .grid > div:first-child h3,
.store-footer__inner .flex > div:first-child h3,
.store-footer__inner .container > div:first-child h3 {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  display: block !important;
  margin-bottom: 16px !important;
}

.store-footer__inner > div > div:first-child h3::after,
.store-footer__inner .grid > div:first-child h3::after,
.store-footer__inner .flex > div:first-child h3::after,
.store-footer__inner .container > div:first-child h3::after {
  content: "" !important;
  display: block !important;
  width: 140px !important;
  height: 55px !important;
  background: url("https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/NelyV/GhXTNv1euw3PmYLDjgvOY2PLuXN2o133nbMp0EJi.png") no-repeat right center / contain !important;
}

.store-footer__inner > div > div:not(:first-child) h3,
.store-footer__inner .grid > div:not(:first-child) h3,
.store-footer__inner .flex > div:not(:first-child) h3,
.store-footer__inner h4 {
  font-size: 15px !important;
  line-height: normal !important;
  color: #e5cba6 !important;
  display: block !important;
}

/* ==============================================
   8. تثبيت السوشيال في العمود الأول فقط وإلغاء المكرر نهائياً
   ============================================== */

/* إخفاء أيقونات السوشيال ميديا في كل الأعمدة ما عدا العمود الأول */
.store-footer__inner > div > div:not(:first-child) [class*="social"],
.store-footer__inner .grid > div:not(:first-child) [class*="social"],
.store-footer__inner .flex > div:not(:first-child) [class*="social"],
.store-footer__inner > div > div:not(:first-child) ul:has(a[href*="instagram"]),
.store-footer__inner > div > div:not(:first-child) div:has(> a[href*="instagram"]),
.store-footer__inner > div > div:not(:first-child) div:has(> a[href*="tiktok"]) {
  display: none !important;
}

/* ضبط أيقونات السوشيال في العمود الأول: جنب بعض في المنتصف بمحاذاة مضغوطة */
.store-footer__inner > div > div:first-child .s-social-list,
.store-footer__inner .grid > div:first-child .s-social-list,
.store-footer__inner > div > div:first-child [class*="social"],
.store-footer__inner .grid > div:first-child [class*="social"],
.store-footer__inner > div > div:first-child div:has(> a[href*="instagram"]) {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 120px !important;
  margin: 15px auto !important;
  padding: 0 !important;
}

.store-footer__inner > div > div:first-child a[href*="instagram"],
.store-footer__inner > div > div:first-child a[href*="tiktok"],
.store-footer__inner > div > div:first-child .s-social-link {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  flex: 0 0 36px !important;
}
/* ==============================================
   9. توسيط جميع عناصر الفوتر للموبايل
   ============================================== */
@media (max-width: 991px) {
  .store-footer,
  .store-footer__inner,
  .store-footer__inner > div,
  .store-footer__inner .grid,
  .store-footer__inner .flex {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .store-footer__inner > div > div:first-child h3::after,
  .store-footer__inner .grid > div:first-child h3::after,
  .store-footer__inner .flex > div:first-child h3::after,
  .store-footer__inner .container > div:first-child h3::after {
    margin: 0 auto !important;
    background-position: center center !important;
  }

  .store-footer__inner p,
  .store-footer__inner span {
    text-align: center !important;
  }

  .store-footer__inner .freelance-doc,
  .store-footer__inner [class*="freelance"],
  .store-footer__inner img[src*="freelance"] {
    margin-inline: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .store-footer__inner h3,
  .store-footer__inner h4,
  .store-footer__inner .footer-menu-title {
    text-align: center !important;
  }

  .store-footer__inner ul,
  .store-footer__inner .s-menu-footer-list,
  .store-footer__inner .footer-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .store-footer__inner li,
  .store-footer__inner li a {
    text-align: center !important;
  }

  .store-footer__inner .s-contacts-topnav-link,
  .store-footer__inner div:has(> a[href*="tel"]),
  .store-footer__inner div:has(> a[href*="mailto"]),
  .store-footer__inner div:has(> a[href*="wa.me"]) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .store-footer__inner a[href*="tel"],
  .store-footer__inner a[href*="mailto"],
  .store-footer__inner a[href*="wa.me"] {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }
}