/* Mulu Parts - Catalog & Products Grid CSS */

        /* ---------- Catalog Grid ---------- */

        .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

        .catalog-card { background: rgba(14, 18, 24, 0.75); border-radius: 22px; padding: 22px; border: 1px solid var(--border); transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; cursor: pointer; display: flex; flex-direction: column; position: relative; }

        .catalog-card:hover { transform: translateY(-5px); border-color: var(--border-hover); background: rgba(22, 27, 36, 0.95); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }

        .catalog-card-image { width: 100%; height: 160px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; overflow: hidden; position: relative; }

        .catalog-card-image img { width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform 0.4s ease; }

        .catalog-card:hover .catalog-card-image img { transform: scale(1.06); }

        .catalog-card-image .fallback-icon { font-size: 50px; filter: grayscale(100%) brightness(180%); opacity: 0.8; transition: transform 0.4s; }

        .catalog-card:hover .catalog-card-image .fallback-icon { transform: scale(1.1); opacity: 1; }

        .catalog-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 6px; line-height: 1.35; color: #fff; }

        .catalog-card p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; flex-grow: 1; }

        

        .prod-brand { font-size: 11px; color: #8e9aab; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px; }

        .prod-oem { font-size: 12px; color: #6a7480; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-family: monospace; }

        .prod-price { font-size: 22px; font-weight: 700; color: var(--accent); margin-top: 10px; }

        .btn-buy { background: rgba(255,255,255,0.04); border: 1px solid var(--border-hover); color: var(--text-main); width: 100%; padding: 12px; border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: 600; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; }

        .btn-buy:hover { background: var(--accent); color: var(--accent-dark); border-color: var(--accent); }



        /* ---------- Advantages Grid ---------- */

        .advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

        .advantage-item { padding: 32px 24px; border-radius: 24px; background: rgba(14, 18, 24, 0.6); border: 1px solid var(--border); transition: all 0.3s ease; contain: content; }

        .advantage-item:hover { background: rgba(20, 25, 34, 0.85); border-color: var(--border-hover); }

        .advantage-item .icon { font-size: 28px; margin-bottom: 20px; display: block; filter: grayscale(100%) brightness(150%); }

        .advantage-item h4 { font-size: 18px; font-weight: 500; margin-bottom: 12px; }

        .advantage-item p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }



        /* ── Подкатегории и производители (Адаптивная мульти-колоночная сетка) ── */

        .subcat-view-wrap {

            grid-column: 1 / -1;

            width: 100%;

            display: flex;

            flex-direction: column;

        }

        .subcat-view-header {

            width: 100%;

            margin-bottom: 22px;

        }

        .subcat-meta-bar {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-top: 12px;

            flex-wrap: wrap;

        }

        .subcat-count-badge {

            display: inline-flex;

            align-items: center;

            padding: 5px 12px;

            border-radius: 20px;

            background: rgba(255, 255, 255, 0.05);

            border: 1px solid var(--border);

            font-size: 12px;

            font-weight: 600;

            color: var(--accent);

        }

        .subcat-helper-text {

            font-size: 13px;

            color: var(--text-muted);

        }



        .subcat-grid {

            grid-column: 1 / -1;

            width: 100%;

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

            gap: 16px;

            margin-bottom: 32px;

        }

        .subcat-card {

            background: rgba(14, 18, 24, 0.75);

            border: 1px solid var(--border);

            border-radius: 18px;

            padding: 18px 20px;

            cursor: pointer;

            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),

                        border-color 0.25s ease,

                        background 0.25s ease,

                        box-shadow 0.25s ease;

            display: flex;

            flex-direction: column;

            justify-content: center;

            position: relative;

            overflow: hidden;

            contain: content;

        }

        .subcat-card:hover {

            transform: translateY(-3px);

            border-color: rgba(255, 255, 255, 0.3);

            background: rgba(22, 28, 38, 0.95);

            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);

        }

        .subcat-card-body {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 14px;

            width: 100%;

        }

        .subcat-text {

            flex: 1;

            min-width: 0;

        }

        .subcat-text h5 {

            font-size: 15px;

            font-weight: 600;

            color: #fff;

            margin: 0 0 4px 0;

            line-height: 1.35;

            transition: color 0.2s ease;

        }

        .subcat-card:hover .subcat-text h5 {

            color: var(--accent);

        }

        .subcat-text p {

            font-size: 12.5px;

            color: var(--text-muted);

            margin: 0;

            line-height: 1.45;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            overflow: hidden;

        }

        .subcat-arrow {

            width: 32px;

            height: 32px;

            border-radius: 50%;

            background: rgba(255, 255, 255, 0.04);

            border: 1px solid rgba(255, 255, 255, 0.06);

            display: flex;

            align-items: center;

            justify-content: center;

            flex-shrink: 0;

            color: var(--text-muted);

            transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;

        }

        .subcat-card:hover .subcat-arrow {

            transform: translateX(3px);

            color: #fff;

            background: rgba(255, 255, 255, 0.12);

            border-color: rgba(255, 255, 255, 0.25);

        }

        .subcat-card.subcat-card-all {

            background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(20, 26, 36, 0.8) 100%);

            border-color: rgba(255, 255, 255, 0.16);

        }

        .subcat-card.subcat-card-all:hover {

            border-color: var(--accent);

        }

        .subcat-card.subcat-card-all .subcat-arrow {

            background: rgba(255, 255, 255, 0.08);

            color: var(--accent);

        }



        .brand-filter-wrap {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            margin-bottom: 20px;

        }

        .brand-chip {

            background: rgba(255,255,255,0.04);

            border: 1px solid var(--border);

            border-radius: 20px;

            padding: 6px 14px;

            font-size: 12px;

            color: var(--text-muted);

            cursor: pointer;

            transition: all 0.2s;

            user-select: none;

        }

        .brand-chip:hover { background: rgba(255,255,255,0.09); color: #fff; border-color: rgba(255,255,255,0.25); }

        .brand-chip.active { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.5); font-weight: 600; }



        /* ── Шаг назад / хлебные крошки в каталоге ── */

        .catalog-breadcrumb {

            display: flex;

            align-items: center;

            gap: 8px;

            margin-bottom: 20px;

            font-size: 13px;

            color: var(--text-muted);

            flex-wrap: wrap;

        }

        .catalog-breadcrumb span { cursor: pointer; transition: color 0.2s; }

        .catalog-breadcrumb span:hover { color: #fff; }

        .catalog-breadcrumb .sep { opacity: 0.4; }



        /* ─── Складские индикаторы и сроки поставки ─── */

        .stock-badge {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            font-size: 11.5px;

            font-weight: 600;

            padding: 3px 8px;

            border-radius: 6px;

            margin-top: 8px;

            margin-bottom: 4px;

            width: fit-content;

        }

        .stock-badge.in-stock {

            background: rgba(52, 211, 153, 0.1);

            color: #34d399;

            border: 1px solid rgba(52, 211, 153, 0.25);

        }

        .stock-badge.on-order {

            background: rgba(251, 191, 36, 0.1);

            color: #fbbf24;

            border: 1px solid rgba(251, 191, 36, 0.25);

        }

        .stock-dot {

            width: 7px;

            height: 7px;

            border-radius: 50%;

            display: inline-block;

        }

        .stock-dot.green {

            background: #34d399;

            box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);

        }

        .stock-dot.yellow {

            background: #fbbf24;

            box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);

        }



        /* Кнопки действий на карточке */

        .prod-card-actions {

            display: flex;

            gap: 8px;

            margin-top: 12px;

        }

        .prod-card-actions .btn-buy {

            flex: 1;

            margin-top: 0;

            padding: 10px 12px;

            font-size: 13px;

        }

        .btn-quick-buy {

            background: rgba(56, 189, 248, 0.12);

            color: #38bdf8;

            border: 1px solid rgba(56, 189, 248, 0.3);

            border-radius: 12px;

            padding: 10px 14px;

            font-weight: 700;

            font-size: 13px;

            cursor: pointer;

            transition: all 0.2s;

            white-space: nowrap;

        }

        .btn-quick-buy:hover {

            background: rgba(56, 189, 248, 0.24);

            border-color: #38bdf8;

            color: #fff;

            transform: translateY(-1px);

        }