/* apps/products/static/my_product/css/more_products.css
   [إعادة إنشاء]: هذا الملف حُذف سابقاً ضمن هذه الجلسة دون قراءة محتواه
   الأصلي أولاً — لا يوجد Git في هذا المشروع لاستعادته بدقة، فهذه شبكة
   بديلة معقولة (نفس مبدأ .products-container/.featured-products-page-grid
   الموجودة في المشروع) لا نسخة أصلية مطابقة حرفياً. إن كانت لديك نسخة
   أخرى من هذا الملف، الرجاء استبدال هذا المحتوى بها. */

.zk-more-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 1rem 2rem;
    max-width: 1200px;
    /* [FIX-DEAD-BOTTOM-GAP] كانت 24px auto 0 — بالإضافة لـ padding-bottom
       الثابتة أصلاً لـ .product-page (14-32px حسب الشاشة، جزء من تصميم
       الصفحة العام، لم أُغيّرها)، كانت تُنتج فجوة محسوسة (~82px قِيست حياً)
       بين نهاية "عرض معلومات التوصيل" وبداية "منتجات مشابهة". 0 هنا يترك
       فقط padding الصفحة نفسها كفاصل — أصغر فجوة ممكنة بلا المساس بحشو
       الصفحة العام (يُستخدم لكل الصفحة، لا لهذا الانتقال فقط). */
    margin: 0 auto;
}

@media (max-width: 767px) {
    .zk-more-products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* [FIX-STICKY-BAR-OVERLAP] more_products هو آخر عنصر في الصفحة — يأتي بعد
   إغلاق .product-info-section، فلا يستفيد من حجز المسافة السفلية [STICKY-1]
   الموجود في product_detail.css (مُنطَّق هناك على .product-info-section
   فقط). النتيجة: آخر صف من البطاقات يختفي فعلياً تحت شريط "أضف للسلة/اشترِ
   الآن" الثابت (.sticky-action-bar) على الهاتف. نفس المتغيّرات المُعرَّفة
   في :root في product_detail.css (يُحمَّل دائماً معاً على نفس الصفحة). */
@media (max-width: 768px) {
    .zk-more-products-grid {
        padding-bottom: calc(var(--navbar-bottom-height, 60px) + var(--sticky-bar-height, 5.25rem) + 0.5rem);
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .zk-more-products-grid { grid-template-columns: repeat(3, 1fr); }
}