/*START PRODUCT PHOTO CAROUSEL*/
.tag-carousel {
    background: #fff;
    margin-bottom: 20px;
}

.js-carousel-product .tag-carousel-cell {
    width: 100%;
    margin-right: 10px;
}

.tag-carousel-cell-image {
    display: block;
    height: auto;
    aspect-ratio: 1/1;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.js-carousel-nav,
.js-carousel-product {
    visibility: hidden;
}

.js-carousel-nav {
    max-height: 80px;
}

    .js-carousel-nav .flickity-viewport, .js-carousel-nav .flickity-viewport .tag-carousel-cell {
        height: 80px;
    }

    .js-carousel-nav .tag-carousel-cell:before {
        font-size: 50px;
        line-height: 80px;
    }

    .js-carousel-nav .tag-carousel-cell.is-nav-selected {
        border-bottom: 1px solid #ccc;
    }
/*END PRODUCT PHOTO CAROUSEL*/

.tag-quickview-description {
    height: 200px;
}

/*START BREADCRUMBS*/
/*Hide algolia's hard-coded breadcrumb separator*/
.ais-Breadcrumb-separator {
display:none;
}

/*Apply custom algolia breadcrumb separator*/
.ais-Breadcrumb-item:not(:last-child)::after {
    content: ">";
    margin: 0 0.5rem; /* add space around only if separator is rendered */
    color: #666; /* optional styling */
}
/*END BREADCRUMBS*/

.tag-sortby-bar {
    background-color:#f0f0f0;
}

/*START CUSTOM BANNERS*/
.banner-container {
    position: relative;
    outline: 1px solid #ddd;
    outline-offset: -1px;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 15px
}

.banner-container img {
    display: block;
    max-width: 100%;
    height: auto;
    box-sizing: border-box
}

.banner-container .tile1, .banner-container .tile2, .banner-container .tile3, .banner-container .tile4 {
    float: left
}

#bannerB .tile1, #bannerB .tile2 {
    width: 50%
}

#bannerC .tile1 {
    width: 60%
}

#bannerC .tile2 {
    width: 40%
}

#bannerD .tile1 {
    width: 75%
}

#bannerD .tile2 {
    width: 25%
}

#bannerE .tile1 {
    width: 60%
}

#bannerE .tile2 {
    width: 40%
}

#bannerF .tile1 {
    width: 40%
}

#bannerF .tile2, #bannerF .tile3 {
    width: 30%
}

#bannerG .tile1, #bannerG .tile2, #bannerG .tile3, #bannerG .tile4 {
    width: 25%
}

    #bannerB .tile1 img, #bannerC .tile1 img, #bannerD .tile1 img, #bannerE .tile1 img, #bannerF .tile1 img, #bannerG .tile1 img, #bannerG .tile2 img, #bannerG .tile3 img {
        border-right: 1px solid #ddd
    }

#bannerE .tile2 img {
    border-bottom: 1px solid #ddd
}

#bannerF .tile3 img, #bannerG .tile4 img {
    border-left: 1px solid #ddd
}

@media(max-width: 991.98px) {
    .banner-container {
        display: none !important
    }
}
/*END CUSTOM BANNERS*/