/* ===============================
   🎨 الهوية العامة
================================ */
body {
  background: #ffffff;
  color: #111;
}

/* ===============================
   🧭 الهيدر
================================ */
.store-header {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212,175,55,0.2);
}

/* ===============================
   🔘 الأزرار
================================ */
.btn, button {
  background: linear-gradient(45deg, #d4af37, #f5e6b3);
  color: #000 !important;
  border-radius: 40px !important;
  font-weight: bold;
  transition: 0.3s;
}

.btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(212,175,55,0.4);
}

/* ===============================
   🎁 كروت المنتجات
================================ */
.s-product-card,
.product,
.product-item {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid #f3f3f3;

  /* ✨ بداية الأنيميشن */
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}

/* ✨ عند الظهور */
.s-product-card.show,
.product.show,
.product-item.show {
  opacity: 1;
  transform: translateY(0);
}

/* Hover */
.s-product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* تأثير لمعان */
.s-product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(212,175,55,0.2), transparent);
  opacity: 0;
  transition: 0.4s;
}

.s-product-card:hover::before {
  opacity: 1;
}

/* ===============================
   🖼️ الصور
================================ */
.s-product-card img {
  transition: 0.5s;
}

.s-product-card:hover img {
  transform: scale(1.05);
}

/* ===============================
   💰 السعر
================================ */
.price,
.s-product-card-price {
  color: #d4af37 !important;
  font-weight: bold;
}

/* ===============================
   🎞️ البنرات
================================ */
.home-slider img {
  border-radius: 18px;
}

/* ===============================
   📦 البانرات الصغيرة
================================ */
.banner-entry {
  border-radius: 16px;
  overflow: hidden;
  transition: 0.3s;
}

.banner-entry:hover {
  transform: scale(1.03);
}

/* ===============================
   ⭐ الفوتر
================================ */
.store-footer {
  background: #fafafa;
  border-top: 1px solid #eee;
}

/* ===============================
   📱 الجوال
================================ */
@media (max-width: 768px) {
  .s-product-card {
    border-radius: 14px;
  }
}