.single-product-intro{
    >.container{
        margin-bottom: 60px;
        >.title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;
            >h1{
                color: var(--color-secondary-1);
            }
            >button{
                padding: 20px 94px;
                background-color: var(--color-primary-1);
                color: white;
                transition: color .3s;
                &:hover{
                    color: var(--color-secondary-4);
                }
            }
        }
        >.spec{
            display: flex;
            gap: 24px;
            align-items: start;
            >.img{
                aspect-ratio: 1;
                max-width: 384px;
                width: 35%;
                flex-shrink: 0;
                >img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
            >.content{
                flex-grow: 1;
                width: 100%;
                overflow: auto;
                >table{
                    table-layout: fixed;
                    width: 100%;
                    min-width: 444px;
                    >thead td{
                        padding: 8px;
                        background-color: var(--color-primary-1);
                        color: white;
                        text-align: center;
                        font-weight: 500;
                    }
                    >tbody{
                        td{
                            border-left: 1px solid var(--color-gray-4);
                            padding: 8px;
                            text-align: center;
                            vertical-align: middle;
                        }
                        td:first-child{
                            border-left: none;
                            font-weight: 500;
                        }
                        >tr:nth-child(even){
                            background-color: white;
                        }
                        >tr:nth-child(odd){
                            background-color: var(--color-gray-7);
                        }
                    }
                }
                >.tags{
                    display: flex;
                    gap: 24px;
                    flex-wrap: wrap;
                    margin-top: 40px;
                    >div{
                        display: flex;
                        gap: 8px;
                        align-items: center;
                        >svg{
                            flex-shrink: 0;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (width < 768px) {
    .single-product-intro > .container{
        >.title{
            gap: 60px;
            flex-direction: column;
            align-items: start;
            >button{
                order: -1;
                width: 100%;
            }
        }
        >.spec{
            flex-direction: column;
            align-items: center;
            >.img{
                width: 75%;
            }
        }
    }
}
@media screen and (width < 576px) {
    .single-product-intro > .container{
        >.title > button{
            padding: 16px 60px;
        }
    }
}

.single-product-swiper{
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 120px;
    .swiper{
        overflow-x: clip;
        overflow-y: visible;
        .swiper-slide{
            >div{
                aspect-ratio: 1;
                >img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    transform-origin: center;
                    opacity: 0.5;
                    transition: transform 1s, opacity 1s;
                }
            }
            &.swiper-slide-active > div > img{
                opacity: 1;
                transform: scale(1.32);
            }
        }
    }

    >.single-product-swiper-prev,
    >.single-product-swiper-next{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        >svg{
            width: 100%;
            height: 100%;
            color: var(--color-gray-5);
            transition: color 0.3s;
            &:hover{
                color: var(--color-primary-1);
            }
        }
    }
    >.single-product-swiper-prev{
        left: 44px;
    }
    >.single-product-swiper-next{
        right: 44px;
    }
}
@media screen and (width < 1024px) {
    .single-product-swiper{
        padding: 0 74px;
        >.single-product-swiper-prev,
        >.single-product-swiper-next{
            width: 40px;
            height: 40px;
        }
        >.single-product-swiper-prev{
            left: 24px;
        }
        >.single-product-swiper-next{
            right: 24px;
        }
    }
}
@media screen and (width < 768px) {
    .single-product-swiper .swiper .swiper-slide.swiper-slide-active > div > img{
        transform: scale(1.1);
    }
}
@media screen and (width < 576px) {
    .single-product-swiper{
        padding: 0 52px;
        .swiper .swiper-slide.swiper-slide-active > div > img{
            transform: scale(1);
        }
        >.single-product-swiper-prev,
        >.single-product-swiper-next{
            width: 20px;
            height: 20px;
        }
    }
}

.single-product-swiper-pagination{
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    >.bullet{
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 999px;
        border: 1px solid var(--color-primary-1);
        transition: background-color 1s;
        &.active{
            background-color: var(--color-primary-1);
        }
    }
}
@media screen and (width < 576px) {
    .single-product-swiper-pagination{
        gap: 16px;
    }
}