/*
 * shop-single.scss
 * -----------------------------------------------
*/

body.single-product {
  .main-content-area {
    padding-bottom: ($container-pb) - 30px;
  }
}
.woocommerce {
  &.single-product {
    .product-details {
      position: relative;
      .single-image-wrapper {
        position: relative;
        .onsale {
          right: auto;
        }
      }
    }
  }
  div.product {
    .product_title {
      margin-top: 0;
      margin-bottom: 10px;
    }
    form.cart {
      .variations {
        margin-bottom: 30px;
        th {
          border: none;
          padding-right: 15px;
          padding-left: 0;
        }
        td {
          border: none;
          padding-bottom: 0;
          vertical-align: middle;
          padding-right: 1rem;
          &.variations-label {
            font-size: 0.9rem;
            font-weight: 600;
            padding-left: 0;
            width: 21%;
          }
        }
        label {
          font-size: 0.9rem;
          font-weight: 600;
          text-transform: capitalize;
        }
        .reset_variations {
          font-size: 0.8rem;
          margin-left: 10px;
          text-decoration: none;
        }
      }
      .woocommerce-variation-add-to-cart {
        margin: 25px 0;
      }
      .quantity {
        float: left;
        margin-right: 20px;
        @include media-breakpoint-down(sm) {
          margin-bottom: 20px;
        }
      }
    }

    .product_meta {
      margin-top: 15px;
      clear: both;
      font-size: 0.9rem;
      .sku_wrapper {
        .sku {
        }
      }
      > span {
        color: $headings-color;
        display: block;
        font-weight: $font-weight-bold;
        a, .sku {
          color: var(--text-color);
          margin-left: 10px;
          font-weight: normal;
        }
        a {
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .woocommerce-product-gallery {
      position: relative;
    }
    &.single-product-image-with-thumb {
      .woocommerce-product-gallery {
        margin-bottom: 3em;

        figure {
          margin: 0;
        }

        .zoomImg {
          background-color: #fff;
        }
        .flex-viewport {
          border: 1px solid #ddd;
          border-radius: 10px;
          margin: 0;
          width: 100%;
        }
        .woocommerce-product-gallery__image {
          &:nth-child(n+2) {
            max-width: 25%;
            float: left;
          }
          &:not(:first-child) {
            img {
              opacity: .5;
              border-top: 1px solid #fff;
              border-right: 1px solid #fff;
              &:hover {
                opacity: 1;
              }
            }
          }
          &.flex-active-slide {
            img {
              opacity: 1;
            }
          }
        }

        .flex-control-thumbs {
          @media screen and (min-width:1300px){
            position: absolute;
            left: -90px;
            top: 0;
          }
          @media screen and (max-width:1299px){
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
          }
          li {
            list-style: none;
            cursor: pointer;
            position: relative;
            padding: 0 3px;
            @media screen and (min-width:1300px){
              width: 83px;
            }
            @media screen and (max-width:1299px){
              margin-top: 6px;
              width: 20%;
            }
          }
          img {
            padding: 0;
            border: 1px solid #ddd;
            opacity: .5;
            border-radius: 3px;
            transition: opacity .4s cubic-bezier(.455,.03,.515,.955),border-color .4s cubic-bezier(.455,.03,.515,.955);
            &:hover,
            &.flex-active {
              opacity: 1;
              @include box-shadow( 0px 0 20px rgba(5, 5, 5, 0.08) );
            }
          }

        }

        img {
          display: block;
          width: 100%;
        }
      }
    }

    &.single-product-plain-image,
    &.single-product-sticky-side-text {
      .woocommerce-product-gallery {
        .woocommerce-product-gallery__wrapper {
          margin-top: 0;
        }
        .woocommerce-product-gallery__image {
          margin-bottom: 10px;
          a img {
            width: 100%;
          }
        }
      }
    }


    .woocommerce-product-gallery--columns-3 {
      .flex-control-thumbs li {
        width: 33.3333%;
      }
      .flex-control-thumbs li:nth-child(3n+1) {
        clear: left;
      }
    }

    .woocommerce-product-gallery--columns-4 {
      .flex-control-thumbs li {
        width: 25%;
      }
      .flex-control-thumbs li:nth-child(4n+1) {
        clear: left;
      }
    }

    .woocommerce-product-gallery--columns-5 {
      .flex-control-thumbs li {
        width: 20%;
      }
      .flex-control-thumbs li:nth-child(5n+1) {
        clear: left;
      }
    }

    .woocommerce-product-gallery__trigger {
      background: rgba(255, 255, 255, 0.7);
      box-sizing: content-box;
      height: 36px;
      position: absolute;
      right: 15px;
      text-indent: -9999px;
      top: 15px;
      width: 36px;
      z-index: 10;
      border-radius: 50%;
      &:hover {
        background: rgba(255, 255, 255, .6);
      }
      &:before {
        border: 2px solid #333;
        border-radius: 100%;
        box-sizing: content-box;
        content: "";
        display: block;
        height: 10px;
        left: 10px;
        position: absolute;
        top: 10px;
        width: 10px;
      }
      &:after {
        background: #333;
        border-radius: 6px;
        box-sizing: content-box;
        content: "";
        display: block;
        height: 10px;
        left: 23px;
        position: absolute;
        top: 19px;
        @include rotate(-45);
        width: 2px;
      }
    }

    .woocommerce-tabs {
      clear: both;
      padding-top: 30px;
      .wc-tabs {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        li {
          margin: 0 12px 0 0;
          padding: 0;
          a {
            display: block;
            padding: 10px 20px;
            position: relative;
            &:hover {
              opacity: 1;
              width: 100%;
              &:after {
                opacity: 1;
                width: 100%;
              }
            }
            &:after {
              content: "";
              position: absolute;
              height: 3px;
              width: 0;
              background: var(--theme-color1);
              left: 0;
              bottom: 0;
              opacity: 0;
              @include transition(all 0.4s ease);
            }
          }
          &:last-child {
            margin-right: 0;
          }
          
          @include media-breakpoint-down(md) {
            margin: 0 0 12px 0;
            padding: 0;
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
        li.active {
          a {
            color: var(--theme-color1);
            &:after {
              content: "";
              position: absolute;
              height: 3px;
              width: 100%;
              background: var(--theme-color1);
              left: 0;
              bottom: 0;
              opacity: 1;
            }
          }
        }
        li.ui-state-active {
          a {
            color: var(--theme-color1);
            &:after {
              content: "";
              position: absolute;
              height: 3px;
              width: 100%;
              background: var(--theme-color1);
              left: 0;
              bottom: 0;
              opacity: 1;
            }
          }
        }
        li.ui-state-hover {
          a {
            color: var(--text-color-bg-theme-color1);
            background-color: var(--theme-color1);
          }
        }
      }
      .tab-content {
        padding-bottom: 0;
        padding-left: 0;
        border: 1px solid transparent;
        .wc-tab {
          margin-bottom: 0;
          box-shadow: none;
          padding: 15px 0 50px;
          p {
            margin: 0;
          }
        }
        p {
          font-size: $font-size-base;
        }
      }
      .woocommerce-Reviews {
        .woocommerce-Reviews-title {
          margin-bottom: 30px;
          font-family: $heading-font;
          font-size: $h4-font-size;
          font-weight: $headings-font-weight-h4;
        }
        .commentlist {
          list-style: outside none none;
          margin-bottom: 10px;
          padding-bottom: 10px;
          li {
            margin-bottom: 30px;
            &:last-child {
              margin-bottom: 0;
            }
          }
          .comment_container {
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;

            @include media-breakpoint-down(md) {
              display: block;
            }
            >img {
              -ms-flex-negative: 0;
              flex-shrink: 0;
              width: 102px;
              margin: 0;
              margin-right: 14px;
              padding: 10px;
              background-color: #fff;
              border-radius: 50%;
              @include box-shadow( 0px 10px 30px rgba(5, 5, 5, 0.08) );
              @include media-breakpoint-down(md) {
                margin-bottom: 20px;
              }
            }
            .comment-text {
              position: relative;
              display: inline-block;
              width: 100%;
              vertical-align: top;
              padding: 25px 30px 25px;
              border: 1px solid var(--theme-light-background);
              background-color: var(--theme-light-background);
            }
            .meta {
              font-size: 1rem;
              margin-bottom: 0;
              .woocommerce-review__author {
                color: $headings-color;
                font-family: $heading-font;
                font-weight: $headings-font-weight-h4;
                line-height: $headings-line-height-smaller;
                font-size: $h5-font-size;
                display: inline-block;
                text-transform: capitalize;
              }
              .woocommerce-review__published-date {
                font-size: 0.85rem;
                font-weight: normal;
                color: var(--theme-color1);
              }
            }
            .description {
              margin: 10px 0 0;
            }
          }
          .comment {
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
            padding-bottom: 15px;
            padding-left: 0;
            .media-left {
              margin-right: 15px;
            }
          }
        }
        #review_form {
          .comment-respond {
            .comment-reply-title {
              color: $headings-color;
              font-family: $heading-font;
              font-weight: $headings-font-weight-h4;
              font-size: $h4-font-size;
              line-height: $headings-line-height-smaller;
              margin-top: 30px;
              margin-bottom: 10px;
              display: block;
            }
            .comment-notes {
              font-size: 14px;
              color: var(--theme-color2);
              font-weight: normal;
              margin: 12px 0 18px;
            }
            .comment-form-rating label {
              margin-bottom: 5px;
            }
            .comment-form-comment {
              margin-top: 17px;
            }
            .comment-form-rating, .comment-form-comment {
              label {
                font-size: 1rem;
                color: var(--text-color);
              }
              .nice-select {
                display: none;
              }
            }
            .form-control {
              margin: 0 0 10px;
            }
            textarea.form-control {
              height: auto;
              border: 1px solid #e5e1e1;
              background-color: var(--theme-light-background);
            }
            .form-submit {
              margin-top: 15px;
            }
            .comment-form-cookies-consent {
              margin: 24px 0 32px;
              input {
                margin-right: 0.6rem;
              }
              label {
                color: #aaa;
                display: inline;
                font-weight: normal;
              }
            }
          }
        }
      }
    }

    .up-sells.products {
      .title {
        display: block;
        margin: 15px 0 30px;
      }
    }

    .related.products {
      .title {
        display: block;
        margin: 15px 0 30px;
      }
    }

    .summary {
      .price {
        font-size: 1.4rem;
        margin-top: 10px;
        margin-bottom: 25px;
        font-family: $heading-font;
        color: $woo_price_color;
        font-weight: $headings-font-weight-h3;
      }
      .woocommerce-product-details__short-description {
        margin-bottom: 35px;
      }
      form.cart {
        margin-bottom: 30px;
        .variations td {
          padding-left: 0;
        }
        .single_add_to_cart_button {
        }
      }
      .woocommerce-review-link {
        font-size: 0.9rem;
        color: var(--text-color);
        font-weight: normal;
        &:hover {
          text-decoration: underline;
        }
      }
      .woosc-btn {
        margin-top: 10px;
        margin-right: 20px;
        font-size: 13px;
        font-weight: bold;
        color: #222;
        background-color: transparent;
        border: none;
        padding: 0;

        &:before {
          font-family: 'linearicons-free';
          content: "\e053";
          margin-right: 10px;
          line-height: inherit;
          vertical-align: middle;
        }

        &:hover {
          color: var(--theme-color1);
        }
      }

      .woosw-btn {
        margin-top: 10px;
        font-size: 13px;
        font-weight: bold;
        color: #222;
        background-color: transparent;
        padding: 0;
        margin-right: 30px;
        border: none;

        &:before {
          font-family: 'linearicons-free';
          content: "\e043";
          margin-right: 10px;
          line-height: inherit;
          vertical-align: middle;
        }

        &:hover {
          color: var(--theme-color1);
        }
      }
      .yith-wcwl-add-to-wishlist,.compare.button {
        vertical-align: middle;
        float: left;
        background: 0 0;
        border: none;
        line-height: 30px;
        letter-spacing: 1px;
        margin-right: 20px;
        margin-bottom: 10px;
        margin-top: 0;
        font-size: 0.9rem;
        color: var(--text-color);
        font-weight: normal;
        padding: 10px 0;
        &:hover {
          background: none;
        }
        a {
          color: var(--text-color);
          font-weight: normal;
          &:hover {
            text-decoration: underline;
          }
        }
      }
      .compare.button {
        &:hover {
          text-decoration: underline;
        }
        .blockUI {
          background-image: none !important;
        }
      }
      .yith-wcwl-add-to-wishlist {
        .add_to_wishlist, .yith-wcwl-wishlistaddedbrowse, .yith-wcwl-wishlistexistsbrowse {
          &:before {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            line-height: 1;
            vertical-align: middle;
            font-family: "Font Awesome 5 Free";
            font-weight: 600;
            content: "\f004";
            color: var(--theme-color1);
          }
          &:after,
          .blockUI {
            display: none !important;
          }
        }
        .yith-wcwl-wishlistaddedbrowse, .yith-wcwl-wishlistexistsbrowse {
          &:before {
            content: "\f004";
          }
        }
      }
      .compare.button::before {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        line-height: 1;
        vertical-align: middle;
        font-family: "Font Awesome 5 Free";
        font-weight: 600;
        margin-right: 5px;
        content: "\f24d";
        color: var(--theme-color1);
      }
    }

  }
}