
/* Remove WooCommerce grid behavior */
.my-wc-slider ul.products,
.my-wc-slider .products {
    display: block !important;
}

/* Remove star rating div*/

.review-rating, .my-wc-slider .swiper-pagination, .my-wc-slider .ast-woo-product-category  {
    display: none !important;
}

/* Make WooCommerce product card fit inside slide */
.my-wc-slider .product {
    width: auto !important;
    float: none !important;
}

/* Swiper Slide FIX — LET SWIPER CONTROL WIDTH */
.my-wc-slider .swiper-slide {
    width: auto !important;
    height: auto !important;
    border: solid rgb(240, 165, 25) 2px;
    border-radius: 5px;
    padding: 5px;
}

.my-wc-slider .product a img {
    width: calc((100vw / 5) - 10px );
    height: calc((100vw / 5) - 10px );           /* adjust as you like */
    object-fit: contain;       /* keeps image centered & cropped */
    object-position: center;
    display: block;
}

.my-wc-slider .woocommerce-loop-product__title{
    max-width: calc((100vw / 5) - 10px );
    text-align: center;
    margin: auto;
    font-size: clamp(0.5rem, calc(0.5rem + 1vw), 1rem);
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.my-wc-slider span.price {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
}

.my-wc-slider .tip-add-brand_name, .my-wc-slider .sku_class1{
    display: none;
}

.my-wc-slider .add_to_cart_button{
    width: 100%;
    text-align: center;
}

/*-----------------correct the other plugin custom price and add to crt to felx column in slider---------------*/
.section-bkg-image-slider .new_add_to_cart_btn_and_price {
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

.section-bkg-image-slider .ps_input_label.ps_input_label_style, .section-bkg-image-slider .sku_class1, .section-bkg-image-slider .sku_class2{
    margin: auto !important;
    text-align: center;
}

@media screen and (max-width: 480px){

    .my-wc-slider .product a img {
        width: calc((100vw / 2.5) - 10px ); /*mofied to increase img size*/
        height: calc((100vw / 2) - 10px ) !important;    
        object-fit: contain;       /* keeps image centered & cropped */
        object-position: center;
        display: block;
    }

    .my-wc-slider .add_to_cart_button{
        width: calc((100vw / 3.5) - 10px );
        font-size: clamp(0.5rem, calc(0.5rem + 1vw), 1rem) !important;
        padding: 5px !important;
        text-align: center;
    }

    .my-wc-slider span.price{
        width: calc((100vw / 3.5) - 10px );
        font-size: clamp(0.5rem, calc(0.5rem + 1vw), 1rem) !important;
        display: inline-block;
        text-align: center;
    }

    .my-wc-slider .astra-shop-summary-wrap{
        display: flex;
        flex-direction: column;
    }

    .my-wc-slider .woocommerce-loop-product__title{
        max-width: calc((100vw / 3.5) - 10px );
        text-align: center;
        margin: auto;
        font-size: clamp(0.5rem, calc(0.5rem + 1vw), 1rem);
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    .my-wc-slider .ast-woo-product-category{
        display: none;
    }

    .my-wc-slider .swiper-button-next::after, .my-wc-slider .swiper-button-prev::after{
        font-size: 15px;
        font-weight: bold;
    }

}
    
/*---------category slider css-------------*/

.category-card{
    text-align:center;
    position: relative;
}

.category-card a{
    display: flex;
    height: 100%;
}

.category-card:hover .cat-overlay {
    background-color: transparent;
    transition: all 350ms ease;
    height: 0;
}

.category-card:hover h3{
    color: black;
}

.category-card .cat-overlay{
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.6;
    transition: all 350ms ease;
}

.categorySwiper .category-card img {
    width: calc((100vw / 5) - 10px );
    height: calc((100vw / 5) - 10px );           /* adjust as you like */
    object-fit: fill;       /* keeps image centered & cropped */
    object-position: center;
    display: block;
}

.category-card h3{
    position: absolute;
    margin-top:10px;
    font-size:14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.categorySwiper .swiper-slide {
    width: auto !important;
}


@media screen and (max-width:480px) {
    .categorySwiper .category-card img{
        width: calc((100vw / 2) - 10px ); /*mofied to increase img size*/
        height: calc((100vw / 2) - 10px ); 
        object-fit: fill;
        gap: 0px;   
        object-position: center;
        display: block;
    }
}

/*---------Product Fade slider css-------------*/

.productsFadeSwiper img {
    width: calc((100vw) - 10px );
    height: calc((100vw) - 10px );           /* adjust as you like */
    object-fit: fill;       /* keeps image centered & cropped */
    object-position: center;
    display: block;
}

.productsFadeSwiper h2{
    font-size: clamp(14px, calc(1.6vw + 2px), 1.2rem) !important;
}

.productsFadeSwiper .swiper-slide{
    position: relative;
}

@media screen and (min-width:480px) {
    .productsFadeSwiper{
        width: 50% !important;
    }
}