#products {
  height: auto;
  background-color: #fff;
  background-image: url(../images/bg1-e3ddc7.png);
  background-size: 38%;
  background-repeat: no-repeat;
  color: #222;
  padding: 3em 0em;
  background-position: top;
}

#products .intro-text {
  margin-top: 14%;
  font-size: 1.5em;
  text-align: justify;
  font-weight: 300;
}

#products .smoke-blends-cards-row {
  margin-top: 5%;
}

#products .smoke-blends-cards-row .smoke-blend {
  cursor: pointer;
}

#products .smoke-blends-cards-row .smoke-blend.selected {
  border-bottom: 2px solid #ada74b;
}

#products .smoke-blends-cards-row .product-card img {
  width: 90%;
}

#products .smoke-blends-cards-row .product-info .name {
  font-weight: 200;
  text-transform: upcase;
  color: #ada74b;
}

#products .smoke-blends-cards-row .quantity button img {
  width: 40px;
}

#products .smoke-blends-cards-row .quantity input {
  width: 60px;
  height: 40px;
}

#products .smoke-blends-cards-row .quantity input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

#products .smoke-blends-cards-row .quantity input[type=number]::-webkit-inner-spin-button,
#products .smoke-blends-cards-row .quantity input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

#products .smoke-blends-details-row .product-details {
  max-width: 60vw;
}

#products .smoke-blends-details-row .product-details p {
  font-weight: 100;
  font-size: 93%;
  text-align: justify;
}

#products #packaging-select label, #products #packaging-select img {
  cursor: pointer;
}

#products #packaging-select img {
  height: 130px;
}

#products #packaging-select label {
  width: 100%;
}

#products #packaging-select label .text {
  font-weight: 100;
}

#products #packaging-select button {
  background-color: #009fd6;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
}

#products #packaging-select button a {
  color: white;
}

#products #upsell h3 {
  font-weight: 700;
  color: #009fd6;
}

#products #recipe-calculator #recipe .ingredients {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

#products #recipe-calculator #generate-recipe-button {
  background: #ada74b;
}

/*******************************************************************************
Large Device Styles
*******************************************************************************/

/* this is bootstraps -lg grid break */
@media (min-width: 992px) {
  #smoke-blends .product-information.compact .card {
    max-width: 30%;
    margin-left: 4px;
    margin-right: 4px;
  }
}