/* ============================================
   1) سلايدر الأقسام (الوسائد/المراتب/الأسرة...) - 4 عناصر
   ============================================ */

.main-nav-container .header-buttons span {
    color: white !important;
}
@media (min-width: 841px) {
  .categories-section .container {
    height: 300px !important;
}
  .categories-row.flex.justify-center.md\:justify-between.items-stretch.gap-\[12px\].flex-wrap.mt-\[16px\] {
    margin: 0px !important;
}
  .categories-row.flex.justify-center.md\:justify-between.items-stretch.gap-\[12px\].flex-wrap.mt-\[16px\] {
    margin: 0px !important;
}
.object-cover {
    object-fit: contain !important;
}.categories-section .categories-row .s-slider-container {
    height: 320px !important;
    padding-bottom: 0px !important;
}
#slider-with-bg-2 .swiper-wrapper {
   gap: 3px !important;
}

section.s-block.categories-section {
    margin: 0px !important;
}
  .lg\:gap-0\.5 {
    gap: 1.125rem;
}
/* حط الأيقونة جنب الخط الأبيض في الهيدر */
.header-buttons + span.block.sm\:mx-1\.5,
span.block.sm\:mx-1\.5.text-\[21px\] {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
#slider-with-bg-2 .swiper-wrapper {
  transform: none !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
}
#slider-with-bg-2 .swiper-slide {
  width: calc(25% - 3px) !important;
  margin: 0 !important;
  flex-shrink: 0;
}
#slider-with-bg-2 .categories-col-container {
  width: 100% !important;
  margin: 0 !important;
}
#slider-with-bg-2 .swiper-pagination {
  display: none !important;
}}
@media (min-width: 841px) {
#slider-with-bg-3 .swiper-slide {
  margin: 0 !important;
}
#slider-with-bg-3 .categories-col-container {
  width: 100% !important;
  margin: 0 !important;
}
}
@media (max-width: 840px) {
  .categories-row.flex.justify-center.md\:justify-between.items-stretch.gap-\[12px\].flex-wrap.mt-\[16px\] {
    margin: 0px !important;
    padding: 0px !important;
}
  .categories-section .categories-row .s-slider-container {
    padding-bottom: 0px !important;
            height: 110px !important;
}
  section.s-block.categories-section {
    margin: 0px !important;
}
  #slider-with-bg-2 > div > div.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal{
    display: none !important;
  }
  .main-nav-container .navbar-brand-content .navbar-brand img {
    max-height: 5rem !important;}
.object-cover {
    object-fit: contain !important;
}
  #slider-with-bg-2 .swiper-wrapper {
    flex-wrap: nowrap;
    transform: revert;
    display: flex !important;
  }
  #slider-with-bg-2 .swiper-slide {
    width: 25% !important;
  }
  .categories-section .categories-row .categories-col {
    width: 33% !important;
}
}

/* ============================================
   2) سكشن الوسائد: صورة + سلايدر منتجات جنب بعض
   نسخة مُعاد بناؤها بالكامل
   ============================================ */
.s-block--slider-with-bg {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: stretch;
  gap: 24px;
  background: none !important;
  padding: 32px 16px;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto;
  box-sizing: border-box;
}

/* الصورة كصندوق ثابت النسبة */
.s-block--slider-with-bg .slider-bg {
  position: relative !important;
  width: 42%;
  max-width: 560px;
  min-width: 300px;
  height: auto;
  min-height: 420px;
  border-radius: 12px;
  background-size: cover !important;
  background-position: center !important;
  flex-shrink: 0;
}
.s-block--slider-with-bg .slider-bg::before {
  background-color: transparent !important;
}

/* الكونتينر: ياخد باقي المساحة، ومحتواه (نص + سلايدر) بجنب بعض */
.s-block--slider-with-bg .container {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center;
  flex: 1 1 0%;
  min-width: 0;              /* أهم سطر: يمنع الـ overflow اللي كان بيدفع المحتوى يمين */
  min-height: auto !important;
  margin-top: 0 !important;
  max-width: 100%;
  padding: 0;
  gap: 20px;
  box-sizing: border-box;
}

/* عمود العنوان والوصف */
.s-block--slider-with-bg .container > div:first-child {
  display: none;
  padding: 0 !important;      /* يلغي الـ rtl:pl-[calc(...)] الغريب من قالب سلة */
  margin: 0 !important;
}
@media (min-width: 768px) {
  span.block.sm\:mx-1\.5.text-\[21px\] {
    color: white !important;
}
  .flex.justify-between.items-center.self-end.lg\:self-auto.w-full.md\:pt-3.md\:pb-3.-mb-1.md\:-mb-2.lg\:mb-0 {
    max-width: 70%;
    justify-self: center !important;
}
  .s-block--slider-with-bg .container > div:first-child {
    display: flex !important;
    flex: 0 0 42%;
    max-width: 42%;
    width: auto !important;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
}

/* تنسيق العنوان + الوصف + الزرار جوه عمود النص */
.s-block--slider-with-bg .container > div:first-child h3 {
  display: block !important;         /* يلغي display:-webkit-box الموروث من line-clamp-1 */
  -webkit-line-clamp: unset !important;
  overflow: visible;
  margin: 0;
  line-height: 1.3;
  color: var(--color-primary, #104E4D);
}

.s-block--slider-with-bg .container > div:first-child p {
  margin: 0;
  max-width: 34ch;           /* يمنع السطر يطول أوي ويفضل مقروء */
  color: #475569;            /* slate-600 */
}

.s-block--slider-with-bg .container > div:first-child .btns-style-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border-radius: 999px;
  background-color: var(--color-primary, #104E4D);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 15px;
  transition: opacity .2s ease, transform .2s ease;
}
.s-block--slider-with-bg .container > div:first-child .btns-style-main:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* سلايدر المنتجات: ياخد باقي المساحة فقط، من غير overflow */
.s-block--slider-with-bg salla-products-slider {
  flex: 1 1 0%;
  min-width: 0;               /* برضه لازم هنا عشان تمنع دفع المحتوى */
  width: auto !important;
  display: block;
}

/* مفيش فرض عرض على .swiper-slide هنا خالص
   عرض الكارد بيتحدد من slider-config (slidesPerView) بس اللي مكتوب
   في الـ HTML، وده اللي بيمنع تعارض حساب Swiper مع الـ CSS
   ويمنع رجوع الفراغ لما تغيّر حجم الكارد */

/* الموبايل: الصورة فوق والمحتوى تحت */
@media (max-width: 768px) {
  img.slide-img.lazy.w-full.h-\[400px\].lg\:h-\[500px\].object-cover.object-center.loaded {
    object-fit: contain !important;
}
  .s-block--slider-with-bg {
    flex-direction: column !important;
    padding: 20px 16px;
    max-width: 360px !important;
  }
  .s-block--slider-with-bg .slider-bg {
    width: 100%;
    max-width: 100%;
    min-height: 300px;
    height: 300px !important;
  }
  .s-block--slider-with-bg .container {
    flex-direction: column !important;
    align-items: stretch !important;   /* أهم سطر: بيمنع السلايدر من الانكماش لعرض صفر */
  }
  .s-block--slider-with-bg salla-products-slider {
    width: 100% !important;
    flex: 1 1 auto;
  }
}


/* ============================================
   الفوتر - ألوان تيل/أخضر داكن
   ============================================ */
.store-footer {
  background-color: #0e4a44 !important;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  padding-top: 24px;
}

.store-footer h3,
.store-footer p,
.store-footer .contact-name,
.store-footer .text-unicode,
.store-footer a,
.store-footer .about-us-content p strong {
  color: #ffffff !important;
}

.store-footer .contact-links a i {
  color: #ffffff !important;
}

/* أيقونات السوشيال ميديا بشكل دائري شفاف */
.store-footer .social-link {
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-footer .social-link i {
  color: #ffffff !important;
}

/* شريط الحقوق أسفل الفوتر */
.store-footer .copyright {
  background-color: #0e4a44 !important;
}
.store-footer .copyright a,
.store-footer .copyright span,
.store-footer .copyright p {
  color: #ffffff !important;
}
.footer-is-light .store-footer .store-footer__inner {
    background-color: #104E4D !important;
    background-image: unset;
}
.store-footer .contact-social .social-link i {
    color: #104E4D !important;
}
b.text-sm.whitespace-nowrap {
    color: white !important;
}
/* ============================================
   الهيدر - شريط قائمة أخضر داكن تحت الشعار
   ============================================ */
.store-header .store-header__inner,
#mainnav {
  background-color: #fff9f5 !important;
}
.inner.bg-inherit.py-3 {
    padding-bottom: 0px !important;
}
.store-header #mainnav .container .main-menu > li > a:hover span,
.store-header #mainnav .container .main-menu > li > a:active span {
    color: #104E4D !important;
}
/* شريط القوائم والأيقونات (container جوه الهيدر بس) */
.store-header #mainnav .container {
  background-color: #0e4a44 !important;
  padding: 8px 16px !important;
  max-width: 100% !important;
}

.store-header #mainnav .container .main-menu > li > a span,
.store-header #mainnav .container .main-menu > li > a {
  color: #ffffff;
}
.active span {
    color: #104E4D !important;
}
.store-header #mainnav .container .sicon-search,
.store-header #mainnav .container .sicon-user,
.store-header #mainnav .container .login-icon i,
.store-header #mainnav .container .sicon-cart2,
.store-header #mainnav .container .sicon-menu {
  color: #ffffff !important;
}

.store-header #mainnav .container .s-cart-summary-icon,
.store-header #mainnav .container svg path {
  fill: #ffffff !important;
}

.store-header #mainnav .container .s-cart-summary-count,
.store-header #mainnav .container .s-cart-summary-total {
  color: #ffffff !important;
}

/* حقل البحث */
.store-header #mainnav .container .s-search-input {
  background: rgba(255,255,255,0.9);
}


.categories-col-title,.img-frame {
    display: none;
}
body.index .md\:justify-between {
    justify-content: center;
}
salla-slider#slider-with-bg-3 {
    width: 75% !important;
}

  .s-block--features__item {
    border-radius: 20px;
}

.line-clamp-1 {
    overflow: visible;
}

.s-cart-summary-wrapper .s-cart-summary-count {
    background-color: #104e4d;
}

i.sicon-sar {
    color: white;
}

.categories-section .categories-row .categories-col {
    padding: 0px !important;
}
.categories-col-img-container {
    width: 100% !important;
}

section.s-block.s-block--bundle-html-content,salla-html-content-kwrnvf.s-block.s-block-html-content {
    margin: 0px !important;
}

.s-block-html-content {
    margin: 0px !important;
}