/*
 * ExFoods (WooCommerce Food) - Mobile Overrides
 * 
 * Purpose: 
 * - Keep the icon/text menu header visible on small screens (instead of switching to dropdown)
 * - Maintain 2-column layout on small screens instead of forcing 1 column
 *
 * Usage:
 * 1. Upload this file to your theme (child theme recommended)
 * 2. Enqueue it AFTER the plugin's main style.css
 *    Example in functions.php:
 *    wp_enqueue_style('exfoods-mobile-overrides', get_stylesheet_directory_uri() . '/exfoods-mobile-overrides.css', array('woocommerce-food-style'), '1.0');
 *
 * This file was created from your custom patches (style (4).css) so you don't have to re-apply them manually after every plugin update.
 */

@media screen and (max-width: 768px) {

    /* === Keep the nice icon header visible instead of the dropdown === */
    .ex-fdlist .exfd-filter .exfd-filter-group .ex-menu-list {
        display: block !important;
    }
    
    .ex-fdlist .exfd-filter .exfd-filter-group .ex-menu-select {
        display: none !important;
    }

    /* === Force 2 columns on tablet/small screens where plugin tries to reduce === */
    .ex-fdlist.ex-fdgrid .ctgrid .item-grid,
    .ex-fdlist.ex-fdgrid.style-3 .ctgrid .item-grid {
        width: 50% !important;
    }

    .ex-fdlist.ex-fdgrid .ctgrid .item-grid:nth-child(2n+1) {
        clear: both !important;
    }
}

/* === Prevent 1-column collapse on very small phones === */
@media (max-width: 450px) {

    .ex-fdlist .parent_grid .ctgrid .item-grid {
        width: 50% !important;           /* was 100% in original */
        margin-right: 0 !important;
    }

    /* Keep some styles looking decent at 2 columns on tiny screens */
    .ex-fdlist.style-3 .parent_grid .ctgrid .item-grid,
    .ex-fdlist.style-4 .parent_grid .ctgrid .item-grid {
        width: calc(50% - 5px) !important;
    }

    .ex-fdlist.column-2.style-3 .ctgrid .item-grid {
        width: calc(50% - 5px) !important;
        margin-right: 10px !important;
    }

    .ex-fdlist.column-2.style-3 .ctgrid .item-grid:nth-child(2n) {
        margin-right: 0 !important;
    }
}

/* Optional: Make the icon header wrap nicely on very small screens if needed */
@media (max-width: 480px) {
    .ex-fdlist .exfd-filter .exfd-filter-group .ex-menu-list a {
        font-size: 14px;
        padding: 6px 10px;
    }
}