product-slider{
    position: relative;
    --padding-vertical:50px;
    --padding-horizontal:3vw;
    --pagination-color:217, 217, 217;
    --swiper-navigation-sides-offset:-50px;
    --pc-height:100vh;
    --mobile-height:90vh;
    width:100%;
    display: flex;
    align-items: center;
    color:var(--color-text);
    overflow: hidden;
}

product-slider .product-slider-header,
product-slider .product-slider-box{
    position: absolute;
    z-index: 2;
}
product-slider .product-slider-header{
    top: calc(var(--padding-vertical) * 2);
    left: var(--padding-horizontal);
}
product-slider .product-slider-box{
    right: var(--padding-horizontal);
    display: flex;
    max-height:70%;
    transform: translateY(-20px);
}

product-slider .product-slider-item{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
product-slider .product-slider-item-textarea{
    position: absolute;
    width:100%;
    padding:calc(var(--padding-vertical) * 4) var(--padding-horizontal);
    display: grid;
    gap:26px;
}
product-slider .product-slider-item-media{
    width:100%;
    height: var(--pc-height);
}
product-slider .product-slider-swiper{
    width:100%;
}
product-slider .swiper-pagination{
    --padding-vertical:80px;
    bottom:var(--padding-vertical) !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap:20px;
    padding:0 var(--padding-horizontal);
    align-items: baseline;
}

product-slider .swiper-pagination-bullet{
    width:100%;
    height:auto;
    background-color: transparent;
    border-radius:0;
    display: grid;
    justify-items: start;
    gap:12px;
    --swiper-pagination-bullet-inactive-opacity:1;
}
product-slider .interval{
    width:100%;
    height:2px;
    background-color: rgba(var(--pagination-color),0.3);
}
product-slider .interval .line{
    display: block;
    width:0%;
    height: 100%;
    background-color: rgba(var(--pagination-color),1);
}
product-slider .swiper-pagination-bullet-active .interval .line{
    transition: var(--delay-s,0s) all linear;
    width:100%;
}

product-slider .swiper-button::after{
    display: none;
}
product-slider .swiper-button{
    width:55px;
    height: 55px;
}
product-slider .product-slider-box{
    max-width:40vh
}
product-slider .product-slider-box a{
    color:#000 !important;
    
}
product-slider .product-mobile{
    display: flex;
    flex-direction: column;
    gap:30px;
}
product-slider .product-slide-info{
    order:-1;
}
product-slider .product-slider-box .box-swiper{
    width:100%;
    background-color: #FAF4F0;
    border-radius:10px;
}
product-slider .product-slider-box .swiper-slide{
    padding:20px;
}
product-slider .product-slider-box .swiper-slide button{
    width:100%;
}
product-slider .product-slider-box .product-price{
    opacity: 0.7;
}
product-slider .swiper-control{
    position:absolute;
    width:100%;
    align-self: center;
}
product-slider .swiper-control svg path{
    stroke:#fff;
}
product-slider .pagination-text{
    text-align: left;
}
product-slider .product-slide-image{
    max-width:80%;
    align-self: center;
}
@media(max-width:1200px){
    product-slider .product-slider-box{
        max-width:30vh
    }
}
@media(max-width:959px){
    product-slider{
        position: relative;
        --padding-vertical:30px;
        --padding-horizontal:20px;
        --pagination-color:217, 217, 217;
        --swiper-navigation-sides-offset:-50px;
    }
    product-slider .product-slider-item{
        justify-content: flex-start;
    }
    product-slider .product-slider-item-media{
        height: var(--mobile-height);
    }
    product-slider .product-slider-box{
        bottom: 50px;
        right:auto;
        padding-left: var(--padding-horizontal);
        padding-right: var(--padding-horizontal);
        width: 100%;
        max-width: 100%;
        transform: translateY(0);
    }
    product-slider .pagination-text,
    product-slider .pagination-index,
    product-slider .swiper-control,
    product-slider product-card{
        display: none;
    }
    product-slider .product-slider-box .swiper-slide{
        padding:10px;
        
    }
    product-slider .product-slider-box .swiper-wrapper{
        display: grid !important;
        grid-auto-flow: column;
    }
    product-slider .product-mobile{
        gap:10px;
        flex-direction: row;
    }
    product-slider .product-slide-image{
        max-height:120px;
        aspect-ratio: 1 / 1;
    }
    product-slider .product-slide-info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        order:0;
    }
    product-slider .add-to-card{
        display: none;
    }
    product-slider .swiper-pagination{
        --padding-vertical:30px;
    }
}