.sampler-container {
  float      : left;
  width      : 75%;
  padding    : 0 10% 12rem 0;
  font-family: 'Proxima Nova', sans-serif;
}

.sampler-container h2 {
  font-family   : 'Trade Gothic Condensed', 'Proxima Nova', sans-serif;
  font-weight   : 700;
  text-align    : center;
  display       : block;
  font-size     : 36px;
  letter-spacing: -1px !important;
  line-height   : 1;
}

.sampler-container .page-title span.base {
  font-family   : 'Trade Gothic Condensed', 'Proxima Nova', sans-serif;
  font-weight   : 700;
  letter-spacing: -1px;
  line-height   : 1.1;
  display       : block;
  font-size     : 36px;
  padding-bottom: 1.2rem;
  margin        : 0 0 24px !important;
  background    : url('../../images/horizontal-dash.png') center bottom no-repeat;
}

.sampler-container h3 {
  font-size    : 18px;
  font-family  : 'Proxima Nova', sans-serif;
  font-weight  : 300;
  display      : block;
  text-align   : center;
  font-weight  : normal;
  margin-top   : 0;
  margin-bottom: 2rem;
}

.sampler-container .samples-emphasis {
  color      : #00afaa;
  font-family: "Proxima Nova", sans-serif;
  font-weight: 700;
}

.sampler-container p {
  font-size : 16px;
  text-align: center;
}

.sampler-container p.added-sample {
  font-family: "Proxima Nova", sans-serif;
  font-weight: 700;
  font-size  : 14px;
}

.smart-sampler {
  display        : flex;
  justify-content: space-between;
  flex-wrap      : wrap;
  border         : solid black;
}

.added-sample-container {
  display: block;
  margin : 2rem auto;
}

.added-sample-container button {
  display: block !important;
  margin : 0 auto !important;
}

.product-item {
  margin: 10px;
}

.item-selected figcaption {
  background: #00afaa;
  color     : #fff;
  padding   : 3px 5px;
}

.sampler-tile {
  /*margin   :2rem;*/
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 700;
  line-height: 1.25;
  padding    : 1.5rem;
  text-align : center;
  flex-basis : 25%;
  cursor     : pointer;
}

.sampler-tile img {
  margin: 0 0 2rem;
}

.sample-delete::before {
  cursor     : pointer;
  color      : #303030;
  font-size  : 16px !important;
  overflow   : visible;
  font-family: "Font Awesome 5 Free";
  content    : "\f057";
  font-weight: 900;
}

.sample-delete span {
  border  : 0;
  clip    : rect(0, 0, 0, 0);
  height  : 1px;
  margin  : -1px;
  overflow: hidden;
  padding : 0;
  position: absolute;
  width   : 1px;
}

.sampler-container .update-sampler-button {
  display         : none !important;
  /* visibility   : hidden;
  margin          : auto;
  margin-bottom   : 1.2rem; */
}

/* NEW Sampler CTA lives in app/design/frontend/Pearl/weltpixel/Magento_Checkout/web/css/source/_extend.less */
.checkout-methods-items .update-sampler-button {
  display         : none;
  background-color: #000000;
}

.update-sampler-button:hover,
.update-sampler-button:focus {
  opacity: .6;
}

@media screen and (max-width: 900px) {
  .sampler-tile {
    flex-basis: 33.333333333%;
    min-width : 0;
  }
}

@media screen and (max-width: 767px) {
  .sampler-container {
    float         : none;
    width         : 100%;
    padding-right : 0;
    padding-bottom: 0;
  }

  .sampler-container h2 {
    /*max-width   : 277px;*/
    /*margin-left : auto;*/
    /*margin-right: auto;*/
    display       : none;
  }

  .sampler-container h3 {
    display: none;
  }

  .sampler-container p {
    display: none;
  }

  .block.sampler {
    border-bottom: solid 1px #e8e8e8;
    padding      : 1rem 0 2rem;
  }

  .block.sampler.active .title,
  body.checkout-cart-index .sampler-container .block.active .title {
    margin-bottom: 1rem;
  }

  .block.sampler .title,
  body.checkout-cart-index .sampler-container .block .title {
    margin        : 0;
    padding-bottom: 0;
    cursor        : pointer;
  }

  .block.sampler .title:after {
    top   : auto;
    bottom: 0;
  }

  .block.sampler .title .remaining {
    display       : block;
    text-transform: uppercase;
    margin-top    : .5rem;
  }
}

@media screen and (max-width: 552px) {
  .sampler-tile {
    flex-basis: 50%;
  }
}