/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.featured-products-carousel-wrapper,
.chosen-products-carousel-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 50px auto;
    padding: 5px 0;
}

.featured-products-carousel-wrapper ul.products li.product {
    max-width: 470px;
}

.chosen-products-carousel-wrapper ul.products li.product {
    max-width: 350px;
}

.featured-products-carousel-wrapper .owl-carousel .owl-dots,
.chosen-products-carousel-wrapper .owl-carousel .owl-dots {
    text-align: center;
    border-radius: 2px;
    margin-top: 30px;
}
.featured-products-carousel-wrapper .owl-carousel .owl-dots .owl-dot{
    height: 3px;
    background: var(--gray1);
}
.chosen-products-carousel-wrapper .owl-carousel .owl-dots .owl-dot {
    height: 3px;
    background: var(--white);
}
.featured-products-carousel-wrapper .owl-carousel .owl-dots .owl-dot:first-child,
.chosen-products-carousel-wrapper .owl-carousel .owl-dots .owl-dot:first-child {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.featured-products-carousel-wrapper .owl-carousel .owl-dots .owl-dot:last-child,
.chosen-products-carousel-wrapper .owl-carousel .owl-dots .owl-dot:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.featured-products-carousel-wrapper .owl-carousel .owl-dots .owl-dot.active {
    background: var(--orange1);
}
.chosen-products-carousel-wrapper .owl-carousel .owl-dots .owl-dot.active {
    background: var(--brown);
}

@media only screen and (max-width: 1280px) {
    .featured-products-carousel-wrapper,
    .chosen-products-carousel-wrapper {
        margin: 35px auto;
    }
}

@media only screen and (max-width: 1024px) {
    .featured-products-carousel-wrapper ul.products li.product, .chosen-products-carousel-wrapper ul.products li.product {
        max-width: 100%;
    }
    .featured-products-carousel-wrapper .owl-carousel .owl-dots, .chosen-products-carousel-wrapper .owl-carousel .owl-dots {
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
}