/* =========================================================
   TALA — CLEAN CUSTOM CSS
   Replace the current Custom CSS with this entire file.
   ========================================================= */

/* 1) FOOTER BACKGROUND */
.store-footer {
  position: relative !important;
  overflow: hidden !important;
}

.store-footer .footer_pc-bg,
.store-footer .footer_mobile-bg,
.store-footer img[class*="footer"][class*="bg"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.store-footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  background: rgba(22, 22, 22, 0.55) !important;
  pointer-events: none !important;
}

.store-footer > .container {
  position: relative !important;
  z-index: 3 !important;
}

/* 2) REMOVE FOOTER SEPARATOR LINES */
.store-footer .footer-body,
.store-footer .footer-body-container,
.store-footer .footer-body-container > div,
.store-footer .important-links-contianer,
.store-footer .acount-links-contianer,
.store-footer .tala-footer-grid,
.store-footer .tala-footer-column {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}

.store-footer .footer-body::before,
.store-footer .footer-body::after,
.store-footer .footer-body-container::before,
.store-footer .footer-body-container::after,
.store-footer .tala-footer-grid::before,
.store-footer .tala-footer-grid::after,
.store-footer .tala-footer-column::before,
.store-footer .tala-footer-column::after {
  content: none !important;
  display: none !important;
}

/* 3) FULL-WIDTH WHITE FOOTER BOTTOM BAR */
.store-footer .footer-body > div:last-child {
  width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  grid-column: 1 / -1 !important;
  background: #ffffff !important;
}

.store-footer .copyright-container {
  width: min(1440px, 100%) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 24px 45px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 30px !important;
  color: #242424 !important;
  background: #ffffff !important;
  border: 0 !important;
}

.store-footer .copyright-container p,
.store-footer .copyright-container a,
.store-footer .copyright-container span {
  margin: 0 !important;
  color: #242424 !important;
}

/* 4) PAYMENT ICONS */
.store-footer .s-payments-list {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.store-footer .s-payments-list-item {
  width: 82px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
}

.store-footer .s-payments-list-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 5) WHITE HEADER LOGO */
header img[alt*="logo" i],
header .logo img,
header .navbar-brand img {
  opacity: 1 !important;
  filter: brightness(0) invert(1) !important;
}
/* =========================
   Product Card Background Override
   ========================= */

/* الوضع الفاتح */
html:not(.dark) salla-product-card,
html:not(.dark) .s-product-card,
html:not(.dark) .s-product-card-content,
html:not(.dark) .s-product-card-content-main,
body:not(.dark) salla-product-card,
body:not(.dark) .s-product-card,
body:not(.dark) .s-product-card-content,
body:not(.dark) .s-product-card-content-main,
[data-theme="light"] salla-product-card,
[data-theme="light"] .s-product-card,
[data-theme="light"] .s-product-card-content,
[data-theme="light"] .s-product-card-content-main {
  background: #ffffff !important;
}

/* الوضع الغامق */
html.dark salla-product-card,
html.dark .s-product-card,
html.dark .s-product-card-content,
html.dark .s-product-card-content-main,
body.dark salla-product-card,
body.dark .s-product-card,
body.dark .s-product-card-content,
body.dark .s-product-card-content-main,
[data-theme="dark"] salla-product-card,
[data-theme="dark"] .s-product-card,
[data-theme="dark"] .s-product-card-content,
[data-theme="dark"] .s-product-card-content-main {
  background: #000000 !important;
}

/* 8) MOBILE */
@media (max-width: 768px) {
  .store-footer .copyright-container {
    flex-direction: column !important;
    padding: 22px 18px !important;
    text-align: center !important;
  }

  .store-footer .s-payments-list {
    justify-content: center !important;
  }

  .store-footer .s-payments-list-item {
    width: 62px !important;
    height: 42px !important;
  }
}
/* ==================================================
   PRODUCT CARD TEXT — DARK MODE FIX
   Actual element: custom-salla-product-card
   ================================================== */

/* اسم المنتج في الوضع الغامق */
html.dark custom-salla-product-card .s-product-card-content-title,
html.dark custom-salla-product-card .s-product-card-content-title a,
body.dark custom-salla-product-card .s-product-card-content-title,
body.dark custom-salla-product-card .s-product-card-content-title a,
[data-theme="dark"] custom-salla-product-card .s-product-card-content-title,
[data-theme="dark"] custom-salla-product-card .s-product-card-content-title a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* منع تغيير اسم المنتج عند الـ Hover */
html.dark custom-salla-product-card .s-product-card-content-title a:hover,
body.dark custom-salla-product-card .s-product-card-content-title a:hover,
[data-theme="dark"] custom-salla-product-card .s-product-card-content-title a:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* سعر المنتج في الوضع الغامق */
html.dark custom-salla-product-card .s-product-card-price,
html.dark custom-salla-product-card .s-product-card-price *,
body.dark custom-salla-product-card .s-product-card-price,
body.dark custom-salla-product-card .s-product-card-price *,
[data-theme="dark"] custom-salla-product-card .s-product-card-price,
[data-theme="dark"] custom-salla-product-card .s-product-card-price * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* التصنيف الصغير */
html.dark custom-salla-product-card .mazaya-small-text,
body.dark custom-salla-product-card .mazaya-small-text,
[data-theme="dark"] custom-salla-product-card .mazaya-small-text {
  color: #72b2ab !important;
  -webkit-text-fill-color: #72b2ab !important;
}
/* تثبيت ظهور عنصر الـ Navbar أثناء الـ Hover */
header nav li:hover > a,
header nav li:focus-within > a,
.main-menu li:hover > a,
.main-menu li:focus-within > a,
.navbar-menu li:hover > a,
.navbar-menu li:focus-within > a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  background: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;

  position: relative !important;
  z-index: 1001 !important;
}

/* تثبيت ظهور السهم بجانب العنصر */
header nav li:hover > a svg,
header nav li:focus-within > a svg,
.main-menu li:hover > a svg,
.main-menu li:focus-within > a svg {
  color: #ffffff !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* منع تأثيرات تخفي النص */
header nav li:hover > a::before,
header nav li:hover > a::after {
  opacity: 0 !important;
}
/* إصلاح عناصر الـ Dropdown عند الـ Hover */
header nav li ul li:hover > a,
header nav li ul li:focus-within > a,
.main-menu li ul li:hover > a,
.main-menu li ul li:focus-within > a,
.navbar-menu li ul li:hover > a,
.navbar-menu li ul li:focus-within > a,
header [class*="dropdown"] li:hover > a,
header [class*="dropdown"] li:focus-within > a,
header [class*="submenu"] li:hover > a,
header [class*="submenu"] li:focus-within > a {
  color: #222222 !important;
  -webkit-text-fill-color: #222222 !important;

  background: #f5f5f5 !important;

  opacity: 1 !important;
  visibility: visible !important;

  position: relative !important;
  z-index: 1002 !important;
}

/* تثبيت ظهور النصوص الداخلية */
header nav li ul li:hover > a *,
header nav li ul li:focus-within > a *,
.main-menu li ul li:hover > a *,
.main-menu li ul li:focus-within > a *,
.navbar-menu li ul li:hover > a *,
.navbar-menu li ul li:focus-within > a *,
header [class*="dropdown"] li:hover > a *,
header [class*="submenu"] li:hover > a * {
  color: #222222 !important;
  -webkit-text-fill-color: #222222 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* لون السهم داخل القائمة الفرعية */
header nav li ul li:hover > a svg,
header nav li ul li:focus-within > a svg {
  color: #222222 !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}
/* Categories slider outer background — dark mode */
html.dark .s-block--bundle-categories-slider,
body.dark .s-block--bundle-categories-slider,
[data-theme="dark"] .s-block--bundle-categories-slider {
  background: #000000 !important;
}
 /* =====================================================
   SUBCATEGORIES — FINAL OVERRIDE
   ضع هذا الكود في آخر الـ Custom CSS
===================================================== */

#carousel-subcategories {
  position: relative !important;
  padding: 18px 48px 28px !important;
  min-height: 190px !important;
}

/* =====================================
   Cards — منع الخلفية والحركة والـScale
===================================== */

#carousel-subcategories .swiper-slide,
#carousel-subcategories .swiper-slide-active,
#carousel-subcategories .swiper-slide-prev,
#carousel-subcategories .swiper-slide-next,
#carousel-subcategories .swiper-slide:hover,
#carousel-subcategories .swiper-slide:focus,
#carousel-subcategories .swiper-slide:active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  min-height: 165px !important;
  padding: 8px 5px 12px !important;

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

  transform: none !important;
  scale: 1 !important;
  opacity: 1 !important;

  transition: none !important;
}

/* منع أي حركة داخل الكارد */
#carousel-subcategories .swiper-slide > div,
#carousel-subcategories .swiper-slide a,
#carousel-subcategories .swiper-slide:hover > div,
#carousel-subcategories .swiper-slide:hover a {
  transform: none !important;
  scale: 1 !important;
}

/* =====================================
   Category Images
===================================== */

#carousel-subcategories .swiper-slide img,
#carousel-subcategories .swiper-slide:hover img,
#carousel-subcategories .swiper-slide-active img {
  display: block !important;

  width: 112px !important;
  height: 112px !important;

  margin: 0 auto 11px !important;

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

  border: 4px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 50% !important;

  background: #f7f7f7 !important;

  box-shadow:
    0 7px 18px rgba(31, 82, 78, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.15) !important;

  transform: none !important;
  scale: 1 !important;

  transition:
    filter 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}

/* Hover خفيف بدون تكبير أو حركة */
@media (hover: hover) and (pointer: fine) {
  #carousel-subcategories .swiper-slide:hover img {
    filter: brightness(1.04) !important;
    border-color: #ffffff !important;

    transform: none !important;
    scale: 1 !important;

    box-shadow:
      0 9px 22px rgba(31, 82, 78, 0.25),
      0 0 0 1px rgba(255, 255, 255, 0.25) !important;
  }
}

/* =====================================
   Missing Image Placeholder
===================================== */

#carousel-subcategories .swiper-slide i.sicon-store {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 112px !important;
  height: 112px !important;

  margin: 0 auto 11px !important;

  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;

  border: 4px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;

  font-size: 32px !important;

  box-shadow: 0 7px 18px rgba(31, 82, 78, 0.2) !important;

  transform: none !important;
  scale: 1 !important;
}

/* =====================================
   Category Name
===================================== */

#carousel-subcategories .swiper-slide > div:last-child {
  width: 100% !important;
}

#carousel-subcategories .swiper-slide > div:last-child a {
  display: -webkit-box !important;

  width: 100% !important;
  min-height: 42px !important;

  padding: 0 3px !important;

  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: center !important;

  white-space: normal !important;
  overflow: hidden !important;

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

  transform: none !important;
}

/* =====================================
   Desktop Arrows
===================================== */

@media (min-width: 768px) {
  #carousel-subcategories .s-slider-nav-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 30 !important;

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

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

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

    background: rgba(41, 101, 96, 0.7) !important;
    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 50% !important;

    box-shadow: 0 4px 12px rgba(25, 73, 69, 0.18) !important;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    transform: translateY(-50%) !important;
    scale: 1 !important;

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

  #carousel-subcategories .s-slider-prev {
    left: 12px !important;
    right: auto !important;
  }

  #carousel-subcategories .s-slider-next {
    right: 12px !important;
    left: auto !important;
  }

  #carousel-subcategories .s-slider-nav-arrow:hover {
    background: rgba(31, 83, 79, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;

    transform: translateY(-50%) !important;
    scale: 1 !important;
  }

  #carousel-subcategories .s-slider-nav-arrow svg {
    width: 17px !important;
    height: 17px !important;
  }

  #carousel-subcategories .s-slider-nav-arrow svg,
  #carousel-subcategories .s-slider-nav-arrow svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
  }

  #carousel-subcategories .s-slider-nav-arrow[aria-disabled="true"] {
    opacity: 0.28 !important;
    pointer-events: none !important;
  }
}

/* =====================================
   إخفاء الأسهم لو عدد التصنيفات أقل من 4
===================================== */

#carousel-subcategories:not(
  :has(.swiper-wrapper > .swiper-slide:nth-child(4))
) .s-slider-nav-arrow {
  display: none !important;
}

/* إخفاء الأسهم لو السلايدر نفسه مفيهوش حركة */
#carousel-subcategories:has(
  .s-slider-prev[aria-disabled="true"]
):has(
  .s-slider-next[aria-disabled="true"]
) .s-slider-nav-arrow {
  display: none !important;
}

/* =====================================
   Pagination
===================================== */

#carousel-subcategories .swiper-pagination {
  bottom: 1px !important;
}

#carousel-subcategories .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;

  margin: 0 4px !important;

  background: rgba(255, 255, 255, 0.4) !important;
  opacity: 1 !important;

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

#carousel-subcategories .swiper-pagination-bullet-active {
  width: 26px !important;

  border-radius: 20px !important;
  background: #ffffff !important;
}

/* =====================================
   Loading Flash
===================================== */

#carousel-subcategories .swiper {
  opacity: 0 !important;
  visibility: hidden !important;
}

#carousel-subcategories .swiper.swiper-initialized {
  opacity: 1 !important;
  visibility: visible !important;

  transition: opacity 0.18s ease !important;
}

#carousel-subcategories .fade-up,
#carousel-subcategories .animate {
  animation: none !important;
  animation-delay: 0s !important;
  transition-delay: 0s !important;
}

/* =====================================
   Mobile
===================================== */

@media (max-width: 767px) {
  #carousel-subcategories {
    min-height: 145px !important;
    padding: 12px 7px 23px !important;
    overflow: hidden !important;
  }

  /* مفيش أسهم على الموبايل */
  #carousel-subcategories .s-slider-nav-arrow,
  #carousel-subcategories .s-slider-prev,
  #carousel-subcategories .s-slider-next {
    display: none !important;
  }

  /* السحب بالإيد يفضل شغال */
  #carousel-subcategories .swiper {
    overflow: hidden !important;
    touch-action: pan-y !important;
  }

  #carousel-subcategories .swiper-slide,
  #carousel-subcategories .swiper-slide:hover,
  #carousel-subcategories .swiper-slide-active {
    min-height: 120px !important;
    padding: 4px 2px 7px !important;

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

    transform: none !important;
    scale: 1 !important;
  }

  #carousel-subcategories .swiper-slide img,
  #carousel-subcategories .swiper-slide:hover img,
  #carousel-subcategories .swiper-slide i.sicon-store {
    width: 76px !important;
    height: 76px !important;

    margin: 0 auto 7px !important;

    border-width: 3px !important;

    transform: none !important;
    scale: 1 !important;
    filter: none !important;

    box-shadow: 0 5px 12px rgba(26, 70, 67, 0.18) !important;
  }

  #carousel-subcategories .swiper-slide > div:last-child a {
    min-height: 32px !important;
    padding: 0 2px !important;

    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  #carousel-subcategories .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
    margin: 0 3px !important;
  }

  #carousel-subcategories .swiper-pagination-bullet-active {
    width: 20px !important;
  }
}

/* منع الـHover على أجهزة اللمس */
@media (hover: none), (pointer: coarse) {
  #carousel-subcategories .swiper-slide,
  #carousel-subcategories .swiper-slide:hover,
  #carousel-subcategories .swiper-slide:active,
  #carousel-subcategories .swiper-slide:focus,
  #carousel-subcategories .swiper-slide img,
  #carousel-subcategories .swiper-slide:hover img {
    transform: none !important;
    scale: 1 !important;
    filter: none !important;
    box-shadow: none !important;
  }

  #carousel-subcategories .swiper-slide img {
    box-shadow: 0 5px 12px rgba(26, 70, 67, 0.18) !important;
  }
}
/* =========================================
   Subcategories main parent — final colors
========================================= */

/* الأب الرئيسي الذي يحتوي على السلايدر */
div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;

  color: #72b2ab !important;
}

/* إلغاء أي Overlay رمادي تابع للكلاس overlay-bg */
div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)::before,
div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* الطبقة الداخلية لا تأخذ أي لون */
div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)
> .b-cats-collection {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* أسماء التصنيفات */
#carousel-subcategories .swiper-slide,
#carousel-subcategories .swiper-slide a,
#carousel-subcategories .swiper-slide > div:last-child a {
  color: #72b2ab !important;
}

/* الـ Breadcrumb */
div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)
.breadcrumbs,
div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)
.breadcrumbs a,
div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)
.s-breadcrumb-item {
  color: #72b2ab !important;
}

/* سهم الـ Breadcrumb */
div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)
.breadcrumbs svg,
div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)
.breadcrumbs svg path {
  fill: #72b2ab !important;
  color: #72b2ab !important;
}

/* إطار صور التصنيفات */
#carousel-subcategories .swiper-slide img {
  border-color: rgba(114, 178, 171, 0.55) !important;

  box-shadow:
    0 6px 16px rgba(114, 178, 171, 0.16),
    0 0 0 1px rgba(114, 178, 171, 0.12) !important;
}

/* Placeholder للتصنيفات بدون صورة */
#carousel-subcategories .swiper-slide i.sicon-store {
  color: #72b2ab !important;
  background: rgba(114, 178, 171, 0.08) !important;
  border-color: rgba(114, 178, 171, 0.55) !important;
}

/* Pagination */
#carousel-subcategories .swiper-pagination-bullet {
  background: rgba(114, 178, 171, 0.35) !important;
}

#carousel-subcategories .swiper-pagination-bullet-active {
  background: #72b2ab !important;
}

/* أسهم الديسكتوب */
@media (min-width: 768px) {
  #carousel-subcategories .s-slider-nav-arrow {
    background: #72b2ab !important;
    border-color: #72b2ab !important;
    color: #ffffff !important;
  }

  #carousel-subcategories .s-slider-nav-arrow:hover {
    background: #5d9f98 !important;
    border-color: #5d9f98 !important;
  }

  #carousel-subcategories .s-slider-nav-arrow svg path {
    fill: #ffffff !important;
  }
}
/* =========================================
   PRODUCT CARD — ADD TO CART BUTTON
========================================= */

/* الوضع العادي: خلفية تالا والنص أبيض */
custom-salla-product-card .s-product-card-content-footer button,
custom-salla-product-card .s-product-card-content-footer .s-button-element,
custom-salla-product-card salla-add-product-button button,
custom-salla-product-card .s-product-card-add-to-cart {
  background: #72b2ab !important;
  background-color: #72b2ab !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border: 1px solid #72b2ab !important;
  box-shadow: none !important;

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

/* لون الأيقونة في الوضع العادي */
custom-salla-product-card .s-product-card-content-footer button svg,
custom-salla-product-card .s-product-card-content-footer .s-button-element svg,
custom-salla-product-card salla-add-product-button button svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

custom-salla-product-card .s-product-card-content-footer button svg path,
custom-salla-product-card .s-product-card-content-footer .s-button-element svg path,
custom-salla-product-card salla-add-product-button button svg path {
  stroke: #ffffff !important;
}

/* Hover: الخلفية أبيض والنص لون تالا */
custom-salla-product-card .s-product-card-content-footer button:hover,
custom-salla-product-card .s-product-card-content-footer .s-button-element:hover,
custom-salla-product-card salla-add-product-button button:hover,
custom-salla-product-card .s-product-card-add-to-cart:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;

  color: #722bab !important;
  -webkit-text-fill-color: #72b2ab !important;

  border-color: #72b2ab !important;
}

/* لون الأيقونة وقت الـHover */
custom-salla-product-card .s-product-card-content-footer button:hover svg,
custom-salla-product-card .s-product-card-content-footer .s-button-element:hover svg,
custom-salla-product-card salla-add-product-button button:hover svg {
  color: #72b2ab !important;
  stroke: #72b2ab !important;
}

custom-salla-product-card .s-product-card-content-footer button:hover svg path,
custom-salla-product-card .s-product-card-content-footer .s-button-element:hover svg path,
custom-salla-product-card salla-add-product-button button:hover svg path {
  stroke: #72b2ab !important;
}
/* =========================================
   PRODUCT CARD ACTION ICONS
   Quick view / Wishlist / Cart / Related
========================================= */

/* الحالة العادية: الأيقونات أبيض والخلفية الحالية كما هي */
.mazaya-product-card-actions .s-button-element {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

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

.mazaya-product-card-actions .s-button-element svg,
.mazaya-product-card-actions .s-button-element svg path,
.mazaya-product-card-actions .s-button-element svg circle {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* عند الـ Hover: خلفية أبيض والأيقونة بلون تالا */
.mazaya-product-card-actions .s-button-element:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;

  color: #72b2ab !important;
  -webkit-text-fill-color: #72b2ab !important;

  border-color: #72b2ab !important;
}

.mazaya-product-card-actions .s-button-element:hover svg,
.mazaya-product-card-actions .s-button-element:hover svg path,
.mazaya-product-card-actions .s-button-element:hover svg circle {
  color: #72b2ab !important;
  stroke: #72b2ab !important;
}

/* تثبيت الأيقونات أثناء الـ focus والضغط */
.mazaya-product-card-actions .s-button-element:focus,
.mazaya-product-card-actions .s-button-element:active {
  background: #ffffff !important;
  color: #72b2ab !important;
  -webkit-text-fill-color: #72b2ab !important;
}

.mazaya-product-card-actions .s-button-element:focus svg,
.mazaya-product-card-actions .s-button-element:focus svg path,
.mazaya-product-card-actions .s-button-element:focus svg circle,
.mazaya-product-card-actions .s-button-element:active svg,
.mazaya-product-card-actions .s-button-element:active svg path,
.mazaya-product-card-actions .s-button-element:active svg circle {
  color: #72b2ab !important;
  stroke: #72b2ab !important;
}
/* =========================================
   SUBCATEGORIES — DARK MODE BACKGROUND
========================================= */

html.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories),
body.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories),
[data-theme="dark"] div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
}

/* إزالة أي طبقة فاتحة في الوضع الغامق */
html.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)::before,
html.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)::after,
body.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)::before,
body.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)::after,
[data-theme="dark"] div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)::before,
[data-theme="dark"] div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories)::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* الطبقة الداخلية */
html.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) > .b-cats-collection,
body.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) > .b-cats-collection,
[data-theme="dark"] div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) > .b-cats-collection {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* الحفاظ على لون تالا للنصوص */
html.dark #carousel-subcategories a,
html.dark #carousel-subcategories .swiper-slide,
html.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) .breadcrumbs,
html.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) .breadcrumbs a,
body.dark #carousel-subcategories a,
body.dark #carousel-subcategories .swiper-slide,
body.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) .breadcrumbs,
body.dark div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) .breadcrumbs a,
[data-theme="dark"] #carousel-subcategories a,
[data-theme="dark"] #carousel-subcategories .swiper-slide,
[data-theme="dark"] div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) .breadcrumbs,
[data-theme="dark"] div.relative.overflow-hidden.min-h-80:has(#carousel-subcategories) .breadcrumbs a {
  color: #72b2ab !important;
  -webkit-text-fill-color: #72b2ab !important;
}
/* =========================================
   PRODUCT PRICE SECTION — DARK MODE
========================================= */

html.dark #c-p-price,
body.dark #c-p-price,
[data-theme="dark"] #c-p-price {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* عنوان السعر + الأيقونة */
html.dark #c-p-price .form-label,
html.dark #c-p-price .form-label *,
body.dark #c-p-price .form-label,
body.dark #c-p-price .form-label *,
[data-theme="dark"] #c-p-price .form-label,
[data-theme="dark"] #c-p-price .form-label * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* السعر العادي */
html.dark #c-p-price .starting-or-normal-price .total-price,
html.dark #c-p-price .starting-or-normal-price .total-price *,
body.dark #c-p-price .starting-or-normal-price .total-price,
body.dark #c-p-price .starting-or-normal-price .total-price *,
[data-theme="dark"] #c-p-price .starting-or-normal-price .total-price,
[data-theme="dark"] #c-p-price .starting-or-normal-price .total-price * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* السعر القديم المشطوب */
html.dark #c-p-price .before-price,
html.dark #c-p-price .before-price *,
body.dark #c-p-price .before-price,
body.dark #c-p-price .before-price *,
[data-theme="dark"] #c-p-price .before-price,
[data-theme="dark"] #c-p-price .before-price * {
  color: #b8b8b8 !important;
  -webkit-text-fill-color: #b8b8b8 !important;
}

/* نسيب سعر الخصم أحمر */
html.dark #c-p-price .price_is_on_sale .total-price,
body.dark #c-p-price .price_is_on_sale .total-price,
[data-theme="dark"] #c-p-price .price_is_on_sale .total-price {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}
/* =========================================
   PRODUCT PRICE H2 — DARK MODE
========================================= */

html.dark #c-p-price h2.font-bold.text-xl.inline-block,
body.dark #c-p-price h2.font-bold.text-xl.inline-block,
[data-theme="dark"] #c-p-price h2.font-bold.text-xl.inline-block {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* أيقونة العملة */
html.dark #c-p-price h2.font-bold.text-xl.inline-block i,
body.dark #c-p-price h2.font-bold.text-xl.inline-block i,
[data-theme="dark"] #c-p-price h2.font-bold.text-xl.inline-block i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* =========================================
   PRODUCT PAGE — ADD TO CART BUTTON
========================================= */

/* الوضع العادي */
salla-button[quick-buy][type="submit"] .s-button-element,
salla-button[product-id][type="submit"] .s-button-element {
  background: #72b2ab !important;
  background-color: #72b2ab !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  border: 1px solid #72b2ab !important;
  box-shadow: none !important;

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

/* النص والأيقونة */
salla-button[quick-buy][type="submit"] .s-button-text,
salla-button[quick-buy][type="submit"] .s-button-text i,
salla-button[product-id][type="submit"] .s-button-text,
salla-button[product-id][type="submit"] .s-button-text i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hover */
salla-button[quick-buy][type="submit"] .s-button-element:hover,
salla-button[product-id][type="submit"] .s-button-element:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;

  color: #72b2ab !important;
  -webkit-text-fill-color: #72b2ab !important;

  border-color: #72b2ab !important;
}

/* النص والأيقونة وقت الـHover */
salla-button[quick-buy][type="submit"] .s-button-element:hover .s-button-text,
salla-button[quick-buy][type="submit"] .s-button-element:hover i,
salla-button[product-id][type="submit"] .s-button-element:hover .s-button-text,
salla-button[product-id][type="submit"] .s-button-element:hover i {
  color: #72b2ab !important;
  -webkit-text-fill-color: #72b2ab !important;
}

/* أثناء الضغط أو الـFocus */
salla-button[quick-buy][type="submit"] .s-button-element:focus,
salla-button[quick-buy][type="submit"] .s-button-element:active,
salla-button[product-id][type="submit"] .s-button-element:focus,
salla-button[product-id][type="submit"] .s-button-element:active {
  background: #ffffff !important;
  color: #72b2ab !important;
  border-color: #72b2ab !important;
}
/* =========================================
   PRODUCT MAIN PRICE — DARK MODE FIX
========================================= */

html.dark .flex.whitespace-nowrap.gap-2.items-center.mb-2\.5.flex-1
div.gap-4.flex > h2.font-bold.text-xl.inline-block,

body.dark .flex.whitespace-nowrap.gap-2.items-center.mb-2\.5.flex-1
div.gap-4.flex > h2.font-bold.text-xl.inline-block,

[data-theme="dark"] .flex.whitespace-nowrap.gap-2.items-center.mb-2\.5.flex-1
div.gap-4.flex > h2.font-bold.text-xl.inline-block {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* أيقونة الريال */
html.dark .flex.whitespace-nowrap.gap-2.items-center.mb-2\.5.flex-1
div.gap-4.flex > h2 i,

body.dark .flex.whitespace-nowrap.gap-2.items-center.mb-2\.5.flex-1
div.gap-4.flex > h2 i,

[data-theme="dark"] .flex.whitespace-nowrap.gap-2.items-center.mb-2\.5.flex-1
div.gap-4.flex > h2 i {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Design banner only */
.s-block_p-w-d .p_w_d_design-container {
  border-radius: 24px !important;
  overflow: hidden !important;
  margin-bottom: 30px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

/* Banner image */
.s-block_p-w-d .p_w_d_design-container img {
  border-radius: 24px !important;
  transition: transform 0.5s ease;
}

/* Subtle zoom on hover */
.s-block_p-w-d .p_w_d_design-container:hover img {
  transform: scale(1.03);
}

/* Dark overlay follows rounded shape */
.s-block_p-w-d .p_w_d_design-container > a > div {
  border-radius: 24px !important;
}

/* Content position */
.s-block_p-w-d .p_w_d_design-content {
  padding: 30px !important;
  z-index: 2;
}

/* Design title */
.s-block_p-w-d .p_w_d_design-content h3 {
  font-size: 30px !important;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* Design description */
.s-block_p-w-d .p_w_d_design-content p {
  font-size: 16px !important;
  line-height: 1.8;
}

/* Design button */
.s-block_p-w-d .p_w_d_design-content > a {
  border-radius: 12px !important;
  padding: 12px 24px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.s-block_p-w-d .p_w_d_design-content > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* Mobile */
@media (max-width: 1023px) {
  .s-block_p-w-d .p_w_d_design-container {
    border-radius: 18px !important;
    margin-bottom: 22px !important;
  }

  .s-block_p-w-d .p_w_d_design-container img,
  .s-block_p-w-d .p_w_d_design-container > a > div {
    border-radius: 18px !important;
  }

  .s-block_p-w-d .p_w_d_design-content h3 {
    font-size: 25px !important;
  }

  .s-block_p-w-d .p_w_d_design-content p {
    font-size: 14px !important;
  }
}
/* ==================================
   Fix discounted product card only
================================== */

/* Hide the countdown inside product cards */
.s-block--4.special-products .discount-timer-pc {
  display: none !important;
}

/* Hide duplicated discount percentage under title */
.s-block--4.special-products
.s-product-card-content-subtitle {
  display: none !important;
}

/* Keep product titles consistent */
.s-block--4.special-products
.s-product-card-content-title {
  margin: 8px 0 !important;
}

.s-block--4.special-products
.s-product-card-content-title a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden !important;

  min-height: 3em;
  line-height: 1.5 !important;
}

/* Compact price area */
.s-block--4.special-products
.s-product-card-content-sub {
  min-height: 34px !important;
  margin: 5px 0 10px !important;

  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}

/* Sale price and old price on one line */
.s-block--4.special-products
.s-product-card-sale-price {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.s-block--4.special-products
.s-product-card-sale-price h4 {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #e23c3c !important;
}

.s-block--4.special-products
.s-product-card-sale-price > span {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 0.55;
  text-decoration: line-through;
}

/* Small discount badge beside price */
.s-block--4.special-products
.pc_add_discount_precent {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 3px 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  border-radius: 20px !important;
}

/* Remove forced card stretching */
.s-block--4.special-products
.s-product-card-entry,
.s-block--4.special-products
.product-form,
.s-block--4.special-products
.s-product-card-content,
.s-block--4.special-products
.s-product-card-content-main {
  height: auto !important;
  min-height: 0 !important;
}

/* Keep cart button directly below price */
.s-block--4.special-products
.s-product-card-content-footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
section.s-block--hero-slider[class~="!mb-8"] {
  margin-bottom: 0 !important;
}