/*================ #Free Samples Collection ================*/
.collection-sample-heading {
  @media only screen and (max-width: 768px) {
    text-align: center;
  }
  .heading {
    margin-top: 20px;
  }
  .sub-heading {
    font-size: 16px;
    letter-spacing: 0.28px;
    font-weight: 100;
    margin-bottom: 20px;
  }
  .content-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    @media only screen and (max-width: 768px) {
      display: block;
    }
    .button {
      border: 1px solid #dadee2;
      border-radius: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 10px;
      font-size: 13px;
      letter-spacing: 0.26px;
      line-height: 16px;
      margin-left: 20px;
      width: 20%;
      @media only screen and (max-width: 768px) {
        text-align: left;
        margin: 40px auto 0px;
        max-width: 250px;
        width: 100%;
      }
      .icon-wrapper {
        width: 55px;
        margin-right: 12px;
        @media only screen and (max-width: 768px) {
          max-width: 55px;
        }
      }
      .text {
        width: 150px;
      }
    }
  }
}
.collection-sample-filter {
  .bg-content {
    background: $color-footer;
    padding: 22px 0px;
    margin: 60px 0px;
    @media only screen and (max-width: 768px) {
      margin: 40px 0px 30px 0px;
    }
    .page-width {
      @media only screen and (max-width: 768px) {
        padding: 0px;
      }
    }
    .filter-by-product {
      text-align: center;
      .clear-filter {
        float: right;
        @media only screen and (max-width: 768px) {
          float: none;
        }
      }
      ul.filter-product-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        justify-content: space-between;
        text-align: center;
        margin-top: 25px;
        &::-webkit-scrollbar {
          display: none;
        }
        .filter-product-item {
          &:first-child {
            @media only screen and (max-width: 768px) {
              padding-left: 22px;
            }
          }
          cursor: pointer;
          opacity: 0.4;
          &.is-active {
            opacity: 1;
          }
          @media only screen and (min-width: 769px) and (max-width: 1100px) {
            padding-right: 10px;
            svg {
              max-width: 130px;
            }
          }
          @media only screen and (max-width: 768px) {
            padding-right: 35px;
          }
          .filter-product-label {
            font-size: 10px;
            color: #707070;
            letter-spacing: 1.44px;
            text-transform: uppercase;
            font-weight: bold;
            &:hover {
              color: $color-light-blue;
            }
          }
        }
      }
    }
  }
  .heading {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.44px;
    color: $color-dark-blue;
    font-weight: bold;
  }
  .clear-filter {
    font-size: 12px;
    text-transform: initial;
    color: #707070;
    letter-spacing: 0.2px;
    font-weight: normal;
    cursor: pointer;
  }
  .filter-by-material,
  .filter-by-colour {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    @media only screen and (max-width: 768px) {
      display: block;
      margin-bottom: 20px;
    }
    .heading {
      width: 15%;
      @media only screen and (max-width: 768px) {
        width: 100%;
        text-align: center;
        margin: 0 0 20px 0;
      }
    }
    .filter-material-item,
    .filter-colour-item {
      border: 2px solid #dadee2;
      border-radius: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      min-width: 140px;
      align-items: center;
      margin-right: 20px;
      cursor: not-allowed;
      opacity: 0.4;
      pointer-events: none;
      &.is-show {
        opacity: 1;
        cursor: pointer;
        pointer-events: auto;
      }
      @media only screen and (max-width: 768px) {
        display: inline-flex;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      @media only screen and (max-width: 767px) {
        &:nth-child(2n + 2) {
          margin-right: 0px;
        }
      }
      &.is-active {
        border: 2px solid $color-dark-blue;
      }
      .image-icon {
        width: 36px;
        display: block;
        margin-right: 10px;
        border-radius: 8px 0px 0px 8px;
        svg {
          border-radius: 8px 0px 0px 8px;
          display: block;
        }
        img {
          border-radius: 8px 0 0 8px;
        }
      }
      .filter-material-label,
      .filter-colour-label {
        font-size: 14px;
      }
    }
    .filter-colour-item {
      .image-icon {
        height: 36px;
        border-right: 1px solid #dadee2;
      }
    }
  }
  .filter-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    @media only screen and (max-width: 768px) {
      display: block;
    }
  }
}
.collection-sample-products {
  .product-wrapper {
    .variant-wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 0px -16px;
      .variant-inner {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
        margin-bottom: 38px;
        padding: 0px 16px;
        @media only screen and (max-width: 768px) {
          -ms-flex: 0 0 50%;
          flex: 0 0 50%;
          max-width: 50%;
        }
        .variant-inner-block {
          box-shadow: 0px 0px 6px #00000031;
          border-radius: 10px;
          padding: 5px;
          .image-wrapper {
            position: relative;
            img {
              width: 100%;
              border-radius: 7px;
            }
            .zoom-plus-icon {
              position: absolute;
              top: 10px;
              left: 10px;
              width: 20px;
            }
          }
          .action-content-wrappper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 11px;
            .variant-title {
              width: 75%;
              @media only screen and (max-width: 400px) {
                width: 60%;
                font-size: 11px;
                padding-right: 5px;
              }
            }
            .action-wrapper {
              width: 25%;
              cursor: pointer;
              border: 3px solid transparent;
              border-radius: 10px;
              &.disable {
                pointer-events: none;
                svg {
                  filter: grayscale(100%);
                  opacity: 50%;
                }
              }
              &:hover {
                border: 3px solid $color-ventea-black;
              }
              svg {
                display: block;
              }
              @media only screen and (max-width: 768px) {
                width: 45px;
              }
            }
          }
        }
      }
    }
  }
}
#free-sample-notification {
  max-width: 430px;
  padding: 40px 60px;
  text-align: center;
  @media (max-width: 768px) {
    padding: 30px 20px 20px;
  }
}
.site-header__cart.ajax-cart {
  &.is-active {
    svg {
      border: 2px solid #fbd403;
      border-radius: 100%;
    }
    #CartCount {
      animation: show-ajax-cart 0.3s forwards;
    }
  }
}