.allSellerDetail{
    .width{
        margin: auto;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        grid-gap: 1rem;
        .right{
            background: white;
            border-radius: 10px;
            padding: 1rem;
            .top{
                display: flex;
                justify-content: right;
                gap: 1rem;
                align-items: center;
                margin-bottom: 1rem;
                .pic{
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        height: 5rem;
                        width: 5rem;
                        object-fit: cover;
                    }
                }
                .names{
                    .name{
                        font-size: 1.5rem;
                        font-weight: 900;
                        color: black;
                    }
                    .count{
                        font-size: 1rem;
                        font-weight: 500;
                        color: black;
                    }
                }
            }
            p{
                font-size: 1rem;
                font-weight: 300;
                color: $text2;
                line-height: 2.5rem;
            }
            .options{
                display: flex;
                gap: 1rem;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                margin-top: 1rem;
                .option{
                    background: #eee;
                    border-radius: 5px;
                    padding: .5rem;
                    width: 8rem;
                    text-align: center;
                    i{
                        display: grid;
                        justify-content: center;
                        margin-bottom: .5rem;
                        svg{
                            width: 1.5rem;
                            height: 1.5rem;
                            fill: $text1;
                        }
                    }
                    .title2{
                        font-size: 1rem;
                        font-weight: 900;
                        color: $text2;
                        margin-bottom: .5rem;
                    }
                    .count{
                        font-size: 1rem;
                        font-weight: 900;
                        color: $green;
                    }
                }
                a{
                    display: grid;
                    background: $green !important;
                    i{
                        svg{
                            fill: white !important;
                        }
                    }
                    .title2{
                        color: white !important;
                    }
                    .count{
                        color: white !important;
                    }
                }
            }
        }
        .left{
            position: relative;
            height: 100%;
            .swiper {
                width: 700px;
            }

            .swiper-slide {
                width: 300px;
            }
            .swiper-slide {
                background-color: white;
                border: 2px solid $border1;
                border-radius: 10px;
                overflow: hidden;
                a{
                    display: grid;
                    padding: .5rem;
                    overflow: hidden;
                    height: 100%;
                    .pic{
                        display: grid;
                        justify-content: center;
                        img{
                            height: 13rem;
                            object-fit: contain;
                        }
                    }
                    .title3{
                        text-align: center;
                        font-size: 1rem;
                        font-weight: 700;
                        color: $text2;
                        margin: .5rem 0;
                        white-space: pre-line;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        box-orient: vertical;
                        -webkit-box-orient: vertical;
                        line-clamp: 2;
                        -webkit-line-clamp: 2;
                        height: 3rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .price{
                        text-align: center;
                        font-size: 1.2rem;
                        font-weight: 700;
                        color: black;
                    }
                    .addCart{
                        display: grid;
                        grid-template-columns: auto 1fr;
                        align-items: center;
                        grid-gap: .5rem;
                        font-size: .9rem;
                        font-weight: 700;
                        color: $text1;
                        background: #f5f5f5;
                        border-radius: 5px;
                        margin-top: 1rem;
                        i{
                            padding: .8rem;
                            border-radius: 5px;
                            background: $green;
                            display: grid;
                            align-items: center;
                            justify-content: center;
                            svg{
                                width: 1rem;
                                height: 1rem;
                                fill: white;
                            }
                        }
                    }
                }
            }
        }
    }
    @media (max-width: 930px) {
        .width{
            display: block;
            .right{
                padding: .5rem;
                .top{
                    gap: .5rem;
                    .pic{
                        img{
                            height: 4rem;
                            width: 4rem;
                        }
                    }
                    .names{
                        .name{
                            font-size: 1rem;
                        }
                        .count{
                            font-size: .8rem;
                        }
                    }
                }
                p{
                    font-size: .8rem;
                    line-height: 2rem;
                }
                .options{
                    display: grid;
                    grid-template-columns: repeat(2,1fr);
                    gap: .5rem;
                    margin-top: .5rem;
                    .option{
                        width: auto;
                        i{
                            display: grid;
                            justify-content: center;
                            margin-bottom: .5rem;
                            svg{
                                width: 1.5rem;
                                height: 1.5rem;
                                fill: $text1;
                            }
                        }
                        .title2{
                            font-size: .8rem;
                            margin-bottom: .5rem;
                        }
                        .count{
                            font-size: .9rem;
                        }
                    }
                    a{
                        display: grid;
                        background: $green !important;
                        i{
                            svg{
                                fill: white !important;
                            }
                        }
                        .title2{
                            color: white !important;
                        }
                        .count{
                            color: white !important;
                        }
                    }
                }
            }
            .left{
                display: none;
            }
        }
    }
}
