product-compare-tabs{
    --padding-block:30px;
    --padding-inline:40px;
    --block-padding:var(--padding-block) var(--padding-inline);
}
product-compare-tabs .product-compare-tabs-container{
    width: 100%;
    margin-top: 60px;
}
product-compare-tabs .tabs-header{
    position: relative;
    width: 100%;
    margin-bottom: 40px;
}

product-compare-tabs .tabs-header::after{
    display: block;
    content: '';
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 1px;
    background-color: rgba(var(--color-entry-line),0.2);
}

product-compare-tabs .tabs-header-item{
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    position: relative;
    cursor: pointer;
}
product-compare-tabs .tabs-header-item.active::after{
    display: block;
    content: '';
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 1px;
    background-color: rgba(var(--color-entry-line));
}
product-compare-tabs .item-icon{
    width: 80px;
    height: 80px;
    display: flex;
}

product-compare-tabs .product-compare-tab{
    display: none;
    flex-direction: column;
    gap: 40px;
}

product-compare-tabs .product-compare-tab.active{
    display: flex;
}

product-compare-tabs .compare-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
product-compare-tabs .product-blocks{
    background-color: var(--product-grid-background-color);
    padding:var(--block-padding);
}

product-compare-tabs .table-title-grid{
    cursor: pointer;
}
product-compare-tabs .table-expand.close .table-title svg{
    transform: rotate(180deg);
}
product-compare-tabs .table-expand.close .table-body{
    display: none;
}
product-compare-tabs .table-title-grid .table-title{
    padding-inline: var(--padding-inline);
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    padding-block: 12px;
    align-items: center;
}

product-compare-tabs .table-body{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
product-compare-tabs .product-compare-tabs-block{
    background-color: var(--block-background-color);
}

product-compare-tabs .block-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--block-padding);
    cursor: pointer;
}

product-compare-tabs .block-body{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-inline: var(--padding-inline);
    padding-bottom: var(--padding-block);
}
product-compare-tabs .product-compare-tabs-block.close .block-title svg{
    transform: rotate(180deg);
}
product-compare-tabs .product-compare-tabs-block.close .block-body{
    display: none;
}

product-compare-tabs .spec-item{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    padding-inline: 20px;
}

@media(max-width:959px){
    product-compare-tabs {
        --padding-block: 5.3333vw;
        --padding-inline: 2.6667vw;
    }
    product-compare-tabs .product-compare-tab{
        overflow: auto;
    }
    product-compare-tabs .product-compare-tab>*{
        width: 150%;
    }
    product-compare-tabs .tabs-header-item{
        flex-direction: column-reverse;
        gap: 1.8667vw;
    }
    product-compare-tabs .item-icon{
        width: 10.6667vw;
        height: 10.6667vw;
    }
    product-compare-tabs .product-compare-tab{
        gap: 5.3333vw;
    }
    product-compare-tabs .table-title-grid .table-title,
    product-compare-tabs .block-title{
        max-width: 90vw;
        position: sticky;
        left: 0;
    }
}