.filter-row {
    display: flex;
    gap: calc(10 * var(--rpx));
    font-size: calc(18rem / 16);
}

.search-ctn {
    background-color: rgba(255, 255, 255, .2);
    height: calc(60em / 18);
    border-radius: calc(30em / 18);
    position: relative;
    flex: 0 0 calc(870% / 16 - 10 * var(--rpx));
}

.search-ctn input {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    font-size: 1em;
    padding-left: calc(24em / 18);
    padding-right: calc(150em / 18);
    border-radius: calc(30em / 18);
    outline: none;
    color: #fff;
}


.search-ctn input::placeholder {
    color: rgba(255, 255, 255, .7);
}

.search-ctn input:focus {
    background-color: #fff;
    color: #000;
}

.search-ctn button {
    position: absolute;
    top: calc(10 * var(--rpx-50));
    right: calc(10 * var(--rpx-50));
    height: calc(100% - 20 * var(--rpx-50));
    border-radius: calc((60em / 18 - 20 * var(--rpx-50)) / 2);
    font-size: inherit;
    font-family: inherit;
    outline: none;
}

.search-ctn button::after {
    --glow-color: #BE1D2380;
}

.filter-row {
    position: relative;
}

.filter-dropdown {
    background-color: rgba(255, 255, 255, .2);
    height: calc(60em / 18);
    border-radius: calc(30em / 18);
    position: relative;
    flex: 0 0 calc(490% / 16 - 10 * var(--rpx));
    padding-left: calc(30rem / 18);

    display: flex;
    align-items: center;
    cursor: pointer;
    transition: .2s;
}

.filter-dropdown::after {
    content: "";
    font-size: inherit;
    width: calc(12em / 18);
    height: calc(14em / 18);
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(24em / 18);
    margin: auto;
    background: url("../images/icon_arr_down.svg") center/contain no-repeat;
    filter: url(#white-overlay);
}

.filter-dropdown:hover {
    background-color: rgba(255, 255, 255, .4);
}

.filter-dropdown.active {
    background-color: #fff;
    color: #000;
}

.filter-dropdown.active::after {
    filter: url(#crimson-overlay);
}

.btn-clear {
    width: calc(240% / 16);
    flex: 0 0 auto;
    cursor: pointer;
    height: calc(60em / 18);
    border-radius: calc(30em / 18);
    transition: .2s;
}

.filters-panel {
    position: absolute;
    top: calc(100% + 10 * var(--rpx));
    width: 100%;
    left: 0;
    background-color: #fff;
    color: rgba(0, 0, 0, .7);
    padding: calc(24 * var(--rpx)) calc(40 * var(--rpx)) calc(40 * var(--rpx));
    border-radius: calc(30 * var(--rpx));
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    transform: scale(.75);
    transform-origin: 70% top;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
}

.filters-panel.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: .6s cubic-bezier(0.15, 1, 0.336, 1);
}

.filters .wrapper {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding-bottom: calc(40 * var(--rpx));
}

.num-info {
    font-size: calc(24 * var(--rpx));
    padding-top: calc(20 * var(--rpx));
    padding-bottom: calc(20 * var(--rpx));
    border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.current-filters {
    font-size: calc(18rem / 16);
    line-height: calc(30em / 18);
    display: flex;
    margin-top: calc(40 * var(--rpx));
    gap: calc(4em / 18);
    flex-wrap: wrap;
}

@keyframes filterTagAdded {
    0%{
        transform: scale(.5);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}

.current-filters .filter-tag{
    background-color: var(--theme-crimson);
    font-weight: 500;
    color: #fff;
    font-size: calc(14rem / 16);
    padding-left: calc(10em / 14);
    height: calc(30em / 14);
    border-radius: calc(15em / 14);

    display: flex;
    align-items: center;
    padding-right: calc(4em / 14);
    gap: calc(10em / 14);
    cursor: pointer;
    transform-origin: calc(7em / 14) center;

    animation: filterTagAdded .8s cubic-bezier(0.15, 1, 0.336, 1);
}

.current-filters .filter-tag:hover{
    background-color: var(--theme-red);
}

.current-filters .filter-tag::after{
    content: "";
    width: calc(24em / 14);
    height: calc(24em / 14);
    margin-bottom: calc(1em / 14);
    background: url("../images/icon_tag_remove.svg") center/contain no-repeat;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-header .right {
    display: flex;
    gap: calc(10 * var(--rpx));
    font-size: calc(14rem / 16);
}

.panel-header .btn-more {
    width: calc(160 * var(--rpx));
}

.panel-header .btn-close {
    width: calc(46em / 14);
    height: calc(46em / 14);
    border-radius: 50%;
    background-color: #1c1c1c;
    position: relative;
    cursor: pointer;
    transition: .2s;
}

.panel-header .btn-close:hover {
    background: var(--theme-red);
}

.panel-header .btn-close::after {
    content: "";
    width: 60%;
    height: 60%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: url("../images/icon_close.svg") center/contain no-repeat;
}

.panel-header .left {
    font-size: calc(24 * var(--rpx));
    color: #000;
}

.panel-body {
    --column: 4;
    --gap-x: calc(30 * var(--rpx));
    --gap-y: calc(60 * var(--rpx));
    display: flex;

    margin-top: calc(20 * var(--rpx));
    overflow: auto;
    max-height: calc(100vh - var(--header-height-min) - var(--inner-nav-min) - 320 * var(--rpx));
}


.panel-body::-webkit-scrollbar {
    width: 6px;
    background: #0002;
    border-radius: 1px;
}

.panel-body::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgb(0, 0, 0, .5);
}

.panel-body::-webkit-scrollbar-track {
    background: transparent;
}

.filter-group {
    border-top: 1px solid rgba(0, 0, 0, .1);
    padding-top: calc(10 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.filter-name {
    font-weight: 500;
    color: #000;
    font-size: calc(14rem / 16);
    margin-bottom: calc(16 * var(--rpx));
    padding-left: .5em;
}

.filter-option {
    font-size: 1rem;
    line-height: 1.5em;
    padding: .25em .5em;
    border-radius: 1em;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: .5em;
    transition: background-color .2s, transform cubic-bezier(0.15, 1, 0.336, 1) .5s;
}
.filter-option:hover{
    background-color: #BE1D2311;
}

.filter-option i.tick {
    width: 1em;
    height: 1em;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .2);
    position: relative;
}

.filter-option.active i.tick {
    background-color: var(--theme-crimson);
    border-color: var(--theme-crimson);
}

.filter-option .text{
    word-break: break-all;
}

.filter-option i.tick::after{
    content: "";
    width: calc(9em / 16);
    height: calc(6em / 16);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: url("../images/icon_tick.svg") center/contain no-repeat;
}

.filter-option:active{
    transform: scale(.9);
    transition: 0s;
    background-color: #BE1D2322;
}

section.table{
    background-color: #fff;
    padding-top: calc(40 * var(--rpx));
    padding-bottom: calc(160 * var(--rpx));
    font-size: calc(14rem / 16);
}

.table-row{
    display: flex;
}

.table-cell{
    border-right: 1px solid rgba(0, 0, 0, .1);
    padding: calc(12 * var(--rpx)) calc(8 * var(--rpx)) calc(12 * var(--rpx)) calc(12 * var(--rpx));
}

.table-cell:last-of-type{
    border-right: none;
}

.table-row.header{
    background-color: #EFEFEF;
}

.table-row.product{
    background-color: #F5F5F5;
    cursor: pointer;
    min-height: calc(80 * var(--rpx));
}

.table-row.product.even{
    background-color: #FAFAFA;
}

.header .table-cell{
    word-break: break-word;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    font-weight: 500;
    color: #000;
    z-index: 290;
}

.product .table-cell{
    display: flex;
    align-items: center;
}

.product .table-cell:nth-of-type(1){
    color: var(--theme-crimson);
    font-size: 1rem;
}

.product .table-cell:nth-of-type(1)::before{
    content: "";
    width: .36em;
    height: .72em;
    background: url("../images/icon_angle_right_white.svg") center/contain no-repeat;
    filter: url(#crimson-overlay);
    margin-right: .16em;
}

.table-row.product:hover{
    background-color: var(--theme-crimson);
    color: #fff;
}
.product:hover .table-cell:nth-of-type(1){
    color: #fff;
}
.product:hover .table-cell:nth-of-type(1)::before{
    filter: url(#white-overlay);
}

.product .table-cell:nth-of-type(2){
    word-break: break-word;
}

.product .table-cell .highlight{
    background-color: #ffff00;
}
.product:hover .table-cell .highlight{
    color: #000;
}

.column-filter-dropdown{
    position: absolute;
    left: 0;
    top: calc(100% - var(--rpx));
    background-color: #fff;
    border-radius: calc(20 * var(--rpx));
    box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
    transform-origin: left top;
    transform: scale(.75);
    opacity: 0;
    visibility: hidden;
    font-weight: normal;

    width: calc(320 * var(--rpx));
    padding: calc(12 * var(--rpx));
    transition: opacity .2s;
}

.column-filter-dropdown.anchor-reverted{
    left: unset;
    right: 0;
    transform-origin: right top;
}

.column-filter-dropdown.active{
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .3s, transform .5s cubic-bezier(0.15, 1, 0.336, 1);
}

.column-filter-dropdown .btn-ctn{
    display: flex;
    gap: calc(10 * var(--rpx));
    margin-top: calc(20 * var(--rpx));
}

.column-filter-dropdown .btn-more{
    width: calc(50% - 5 * var(--rpx));
    height: calc(40em / 14);
    border-radius: calc(20em / 14);
}

.column-filter-dropdown .filter-group{
    padding-top: 0;
    border-top: none;
    height: calc(280 * var(--rpx));
    overflow: auto;
}

.column-filter-dropdown .filter-group::-webkit-scrollbar {
    width: 4px;
    background: #0002;
    border-radius: 1px;
}

.column-filter-dropdown .filter-group::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: rgb(0, 0, 0, .5);
}

.column-filter-dropdown .filter-group::-webkit-scrollbar-track {
    background: transparent;
}

.filter-info{
    display: flex;
    align-items: center;
    gap: calc(4 * var(--rpx));
    margin-top: calc(12 * var(--rpx));
}

.filter-num{
    color: var(--theme-crimson);
}

i.btn-filter{
    width: calc(32 * var(--rpx));
    height: calc(32 * var(--rpx));
    border-radius: calc(6 * var(--rpx));
    position: relative;
    cursor: pointer;
    transition: .2s;
}

i.btn-filter::after{
    content: "";
    width: calc(18 * var(--rpx));
    height: calc(12 * var(--rpx));
    background: url("../images/icon_filter.svg") center/contain no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

i.btn-filter:hover{
    background-color: rgba(0, 0, 0, .1);
}

i.btn-filter:active{
    transition: 0s;
    transform: scale(.9);
}

i.btn-filter.active{
    transform: scale(1);
    background-color: var(--theme-crimson);
    transition: background-color 0s, transform .5s cubic-bezier(0.15, 1, 0.336, 1);
}

i.btn-filter.active::after{
    filter: url(#white-overlay);
}

.product .table-cell{
    word-break: break-all;
}

.table-cell:nth-of-type(1){flex: 0 0 calc(190% / 16);}
.table-cell:nth-of-type(2){flex: 0 0 calc(160% / 16);}
.table-cell:nth-of-type(3){flex: 0 0 calc(140% / 16);}
.table-cell:nth-of-type(4){flex: 0 0 calc(120% / 16);}
.table-cell:nth-of-type(5){flex: 0 0 calc(150% / 16);}
.table-cell:nth-of-type(6){flex: 0 0 calc(130% / 16);}
.table-cell:nth-of-type(7){flex: 0 0 calc(150% / 16);}
.table-cell:nth-of-type(8){flex: 0 0 calc(170% / 16);}
.table-cell:nth-of-type(9){flex: 0 0 calc(160% / 16);}
.table-cell:nth-of-type(10){flex: 0 0 calc(110% / 16);}
.table-cell:nth-of-type(11){flex: 0 0 calc(120% / 16);}

section.table .product-table+.btn-ctn{
    margin-top: calc(60 * var(--rpx));
    display: flex;
    justify-content: center;
}

section.table .btn-show-all{
    font-weight: 500;
    color: #000;
    width: calc(240 * var(--rpx));
}

section.table .btn-show-all::after{
    content: "";
    width: calc(12em / 16);
    height: calc(14em / 16);
    position: absolute;
    top: 0;
    bottom: calc(2em / 16);
    margin: auto;
    right: calc(24em / 16);
    background: url("../images/icon_arr_down.svg") center/contain no-repeat;
}

section.table .btn-show-all:hover::after{
    filter: url(#white-overlay);
}

section.table .btn-show-all:hover{
    color: #ffff;
}

.product-table .no-content-hint{
    font-size: calc(18rem / 16);
    padding: calc(30 * var(--rpx));
    background-color: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, .5);
    min-height: calc(180 * var(--rpx));
}