/* part-1 */

.part-1{
    width: 100%;
    padding: 0 10%;
    display: flex;
    gap: 20px;
    margin: 3% 0;
}

.right-part-1{
    width: 20%;
    height: fit-content;
}

h2{
    font-family: 'Sunflower', sans-serif;
    font-weight: 900;
}

.right-part-1 .depm ul{
    margin: 20px 0;
}

.right-part-1 .depm ul li{
    margin: 15px 0;
}

.right-part-1 .price-bar{
    margin: 15% 0;
}

.left-part-1{
    width: 75%;
}

.left-part-1 .shop-head-bottom-border{
    width: 11.5%;
    border: 2px solid var(--main-color);
}

/* end part-1 */

/* part-2 */

.part-2{
    width: 100%;
    padding: 0 10%;
    display: flex;
    gap: 20px;
    margin: 3% 0;
}

.part-2 .left-part-2{
    width: 20%;
}

.part-2 .left-part-2 .colors{
    margin: 0 0 10% 0;
}

.part-2 .left-part-2 .colors div{
    display: grid;
    grid-template-columns: auto auto;
    margin: 2% 0;
    width: 100%;
}

.part-2 .left-part-2 .colors div p{
    cursor: pointer;
    margin: 0;
    width: 70px;
}

.part-2 .left-part-2 .colors div p i{
    font-size: 0.8rem;
    border-radius: 50%;
    background: #fff;
}

.part-2 .left-part-2 .colors div p:nth-child(2) i{
    color: #d62d2d;
    background: #d62d2d;
}

.part-2 .left-part-2 .colors div p:nth-child(3) i{
    color: blue;
    background: blue;
}

.part-2 .left-part-2 .colors div p:nth-child(4) i{
    color: grey;
    background: grey;
}

.part-2 .left-part-2 .colors div p:nth-child(5) i{
    color: #000000;
    background: #000000;
}

.part-2 .left-part-2 .colors div p:nth-child(6) i{
    color: #3cc032;
    background: #3cc032;
}

.part-2 .left-part-2 .colors div p span{
    font-size: 0.9rem;
    padding: 0 10px;
}

.part-2 .left-part-2 .p-size div{
    display: grid;
    grid-template-columns: auto auto;
}

.part-2 .left-part-2 .p-size div p{
    margin: 0;
    width: 100px;
    background: #f5f5f5;
    font-size: 0.75rem;
    text-align: center;
    margin: 2px;
    cursor: pointer;
    padding: 7px;
}

.part-2 .right-part-2{
    width: 75%;
}

.part-2 .right-part-2-head{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.part-2 .right-part-2-head .sort-by-flex{
    display: flex;
    gap: 10px;
}

.part-2 .right-part-2-head .sort-by-flex p{
    color: var(--text-color);
}

.part-2 .right-part-2-head .sort-by-flex > div{
    width: 90px;
    text-align: center;
    position: relative;
}

.part-2 .right-part-2-head .sort-by-flex > div #dftbtn{
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Sunflower', sans-serif;
    font-weight: 900;
    font-size: 1rem;
}

.part-2 .right-part-2-head .sort-by-flex > div #dftbtn i{
    font-size: 0.7rem;
    font-weight: lighter;
}

.part-2 .right-part-2-head .sort-by-flex > div #dftbtn-con{
    width: 100%;
    border: var(--border);
    border-radius: 1px;
    top: 30px;
	transition: all .3s ease-in-out;
    transform-origin: top;
    transform: scaleY(0);
    position: absolute;
    opacity: 0;
}

.part-2 .right-part-2-head .sort-by-flex > div #dftbtn-con.dftbtn-con-active{
    opacity: 1;
    transform: scaleY(1);
}

.part-2 .right-part-2-head .sort-by-flex > div > div .dftinbtn{
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
}

.part-2 .right-part-2-head .sort-by-flex > div > div .dftinbtn:hover{
    background: #f5f5f5;
}

.part-2 .right-part-2-head .sort-by-flex > div > div .dftinbtn.dftbtn-active{
    font-family: 'Sunflower', sans-serif;
    font-weight: 900;
}

.part-2 .right-part-2-head .pd-no{
    font-family: 'Sunflower', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
}

.part-2 .right-part-2-head .pd-no span{
    font-weight: normal;
    color: var(--text-color);
    font-size: 1rem;
}

.part-2 .right-part-2-head #right-part-2-head-btns i{
    font-size: 1.5rem;
    color: var(--text-color);
    margin-left: 20px;
    cursor: pointer;
}

.part-2 .right-part-2-head #right-part-2-head-btns i:hover{
    color: var(--main-color);
}

.page-num{
    display: flex;
    gap: 20px;
    margin: 3% 0;
}

.page-num a{
    width: 34px;
    padding: 9px 12px;
    height: fit-content;
    background: none;
    border-radius: 1px;
    color: var(--text-color);
    border: var(--border);
    font-family: 'Sunflower' sans-serif;
    font-weight: 900;
    font-size: 0.7rem;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border 0.2s ease-in-out;
}

.page-num a.arr{
    font-size: 1.35rem;
    height: 40px;
    padding: 0 5px;
    width: 34px;
    height: 36px;
}

.page-num a:hover{
    background: var(--main-color);
    color: #fff;
}

/* end part-2 */