.em-filter {
    --em-accent: var(--elysium-color-accent);
    --em-on-accent: var(--elysium-color-on-accent);
    --em-border: var(--elysium-color-border);
    --em-surface: var(--elysium-color-background);
    --em-surface-raised: var(--elysium-color-surface);
    --em-text: var(--elysium-color-text);
    --em-muted: var(--elysium-color-muted);
    --em-radius: var(--elysium-radius-lg);
    --em-radius-sm: var(--elysium-radius-md);
    --em-filter-gap: 8px;
    --em-filter-top: 12px;
    --em-filter-ratio: 16 / 10;
    --em-filter-pad: 9px 14px;
    --em-filter-font: 12.5px;
    --em-filter-pill: 999px;
    --em-filter-block: 14px;
    width: 100%;
    color: var(--em-text);
    container: em-filter / inline-size;
    font-feature-settings: "ss01", "cv01";
}

.em-filter *,
.em-filter *::before,
.em-filter *::after {
    box-sizing: border-box;
}

.em-filter--size-sm { --em-filter-pad: 7px 11px; --em-filter-font: 11.5px; }
.em-filter--size-lg { --em-filter-pad: 12px 18px; --em-filter-font: 14px; }

.em-filter--shape-rounded { --em-filter-pill: 12px; --em-filter-block: 12px; }
.em-filter--shape-square { --em-filter-pill: 4px; --em-filter-block: 6px; }

.em-filter--uppercase .em-filter__name {
    font-size: calc(var(--em-filter-font) - 1px);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.em-filter--divider { padding-bottom: 16px; border-bottom: 1px solid var(--em-border); }

.em-filter.is-sticky {
    position: sticky;
    z-index: 6;
    top: var(--em-filter-top);
    margin: -10px;
    padding: 10px;
    border-radius: var(--em-radius);
    background: color-mix(in srgb, var(--em-surface) 84%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.em-filter--divider.is-sticky { padding-bottom: 16px; }

/* ---------------------------------------------------------------- Header */
.em-filter__head { margin-bottom: 14px; }

.em-filter__title {
    margin: 0;
    color: var(--em-text);
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.em-filter__description {
    max-width: 760px;
    margin: 5px 0 0;
    color: var(--em-muted);
    font-size: 12px;
    line-height: 1.55;
}

/* ------------------------------------------------------------------ List */
.em-filter__list {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--em-filter-gap);
}

.em-filter--align-center .em-filter__list { justify-content: center; }
.em-filter--align-end .em-filter__list { justify-content: flex-end; }
.em-filter--align-stretch .em-filter__item { flex: 1 1 0; justify-content: center; }

.em-filter--vertical .em-filter__list {
    flex-wrap: nowrap;
    flex-direction: column;
}

.em-filter--vertical .em-filter__item {
    width: 100%;
    flex: 0 0 auto;
    justify-content: space-between;
}

.em-filter--vertical.em-filter--align-center .em-filter__list { align-items: center; }
.em-filter--vertical.em-filter--align-center .em-filter__item,
.em-filter--vertical.em-filter--align-end .em-filter__item { width: auto; }
.em-filter--vertical.em-filter--align-end .em-filter__list { align-items: flex-end; }

.em-filter__item {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: var(--em-filter-pad);
    border: 1px solid var(--em-border);
    border-radius: var(--em-filter-pill);
    color: var(--em-muted);
    background: color-mix(in srgb, var(--em-surface-raised) 78%, transparent);
    cursor: pointer;
    font-size: var(--em-filter-font);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition:
        color var(--em-motion, 200ms) var(--em-ease, ease),
        border-color var(--em-motion, 200ms) var(--em-ease, ease),
        background-color var(--em-motion, 200ms) var(--em-ease, ease),
        box-shadow var(--em-motion, 200ms) var(--em-ease, ease),
        transform var(--em-motion-fast, 120ms) var(--em-ease, ease);
}

.em-filter__item:active { transform: scale(.97); }

.em-filter__item:hover {
    border-color: color-mix(in srgb, var(--em-accent) 32%, var(--em-border));
    color: var(--em-text);
    background: color-mix(in srgb, var(--em-accent) 7%, var(--em-surface-raised));
}

.em-filter__item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--em-accent) 28%, transparent);
}

.em-filter__item:active { transform: translateY(1px); }

.em-filter__body {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.em-filter__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.em-filter__desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    opacity: .72;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.em-filter__count {
    display: inline-flex;
    min-width: 20px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: var(--elysium-radius-pill);
    color: var(--em-muted);
    background: color-mix(in srgb, var(--em-text) 8%, transparent);
    font-size: 10.5px;
    font-weight: 800;
}

.em-filter__item:hover .em-filter__count { color: var(--em-text); }

.em-filter--count-inline .em-filter__count {
    min-width: 0;
    padding: 0;
    background: transparent;
    font-size: inherit;
    font-weight: 600;
    opacity: .6;
}

.em-filter--count-inline .em-filter__count::before { content: '('; }
.em-filter--count-inline .em-filter__count::after { content: ')'; }

/* -------------------------------------------------- Активный пункт: виды */
.em-filter--active-solid .em-filter__item.is-active {
    border-color: transparent;
    color: var(--em-on-accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--em-accent) 96%, #fff), var(--em-accent));
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--em-accent) 60%, transparent);
}

.em-filter--active-solid .em-filter__item.is-active .em-filter__count {
    color: var(--em-on-accent);
    background: color-mix(in srgb, var(--em-on-accent) 14%, transparent);
}

.em-filter--active-soft .em-filter__item.is-active {
    border-color: color-mix(in srgb, var(--em-accent) 34%, var(--em-border));
    color: var(--em-accent);
    background: color-mix(in srgb, var(--em-accent) 12%, transparent);
}

.em-filter--active-outline .em-filter__item.is-active {
    border-color: color-mix(in srgb, var(--em-accent) 60%, transparent);
    color: var(--em-accent);
    background: transparent;
}

.em-filter--active-underline .em-filter__item.is-active {
    color: var(--em-accent);
    background: transparent;
}

.em-filter--active-soft .em-filter__item.is-active .em-filter__count,
.em-filter--active-outline .em-filter__item.is-active .em-filter__count,
.em-filter--active-underline .em-filter__item.is-active .em-filter__count {
    color: var(--em-accent);
    background: color-mix(in srgb, var(--em-accent) 14%, transparent);
}

.em-filter--count-inline .em-filter__item.is-active .em-filter__count { background: transparent; }

/* ------------------------------------------------------------------ Tabs */
.em-filter--tabs .em-filter__list {
    gap: max(2px, calc(var(--em-filter-gap) - 6px));
    padding-bottom: 1px;
    border-bottom: 1px solid var(--em-border);
}

.em-filter--tabs:not(.em-filter--vertical) .em-filter__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

.em-filter--tabs .em-filter__item {
    position: relative;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--em-filter-block) var(--em-filter-block) 0 0;
    background: transparent;
}

.em-filter--tabs.em-filter--align-stretch .em-filter__item { flex: 1 1 0; }

.em-filter--tabs .em-filter__item:hover {
    color: var(--em-text);
    background: color-mix(in srgb, var(--em-text) 4%, transparent);
}

.em-filter--tabs.em-filter--active-underline .em-filter__item::after {
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--em-accent);
    transform: scaleX(0);
    transition: transform .2s ease;
    content: '';
}

.em-filter--tabs.em-filter--active-underline .em-filter__item.is-active::after { transform: scaleX(1); }

.em-filter--tabs.em-filter--active-solid .em-filter__item.is-active { box-shadow: none; }

/* Вертикальные вкладки: направляющая и индикатор уходят на левый край. */
.em-filter--tabs.em-filter--vertical .em-filter__list {
    padding-bottom: 0;
    padding-left: 1px;
    border-bottom: 0;
    border-left: 1px solid var(--em-border);
}

.em-filter--tabs.em-filter--vertical .em-filter__item { justify-content: space-between; }

.em-filter--tabs.em-filter--vertical.em-filter--active-underline .em-filter__item::after {
    top: 5px;
    right: auto;
    bottom: 5px;
    left: -1px;
    width: 2px;
    height: auto;
    transform: scaleY(0);
}

.em-filter--tabs.em-filter--vertical.em-filter--active-underline .em-filter__item.is-active::after { transform: scaleY(1); }

/* ------------------------------------------------------------------ List */
.em-filter--list .em-filter__list {
    flex-wrap: nowrap;
    flex-direction: column;
}

.em-filter--list .em-filter__item,
.em-filter--vertical:not(.em-filter--tabs) .em-filter__item { border-radius: var(--em-filter-block); }

.em-filter--list .em-filter__item {
    width: 100%;
    justify-content: space-between;
}

.em-filter--list .em-filter__body { flex: 1; }

/* ----------------------------------------------------------------- Cards */
.em-filter--cards .em-filter__list { display: grid; gap: max(10px, var(--em-filter-gap)); }

.em-filter--cards .em-filter__list--cols-1 { grid-template-columns: minmax(0, 1fr); }
.em-filter--cards .em-filter__list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.em-filter--cards .em-filter__list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.em-filter--cards .em-filter__list--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.em-filter--cards .em-filter__list--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.em-filter--cards .em-filter__list--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.em-filter--cards .em-filter__item {
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: var(--em-filter-block);
    text-align: center;
}

.em-filter--cards .em-filter__body { justify-items: center; }
.em-filter--cards .em-filter__name { white-space: normal; }

.em-filter--cards.em-filter--active-solid .em-filter__item.is-active {
    border-color: color-mix(in srgb, var(--em-accent) 45%, var(--em-border));
    color: var(--em-text);
    background: color-mix(in srgb, var(--em-accent) 9%, var(--em-surface-raised));
    box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--em-accent) 70%, transparent);
}

.em-filter--cards.em-filter--active-solid .em-filter__item.is-active .em-filter__name { color: var(--em-accent); }

.em-filter--cards.em-filter--active-solid .em-filter__item.is-active .em-filter__count {
    color: var(--em-accent);
    background: color-mix(in srgb, var(--em-accent) 14%, transparent);
}

.em-filter__thumb {
    position: relative;
    display: grid;
    width: 100%;
    overflow: hidden;
    aspect-ratio: var(--em-filter-ratio);
    place-items: center;
    border: 1px solid var(--em-border);
    border-radius: calc(var(--em-filter-block) - 3px);
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--em-accent) 14%, transparent), transparent 60%),
        color-mix(in srgb, var(--em-surface) 86%, #000 14%);
}

.em-filter__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.em-filter__glyph {
    color: var(--em-accent);
    font-size: 26px;
    font-weight: 900;
    opacity: .5;
}

/* ----------------------------------------------------------- Responsive */
@container em-filter (max-width: 720px) {
    .em-filter--cards .em-filter__list--cols-3,
    .em-filter--cards .em-filter__list--cols-4,
    .em-filter--cards .em-filter__list--cols-5,
    .em-filter--cards .em-filter__list--cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container em-filter (max-width: 420px) {
    .em-filter--cards .em-filter__list { grid-template-columns: minmax(0, 1fr) !important; }
    .em-filter__item { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .em-filter__item,
    .em-filter--tabs .em-filter__item::after { transition: none !important; }
    .em-filter__item:active { transform: none; }
}