/* ===== تصميم الكرت ===== */
.olla-card {
  border: 1px solid #ddd;             /* حدود خفيفة رمادية */
  border-radius: 10px;                /* زوايا دائرية */
  padding: 8px;                       /* مسافة داخلية */
  background: #fff;                   /* خلفية بيضاء */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  overflow: hidden;                   /* يمنع خروج المحتوى */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* عند تمرير الماوس */
.olla-card:hover {
  transform: translateY(-5px);        /* يرتفع الكرت شوي */
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* الصور داخل الكرت */
.olla-card img {
  aspect-ratio: 12/17;                /* نسبة ثابتة (مثالية للملابس) */
  width: 100%;                        /* العرض كامل */
  height: auto;
  object-fit: cover;                  /* الصورة تملأ المساحة */
  display: block;
  border-radius: 8px;                 /* حواف ناعمة للصورة */
  transition: transform 0.3s ease;    /* حركة تكبير ناعمة */
}

/* تكبير بسيط عند الهوفر */
.olla-card:hover img {
  transform: scale(1.05);
}

/* ===== تفعيل الزوم المتقدم ===== */
.olla-card.zoomable { cursor: zoom-in; }
.olla-card.is-zoomed { cursor: zoom-out; z-index: 5; }
.olla-card.is-zoomed img { transform: scale(1.8) !important; }

/* ===== شبكة البطاقات (متجاوبة) ===== */
.olla-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1200px) { .olla-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .olla-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .olla-grid { grid-template-columns: 1fr; } }

/* ===== تأثير زوم بالنقر ===== */
.olla-card.zoomable { cursor: zoom-in; }
.olla-card.is-zoomed { cursor: zoom-out; z-index: 5; }
.olla-card.is-zoomed img { transform: scale(1.8) !important; }

/* ===== أمثلة أنيميشن إضافية ===== */

/* اهتزاز خفيف */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
.olla-card.shake:hover { animation: shake 0.5s ease-in-




.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #000;
  color: #fff;
  padding: 10px 15px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 20px;
  display: none;
  transition: 0.3s;
}

/* تأثير اهتزاز */
@keyframes shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 0); }
  40% { transform: translate(3px, 0); }
  60% { transform: translate(-3px, 0); }
  80% { transform: translate(3px, 0); }
  100% { transform: translate(0, 0); }
}

.back-to-top.shake {
  animation: shake 0.4s;
}