/* كود آمن ومخفف لحجز مساحة السلايدر لثيم فخامة دون تداخل مع نظام سلة */
.main-slider, .hero-slider, .carousel-inner {
    aspect-ratio: 16 / 9 !important;
    background-color: #fcfcfc !important;
}

/* تسريع استبدال الخطوط فوراً لمنع وميض النص */
body, h1, h2, h3, h4, h5, h6, p, a, span {
    font-display: swap !important;
}<!-- ================================================================= -->
<!-- 1. قسم أكواد التنسيق والمظهر (CSS) - ضعها في خيار "CSS مخصص"       -->
<!-- ================================================================= -->
<style>
/* تأثير التمرير الناعم لجميع الشاشات لزيادة الفخامة */
html {
  scroll-behavior: smooth;
}

/* تحسينات مخصصة لشاشات الجوال فقط */
@media (max-width: 768px) {
  
  /* أ. تحويل عرض المنتجات إلى شبكة مرنة من صفين */
  .products-grid, .products-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 10px !important;
  }
  
  /* تصغير وتحسين الخطوط لبطاقات المنتجات على الجوال */
  .product-title {
    font-size: 13px !important;
    line-height: 1.4;
    height: 38px;
    overflow: hidden;
  }
  .product-price {
    font-size: 14px !important;
  }

  /* ب. تثبيت أزرار الشراء والتفاعل أسفل الشاشة مثل التطبيقات */
  .product-single__actions {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08);
    z-index: 999;
    padding: 10px 15px;
    display: flex;
    gap: 10px;
  }
  
  /* ترك مساحة أسفل الصفحة لمنع تداخل المحتوى مع البار المثبت */
  body {
    padding-bottom: 70px !important;
  }

  /* ج. جعل تصنيفات المنتجات أفقية وقابلة للتمرير باللمس */
  .categories-tabs, .brand-slider-mobile {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none; /* إخفاء شريط التمرير المتصفح القياسي */
  }
  .categories-tabs::-webkit-scrollbar {
    display: none; /* لإخفاء الشريط تماماً على آيفون وأندرويد */
  }
}
</style>


<!-- ================================================================= -->
<!-- 2. قسم الأكواد الذكية والسرعة (JavaScript) - ضعها في "أكواد مخصصة" -->
<!-- ================================================================= -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  
  // أ. إلغاء تأخير اللمس (300ms) على الجوال لسرعة استجابة فورية للنقر
  if (window.innerWidth <= 768) {
    const mobileButtons = document.querySelectorAll('.btn, .product-card, .add-to-cart, .purchase-btn');
    mobileButtons.forEach(button => {
      button.style.touchAction = 'manipulation';
    });
  }

  // ب. إيقاف تشغيل الفيديو تلقائياً على الجوال لتوفير بيانات العميل وتسريع تحميل الصفحة
  if (window.innerWidth <= 768) {
    const promoVideo = document.querySelector('video');
    if (promoVideo) {
      promoVideo.removeAttribute('autoplay');
      promoVideo.pause();
    }
  }

});
</script>