/* =========================================
   Deutsch Go — Categories Grid
   Remove EasyOrders category slider
   ========================================= */

/* استخدم نسخة الكروت العادية بدل السلايدر */
main .md\:hidden.flex.flex-row.overflow-x-auto {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;

    width: 100% !important;
    overflow: visible !important;

    padding: 0 !important;
    margin: 0 !important;
}

/* إلغاء الـ min-width اللي معمول للكارت عشان السحب */
main .md\:hidden.flex.flex-row.overflow-x-auto > div,
main .md\:hidden.flex.flex-row.overflow-x-auto > div > div {
    min-width: 0 !important;
    width: 100% !important;
}

/* خلي كل Category Card ياخد مساحة الـ Grid Cell كاملة */
main .md\:hidden.flex.flex-row.overflow-x-auto .default_category_card {
    width: 100% !important;
    max-width: none !important;
}

/* الصورة تفضل متساوية في كل الكروت */
main .md\:hidden.flex.flex-row.overflow-x-auto
.default_category_card .relative.inline-flex {
    width: 100% !important;
}

/* نخفي نسخة Swiper بتاعة EasyOrders بالكامل */
main .hidden.md\:block:has(.carouselWrapper .swiper) {
    display: none !important;
}

/* احتياطي: اخفاء أزرار السلايدر لو ظهرت */
main .carouselWrapper .slider_buttons_container {
    display: none !important;
}


/* =========================================
   Tablet
   ========================================= */

@media (max-width: 991px) {

    main .md\:hidden.flex.flex-row.overflow-x-auto {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767px) {

    main .md\:hidden.flex.flex-row.overflow-x-auto {
        display: grid !important;

        /* A1 + A2 جنب بعض
           و B1 تحتهم */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 18px 12px !important;

        overflow: visible !important;
        padding: 0 !important;
    }

    main .md\:hidden.flex.flex-row.overflow-x-auto
    .default_category_card {
        min-width: 0 !important;
        width: 100% !important;
    }

    main .md\:hidden.flex.flex-row.overflow-x-auto
    .default_category_card_name {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
}


/* =========================================
   Small Mobile
   ========================================= */

@media (max-width: 420px) {

    main .md\:hidden.flex.flex-row.overflow-x-auto {
        gap: 14px 10px !important;
    }

}
/* خلي كونتينر صورة الـ Category بنسبة 5:7 */
main .default_category_card .relative.inline-flex {
    width: 100% !important;
    aspect-ratio: 5 / 7 !important;
    overflow: hidden !important;
}

/* خلي الصورة تملأ الكونتينر بالكامل */
main .default_category_card_img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 5 / 7 !important;
    object-fit: cover !important;
}

/* الصورة نفسها */
main .default_category_card_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}