/*******************************************************
  Product Style
********************************************************/

//-- Block Product Image
.product-page {
     .images-container {
          .js-qv-mask {
               .thumb-container { 
                    cursor: pointer;
                    outline: none;
                    transition: 0.3s all ease 0s;
                    height: auto;
                    text-align: center;
                    img{
                         border: solid 1px #e5e5e5;
                         background: #fff;
                         display: inline-block;
                         transition: all 0.3s ease 0s;
                         &.selected{
                              border-color: $linkColor;
                         }
                    }
                    &:hover{
                         img{
                              border-color: $linkColor;
                         }
                    }
               }
               /*&:hover{
                    .slick-prev, .slick-next{transform: scale(1);-ms-transform: scale(1);-webkit-transform: scale(1);}
               }*/
          }
          .product-cover {
               display: block;
               text-align: center;
               border: solid 1px #e5e5e5;
               .product-flags {
                    .new-label, .on-sale-label, .discount-percentage {
                         position: absolute;
                         display: inline-block;
                         text-align: center;
                         text-transform: uppercase;
                         color: #fff;
                         font-size: 100%;
                         font-weight: 400;
                         height: 30px;
                         line-height: 30px;
                         min-width: 63px;
                         padding: 0 15px;
                         top: 10px !important;
                         &:before {
                              content: "";
                              position: absolute;
                              top: auto;
                              bottom: -7px;
                              left: 0px;
                              right: auto;
                              border-bottom: 7px solid transparent;
                              border-top: 0 solid transparent;
                              border-right: 11px solid #950c20;
                         }
                    }
                    
                    .new-label {
                         left: auto;
                         right: 10px;
                         z-index: 1;
                         background: $linkColor;
                    }
                    
                    .discount-percentage{
                         left: -10px;
                         right: auto;
                         z-index: 2;
                         background: #ff3c58;
                    }
                    .on-sale-label{
                         left: -10px;
                         right: auto;
                         z-index: 3;
                         background: #ff3c58;
                    }
                    
                    .discount-label {
                         display: none;
                    }
               }
               .layer {
                    display: inline-block;
                    position: absolute;
                    bottom: 0px;
                    right: 0;
                    z-index: 1;
                    cursor: pointer;
                    background: #ccc;
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    color: #fff;
                    &:hover {
                         color: $linkColor;
                    }
                    .zoom-in {
                         font-size: 24px;
                    }
               }
          }
          &.vertical-thumbnails {
               .js-qv-mask {
                    float: left;
                    width: 100px;
                    top: -5px;
                    position: relative;
                    .thumb-container {
                         margin: 4.6px 0;
                    }
               }
               .product-cover {
                    float: right;
                    width: calc(100% - 120px);
               }
               .slick-prev, .slick-next {
                    width: 50px;
                    height: 25px;
                    line-height: 25px;
                    &:after{
                         line-height: 25px;
                    }
               }
               .slick-prev {
                    top: -5px;
                    left: calc(50% - 25px);
                    right: auto;
                    &:after {
                         content: "\f106";
                    }
               }
               .slick-next {
                    top: auto;
                    bottom: -5px;
                    right: auto;
                    left: calc(50% - 25px);
                    &:after {
                         content: "\f107";
                    }
               }
          }
          &.horizontal-thumbnails {
               .js-qv-mask {
                    margin: 0 -5px;
                    padding: 0;
                    .product-images{
                         margin-bottom: 0;
                         padding: 0;
                    }
                    .thumb-container {
                         margin: 0 5px;
                         .thumb{
                              margin: 0;
                         }
                    }
               }
               .product-cover {
                    margin-bottom: 20px;
               }
               .slick-prev {
                    top: calc(50% - 25px);
                    left: 0px;
                    right: auto;
                    &:after {content: "\f104";}
               }
               .slick-next {
                    top: calc(50% - 25px);
                    right: 0px;
                    left: auto;
                    &:after {content: "\f105";}
               }
          }
     }
     .slick-prev, .slick-next{
          font-size: 0;
          position: absolute;
          z-index: 2;
          transition: 0.3s all ease 0s;
          width: 30px;
          height: 50px;
          background: $background;
          border: none;
          //transform: scale(0);-ms-transform: scale(0);-webkit-transform: scale(0);
         &:after {
			   font-size: 20px;
               font-family: Fontawesome;
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               color: #fff;
               text-align: center;
			   line-height: 50px;
          }
          &:hover{
               &:after{
                    background: darken($background,10%);
               }
          }
     }
}

//-- Block Product Information
.product-page {
     .main-product{
          margin: 0;
          padding: 0 0 75px;
     }
     
     h1.product-name {
          font-size: 157%;
          margin:0 0 15px;
          font-weight: 400;
          color: #282828;
          position: relative;
          text-transform: uppercase;
     }
     .product-short-description {
          margin: 0 0 15px;
          font-size: 93%;
          p {
               margin: 0;
          }
     }
     
     #product-availability {
          display: block;
          margin: 25px 0 0;
          font-weight: 600;
          color: #3eb94f;
          text-transform: capitalize;
          font-size: 13px;
          background: transparent;
          label{
               margin: 0;
               color: #888;
          }
          .fa{
               margin-right: 10px;
          }
     }
     
     #product-details .product-reference, #product-details .product-quantities, #product-details .product-condition{
          color: #222;
          text-transform: capitalize;
          display: inline-block;
          font-size: 100%;
          font-weight: 400;
          span{
               margin: 0;
               color: #333;
               font-weight: 500;
               font-size: 116%;
          }
          label{
               font-size: 100%;
               font-weight: 400;
               color: #666;
               margin: 0;
          }
     }
     
     .product-features{
          display: none;
     }
     
     .product-reference{
          margin: 0 15px 12px 0;
          .lang-rtl &{
               margin: 0 0 12px 15px;
          }
     }
     
     .product-quantities{
          margin: 0 0 12px;
     }
     
     .product-prices {
          display: block;
          margin: 0 0 12px;
          div{
               margin-bottom: 0;
          }
          .product-discount {
               text-decoration: line-through;
               display: inline-block;
               padding: 0;
               font-size: 143%;
               font-weight: normal;
               vertical-align: top;
               color: #aaa;
               font-weight: 400;
               margin-bottom: 0;
          }
          .product-price {
               font-weight: 500;
               font-size: 171.4%;
               display: inline-block;
               color: $linkColor;
          }
          .regular-price{
               margin: 0 10px;
          }
          .tax-shipping-delivery-label {margin: 0;}
     }
     
     .social-sharing {
          display: block;
          overflow: hidden;
          text-transform: capitalize;
          margin: 0;
          border-top: 1px solid #e5e5e5;
          padding: 20px 0 0;
          span {
               display: inline-block;
               margin: 10px 15px 0 0;
               font-size: 100%;
               font-weight: 400;
               color: #222;
               text-transform: capitalize;
               vertical-align: top;
          }
          ul{
               padding: 0;
               display: inline-block;
               float: right;
          }
          li {
               display: inline-block;
               height: 36px;
               width:36px;
               border-radius: 50%;
               text-align: center;
               box-shadow: none;
               border: 1px solid #e5e5e5;
               overflow: hidden;
               margin: 0 0 0 5px;
               transition: all 0.3s ease 0s;
               &:hover{
                    border-color: $linkColor;
                    a{
                         background: $background;
                         &:before {
                              color: #fff;
                         }
                    }
               }
               a {
                    position: relative;
                    text-indent: 0;
                    font-size: 100%;
                    text-align: center;
                    &:before {
                         font-family: Fontawesome;
                         color: #888;
                         line-height: 36px;
                         transition: all 0.3s ease 0s;
                         text-align: center;
                         display: block;
                    }
               }
               &.facebook a {
                    &:before {content: "\f09a";}
               }
               &.twitter a {
                    &:before {content: "\f099";}
               }
               &.googleplus a {
                    &:before {content: "\f0d5";}
               }
               &.pinterest a {
                    &:before {content: "\f231";}
               }
          }
     }
     
     .product-actions {
          padding: 10px 0 0;
          .product-variants {
               margin-bottom: 10px;
               .control-label {
                    display: inline-block;
                    color: #222;
                    font-weight: 500;
                    min-width: 65px;
                    width: auto;
                    text-transform: uppercase;
                    vertical-align: bottom;
                    padding: 0;
                    margin: 0 0 5px;
                    font-size: 107%;
                    line-height: 32px;
                    .lang-rtl &{
                         margin: 0 0 0 18px;
                    }
               }
               .product-variants-item {
                    margin: 0 0 20px;
                    display: inline-block;
                    width: calc(50% - 5px);
                    ul, .selector {
                         display: inline-block;
                         vertical-align: bottom;
                    }
                    
                    .selector {
                         position: relative;
                         height: 42px;
                         min-width: 125px;
                         overflow: hidden;
                         border: solid 1px #e5e5e5;
                         padding: 0;
                         border-radius: 3px;
                         &:after {
                              content: "\f107";
                              background: #fff;
                              color: #666;
                              text-align: center;
                              margin: 0;
                              position: absolute;
                              right: 0px;
                              top: 0px;
                              height: 40px;
                              width: 39px;
                              font-size: 15px;
                              border-radius: 0px;
                              overflow: hidden;
                              line-height: 39px;
                              z-index: 0;
                              pointer-events:none;
                              -ms-pointer-events:none;
                              -webkit-pointer-events:none;
                              font-family: Fontawesome;
                         }
                    }
                    
                    select {
                         width: 100%;
                         height: 100%;
                         padding: 0 16px;
                         border: none;
                         text-transform: capitalize;
                         color: #444;
                         font-size: 14px;
                         line-height: 42px;
                         outline: none;
                         option {
                              padding: 5px 12px;
                         }
                    }
                    
                    ul#group_1{
                         li{
                              span.radio-label{
                                   box-shadow: none;
                                   border: 1px solid #e5e5e5;
                                   border-radius: 3px;
                                   font-size: 100%;
                                   height: 35px;
                                   width: 45px;
                                   line-height: 32px;
                                   text-align: center;
                                   font-weight: 400;
                                   color: #222;
                              }
                              .input-radio:checked + span, .input-radio:hover + span{
                                   border: 1px solid $linkColor;
                                   color: $linkColor;
                              }
                         }
                    }
                    
                    .input-color:checked + span, .input-color:hover + span, .input-radio:checked + span, .input-radio:hover + span{
                         border: none;
                         &:after{
                              opacity: 1;
                         }
                    }
                    
                    ul li{
                         margin: 0 15px 0 0;
                         .lang-rtl &{
                              margin: 0 0 0 15px;
                         }
                    }
                    
                    .color{
                         width: 25px;
                         height: 25px;
                         //position: relative;
                         transition: all 0.3s ease 0s;
                         margin: 0;
                         &:after{
                              content: '';
                              background: TRANSPARENT;
                              height: 35px;
                              width: 35px;
                              position: absolute;
                              opacity: 0;
                              transition: all 0.3s ease 0s;
                              border: 1px solid $linkColor;
                              left: -5px;
                              top: -5px;
                              border-radius: 3px;
                              bottom: auto;
                              pointer-events: none; 
                         }
                         &:hover, &.active{
                              &:after{
                                   opacity: 1;
                              }
                              border: none !important;
                         }
                    }
               }
          }
          
          .product-discounts {
               margin: 0;
          }
          
          .product-add-to-cart {
               font-size: 0;
               margin-bottom: 20px;
               .control-label {
                    padding: 10px 5px 0 0;
                    vertical-align: top;
                    margin: 0 1px 0 0;
                    display: inline-block;
                    width:67px;
                    font-size: 14px;
                    text-transform: uppercase;
                    color: #222;
                    font-weight: 500;
                    .lang-rtl &{
                         margin: 0 0 0 1px;
                         padding: 10px 0 0 5px;
                    }
               }
               .product-quantity {
                    display: inline-block;
                    height: 40px;
                    #quantity_wanted {
                         height: 40px;
                         width: 80px;
                         line-height: 40px;
                         border: 1px solid #e5e5e5;
                         text-align: center;
                         z-index: 0;
                         vertical-align: top;
                         color: #555;
                         font-size: 14px;
                         font-weight: 500;
                         background: #fafafa;
                         border-radius: 3px;
                    }
                    .btn-touchspin {
                         height: 14px;
                         width: 16px;
                         padding: 0;
                    }
                    .input-group-btn-vertical{
                         float: left;
                         width: auto;
                         padding: 0 6px;
                         display: none;
                         .btn {
                              border: none;
                              background: #222;
                              i{
                                   color: #fff;
                                   top: 0;
                                   left: 0;
                                   right: 0;
                                   font-size: 14px;
                              }
                              &:hover{
                                   i {
                                        color: $linkColor;
                                   }
                              }
                              &.bootstrap-touchspin-up{
                                   width: 14px;
                                   height: 14px;
                                   border-radius: 50%;
                                   margin: 0 0 3px;
                                   i{
                                        &:after{
                                             content: '\E145';
                                        }
                                   }
                              }
                              &.bootstrap-touchspin-down{
                                   width: 14px;
                                   height: 14px;
                                   border-radius: 50%;
                                   margin: 0 0 4px;
                                   i{
                                        &:after{
                                             content: '\E15B';
                                        }
                                   }
                              }
                         }
                    }
                    .qty {
                         margin: 0;
                         display: inline-block;
                         float: none;
                         width: auto;
                         background: #fff;
                         .input-group{
                              width: auto;
                         }
                    }
               }
               .add {
                    margin: 0;
                    display: inline-block;
                    vertical-align: top;
               }
               .add-to-cart {
                    box-shadow: none;
                    color: #fff;
                    border-radius: 3px;
                    font-size: 14px;
                    font-weight: 400;
                    text-transform: uppercase;
                    background: $background;
                    border: none;
                    padding: 0 30px;
                    height: 40px;
                    line-height: 42px;
                    margin: 0 0 0 20px;
                    outline: none;
                    transition: 0.3s all ease 0s;
                    .fa{
                         margin: 0 5px 0 0;
                         font-size: 18px;
                         display: none;
                         .lang-rtl &{
                              margin: 0 0 0 5px;
                         }
                    }
                    &:hover {background: darken($background, 10%);}
               }
               .product-minimal-quantity{margin-bottom: 0;}
          }
     }
     #block-reassurance {box-shadow: none;border: solid 1px #e5e5e5;}
}

.layout-left-column, .layout-right-column{
     .product-page{
          .product-short-description{
               margin: 0 0 15px;
          }
          .product-prices{
               margin: 0px 0 12px;
          }
          .product-actions {
               .product-variants{
                   margin-bottom: 10px;
               }
               .product-add-to-cart{
               }
          }
     }
}

//-- layout-full-width

.layout-full-width .product-page{
}

//-- Block Product MoreInfo
.product-page {
     .product-moreinfo {
          margin-bottom: 75px;
     }
     .tabs {
          margin: 0;
          box-shadow: none;
          padding: 0;
          background: transparent;
          border-bottom: 1px solid #e5e5e5;
          .nav-tabs {
               padding: 0;
               position: relative;  
               margin-bottom: 0;
               font-size: 0;
               border-bottom: 1px solid #e5e5e5;
               li.nav-item{
                    margin: 0;
                    a.nav-link {
                         color: #282828;
                         font-weight: 500;
                         height: 100%;
                         text-transform: capitalize;
                         border: none;
                         font-size: 18px;
                         display: block;
                         border-radius: 0;
                         margin:0 20px;
                         padding: 0 0 15px;
                         position: relative;
                         background: transparent;
                         &:before{
                              content: "";
                              background: $linkColor;
                              height: 2px;
                              width: 100%;
                              position: absolute;
                              top: auto;
                              left: 0;
                              right: 0;
                              bottom: -1px;
                              display: none;
                         }
                    }
                    &:first-child{
                         margin-left: 0px !important;
                         a.nav-link{
                              padding: 0px 0px 15px 0;
                              margin: 0 20px 0 0;
                         }
                    }
                    a.nav-link:hover, a.nav-link.active {
                         color: $linkColor;
                         &:before{
                               display: block;
                         }
                    }
               }
          }
          .tab-content {
               padding: 45px 0 35px;
               line-height: 22px;
               min-height: 120px;
               .tab-pane {
                    padding: 0;
               }
               p {margin: 0 0 10px;}
               .product-features {margin: 0;}
               .data-sheet {margin: 0;}
          }
     }
     .panel {margin-bottom: 15px;
          .panel-heading {border: solid 1px #e5e5e5;transition: 0.3s all ease 0s;
               h4 {margin: 0;
                    a {color: #666;font-weight: 400;display: block;padding: 15px;transition: 0.3s all ease 0s;}
               }
               &:hover {border-color: $linkColor;
                    h4 a {color: $linkColor;}
               }
          }
          .panel-body {border: solid 1px #e5e5e5;padding: 30px;
               p {line-height: 22px;margin: 0;}
          }
     }
     .moreinfo-list {
          .infobox {margin-bottom: 30px;
               .titlebox {text-align: center;margin-bottom: -1px;
                    h4 {margin: 0;display: inline-block;background: #fff;text-transform: uppercase;font-weight: 400;padding: 10px 20px;border: solid 1px #e5e5e5;}
               }
               .contentbox {border: solid 1px #e5e5e5;padding: 30px;
                    p {line-height: 22px;margin: 0;}
               }
          }
     }
}

//-- Related Product
#product{
     .product-accessories{
          position: relative;
          div.title{
               margin-bottom: 32px;
               text-align: center;
          }
          p{
               font-size: 100%;
               text-transform: uppercase;
               color: $linkColor;
               margin: 0;
          }
          
          h3.title-block{
               position: relative;
               margin-bottom: 0px;
               text-transform: uppercase;
               font-size: 247%;
               font-weight: 700;
               color: #282828;
               display: inline-block;
               &:before, &:after{
                    content: '';
                    position: absolute;
                    height: 8px;
                    width: 8px;
                    background: $background;
                    border-radius: 50%;
                    top: 12px;
                    bottom: auto;
               }
               &:before{
                    left: -20px;
                    right: auto;
               }
               &:after{
                    left: auto;
                    right: -20px;
               }
          }
          
          .products{
               overflow: hidden;
               width: auto;
               .owl-stage-outer{
                   overflow: visible;
               }
          }
          
          .product-miniature{
               padding: 0;
               width: 100%;
               margin-bottom: 140px;
               .product-container{
                    .variant-links{
                         display: none;
                    }
               }
          }
          
          .owl-controls {
               .owl-prev, .owl-next {
                    margin: 0;
                    top: 45%;
                    position: absolute;
                    z-index: 3;
                    display: inline-block;
                    text-align: center;
                    color: #282828;
                    background: #fff;
                    transition: all 0.3s ease 0s;
                    cursor: pointer;
                    font-size: 24px;
                    width: 45px;
                    height: 45px;
                    border-radius: 50%;
                    line-height: 43px;
                    border: 1px solid #e5e5e5;
                    transform: scale(0);
                     -moz-transform: scale(0);
                     -ms-transform: scale(0);
               }
               div.owl-prev {
                    left: -20px;
                    right: auto;
               }
               div.owl-next {
                    right: -20px;
                    left: auto;
               }
          }
          .owl-controls {
               .owl-prev, .owl-next {
                    &:hover{
                         background: $background;
                         color: #fff;
                         border-color: $linkColor;
                    }
               }
          }
          &:hover{
               .owl-controls {
                    .owl-prev, .owl-next {
                         transform: scale(1);
                         -moz-transform: scale(1);
                         -ms-transform: scale(1);
                    }
               }
          }
     }
}