.s-products-list-horizontal-cards custom-salla-product-card {
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #fff !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.s-products-list-horizontal-cards custom-salla-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.s-products-list-horizontal-cards custom-salla-product-card h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
  min-height: 40px !important;
}

.s-products-list-horizontal-cards custom-salla-product-card ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 13px !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

.s-products-list-horizontal-cards custom-salla-product-card ul li {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.s-products-list-horizontal-cards custom-salla-product-card .text-price-lg {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #16a34a !important;
  margin-bottom: 4px !important;
}

.s-products-list-horizontal-cards custom-salla-product-card .text-price-sm {
  font-size: 13px !important;
  color: #9ca3af !important;
  text-decoration: line-through !important;
}

.s-products-list-horizontal-cards custom-salla-product-card [class*="bg-gradient-to-b"] {
  margin-left: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

.s-products-list-horizontal-cards custom-salla-product-card .flex.items-end.justify-between {
  margin-top: auto !important;
  align-items: flex-end !important;
}

.s-products-list-horizontal-cards custom-salla-product-card > div {
  gap: 10px !important;
}
.s-products-list-horizontal-cards custom-salla-product-card button {
  border: none !important;
  background: transparent !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
}
/* Remove old overlay */
.s-product-card-out-of-stock.hide-out-of-stock::after {
  content: none !important;
}
/* ========== إزالة أي شريط/شعار افتراضي لكل صيغ نفاد الكمية ========== */
/* على نفس العنصر (الوعاء) */
.s-products-list-horizontal-cards custom-salla-product-card.is-sold-out::after,
.s-products-list-horizontal-cards custom-salla-product-card.sold-out::after,
.s-products-list-horizontal-cards custom-salla-product-card.s-product-card-out-of-stock::after,
.s-products-list-horizontal-cards custom-salla-product-card.hide-out-of-stock::after,
/* أو إن كان الوسم على عنصر داخلي */
.s-products-list-horizontal-cards custom-salla-product-card .is-sold-out::after,
.s-products-list-horizontal-cards custom-salla-product-card .sold-out::after,
.s-products-list-horizontal-cards custom-salla-product-card .s-product-card-out-of-stock::after,
.s-products-list-horizontal-cards custom-salla-product-card .hide-out-of-stock::after {
  content: none !important;
}



/* ===== Place badge under the product image (centered) ===== */

/* 1) Make the image wrapper a positioning context (covers common Salla classes) */
.s-products-list-horizontal-cards custom-salla-product-card .product-image,
.s-products-list-horizontal-cards custom-salla-product-card .product-media,
.s-products-list-horizontal-cards custom-salla-product-card .media,
.s-products-list-horizontal-cards custom-salla-product-card .s-product-card-entry .media,
.s-products-list-horizontal-cards custom-salla-product-card .s-product-card-entry .product-image {
  position: relative !important;
}

/* 2) Reposition the gradient badge under the image, centered.
      If the badge lives inside the image wrapper, this pins it just below the image edge. */
.s-products-list-horizontal-cards custom-salla-product-card
  [class*="bg-gradient-to-"] {
  position: absolute !important;
  left: 50% !important;
  bottom: -12px !important;           /* distance under the image */
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 3 !important;

  /* visual tweaks – keep your styles if you like */
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* 3) If your theme renders the badge OUTSIDE the image wrapper (fallback):
      center it in flow right below the image block. */
.s-products-list-horizontal-cards custom-salla-product-card .s-product-card-entry {
  display: grid !important;
  grid-template-rows: auto auto 1fr;  /* image | badge | rest */
  row-gap: 10px;
}
.s-products-list-horizontal-cards custom-salla-product-card .s-product-card-entry > *:first-child {
  /* likely the image/media block */
  place-self: stretch;
}
.s-products-list-horizontal-cards custom-salla-product-card
  .s-product-card-entry > [class*="bg-gradient-to-"] {
  position: static !important;         /* override any absolute from theme */
  justify-self: center !important;     /* center horizontally */
  align-self: start !important;
  margin: 0 !important;
}

/
}
.s-products-list-horizontal-cards custom-salla-product-card .product-image {
  position: relative;
}

.s-products-list-horizontal-cards custom-salla-product-card [class*="bg-gradient-to-"] {
  position: absolute !important;
  bottom: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.s-products-list-horizontal-cards custom-salla-product-card button i,
.s-products-list-horizontal-cards custom-salla-product-card button svg {
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #1e293b !important; /* لون/سُمك الدائرة */
  border-radius: 50% !important;        /* يجعلها دائرة */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;           /* حجم علامة + داخل الدائرة إن كانت فونت */
  padding: 3px !important;              /* مسافة داخلية */
}

________________________

/* لا تلمس الأزرار السليمة */
custom-salla-product-card salla-button:not([product-status="out"]):not([product-status="soldout"]):not([product-status="out_of_stock"])::after {
  content: none !important;
}

/* الزر المنتهي فقط (حسب الخاصية التي ظهرت لك: product-status="out") */
custom-salla-product-card salla-button[product-status="out"][disabled],
custom-salla-product-card salla-button[product-status="soldout"][disabled],
custom-salla-product-card salla-button[product-status="out_of_stock"][disabled] {
  position: relative;
  display: block;          /* يأخذ عرض الحاوية */
  width: 100%;
  pointer-events: none;    /* تعطيل النقر على المنتهي فقط */
  cursor: not-allowed;
  min-height: 44px;        /* ضمان ارتفاع مناسب للطبقة */
}

/* طبقة فوق الزر تعرض "غير متوفر حالياً" */
custom-salla-product-card salla-button[product-status="out"][disabled]::after,
custom-salla-product-card salla-button[product-status="soldout"][disabled]::after,
custom-salla-product-card salla-button[product-status="out_of_stock"][disabled]::after {
  content: "اووه معليش مخلص";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #dc2626;
  background: #f3f4f6;     /* تغطي محتوى الظل */
  border: none !important;
  border-radius: 8px;
  box-sizing: border-box;
  z-index: 1;
}

/* خيار تجميلي بسيط عند hover */
custom-salla-product-card salla-button[product-status="out"][disabled]:hover::after,
custom-salla-product-card salla-button[product-status="soldout"][disabled]:hover::after,
custom-salla-product-card salla-button[product-status="out_of_stock"][disabled]:hover::after {
  filter: brightness(0.98);
}

____________________________