/*
    [DEFAULT] = intro photo with one row of products
    .cmp-product-grid__tworows  = intro photo with two product rows
    .cmp-product-grid__sixup = 6 products one row
    .cmp-product-grid__fourup = 4 products with environment photos
*/


.cmp-product-grid {
    margin-top:44px;   
    margin-bottom:44px;   
}

@media (max-width:1024px) {
    .cmp-product-grid {
        margin-top:40px;   
        margin-bottom:40px;   
    }
}

.cmp-product-grid__content--5050 {
    display:flex;
    justify-content: space-between;
}

@media (max-width:1024px) {
    .cmp-product-grid__content--5050 {
        flex-direction:column;
    }
}

.cmp-product-grid__5050-left,
.cmp-product-grid__5050-right {
    width: calc(50% - 16px);
}

@media (max-width:1024px) {
    .cmp-product-grid__5050-left,
    .cmp-product-grid__5050-right {
        width: 100%;
    }
}

.cmp-product-grid__intro a {
    margin:24px 0 50px;
    font-weight:500;
    font-size:20px;
    line-height:25.94px;   
    display:block;
}

@media (max-width:1320px) {
  .cmp-product-grid__intro {
  padding-left: 20px;
  padding-right: 20px;
  }
}

.cmp-product-grid__introimg img {
    width: 100%;
}
@media (max-width:1024px) {
    .cmp-product-grid__introimg img {
        width: 100vw;
        margin: 40px -1em;
    }
    .cmp-product-grid__tworows .cmp-product-grid__introimg img {
        display:none;
    }
}    

.cmp-product-grid__mobile-intro-img {
    width: 100vw;
    margin: 40px -1em;
}
@media (min-width:1025px) {
    .cmp-product-grid__mobile-intro-img {
        display:none;
    }
}

.cmp-product-grid__intro--fourup.cmp-product-grid__intro,
.cmp-product-grid__intro--sixup.cmp-product-grid__intro {
    text-align:center;
}

.cmp-product-grid__intro h2 {
    font-weight:500;
    font-size:50px;
    line-height:55px;
    margin:0;
}

@media screen and ( max-width: 767px ) {
    .cmp-product-grid__intro h2 {
        font-size:40px;
        line-height:44px;
    }
}

.cmp-product-grid__intro p {
    font-size: 24px;
    font-weight: 300;
    line-height: 31px;
}

@media screen and ( max-width: 767px ) {
    .cmp-product-grid__intro p {
        font-size:20px;
        line-height: 25.56px;
    }
}

.cmp-product-grid__list {
    display:flex;
    justify-content: flex-start;
    grid-gap:32px;
}

.cmp-tabs .cmp-product-grid__list {
    grid-gap: 16px;
}

@media (max-width:767px) {
  .cmp-product-grid__list {
  padding-left: 20px;
  padding-right: 20px;
  }
  .cmp-tabs .cmp-product-grid__list {
      grid-gap: 16px;
  }
}

.cmp-product-grid__tworows .cmp-product-grid__list {
    flex-wrap: wrap;
}

.cmp-product-grid__sixup .cmp-product-grid__list {
    justify-content: center;
    flex-wrap: wrap;
}

.cmp-product-grid__sixup.cmp-product-grid__sixup--left .cmp-product-grid__list {
    justify-content: flex-start;
  }

@media screen and ( max-width: 767px ) {
    .cmp-product-grid__list {
        display:block;
    }
    
    .cmp-product-grid__no-carousel.cmp-product-grid__list {
        display:flex;
        flex-wrap: wrap;
    }
}

.cmp-product-grid__item {
    max-width: 190px;
    text-decoration:none;
    width: calc(33% - 8px);
}

.cmp-product-grid__fourup .cmp-product-grid__item {
    width: calc(25% - 32px);
    max-width:100%;
}

.cmp-product-grid__sixup .cmp-product-grid__item {
  max-width:201px;
  width:calc(16.666% - 16px);
  margin: 0 8px 16px 8px;
}


@media screen and ( max-width: 767px ) {
    .cmp-product-grid__sixup .cmp-product-grid__item,
    .cmp-product-grid__item {
       width: calc(80% - 16px);
       margin-right: 20px;
       max-width:100%;
    }
    
    .cmp-product-grid__no-carousel.cmp-product-grid__sixup .cmp-product-grid__item,
    .cmp-product-grid__no-carousel .cmp-product-grid__item {
        width: calc(50% - 10px);
        margin-right:0;
    }
    
    .cmp-product-grid__fourup .cmp-product-grid__item {
        width: calc(80% - 32px);
    }
}

.cmp-product-grid__item img {
    width: 100%;
}

.cmp-product-grid__item h4 {
    margin:8px 0 0 0;
    font-size: 20px;
    line-height: 22px;
}

.cmp-product-grid__item-text1 {
    font-size:20px;
    line-height:22px;
    font-weight:500;
}

p.cmp-product-grid__item-colors {
    color: #6D6C6F;
    margin:8px 0 0 0;
    font-size:16px;
    line-height:20.5px;
}

.cmp-product-grid__tworows p.cmp-product-grid__item-colors {
    margin: 8px 0 40px 0;
}

@media screen and ( max-width: 767px ) {
    .cmp-product-grid__tworows p.cmp-product-grid__item-colors {
        margin: 8px 0 0 0;
    }
    
    .cmp-product-grid__tworows .cmp-product-grid__no-carousel p.cmp-product-grid__item-colors {
        margin-bottom:32px;
    }
}

.cmp-product-grid__morebutton {
    text-align: center;
}

.cmp-product-grid__morebutton a {
    width: 65%;
    margin: 40px 0 0;
    max-width:412px;
}

.cmp-product-grid__tworows .cmp-product-grid__morebutton a {
    margin-top:0;
}

@media screen and ( max-width: 767px ) {
    .cmp-product-grid__tworows .cmp-product-grid__morebutton a,
    .cmp-product-grid__morebutton a {
        width:100%;
        margin:60px 0 0 0;
    }
    
    .cmp-product-grid__no-carousel .cmp-product-grid__morebutton a {
        margin-top:0;
    }
}

/* enable Flickity by default */
.js-cmp-product-grid__mobile-carousel:after {
  content: 'flickity';
  display: none; /* hide :after */
}

@media screen and ( min-width: 768px ) {
  /* disable Flickity for large devices */
  .js-cmp-product-grid__mobile-carousel:after {
    content: '';
  }
}

.cmp-product-grid__sixup .cmp-product-grid__item-button span {
    width: 100%;
    margin-top: 8px;
}

@media screen and ( max-width: 767px ) {
    .cmp-product-grid__sixup .cmp-product-grid__item-button span {
        margin-bottom: 32px;
    }
}

.cmp-product-grid__swatchtag {
    background:#fff;
    display:flex;
}

.cmp-product-grid__swatchtag img {
    width: 100px;
    height: 100px;
    display: inline-block;
}

.cmp-product-grid__swatchtag-text {
    margin-left: 10px;
}

.cmp-product-grid__swatchtag-text p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}

.cmp-product-grid__swatchtag-title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px !important;
}