#products-list .filters {
        margin: var(--t-space-5) 0;
        display: flex;
        justify-content: space-between;
        align-items: start;
    }
#products-list .material-filter {
        display: flex;
        gap: var(--t-space-5);
    }
#products-list .material-filter button {
        padding: 0;
        background: none;
        text-transform: uppercase;
        font-weight: var(--t-weight-semibold);
        font-size: var(--t-text-xs);
        color: var(--t-gray-250);
        transition: color var(--t-duration-fast) var(--t-ease-in-out);
    }
#products-list .material-filter button:hover {
        color: var(--t-color-black);
    }
#products-list .material-filter button.active {
        color: var(--t-color-black);
        text-decoration: underline;
        text-decoration-thickness: var(--t-border-width-2);
        text-underline-offset: 4px;
    }
#products-list .sort {
        display: flex;
        flex-direction: column;
        gap: var(--t-space-3);
        background-color: var(--t-color-bg-muted);
        padding: var(--t-space-3) var(--t-space-5) var(--t-space-3) var(--t-space-5);
        margin-left: auto;
    }
#products-list .sort button {
        padding: 0;
        text-align: start;
        background: none;
        font-weight: var(--t-weight-regular);
        font-size: var(--t-text-xs);
        letter-spacing: var(--t-tracking-wide);
        color: var(--t-color-black);
        transition: color var(--t-duration-fast) var(--t-ease-in-out),
                    transform var(--t-duration-fast) var(--t-ease-in-out);
    }
#products-list .sort button:hover {
        color: var(--t-color-link-hover);
        transform: translateX(3px);
    }
#products-list .sort button.active {
        font-weight: var(--t-weight-semibold);
    }
#products-list .sort button span {
        position: relative;
        display: inline-block;
    }
#products-list .sort button span::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 100%;
        height: var(--t-border-width-2);
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--t-duration-slow) var(--t-ease-default);
    }
#products-list .sort button.active span::after,
#products-list .sort button:hover span::after {
        transform: scaleX(1);
    }
#products-list .filters button:focus-visible {
        outline: var(--t-focus-ring);
        outline-offset: var(--t-focus-ring-offset);
    }
#products-list .empty {
        align-content: center;
        text-align: center;
        min-height: 385px;
        color: var(--t-color-red);
    }