/* @group Filters Header
------------------------------------ */
.filters-header .filters-group {
    display: flex; 
}
@media only screen
and (min-width : 961px) {
    .filters-header { 
        background: var(--peach); 
        position: relative; 
    }
    .filters-header .row { 
        height: 8rem; 
    }
    .filters-header .filters-group {
        position: static; 
        justify-content: flex-end;
    }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .filters-header { 
        padding: 0 0 5rem; 
    }
    .filters-header .filters-group { 
        position: relative; 
        flex-direction: column;
        order: -1; 
        margin: 0 0 4rem;
    }
}


/* @group Filter Time
------------------------------------ */
.filters-header .filter-time ul { 
    padding: 0; 
}
.filters-header .filter-time li { 
    list-style: none; 
    display: inline-block; 
    text-transform: uppercase; 
    font-weight: var(--font-weight-regular); 
    font-size: 1.5rem; 
}
.filters-header .filter-time li a { 
    font: unset; 
    display: inline-block; 
}
@media only screen
and (min-width : 961px) {
    .filters-header .filter-time li { 
        font-size: 1.8rem; 
        line-height: 1.5em; 
        letter-spacing: .07em; 
        display: inline-block; 
    }
    .filters-header .filter-time li:not(:last-of-type) { 
        margin-right: 2.6rem; 
    }
    .filters-header .filter-time li.no-mobile { 
        font-size: 1.5rem; 
    }
    .filters-header .filter-time li a { 
        position: relative; 
        transition: all .3s; 
    }
    .filters-header .filter-time li a:is(.active, :hover) { 
        font-weight: var(--font-weight-medium); 
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .filters-header .filter-time {
        padding: 0;
    }
    .filters-header .filter-time ul {
        display: inline-block;
        white-space: nowrap;
        overflow: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        width: 100%;
        padding: 0 2rem;
    }
    .filters-header .filter-time li { 
       width: fit-content;
       margin-right: 2rem;
       display: inline-block;
    }
    .filters-header .filter-time li a.active {
        font-weight: var(--font-weight-bold);
    }
}

/* @group Filter Category
------------------------------------ */
.filters-header .filter-category { color: var(--ivory); }
.filters-header .filter-category li,
.filters-header .filter-category button { text-transform: uppercase; }
.filters-header .filter-category li button { font: unset; display: inline-block; color: var(--white); }
@media only screen
and (min-width : 961px) {
    .filters-header .filter-category li { font: 700 1.8em / 1.5em var(--nexa-font); letter-spacing: .07em; display: inline-block; }
    .filters-header .filter-category li:not(:last-of-type) { margin-right: 4rem; }
    .filters-header .filter-category li button { position: relative; }
    .filters-header .filter-category li button:hover { opacity: .7; }

    .filters-header .filter-category li button.active::after { content: ''; display: block; bottom: -1.1rem; height: .2rem; width: 100%; background-color: var(--white); }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
 
}



/* @group Filter Search
------------------------------------ */
.filters-header .filter-search {
    
}
.filters-header .filter-search .search {
    position: relative;
}
.filters-header .filter-search .icon-search {
    position: absolute;
    right: 0;
    bottom: .7rem;
    pointer-events: none;
}
.filters-header .filter-search .icon-search::after {
    content: url('../../img/layout/global/icon-search.svg');
}
.filters-header .filter-search input { 
    color: var(--alt-orange); 
    font-size: 1.6rem; 
    line-height: 1.6em; 
    letter-spacing: .03em; 
    padding: 0 0 .7rem; 
    border: unset;
    border-radius: 0;
    border-bottom: 1px solid var(--alt-orange); 
    height: unset;
    width: 100%; 
    padding-right: 2.1rem;
}
.filters-header .filter-search input::placeholder { 
    color: var(--alt-orange); 
}
@media only screen
and (min-width : 961px) {
    .filters-header .filter-search { 
        margin-left: 5.5rem; 
        width: 33rem;
    }
    .filters-header .filter-search .search input { 
        text-transform: uppercase; 
        height: 4rem;
        margin: 0 auto; 
        font-size: 1.8rem; 
        line-height: 1.5em; 
        letter-spacing: .07em;
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {  
}



/* @group Filter View
------------------------------------ */
.filters-group .filter-view span {
    text-transform: uppercase;
    color: var(--alt-orange);
    font-size: 1.5rem;
    letter-spacing: .07em;
}
.filters-header .filter-view ul { 
    background-color: var(--alt-orange); 
    border-radius: 10rem; 
    height: 4.5rem; 
    display: inline-flex; 
    align-items: center; 
    column-gap: 1rem; 
    padding: 0 1rem; 
}
.filters-header .filter-view ul li { 
    height: 3.4rem; 
    width: 3.4rem; 
    border-radius: 100%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--ivory); 
    background-color: var(--alt-orange); 
    transition: all .3s; 
}
.filters-header .filter-view ul li i { 
    font-size: 1.6rem; 
}
.filters-header .filter-view ul li i.icon-list { 
    font-size: 1.4rem; 
}
.filters-header .filter-view ul li:not(.active):hover { 
    color: var(--peach); 
}
.filters-header .filter-view ul li.active { 
    color: var(--orange); 
    background-color: var(--ivory); 
}
@media only screen
and (min-width : 961px) {
    .filters-header .filter-view {
        display: flex;
        align-items: center;
        column-gap: .75rem;
    }
    .filters-header .filter-view ul li { 
        cursor: pointer; 
    }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .filters-header .filter-view { 
        margin: 0 auto 4rem;
    }
}

/* @end */