/* ===== MAHHALCOM MOBILE-ONLY FIX v5 =====
   جميع القواعد محصورة داخل @media (max-width: 768px)
   لا تأثير على الديسكتوب أبداً
   ========================================= */

@media (max-width: 768px) {

    /* ============================================
       1. Popular Brands (mh-brand-item)
       المشكلة: الصور كبيرة جداً (60px × 120px)
       الحل: تصغير إلى 44px × 90px
       ============================================ */
    .mh-brand-item {
        height: 44px !important;
        width: 90px !important;
    }
    .mh-brand-item img {
        max-height: 38px !important;
        max-width: 80px !important;
        object-fit: contain !important;
    }
    .mh-marquee-content {
        gap: 16px !important;
    }

    /* ============================================
       2. Shop by Category
       المشكلة أ: أيقونة القفل (placeholder img) كبيرة
       المشكلة ب: كلمة "products" زائدة
       ============================================ */

    /* إخفاء كلمة "products" الزائدة */
    .mh-shop-by-category__count {
        display: none !important;
    }

    /* تصغير حاوية الصورة في الموبايل */
    .mh-shop-by-category__image-wrap {
        width: 90px !important;
        height: 90px !important;
        border-radius: 20px !important;
        padding: 8px !important;
    }

    /* تصغير العنصر الكامل */
    .mh-shop-by-category__item {
        min-width: 110px !important;
        max-width: 130px !important;
    }

    /* تصغير اسم الفئة */
    .mh-shop-by-category__name {
        font-size: 12px !important;
    }

    /* ============================================
       3. قسم المميزات (mh-sf)
       المشكلة: التنسيق عمودي (1 column) في 420px
       الحل: إبقاء 2 columns في كل الموبايل
       ============================================ */

    /* إلغاء تأثير 420px الذي يجعله عموداً واحداً */
    .mh-sf-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* تكبير الأيقونات - clamp() لا يعمل جيداً في الموبايل */
    .mh-sf-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    .mh-sf-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* تحسين النص في الكارد */
    .mh-sf-text strong {
        font-size: 13px !important;
        white-space: normal !important;
    }
    .mh-sf-text span {
        font-size: 11px !important;
        white-space: normal !important;
    }

    /* ============================================
       4. صور المنتجات (Product Cards)
       المشكلة: الصور تظهر بيضاء فاضية
       السبب: object-fit:cover مع height:auto يسبب
               collapse للحاوية
       الحل: إصلاح padding-top للحاوية وإبقاء
              الصورة absolute positioned
       ============================================ */

    /* إصلاح حاوية الصورة */
    .mh-home-products-row .box-image {
        position: relative !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, #fff 0%, #f7fafc 100%) !important;
    }

    /* إصلاح image-cover padding */
    .mh-home-products-row .image-cover {
        padding-top: 100% !important;
    }

    /* إصلاح الصورة نفسها */
    .mh-home-products-row .product-small .box-image img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }

    /* التأكد من أن الـ a و image-zoom يملآن الحاوية */
    .mh-home-products-row .product-small .box-image > a,
    .mh-home-products-row .product-small .box-image .image-zoom {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

} /* end @media (max-width: 768px) */