/* web/assets/css/component/product-list.css */



.tab-system {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Скрываем радио-кнопки */
.tab-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Стили вкладок (Labels) */
.tab-label {
    order: 1; /* Поднимаем все label в начало контейнера */
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    margin: 0 8px 12px 0;
    background: var(--color-white);
    border: 1px solid var(--FOSS-Blue-link-grey);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    color: var(--FOSS-Blue-link);
    transition: all 0.2s ease;
}

.tab-label:hover {
    border-color: var(--FOSS-Orange);
    color: var(--FOSS-Orange);
}

.tab-label img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    object-fit: contain;
}

.tab-label .count {
    font-weight: 400;
    font-size: 0.85em;
    margin-left: 6px;
    opacity: 0.6;
}

/* Стили панелей */
.tab-panel {
    order: 2; /* Опускаем все панели под ряд с кнопками */
    width: 100%;
    display: none;
    padding-top: 24px;
    border-top: 1px solid var(--FOSS-Blue-link-grey);
    animation: tabFadeIn 0.3s ease-out;
}

/* === УНИВЕРСАЛЬНАЯ ЛОГИКА (Независимо от количества) === */

/* Активный Label */
.tab-radio:checked + .tab-label {
    background: var(--FOSS-Blue-link);
    color: var(--color-white);
    border-color: var(--FOSS-Blue-link);
}

.tab-radio:checked + .tab-label .count {
    color: var(--color-white);
}

/* Активная панель */
.tab-radio:checked + .tab-label + .tab-panel {
    display: block;
}

/* Сетка продуктов */
.products-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    gap: 20px;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}