/* =============================================================================
   ТРОН — страница каталога /products (shop/products/index).
   Подключается ПОСЛЕ category.css в @push('styles') → переопределяет его.
   ============================================================================= */

/* --- Сетка товаров ---
   ВАЖНО: на странице висел display:flex, из-за чего grid-template-columns
   игнорировался. Принудительно делаем CSS-grid и задаём число колонок. */
.products-grid:not(.list-view) {
    display: grid !important;
    gap: 16px !important;
    align-items: stretch;
}
/* десктоп — 4 в ряд */
@media (min-width: 992px) {
    .products-grid:not(.list-view) { grid-template-columns: repeat(4, 1fr) !important; }
}
/* планшет — 3 в ряд */
@media (min-width: 768px) and (max-width: 991.98px) {
    .products-grid:not(.list-view) { grid-template-columns: repeat(3, 1fr) !important; }
}
/* телефон — 2 в ряд */
@media (max-width: 767.98px) {
    .products-grid:not(.list-view) { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- Сорт-бар над сеткой --- */
.products-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
}
.products-sort .ps-label {
    color: #6c757d;
    font-size: 14px;
    font-weight: 600;
    margin-right: 2px;
}
.products-sort .ps-label i { color: var(--tron-blue, #2549d8); margin-right: 6px; }
.products-sort .ps-opt {
    color: #495057;
    text-decoration: none;
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 8px;
    transition: all .15s ease;
    white-space: nowrap;
}
.products-sort .ps-opt:hover { color: var(--tron-blue, #2549d8); background: #f3f5fc; }
.products-sort .ps-opt.active { color: #fff; background: var(--tron-blue, #2549d8); font-weight: 600; }

/* Мобила: компактная строка чипов с горизонтальной прокруткой —
   без переноса на 3-4 строки и без подписи «Сортировать по:» */
@media (max-width: 767.98px) {
    .products-sort {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding: 8px 10px;
    }
    .products-sort::-webkit-scrollbar { display: none; }
    .products-sort .ps-label { display: none; }
    .products-sort .ps-opt {
        flex: 0 0 auto;
        font-size: 12px;
        padding: 4px 11px;
        background: #f4f6fa;
        border-radius: 999px;
    }
    .products-sort .ps-opt.active { background: var(--tron-blue, #2549d8); }
    .products-sort .ps-opt i { font-size: .75em; margin-left: 2px; }
}

/* Стили сайдбара (.sidebar-cat, .filters-hint) вынесены в catalog-sidebar.css
   — единый глобальный источник стилей фильтр-сайдбара. */