/* Add custom CSS styles below */ 
/* عرض منتجين جنب بعض على الجوال والكمبيوتر */
.products-list, .products-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.products-list > div, .products-grid > div {
  width: 100% !important;
  max-width: 100% !important;
}  <style>
.product-description {
  max-height: 100px; /* ~4-5 أسطر، عدّل حسب الحاجة */
  overflow: hidden;
  position: relative;
}
.product-description.expanded {
  max-height: none;
}
.show-more-btn {
  cursor: pointer;
  color: #007bff;
  font-size: 14px;
  margin-top: 8px;
  display: inline-block;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const desc = document.querySelector('.product-description');
  if (!desc) return;

  const btn = document.createElement('span');
  btn.className = 'show-more-btn';
  btn.textContent = 'عرض المزيد';
  desc.parentNode.insertBefore(btn, desc.nextSibling);

  btn.addEventListener('click', function() {
    if (desc.classList.contains('expanded')) {
      desc.classList.remove('expanded');
      btn.textContent = 'عرض المزيد';
    } else {
      desc.classList.add('expanded');
      btn.textContent = 'عرض أقل';
    }
  });
});
</script>