.product {

  .woocommerce-tabs {
    margin-top: 60px;
    > ul.tabs {
      .clearfix;
      list-style: none;
      margin: 0px;
      margin-bottom: -1px;
      padding: 0px;

      li {
        float: left;
        a {
          border: @postBorder;
          border-right: none;
          display: block;
          padding: 10px 30px;
          background-color: @tabBackgroundColorInactive;
          color: @tabColorInactive;
        }
        &:first-child {
          a {
            border-top-left-radius: @border-radius-large;
          }
        }
        &:last-child {
          a {
            border-top-right-radius: @border-radius-large;
            border-right: @postBorder;
          }
        }
        &.active {
          a {
            color: @headingsColor;
            border-bottom: 1px solid @postBackground;
            background-color: @postBackground;
          }
        }
      }
    }
    .panel {
      padding: 40px 50px;
      border: @postBorder;
      .box-shadow(@postShadow);
      background-color: @postBackground;
      border-radius: @border-radius-large;
      border-top-left-radius: 0px;
      h2 {
        margin-bottom: 40px;
        margin-top: 0px;
        position: relative;
        font-size: @font-size-h4;
        .header-highlight-stroke;
      }
    }
  }

  .single-product-main-info {
    .clearfix;
    margin-top: 30px;
    position: relative;
    border: @postBorder;
    .box-shadow(@postShadow);
    background-color: @postBackground;
    border-radius: @border-radius-large;
    padding: 40px;

    span.onsale {
      background-color: @wooSaleBackgroundColor;
      color: @wooSaleTextColor;
      border-radius: 4px;
      position: absolute;
      top: 34px;
      left: 4px;
      padding: 1px 5px;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 700;
    }
  }

  .images {
    float: left;
    width: 35%;
    padding-right: 40px;

    img {
      width: inherit;
      max-width: 100%;
      height: auto;
    }
    .woocommerce-main-image {
      margin-bottom: 20px;
      display: block;
      text-align: center;
    }
    .thumbnails {
      .clearfix;
      a {
        margin-bottom: 10px;
        display: block;
        float: left;
        width: 25%;
        text-align: center;
      }
    }
  }

  .summary {
    float: right;
    width: 65%;

    .product_title {
      margin-top: 0px;
      margin-bottom: 35px;
      position: relative;
      &:after {
        content: "";
        position: absolute;
        width: 40px;
        display: block;
        height: 4px;
        background-color: @highlightStrokesBackground;
        bottom: -15px;
      }
    }
    .woocommerce-product-rating {
      .clearfix;
      .star-rating {
        margin-left: 0px;
        float: left;
        margin-right: 10px;
      }
      .woocommerce-review-link {
        font-size: floor(@baseFontSize * 0.8);
        float: left;
      }
    }
    .price {
      margin-top: 20px;
      font-size: @font-size-h3;
      color: @wooSinglePriceColor;
      del {
        margin-right: 10px;
        font-size: @font-size-h4;
        color: @wooSingleOldPriceColor;
      }
      ins {
        text-decoration: none;
        color: @wooSingleNewPriceColor;
      }
    }
    .variations {
      margin-bottom: 20px;
      label {
        color: @headingsColor;
      }
      select {
        margin-right: 10px;
      }
      .reset_variations {
        font-size: floor(@baseFontSize * 0.8);
        text-transform: uppercase;
      }
    }
    .single_variation {
      margin-bottom: 20px;
    }
    div[itemprop="description"] {
      margin: 30px 0px;
      padding: 30px 0px;
      border-top: 1px solid @bordersOnBodyColor;
      border-bottom: 1px solid @bordersOnBodyColor;
      p:last-child {
        margin-bottom: 0px;
      }
    }

    form.cart {
      button {
        display: inline-block;
        .btn;
        .btn-primary;
      }
    }

    .product_meta {
      .posted_in {
        a {

        }
      }
    }
  }

  #reviews {
    h2 {
      margin-bottom: 40px;
    }
    ol {
      list-style: none;
      padding: 0px;
      margin: 0px;
      li {
        margin-bottom: 20px;
        padding-bottom: 20px;
        padding-top: 20px;
        border-bottom: 1px solid darken(@postBackground, 7%);
        .clearfix;
        .avatar {
          float: left;
          margin-right: 30px;
        }
        p.meta {
          font-size: floor(@baseFontSize * 0.7);
          text-transform: uppercase;
          display: inline-block;
          padding-bottom: 5px;
          border-bottom: 1px solid darken(@postBackground, 7%);
        }
        .star-rating {
          float: right;
        }
      }
    }
    .comment-respond {
      margin-top: 80px;
      padding: 0px;
      border: none;
      .box-shadow(none);
      border-radius: 0px;
    }
    .comment-reply-title {
      text-transform: uppercase;
      font-size: @font-size-h4;
    }
  }

  .related.products, .upsells.products {
    margin-top: 70px;
    h2 {
      font-size: @font-size-h3;
      .header-highlight-stroke;
    }
  }
  ul.products {
    padding: 0px;
  }
}

.latest-posts-w {
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 40px;
  a {
    padding-bottom: 100%;
    position: relative;
    color: #fff;
    font-size: floor(@baseFontSize * 1.5);
    text-decoration: none;
    display: block;
    background-size: cover;
    background-position: center center;
    border-radius: @borderRadiusLarge;
    margin-bottom: 20px;
    &:after {
      content: "";
      position: absolute;
      z-index: 3;
      background-color: rgba(0,0,0,0.2);
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      border-radius: @borderRadiusLarge;
      .transition(all 0.2s ease);
    }
    &:hover {
      text-decoration: none;
    }
    span {
      z-index: 4;
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 100%;
      padding: 15px;
      text-align: center;
      .transform(translate(-50%, -50%));
      font-weight: @headingsFontWeight;
      font-family: @headingsFontFamily;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
      .transition(all 0.2s ease);
    }
    &:hover {
      &:after {
        background-color: rgba(0,0,0,0.4);
      }
      span {
        .transform(translate(-50%, -60%));
      }
    }
  }
}


@media (max-width: @screen-xs-max) {
  .product {

    .images, .summary {
      float: none;
      width: auto;
      padding: 0px;
    }
    .images {
      text-align: center;
    }
    .summary {
      padding: 20px;
    }
  }
}





// LIGHTBOX SINGLE POST

.lightbox-post-w {
  position: fixed;
  width: 700px;
  max-height: 80%;
  left: 50%;
  top: 50%;
  z-index: 1042;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.3);
  .transform(translate(-50%, -40%));
  opacity: 0;
  .transition(all 0.3s ease);
  background-color: #fff;

  .edit-link {
    top: 0px;
    right: 0px;
  }

  .lightbox-post-media-w:hover {
    .gif-label {
      opacity: 0;
      .transform(translateY(-20px));
    }
  }

  .gif-label {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 5px;
    border-radius: 4px;
    background-color: #222;
    color: #fff;
    font-size: 12px;
    z-index: 3;
    .transition(all 0.2s ease);
    .os-icon {
      display: inline-block;
      margin-right: 4px;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .lightbox-post-i {
  }
  article.pluto-page-box {
    border: none;
    box-shadow: none;
    border-radius: 0px;
    margin: 0px;
  }
  &.make-visible{
    opacity: 1;
    .transform(scale(1) translate(-50%, -50%));
    .lightbox-post-i {
    }
  }
  .lightbox-post-media-w {
    text-align: center;
  }
  img {
    border-radius: 4px;
    display: inline-block;
    max-width: 100%;
    height: auto;
  }

  .lightbox-post-content-w {
    padding: 30px 70px 100px 120px;
    position: relative;
    .lightbox-post-title {
      margin-top: 0px;
    }
  }


  // AUTHOR AVATAR & HEART
  .lightbox-author-like {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 20px 30px;
    position: relative;
    .clearfix();
    .author-avatar-w {
      float: left;
      width: 50px;
      height: 50px;
      margin-right: 20px;
      img {
        display: block;
        max-width: 100%;
        height: auto;
      }
      a {
        display: block;
      }
    }
    .author-details {
      float: left;
      .author-name {
        margin-top: 0px;
        text-transform: uppercase;
        margin-bottom: 7px;
        padding-top: 0px;
        .font-alternative();
        a {
          padding-bottom: 2px;
          line-height: 1;
          display: inline-block;
        }
      }
      .single-post-date-posted {
        line-height: 1;
        .font-alternative();
      }
    }
    .single-post-likes {
      float: right;
      .os-like-button-i {
        position: relative;
        display: block;
        .font-alternative();
        .os-like-button-label {
          display: none;
          position: absolute;
          top: 47%;
          left: 50%;
          .transform(translate(-50%, -50%));
          line-height: 1;
          color: #fff;
        }
        .os-like-button-sub-label {
          position: absolute;
          top: 50%;
          left: 50%;
          display: block;
          .transform(translate(-50%, -50%));
          color: #fff;
          display: block;
          line-height: 1;
        }
        .osetin-vote-not-voted {

        }
      }
      .os-like-button {
        text-align: center;
        &.zero-votes {
          .os-like-button-label {
            display: block;
          }
          .os-like-button-sub-label {
            display: none;
          }
        }
      }
      .os-like-button-icon {
        font-size: 45px;
        display: block;
        line-height: 1;
        vertical-align: middle;
        .os-icon {
          vertical-align: middle;
        }
      }
    }
  }

}

.lightbox-post-share-buttons {
  position: absolute;
  top: 30px;
  left: -10px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.4);
  border-left: none;
  padding: 5px;
  border-radius: 0px 4px 4px 0px;
  background-color: #fff;
  a {
    display: block;
    vertical-align: middle;
    padding: 10px 5px;
    text-align: center;
    line-height: 32px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: relative;
    .font-alternative();
    .os-icon {
      font-size: 30px;
    }
    &:first-child {
    }
    &:last-child {
      border-radius: 0px 4px 4px 0px;
      border-bottom: none;
    }
    span {
      display: block;
    }
    .osetin-vote-count {
      position: absolute;
      top: 10px;
      left: 50%;
      .transform(translateX(-50%));
      color: #fff;
      font-size: 12px;
    }
    &.osetin-vote-has-voted {
      .os-icon {
        color: #e74343;
      }
    }
  }
  .os-icon {
    vertical-align: middle;
    display: inline-block;
    font-size: 24px;
  }
  .split-share {
    background-color: rgba(0,0,0,0.05);
    margin-top: 10px;
    border-radius: 4px;
    .os-icon {
      font-size: 18px;
      color: #333;
    }
    a {
      padding: 8px;
    }
  }
  .lightbox-post-share-label {
    .font-alternative();
  }
  .os-like-button-icon {
    display: block;
    .os-icon {
      font-size: 34px;
    }
  }
  .os-like-button-label {
    display: block;
    color: #222;
    font-size: 12px;
    line-height: 14px;
    display: none;
  }
  &.from-single {
    top: 60px;
    left: 0px;
    border-radius: 0px 4px 4px 0px;
    border-left: none;
  }
}

.close-lightbox-post {
  position: fixed;
  right: 50px;
  top: 30px;
  color: #fff;
  font-size: 36px;
  padding: 10px;
  vertical-align: middle;
  text-align: center;
  z-index: 10000;
  display: none;
}
.lightbox-post-shadow {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0,0,0,0.6);
  z-index: 1041;
  background-image: url('@{imagesPath}/loader-white.svg');
  background-position: center center;
  background-repeat: no-repeat;
}

// LIGHTBOX POST NAVIGATION
.post-next-lightbox, .post-prev-lightbox {
  &:hover {
    text-decoration: none;
    .post-next-prev-nav-arrow {
      opacity: 0;
    }
  }
  position: fixed;
  top: 50%;
  z-index: 9999;

  background-color: @postBackground;
  border-radius: @border-radius-large;

  opacity: 0;
  border-radius: 4px;
  padding: 20px;
  width: 190px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
  .transition(all 0.2s ease);
  text-align: center;

  .post-next-prev-image {
    display: block;
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center center;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  h4 {
    vertical-align: middle;
    margin-top: 0px;
  }
  .post-next-prev-nav-arrow {
    position: absolute;
    top: 40%;
    left: 50%;
    font-size: 26px;
    color: #fff;
    .transform(translate(-50%, -50%));
    padding: 10px 20px;
    background-color: rgba(0,0,0,0.7);
    border-radius: 4px;
    .transition(all 0.2s ease);
  }
}

.post-next-lightbox {
  left: 50%;
  .transform(translate(520px, -50%));
  .post-next-prev-nav-arrow {
  }
  h4 {
  }
  &.make-visible {
    .transform(translate(480px, -50%));
    opacity: 0.9;
    &:hover {
      opacity: 1;
      .transform(translate(460px, -50%));
    }
  }
}
.post-prev-lightbox {
  right: 50%;
  .transform(translate(-520px, -50%));

  .post-next-prev-nav-arrow {
  }
  h4 {
  }
  &.make-visible {
    .transform(translate(-480px, -50%));
    opacity: 0.9;
    &:hover {
      opacity: 1;
      .transform(translate(-460px, -50%));
    }
  }
}