/* =====================================
   📱 PRODUCT PAGE - MOBILE STYLE
===================================== */

@media (max-width: 768px) {

  /* ================== الصندوق العام ================== */
  .product-details {
    max-width: 100%;
    margin: 12px;
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: none !important;
  }

  .product-details::before {
    display: none;
  }

  /* ================== تخطيط المنتج ================== */
  .product-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* ================== معرض الصور ================== */
  .product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    padding: 0 !important;
    margin: 0!important;
    top: 10px;

    overflow: visible !important;
  }

  .slider-container {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;

    background: transparent !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .slider-images {
    width: 100% !important;
  }

  .slider-images img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;

    border-radius: 14px !important;
    display: block !important;
    cursor: pointer;

    transform: none !important;
  }

  /* ================== أزرار السلايدر ================== */
  .slider-btn {
    font-size: 22px !important;
    padding: 10px 14px !important;
    background: rgba(0,0,0,0.65) !important;
    border-radius: 50% !important;
  }

  .slider-btn.prev { left: 8px !important; }
  .slider-btn.next { right: 8px !important; }

  /* ================== معلومات المنتج ================== */
  .product-info {
    width: 100%;
    min-width: 100%;
    gap: 14px;
  }

  .product-info h2 {
    position: relative;
    top: -53px;              /* تحكم كامل في الارتفاع */
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: -65px;
    text-align: center;
    z-index: 2;
  }

  .product-info p {
    font-size: 15px;
    line-height: 1.6;
    text-align: justify;
  }

  .product-info .sku {
    font-size: 13px;
    text-align: center;
    color: #777;
  }

/* ================== LIGHTBOX (هاتف - عزل كامل) ================== */
.lightbox {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100dvh; /* مهم جدا للهاتف */

  background: rgba(0,0,0,0.97);

  display: none;
  justify-content: center;
  align-items: center;

  z-index: 2147483647; /* فوق أي شيء */
  
  overflow: hidden;
  touch-action: none;
}

.lightbox.show {
  display: flex;
}

/* الصورة */
.lightbox img {
  width: 100vw;
  height: 100dvh;

  object-fit: contain;

  pointer-events: none;
  user-select: none;

  display: block;
}

/* تجميد الصفحة */
body.lightbox-open {
  overflow: hidden !important;
  height: 100dvh;
  touch-action: none;
}


}

/* ===========================
   🟣 نسخة الهاتف للشريط العلوي
=========================== */
@media (max-width: 768px) {

  /* الشريط العلوي */
  .top-bar {
    padding: 2px 10px;        /* التحكم بالمساحة الداخلية */
    font-size: 10px;          /* حجم الخط أصغر للهاتف */
    height: 42px;             /* سماكة الشريط أقل */
  }

  /* زر العودة */
  .back-btn {
    padding: 5px 12px;        /* تقليل الحجم */
    font-size: 11px;           /* خط أصغر */
    border-radius: 20px;       /* تعديل الانحناء */
    top: 1px;                  /* تحريك من الأعلى */
    left: 20px;                 /* تحريك من اليسار */
  }

  /* غلاف السلة */
  .cart-menu-wrapper {
    gap: 6px;                  /* المسافة بين الأزرار أقل */
  }

  /* زر السلة */
  .cart-button {
    padding: 4px 15px;         /* تقليل الحجم */
    font-size: 11px;            /* حجم الخط أصغر */
    border-radius: 20px;        /* تعديل الانحناء */
    box-shadow: 2px 2px 25px #000000, -2px -2px 8px #ffffff00;
    top: 1px;                  /* تحريك من الأعلى */
    left: 5px;                 /* تحريك من اليسار */
  }

  /* عداد السلة */
  .cart-count {
    padding: 1px 5px;           /* تقليل حجم الدائرة */
    font-size: 10px;            /* خط أصغر */
    top: -6px;                  /* تحريك من الأعلى */
    left: -6px;                 /* تحريك من اليسار */
  }

}

/* =====================================
📱 أزرار المنتج - نسخة الهاتف فقط
===================================== */
@media (max-width: 768px) {

  /* حاوية الأزرار */
  .add-to-cart-form,
  #submitReview {
    width: 100%;
  }

  /* الزرين مع بعض */
  .add-cart-btn {
    width: 100%;
    padding: 10px 12px;          /* 🔽 تصغير الارتفاع */
    font-size: 14px;             /* 🔽 خط مناسب للهاتف */
    border-radius: 14px;
    font-weight: bold;
    margin-top: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
  }

  /* زر أضف إلى السلة */
  .add-to-cart-form .add-cart-btn {
    background: linear-gradient(135deg, #ff9800, #ff5722);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  /* زر أرسل تقييمك */
  #submitReview.add-cart-btn {
    background: linear-gradient(135deg, #3f51b5, #2196f3);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  /* تأثير عند اللمس */
  .add-cart-btn:active {
    transform: scale(0.97);
  }

}