.filter-bar {
    background: var(--color-bg-card);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.02);
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.filter-bar:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.02);
    border-color: var(--color-primary-bg-soft);
}

.filter-row {
    display: flex;
    align-items: flex-start;
    padding: 20px 28px;
    border-bottom: 1px solid var(--color-border-light);
}

.filter-row:last-of-type {
    border-bottom: none;
}

.filter-row.hidden {
    display: none;
}

.filter-label {
    width: 90px;
    font-size: var(--font-size-btn);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-body);
    padding-top: 6px;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-label i {
    color: var(--color-primary);
    font-size: var(--font-size-caption);
    opacity: 0.8;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: var(--z-base);
}

.filter-tag a {
    padding: 6px 18px;
    font-size: var(--font-size-caption);
    font-weight: 450;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    border: 1px solid transparent;
    line-height: var(--line-height-h3);
    letter-spacing: 0.2px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
    text-decoration: none;
}

.filter-tag.active a,
.filter-tag.active a:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 6px 14px var(--color-primary-border), 0 1px 3px rgba(0, 0, 0, 0.02);
    font-weight: var(--font-weight-medium);
}

.filter-tag:not(.active) a:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary-active);
    border-color: var(--color-primary-shadow);
    transform: translateY(-1px);
}

.filter-keyword-input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-caption);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    line-height: var(--line-height-h3);
    background: var(--color-bg-card);
    transition: border-color 0.2s;
}

.filter-keyword-input:focus {
    border-color: var(--color-primary);
}

.filter-keyword-wrap {
    position: relative;
    width: 100%;
}

.filter-keyword-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-caption);
    display: none;
    transition: color 0.2s;
    padding: 2px;
}

.filter-keyword-clear:hover {
    color: var(--color-text-secondary);
}

.filter-keyword-input:not(:placeholder-shown) ~ .filter-keyword-clear {
    display: block;
}

.selected-conditions {
    background: linear-gradient(145deg, #fffbf9, #fff9f6);
    padding: 10px 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-primary-border);
    border-radius: 0 0 16px 16px;
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.selected-conditions.hidden {
    display: none;
}

.selected-conditions .title {
    display: flex;
    align-items: center;
    font-weight: 450;
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
    gap: 6px;
}

.selected-conditions .title i {
    font-size: var(--font-size-label);
    color: var(--color-primary);
}

.selected-tag {
    display: inline-flex;
    align-items: center;
    box-shadow: 0 3px 8px var(--color-primary-bg-soft);
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid var(--color-primary);
    letter-spacing: 0.3px;
    border-radius: 32px;
    background: var(--color-bg-card);
    padding: 3px 5px;
    gap: var(--space-sm);
}

.selected-tag a {
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-label);
    color: var(--color-primary-active);
}

.selected-tag .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    background: var(--color-primary-bg-soft);
    border-radius: 50%;
    font-size: var(--font-size-mini);
    cursor: pointer;
    opacity: 0.6;
    height: var(--space-base);
    width: var(--space-base);
}

.selected-tag .close:hover {
    transform: scale(1.1);
    background: var(--color-primary);
    color: white;
    opacity: var(--z-base);
}

.selected-conditions .clear-btn {
    margin-left: auto;
}

.sort-bar {
    display: flex;
    align-items: center;
    gap: 36px;
    font-size: var(--font-size-btn);
    padding: 0 var(--space-sm) 14px;
}

.sort-item {
    cursor: pointer;
    position: relative;
    padding: 6px 0;
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 450;
    letter-spacing: 0.3px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.sort-item a {
    text-decoration: none;
    color: var(--color-text-secondary);
}

.sort-item.active {
    border-bottom-color: var(--color-primary);
}

.sort-item.active a {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.sort-item i {
    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    font-size: var(--font-size-caption);
    opacity: 0.7;
}

.sort-item:hover:not(.active) {
    border-bottom-color: var(--color-primary-shadow);
    color: var(--color-primary);
}

.sort-item.sort-desc i {
    transform: rotate(180deg);
}

.market-layout {
    display: block;
}

.market-filter-panel,
.market-main-panel {
    min-width: 0;
}

.filter-label-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filter-arrow {
    display: none;
}

@media (max-width: 992px) {
    .market-layout {
        display: block;
    }

    .market-layout > .filter-bar {
        display: none;
    }

    .market-filter-panel {
        display: none;
    }

    .market-main-panel {
        min-width: 0;
    }

    .filter-bar {
        margin-bottom: 0;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    }

    .filter-row {
        flex-direction: column;
        padding: 14px 10px;
        border-bottom-color: var(--color-border-light);
    }

    .filter-label {
        width: 100%;
        padding-top: 0;
        font-size: var(--font-size-caption);
        gap: var(--space-sm);
        justify-content: space-between;
        cursor: pointer;
    }

    .filter-label-main {
        min-width: 0;
    }

    .filter-label-main i {
        width: 14px;
        text-align: center;
    }

    .filter-arrow {
        display: inline-flex;
        color: #b8b8b8;
        font-size: var(--font-size-mini);
        transition: transform 0.25s ease, color 0.25s ease;
    }

    .filter-row.is-open .filter-arrow {
        color: var(--color-primary);
        transform: rotate(180deg);
    }

    .filter-tags {
        display: none;
        width: 100%;
        padding-top: 10px;
        gap: var(--space-sm);
    }

    .filter-row.is-open .filter-tags {
        display: flex;
    }

    .filter-row[data-param="g"] .filter-tags {
        display: flex;
    }

    .filter-tag a {
        padding: 5px var(--space-md);
        font-size: var(--font-size-label);
        border-radius: var(--radius-md);
    }

    .selected-conditions {
        padding: var(--space-md) 10px;
        gap: var(--space-sm);
        border-top-color: var(--color-primary-bg-soft);
    }

    .selected-conditions .title {
        width: 100%;
        font-size: var(--font-size-caption);
    }

    .selected-tag {
        padding: var(--space-xs) 10px;
    }

    .selected-conditions {
        display: none !important;
    }

    .filter-actions {
        display: flex;
        gap: 10px;
        padding: var(--space-md) var(--space-base);
        border-top: 1px solid var(--color-primary-bg-soft);
        justify-content: flex-end;
    }

    .filter-btn {
        padding: 5px 14px;
        border-radius: var(--radius-md);
        font-size: var(--font-size-label);
        font-weight: var(--font-weight-medium);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s;
        font-family: inherit;
        line-height: var(--line-height-h3);
        width: auto;
    }

    .filter-btn.clear-btn {
        background: var(--color-bg-card);
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
    }

    .filter-btn.confirm-btn {
        background: var(--color-primary);
        color: var(--color-bg-card);
    }

    .sort-bar {
        gap: var(--space-base);
        flex-wrap: wrap;
        padding: 0 0 10px;
        margin-bottom: var(--space-xs);
    }

    .sort-item {
        margin-bottom: 0;
        padding: var(--space-xs) 0;
        font-size: var(--font-size-caption);
    }

    .sort-item a {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .sort-item[data-type] a {
        font-size: 0;
    }

    .sort-item[data-type] a i {
        font-size: var(--font-size-btn);
    }

    .sort-item[data-type="default"] a::after,
    .sort-item[data-type="new"] a::after,
    .sort-item[data-type="view"] a::after,
    .sort-item[data-type="price"] a::after {
        font-size: var(--font-size-btn);
    }

    .sort-item[data-type="default"] a::after {
        content: "综合";
    }

    .sort-item[data-type="new"] a::after {
        content: "最新";
    }

    .sort-item[data-type="view"] a::after {
        content: "浏览";
    }

    .sort-item[data-type="price"] a::after {
        content: "价格";
    }

    .sort-item.filter-drawer-trigger {
        margin-left: auto;
    }

    .sort-item.filter-drawer-trigger a {
        font-size: var(--font-size-caption);
    }

    .sort-item.filter-drawer-trigger a i {
        font-size: var(--font-size-btn);
    }

    .market-main-panel .pagination {
        margin: var(--space-base) 0 0;
        gap: 6px;
        flex-wrap: wrap;
    }

    .market-main-panel .pagination-btn,
    .market-main-panel .pagination-ellipsis {
        min-width: var(--space-xl);
        width: var(--space-xl);
        height: var(--space-xl);
        font-size: var(--font-size-label);
        padding: 0;
    }
}

@media (max-width: 480px) {
    .market-layout {
        display: block;
    }

    .filter-row {
        padding: var(--space-md) var(--space-sm);
    }

    .filter-tag a {
        padding: var(--space-xs) 10px;
        font-size: var(--font-size-mini);
    }

    .sort-bar {
        gap: var(--space-md);
    }

    .sort-item[data-type] a i,
    .sort-item[data-type="default"] a::after,
    .sort-item[data-type="new"] a::after,
    .sort-item[data-type="view"] a::after,
    .sort-item[data-type="price"] a::after {
        font-size: var(--font-size-caption);
    }

    .sort-item.filter-drawer-trigger {
        display: inline-flex;
    }

}

/* 底部抽屉外壳已收敛至 components.css 第 11 节（.drawer / .drawer-overlay / .drawer-panel 等），
   此处仅保留筛选抽屉自身的差异化规则与 JS 钩子 */

.filter-drawer-btn {
    cursor: pointer;
}

.sort-item.filter-drawer-trigger.has-conditions a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.sort-item.filter-drawer-trigger.has-conditions a i {
    opacity: 1;
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-mini);
    line-height: 1;
    font-weight: var(--font-weight-semibold);
    vertical-align: middle;
}

.filter-drawer-body .filter-bar {
    border: none;
    background: none;
    padding: 0;
}

.filter-drawer-body .filter-row {
    padding: 10px var(--space-base);
    margin: 0;
}

.filter-drawer-body .filter-row.is-open .filter-tags {
    display: flex;
}

@media (min-width: 993px) {
    .filter-drawer {
        display: none !important;
    }
    .sort-item.filter-drawer-trigger {
        display: none !important;
    }
    .filter-actions {
        display: none;
    }
    .market-layout .filter-row[data-param="g"] {
        display: none;
    }
}

.type-switch {
    display: none;
}
@media (max-width: 992px) {
    .type-switch {
        display: flex;
        background: var(--color-bg-hover);
        border-radius: var(--radius-lg);
        padding: var(--space-2xs);
        margin-bottom: 10px;
    }
    .type-switch a {
        flex: var(--z-base);
        text-align: center;
        padding: var(--space-sm) 0;
        border: none;
        background: transparent;
        font-size: var(--font-size-btn);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        text-decoration: none;
        transition: all 0.25s;
    }
    .type-switch a.active {
        background: var(--color-bg-card);
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }
    .type-switch a:not(.active):hover {
        color: var(--color-text-body);
    }
}