/* البنر على صفحة المنتج */
.product-single__main-media {
    position: relative;
    overflow: visible;
    padding-top: 220px; /* ارتفاع البنر للكمبيوتر */
}

.product-single__main-media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220px; /* ارتفاع البنر للكمبيوتر */
    background-image: url("https://i.ibb.co/4ZsyGMtn/a7bf035e-3a99-4391-a564-c385ec9f4632.jpg");
    background-repeat: no-repeat;
    background-size: contain; /* لتظهر الصورة كاملة */
    background-position: top center;
    z-index: 50;
    pointer-events: none;
}

/* ضبط البنر للجوال */
@media screen and (max-width: 768px) {
    .product-single__main-media {
        padding-top: 150px; /* ارتفاع البنر على الجوال */
    }

    .product-single__main-media::before {
        height: 150px; /* ارتفاع البنر على الجوال */
    }
}

@media screen and (max-width: 480px) {
    .product-single__main-media {
        padding-top: 150px; /* ارتفاع أكبر للجوال الصغير جدًا */
    }

    .product-single__main-media::before {
        height: 150px;
    }
}




}
/* تحميل خط Cairo */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* تأكد أن حاوية المنتج نسبية */
.product-card,
.product-image,
.image-wrap {
  position: relative;
}

/* البادج */
.product-card::before,
.product-image::before,
.image-wrap::before {
  content: "🚛 توصيل مجاني";
  position: absolute;
  top: 8px;
  right: 8px;
  background: #4b1e66; /* البنفسجي المطلوب */
  color: #ffffff;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  z-index: 20;
  white-space: nowrap;
  pointer-events: none;

  /* حركة لطيفة للشاحنة */
  animation: truckMove 1.6s infinite ease-in-out;
}

/* الحركة */
@keyframes truckMove {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* تحسين للموبايل */
@media (max-width: 480px) {
  .product-card::before,
  .product-image::before,
  .image-wrap::before {
    font-size: 12px;
    padding: 5px 8px;
    top: 6px;
    right: 6px;
  }
}