product.scss

// *************************************
//
//   Product
//   -> Module for individual products
//
// *************************************

.product {
  @extend %panel;
  @extend %group;
  @include border-radius(0);
}

// -------------------------------------
//   Elements
// -------------------------------------

// ----- Product Header ----- //
.product-header {
  @extend %group;
  h3 {
    font-size: calc-em(16px);
    margin: 0 0 calc-em(3px, 16px);
  } //h3
  h4 {
    font-size: calc-em(12px);
    margin: 0 0 calc-em(3px, 12px);
  } //h4
} //product-header

// ----- Product Footer ----- //
.product-footer {
  @extend %group;
  .btn {
    font-size: calc-em(12px);
    margin-bottom: calc-em(4px, 12px);
  } //btn
  .btn-primary {
    padding: calc-em(6px, 12px) calc-em(10px, 12px);
    @include respond-to(23.125em) {
      padding: calc-em(9px, 12px) calc-em(11px, 12px);
    }
  }
} ///product-footer

// ----- Product Body ----- //
.product-body {
  margin-bottom: calc-em(6px);
  p { font-size: calc-em(13px); } //p
} //product-body

// ----- Product Image ----- //
.product-image {
  float: left;
  width: 33%;
}

// ----- Product Info ----- //
.product-info {
  float: right;
  width: 60%;
}

// -------------------------------------
//   States
// -------------------------------------

// ----- Featured Product ----- //
.is-product-featured {

}

// -------------------------------------
//   Modifiers
// -------------------------------------

// ----- Mini Product ----- //
.product--mini {
  margin: 0 0 calc-em(8px);
  h3 {
    font-size: calc-em(16px);
    margin: 0 0 calc-em(3px, 16px);
  }
  p {
    font-size: calc-em(12px);
  }
  &:last-child {
    margin-bottom: 0;
  }
}

// -------------------------------------
//   Context
// -------------------------------------

// .has-module

// -------------------------------------
//   Submodules
// -------------------------------------

// ----- Product Benefits ----- //
.product-benefits {
  border-top: 1px solid $gray-lighter;
  border-bottom: 1px solid $gray-lighter;
  padding: calc-em(12px) 0;
  margin-bottom: calc-em(12px);
  
  // Benefit label
  .benefit-label {
    width: 20%;
    float: left;
    font-size: calc-em(24px, 12px);
    text-align: center;
    line-height: 1em;
  } //benefit__label

  // Benefit description
  .benefit-description {
    width: 75%;
    float: right;
  } //benefit__description

} //product-benefits