/* Идеальная мобильная версия для сортировки */

@media screen and (max-width: 767px) {
    /* Полностью скрываем лишние элементы */
    .woocommerce-result-count,
    .before-shop-loop .shop-sorting-wrapper .sorting-products span,
    .before-shop-loop .shop-sorting-wrapper > * span {
        display: none !important;
    }
    
    /* Основной контейнер - простая горизонтальная линия */
    .before-shop-loop {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1rem 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        margin-bottom: 1.5rem !important;
        gap: 1rem !important;
    }
    
    /* Левая часть - кнопка фильтра */
    .before-shop-loop .column.left {
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Кнопка фильтра - красивая и простая */
    .before-shop-loop .filter-button {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #374151 !important;
        text-decoration: none !important;
        padding: 0.75rem 1rem !important;
        border: 2px solid #e5e7eb !important;
        border-radius: 12px !important;
        background-color: #fff !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        min-width: 120px !important;
        justify-content: center !important;
    }
    
    .before-shop-loop .filter-button:hover {
        border-color: #3b82f6 !important;
        background-color: #f8fafc !important;
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15) !important;
        transform: translateY(-1px) !important;
    }
    
    /* Правая часть - иконки переключения вида */
    .before-shop-loop .column.right {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex: 0 0 auto !important;
    }
    
    /* Кнопки переключения вида - красивые квадратики */
    .before-shop-loop .product-views-buttons {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .before-shop-loop .product-views-buttons > * {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border: 2px solid #e5e7eb !important;
        border-radius: 12px !important;
        background-color: #fff !important;
        color: #6b7280 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }
    
    .before-shop-loop .product-views-buttons > *:hover {
        border-color: #3b82f6 !important;
        background-color: #f8fafc !important;
        color: #3b82f6 !important;
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15) !important;
        transform: translateY(-1px) !important;
    }
    
    .before-shop-loop .product-views-buttons > *.active {
        border-color: #3b82f6 !important;
        background-color: #3b82f6 !important;
        color: #fff !important;
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3) !important;
    }
    
    /* Скрываем все селекторы сортировки на мобильных - они не нужны */
    .before-shop-loop .shop-sorting-wrapper,
    .before-shop-loop .woocommerce-ordering,
    .woocommerce-ordering {
        display: none !important;
    }
    
    /* Дополнительные улучшения */
    .before-shop-loop .column {
        width: auto !important;
        flex: none !important;
    }
    
    /* Убираем все отступы и границы */
    .before-shop-loop .column.left,
    .before-shop-loop .column.right {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
}

/* Для планшетов (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .before-shop-loop {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1rem 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        margin-bottom: 1.5rem !important;
    }
    
    .before-shop-loop .column.left {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        flex: 1 !important;
    }
    
    .before-shop-loop .column.right {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        flex: 0 0 auto !important;
    }
    
    /* Показываем селекторы на планшетах */
    .before-shop-loop .shop-sorting-wrapper,
    .woocommerce-ordering {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .before-shop-loop .shop-sorting-wrapper .sorting-products span,
    .before-shop-loop .shop-sorting-wrapper > * span {
        display: none !important;
    }
    
    .woocommerce-ordering select.orderby {
        min-width: 160px !important;
        height: 40px !important;
        padding: 0.5rem 2rem 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        background-color: #fff !important;
        color: #374151 !important;
        cursor: pointer !important;
        outline: none !important;
        transition: all 0.2s ease !important;
        
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M12,17.3c-0.2,0-0.4-0.1-0.5-0.2l-9-9C2.2,7.7,2.2,7.3,2.5,7s0.8-0.3,1.1,0l8.5,8.5L20.5,7c0.3-0.3,0.8-0.3,1.1,0 s0.3,0.8,0,1.1l-9,9C12.4,17.2,12.2,17.3,12,17.3z'/%3E%3C/g%3E%3C/svg%3E") !important;
        background-position: right 0.75rem center !important;
        background-size: 14px !important;
        background-repeat: no-repeat !important;
    }
    
    .woocommerce-ordering select.orderby:hover {
        border-color: #3b82f6 !important;
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1) !important;
    }
    
    .woocommerce-ordering select.orderby:focus {
        border-color: #3b82f6 !important;
        outline: 2px solid rgba(59, 130, 246, 0.2) !important;
        outline-offset: 0 !important;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
    }
}