.rami-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 1rem;
}
.rami-item {
  position: relative;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  transition: all .3s ease;
}
.rami-item h3{font-size:14px; line-height:18px; margin-bottom:0; color:#3aaa35;}
.swiper-wrapper{padding: 20px 0;}
.swiper-slide{padding:5px;}
.swiper-slide h3{font-size:14px;text-align:center;color:#3aaa35;}
.swiper-slide:hover{box-shadow: 0 2px 10px rgba(0,0,0,0.2); transform: scale(1.03); }
.swiper-button-next, .swiper-button-prev{background-color:#3aaa35; font-weight: bold;width:30px;height:30px; padding:10px; border-radius:50%;}
.swiper-button-prev{left: 0;}
.swiper-button-next:after, .swiper-button-prev:after {color:#fff; font-size:15px;}
.swiper-button-next{right:0;}

.rami-item:hover { transform: scale(1.03); box-shadow: 0 2px 10px rgba(0,0,0,0.2); h3{color:#ab3578;} .price{color:#ab3578;}}
.rami-brand img { width: 80px; height: auto; margin: 5px auto; display: block; }
@media (max-width: 768px) {
  .rami-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .rami-grid { grid-template-columns: repeat(2, 1fr); }
}