/* Siblings */

#complementary-addons .carousel-sibling {
    width:40px;
    height:40px;
    font-size: 14px;
}

/* Go to product page */

#complementary-addons .go-to-product-page {
    position:absolute;
    right: 0;
    z-index:2;
    margin: 5px;
}

/* Carousel */

#complementary-addons{
    display: flex;
    align-items: center;
    justify-content: center;
}

.complementary-addons-carousel {
    width: 100%;
}

/* Carousel items */

.carousel-item-content {
    display: flex;
    flex-direction: column;
}

.carousel-item-content-container{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.complementary-addons-carousel .carousel-item {
    opacity: 1 !important;
    z-index: 1 !important;
}

.select-complementary-addon{
    width: 100%;
    height: 100%;
}

.complementary-addon-content{
    flex-grow: 1;
}

/* WIDTHS */

.complementary-addons-carousel:not(.single) {
    width: calc(100% - 104px); /* leave space for siblings + margin = (2*40 + 2*12) */
    margin: 0 12px;
}

.complementary-addons-carousel.single {
    width: 100%;
}

.complementary-addons-carousel .carousel-item {
    width: 100%;
}

@media screen and (max-width:525px){
    /* Small screens */
    .complementary-addons-carousel .carousel-item {
	width: 100%;
    }
    .complementary-addons-carousel.single {
	width: 100%;
    }
}
@media screen and (min-width:525px) and (max-width:600px){
    /* Act like only one item */
    .complementary-addons-carousel.single {
	width: 100%;
    }
    .complementary-addons-carousel.max-two {
	width: 100%;
    }

    /* Act like more items */
    .complementary-addons-carousel:not(.single):not(.max-two) .carousel-item {
	width: calc((100% - 20px) / 3);
    }
}
@media screen and (min-width:870px){
    /* Act like only one item */
    .complementary-addons-carousel.single {
	width: calc(100% / 3);
    }
    .complementary-addons-carousel.max-two {
	width: calc(100% / 3);
    }

    /* Act like more items */
    .complementary-addons-carousel:not(.single):not(.max-two) .carousel-item {
	width: calc((100% - 20px) / 3);
    }
}
@media screen and (min-width:1150px){
    .complementary-addons-carousel.full .carousel-item {
	width: calc((100% - 20px) / 5) !important;
    }
}