/* Add custom Js styles below */ 
<div class="categories-slider">
  <div class="slider-track">
    <!-- ✅ كل صورة مع رابط التصنيف -->
    <a href="/category/flowers">
      <img src="https://via.placeholder.com/150" alt="ورد">
      <p>ورد</p>
    </a>
    <a href="/category/gifts">
      <img src="https://via.placeholder.com/150" alt="هدايا">
      <p>هدايا</p>
    </a>
    <a href="/category/chocolate">
      <img src="https://via.placeholder.com/150" alt="شوكولاتة">
      <p>شوكولاتة</p>
    </a>
    <a href="/category/perfumes">
      <img src="https://via.placeholder.com/150" alt="عطور">
      <p>عطور</p>
    </a>
    <!-- ممكن تزود عدد التصنيفات براحتك -->
  </div>
</div>

<style>
/* 🔹 تنسيق السلايدر */
.categories-slider {
  overflow: hidden;
  width: 100%;
  background: #f7f3e7; /* الخلفية العاجي */
  padding: 20px 0;
}

.slider-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: scroll 25s linear infinite; /* حركة مستمرة */
}

.categories-slider a {
  text-align: center;
  text-decoration: none;
  color: #8b9e71; /* الكتابة بالزيتوني */
  font-weight: bold;
  font-size: 14px;
}

.categories-slider img {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* يخليها دائرية */
  border: 4px solid #8b9e71; /* إطار زيتوني */
  object-fit: cover;
  transition: transform 0.3s ease;
}

.categories-slider img:hover {
  transform: scale(1.1); /* تكبير بسيط عند المرور */
}

/* 🔹 الحركة */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
</style>