/* =========================================================
   =========================================================
   
   TALABIAH – WOOCOMMERCE SHOP UI (OPTIMIZED v3.0)
   طلبية – واجهة متجر ووكومرس (نسخة محسنة)
   
   =========================================================
   =========================================================
   
   [المحتوى / TABLE OF CONTENTS]
   -------------------------------------
   1.  إعدادات سطح المكتب (Desktop Settings)
   2.  إعدادات الجوال (Mobile Settings)
   3.  إخفاء الترقيم (Pagination Hide)
   4.  إصلاح القائمة الرئيسية للجوال (Mobile Navigation Fix)
   5.  تحسينات الأداء العامة (Performance)
   
   =========================================================
   ========================================================= */



/* =========================================================
   =========================================================
   1. إعدادات سطح المكتب
   -------------------------------------
   أين تؤثر:     صفحة المتجر، التصنيفات، الوسوم (ARCHIVE PAGES)
   التأثير:      تنسيق بطاقات المنتجات في شاشات سطح المكتب
   =========================================================
   ========================================================= */

/* المحدد الصحيح: body.archive.woocommerce */
body.archive.woocommerce {

    /* -------------------------------------
       1.1 بطاقة المنتج - المسافات الداخلية
       ------------------------------------- */
    ul.products li.product {
        padding-bottom: 6px;
    }

    /* -------------------------------------
       1.2 عنوان المنتج - التنسيق
       ------------------------------------- */
    .woocommerce-loop-product__title {
        font-size: 15px;
        line-height: 1.5;
        color: #222;
        margin-bottom: 6px;
    }

    /* -------------------------------------
       1.3 منطقة السعر - تنسيق موحد
       ------------------------------------- */
    .price {
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    /* -------------------------------------
       1.4 السعر الجديد (بعد الخصم)
       ------------------------------------- */
    .price ins {
        color: #111;
        font-weight: 400;
        text-decoration: none;
    }

    /* -------------------------------------
       1.5 السعر القديم (قبل الخصم)
       ------------------------------------- */
    .price del {
        color: #d63638;
        font-size: 13px;
        opacity: 1;
    }

    /* -------------------------------------
       1.6 زر الإضافة إلى السلة
       ------------------------------------- */
    .button {
        margin-top: 6px;
        font-size: 14px;
        padding: 6px 12px;
    }
}



/* =========================================================
   =========================================================
   2. إعدادات الجوال
   -------------------------------------
   أين تؤثر:     صفحة المتجر، التصنيفات، الوسوم (ARCHIVE PAGES)
   التأثير:      عرض المنتجات في صفين مع توسيط في شاشات الجوال
   =========================================================
   ========================================================= */

@media (max-width: 768px) {

    body.archive.woocommerce {

        /* -------------------------------------
           2.1 شبكة المنتجات - صفين
           (مع !important لمنع تعارض القواعد الأخرى)
           ------------------------------------- */
        ul.products {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 10px !important;
        }

        /* -------------------------------------
           2.2 بطاقة المنتج - عرض كامل
           ------------------------------------- */
        ul.products li.product {
            width: 100%;
            margin: 0;
        }

        /* -------------------------------------
           2.3 صورة المنتج - مسافة أسفل
           ------------------------------------- */
        ul.products li.product img {
            margin-bottom: 6px;
        }

        /* -------------------------------------
           2.4 عنوان المنتج - تحديد بسطرين فقط
           ------------------------------------- */
        .woocommerce-loop-product__title {
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        /* -------------------------------------
           2.5 السعر الجديد - خط أعرض قليلاً للجوال
           ------------------------------------- */
        .price ins {
            font-weight: 600;
        }
    }
}



/* =========================================================
   4. إصلاح القائمة الرئيسية للجوال + منع الاهتزاز
   =========================================================
   
   ⚠️ تحذير: لا تضع overflow-x: hidden على html وbody معاً
   على iOS Safari، هذا يكسر window.scroll و document.height
   ========================================================= */

@media (max-width: 768px) {

    /* -------------------------------------
       4.1 منع التمرير الأفقي - الحل الآمن لـ iOS
       ------------------------------------- */
    html {
        /* overflow-x: hidden تمت إزالته - يسبب مشاكل على iOS */
    }

    body {
        overflow-x: clip; /* clip بدلاً من hidden - يعمل بشكل أفضل على iOS */
        width: 100%;
        margin: 0;
        padding: 0;
        /* position: relative تمت إزالته نهائياً */
    }

    /* الحاويات الرئيسية فقط هي التي تمنع التمرير الأفقي */
    .site,
    .site-content,
    .inside-article,
    .content-area,
    .site-main,
    .entry-content {
        max-width: 100vw;
        overflow-x: clip;
    }

    /* بقية القواعد... */
    .main-navigation {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .main-navigation .main-nav ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
    }

    .main-navigation .main-nav ul li {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        flex: 1 1 auto;
    }

    .main-navigation .main-nav ul li a {
        white-space: normal;
        word-wrap: break-word;
        padding: 10px 15px;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .main-navigation .main-nav ul ul {
        width: 100%;
        max-width: 100%;
        position: relative;
        left: 0;
        right: 0;
    }
}

/* =========================================================
   =========================================================
   5. تحسينات الأداء العامة
   -------------------------------------
   أين تؤثر:     جميع صفحات الموقع
   التأثير:      تحسين سرعة التحميل ومنع المشاكل البصرية
   =========================================================
   ========================================================= */

/* منع أي تأثيرات حركية غير ضرورية في القائمة */
.main-navigation {
    transition: none;
}

/* ضمان أن الصور لا تسبب مشاكل عرض */
img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   =========================================================
   7. إصلاح بلوك Product Collection على الجوال (نسخة نظيفة)
   -------------------------------------
   أين تؤثر:     الصفحات العادية التي تحتوي على بلوك woocommerce/product-collection
   التأثير:      إصلاح إزاحة المنتجات وتحويلها إلى عمودين + توسيط كامل
   =========================================================
   ========================================================= */

@media (max-width: 768px) {

    /* -------------------------------------
       7.1 استهداف حاوية المنتجات الرئيسية
       ------------------------------------- */
    .wp-block-woocommerce-product-collection ul.wc-block-product-template,
    .wp-block-woocommerce-product-collection .wc-block-product-template__responsive {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin: 0;
        padding: 0;
    }

    /* -------------------------------------
       7.2 استهداف كل منتج على حدة
       ------------------------------------- */
    .wp-block-woocommerce-product-collection li.wc-block-product {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        list-style: none;
        
        /* جعل البطاقة عمودية لتوسيط أفضل */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* -------------------------------------
       7.3 توسيط الصور
       ------------------------------------- */
    .wp-block-woocommerce-product-collection li.wc-block-product img {
        margin: 0 auto;
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* -------------------------------------
       7.4 توسيط عنوان المنتج
       ------------------------------------- */
    .wp-block-woocommerce-product-collection .wp-block-post-title {
        text-align: center;
        margin: 8px 0 4px 0;
        word-break: break-word;
        overflow-wrap: break-word;
        min-height: 50px;
        
        /* عرض بسطرين كحد أقصى */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* -------------------------------------
       7.5 توسيط السعر
       ------------------------------------- */
    .wp-block-woocommerce-product-collection .wc-block-components-product-price {
        text-align: center;
        justify-content: center;
        display: flex;
        margin: 6px 0;
    }

    /* -------------------------------------
       7.6 توسيط زر الإضافة إلى السلة
       ------------------------------------- */
    .wp-block-woocommerce-product-collection .wp-block-button {
        text-align: center;
        width: 100%;
        margin-top: auto;
    }

    .wp-block-woocommerce-product-collection .wp-block-button__link {
        display: inline-block;
        width: auto;
        min-width: 120px;
        text-align: center;
    }
}