/* START Default Styles */
.carousel-container {
    --_spacer: 10px;
    --_grid-width: 1400px;
    --_container-padding: 40px;
    --_col-count: 7;
    --_item-width: calc( (var(--_grid-width) - (var(--_spacer) * (var(--_col-count) - 1))) / (var(--_col-count))) ;
    --_arrow-top-position: 25%;

    position: relative;
    padding: var(--_container-padding) 3vw;
    max-width: calc(var(--_grid-width) + 6vw);
    margin: 0 auto;
}
.carousel-container.six-col {
    --_col-count: 6;
}
.carousel-container.three-col {
    --_col-count: 5;
}

.carousel-title {
    font: normal normal normal 18px/24px Lato;
    letter-spacing: 0px;
    color: #222222;
    text-transform: uppercase;
}

.carousel-grid {
    display: grid;
    gap: var(--_spacer);
    grid-auto-flow: column;
    grid-auto-columns: var(--_item-width);

    max-width: var(--_grid-width);

    overflow-x: scroll;
}
/* Hide scrollbar for Chrome, Safari and Opera  */
.carousel-grid::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.carousel-grid {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.carousel-item {
    padding: 0 var(--_spacer) var(--_spacer);
    background-color: #FFF;
    border-radius: 5px;

    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    gap: var(--_spacer);
    align-items: flex-start;
}
.carousel-item.blank {
    opacity: .5;
    display: none;
}

.carousel-item h2 {
    margin: 0;
}
.carousel-item h2 a {
    font-size: 16px;
    line-height: 19px;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.carousel-item .reviews-wrap {
    display: flex;
    gap: var(--_spacer);
    align-items: center;
}

.carousel-item .item-actions {
    display: flex;
    flex-direction: column;
    gap: calc(var(--_spacer) / 2);
    align-items: flex-start;
}

.carousel-arrow {
    background: transparent radial-gradient(closest-side at 39% 36%, #FFFFFF 0%, #FEFEFE 42%, #F7F7F7 100%) 0% 0% no-repeat padding-box;
    box-shadow: 1px 2px 3px #0000003d;
    border: solid 2px #f3f3f3;
    border-radius: 50%;
    padding: 6px;
    opacity: 0.8;

    width: 40px;
    height: 40px;

    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
}

[data-paged=false] .carousel-arrow {
    display: none;
}

.carousel-arrow.end {
    opacity: .2;
}
.carousel-arrow.arrow-prev {
    left: calc(3vw - 20px);
    top: var(--_arrow-top-position);
}
.carousel-arrow.arrow-next {
    right: calc(3vw - 20px);
    top: var(--_arrow-top-position);
}
.carousel-arrow.arrow-prev:before,
.carousel-arrow.arrow-next:before {
    font-family: iCons;
    content: 'ì';
    font-size: 20px;        
    color: rgba(0,0,0,0.4);
    padding: 0 1px 0 0;
}
.carousel-arrow.arrow-next:before {
    content: 'í';
    padding: 0 0 0 4px;
}

@media screen and (min-width: 768px) {
    .carousel-grid {
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }
    .carousel-item.blank {
        display: block;
    }
    
    .carousel-item:first-child {
        scroll-snap-align: start !important;
    }
    .carousel-item:last-child {
        scroll-snap-align: end !important;
    }
    
    .carousel-arrow {
        display: flex;
    }
}
@media screen and (min-width: 1490px) {
    .item-max .carousel-arrow {
        display: none;
    }
}
/* END Default Styles */


/* Start Muli-Col Media Queries */
/*---- scroll snap for 7 col */
@media screen and (min-width: 768px) and (max-width: 845px) {
    .col7 .carousel-item:nth-child(3n+4) {
        scroll-snap-align: start;
    }
}
@media screen and (min-width: 846px) and (max-width: 1062px) {
    .col7 .carousel-item:nth-child(4n+5) {
        scroll-snap-align: start;
    }
}
@media screen and (min-width: 1063px) and (max-width: 1275px) {
    .col7 .carousel-item:nth-child(5n+6) {
        scroll-snap-align: start;
    }
}
@media screen and (min-width: 1276px) and (max-width: 1489px) {
    .col7 .carousel-item:nth-child(6n+7) {
        scroll-snap-align: start;
    }
}
@media screen and (min-width: 1490px) {
    .col7 .carousel-item:nth-child(7n+1) {
        scroll-snap-align: start;
    }
}
/*---- scroll snap for 12 col */
@media screen and (min-width: 768px) and (max-width: 867px) {
    .col12 .carousel-item:nth-child(6n+7) {
        scroll-snap-align: start;
    }
}
@media screen and (min-width: 868px) and (max-width: 989px) {
    .col12 .carousel-item:nth-child(7n+8) {
        scroll-snap-align: start;
    }
}
@media screen and (min-width: 990px) and (max-width: 1113) {
    .col12 .carousel-item:nth-child(8n+9) {
        scroll-snap-align: start;
    }
}
@media screen and (min-width: 1114px) and (max-width: 1239px) {
    .col12 .carousel-item:nth-child(9n+10) {
        scroll-snap-align: start;
    }
}
@media screen and (min-width: 1240px) and (max-width: 1365px) {
    .col12 .carousel-item:nth-child(10n+11) {
        scroll-snap-align: start;
    }
}
@media screen and (min-width: 1366px) and (max-width: 1489px) {
    .col12 .carousel-item:nth-child(11n+12) {
        scroll-snap-align: start;
    }
}
@media screen and (min-width: 1490px) {
    .col12 .carousel-item:nth-child(12n+13) {
        scroll-snap-align: start;
    }
}
/* END Muli-Col Media Queries */