/* -------------------------------------------
	Single Product Page
		1. Product Image Popup - Photoswipe
		2. Woocommerce Notices
		3. Product Gallery
			1. Gallery
			3. Product Thumbs
			2. Types
		4. Product Image Buttons
		5. Product Navigation
		6. Product Summary
			1. Wrap
			2. Title
			3. Meta
			4. Price
			5. Product Rating
			6. Short Description
			7. Variations
			8. Countdown
			8. Cart Form
			9. Buttons
			10. Share
      11. Grouped Product
		7. Product Tabs
			1. Tab
			2. Accordion
			3. Section
		8. Add to Cart Sticky
		9. Frequently Bought Together
		10. Product Review
		11. Related Products
---------------------------------------------- */

@import "../config";
@import "../mixins";
@import "../direction";

// 1. Product Image Popup - PhotoSwipe
.pswp {
  z-index: 3010;

  .pswp__bg {
    background-color: rgba(0, 0, 0, 0.7);
  }

  // Product Image Popup - Arrow
  .pswp__button--arrow--left,
  .pswp__button--arrow--right {
    width: 3em;
    height: 3em;
    margin-top: -1.5em;
    color: var(--alpha-white-color);
    border-radius: 50%;
    font-size: 1.1429em;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    text-align: center;
    opacity: 0.5;
    #{$right}: 10%;
    transition: opacity 0.3s;
    border: 2px solid;
  }

  .pswp__ui > button {
    &::before {
      background: transparent;
      position: static;
    }

    &:hover {
      opacity: 1;
    }
  }

  .pswp__button--arrow--right::before {
    content: "\f054";
  }

  .pswp__button--arrow--left {
    #{$left}: 10%;
    #{$right}: auto;

    &::before {
      content: "\f053";
    }
  }

  .pswp__top-bar,
  .pswp__caption {
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1),
      background-color 0.3s 0.5s;
  }
}

.pswp__scroll-wrap {
  transform: scale(0.5);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
}

.pswp:not(.pswp--animated-in) .pswp__top-bar,
.pswp:not(.pswp--animated-in) .pswp__caption {
  background-color: transparent;
}

.pswp--visible .pswp__scroll-wrap {
  // pswp pswp--supports-fs pswp--open pswp--notouch pswp--css_animation pswp--svg pswp--zoom-allowed pswp--visible pswp--animated-in
  transform: none;
  opacity: 1;
}

.pswp__img {
  border-radius: var(--alpha-border-radius-form);
}

.pswp__img--placeholder--blank {
  background-color: #f2f3f5;
}

.pswp__caption {
  min-height: auto;
}

.pswp__caption__center {
  text-align: center;
}

@media (max-width: 600px) {
  .admin-bar .pswp {
    height: 100%;
    top: 0;
    z-index: 1000000;
  }
}

// 2. Woocommerce Notices
.single-product .woocommerce-error .button {
  background-color: var(--alpha-danger-color);
  border-color: var(--alpha-danger-color);
  color: var(--alpha-white-color);
}

// 3. Product Gallery
// 3-1. Gallery
.product-single-carousel-wrap {
  width: 100%;
}

.woocommerce-product-gallery {
  position: relative;
}

.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
  width: 100%;
  display: block;
}

.product-single .col-md-6 .woocommerce-product-gallery {
  position: sticky;
  top: 0;
}

.product-gallery {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.woocommerce-product-gallery .product-label-group {
  z-index: 2;
  #{$left}: 2rem;
}

.pg-default .woocommerce-product-gallery__image {
  width: 100%;
}

.product-single-default .woocommerce-product-gallery,
.product-single-horizontal .woocommerce-product-gallery,
.product-single-vertical .woocommerce-product-gallery {
  margin-bottom: 2rem;
}

@include mq(md) {
  .product-single-default .woocommerce-product-gallery,
  .product-single-horizontal .woocommerce-product-gallery,
  .product-single-vertical .woocommerce-product-gallery {
    margin-bottom: 4rem;
  }
}

@include mq(lg) {
  .product-label-group.pg-vertical-label {
    #{$left}: 12rem;
  }

  .pg-vertical {
    .product-single-carousel-wrap {
      max-width: calc(100% - 90px - calc(2 * var(--alpha-gap)));
    }
  }
}

// 3-2. Product Thumbs
.product-thumbs-wrap {
  position: relative;
  margin-top: calc(2 * var(--alpha-gap));
  overflow: hidden;
  flex-basis: 100%;
  max-width: 100%;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .slider-button {
    background: var(--alpha-change-color-light-1);
    opacity: 0.9;
    border-radius: 0;
    height: 101%;
    width: 2.4rem;
    transition: opacity 0.3s;
  }

  > .disabled {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .slider-button-prev {
    #{$left}: 1.2rem;

    &:before {
      content: if-ltr("\e912", "\e913");
    }
  }

  .slider-button-next {
    #{$right}: 1.2rem;

    &:before {
      content: if-ltr("\e913", "\e912");
    }
  }

  > button:not(.disabled):hover {
    opacity: 1;
  }
}

.product-thumb {
  position: relative;
  cursor: pointer;
  backface-visibility: hidden;

  .product-thumbs.active & {
    margin-#{$left}: 0;
  }

  .product-quickview &,
  .product-quickview & img {
    padding-bottom: 1px;
  }

  img {
    transition: border-color 0.3s;
    border: 1px solid transparent;
  }
  .product-thumb-inner {
    padding-top: 1px;
    padding-bottom: 1px;
  }

  .row > & {
    max-width: calc(25% - 1rem);
    flex: 0 0 25%;
    padding: 0 calc(0.5 * var(--alpha-gap));
  }

  &.active img {
    border-color: var(--alpha-primary-color);
  }
}

.slider-container-initialized div.product-thumb {
  margin: 0;
}

@include mq(lg) {
  .pg-vertical {
    .product-thumbs-wrap {
      order: -1;
      max-width: 90px;
      margin: side-values(0 calc(2 * var(--alpha-gap)) 0 0);

      > button {
        border-radius: 0;
        width: 101%;
        height: 2.5rem;
        transform: none;

        &:before {
          margin: 0;
          font-size: 2rem;
          vertical-align: 4px;
        }
      }

      > .slider-button-prev {
        top: 0;
        left: 0;

        &::before {
          content: "\e911";
        }
      }

      > .slider-button-next {
        top: auto;
        bottom: 0;
        right: 0;

        &::before {
          content: "\e910";
        }
      }
    }

    .product-thumbs {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
      width: 100%;
    }

    .product-thumb {
      height: auto;
      padding: 0;
      margin: 0 0 calc(2 * var(--alpha-gap));
    }

    .row > .product-thumb {
      flex: 0;
      max-width: none;
    }
  }
}

// 3-3. Types
.product-gallery {
  // horizotal or vertical
  > .slider-container {
    position: relative;
    width: 100%;
  }
}

.product-gallery {
  // Grid & Masonry Type
  &.row {
    &:not(.gutter-no) .product-image-full {
      #{$right}: 2rem;
    }
  }

  &.grid {
    margin-top: 0;

    > *:first-child {
      max-width: 100%;
      flex: 0 0 100%;
    }
  }
}

.product-masonry-type {
  // masonry
  > * {
    margin-bottom: calc(2 * var(--alpha-gap));
  }
}

@include mq(sm) {
  .product-masonry-type {
    align-items: center;

    .woocommerce-product-gallery__image:nth-child(4n + 1),
    .woocommerce-product-gallery__image:nth-child(4n + 2) {
      max-width: 33.3333%;
      flex-basis: 33.3333%;
    }

    .woocommerce-product-gallery__image:nth-child(4n),
    .woocommerce-product-gallery__image:nth-child(4n + 3) {
      max-width: 66.6667%;
      flex-basis: 66.6667%;
    }

    .woocommerce-product-gallery__image:first-child {
      max-width: 100%;
      flex-basis: 100%;
    }
  }
}

.product-gallery {
  // Slider Type
  &.slider-container {
    position: static;
  }

  > .slider-pagination {
    bottom: -3rem;
  }
}

.product-single-carousel {
  & ~ .slider-button-prev {
    #{$left}: 1.5em;
  }

  & ~ .slider-button-next {
    #{$right}: 1.5em;
  }
}

.product-gallery-carousel {
  a {
    height: 100%;
  }

  & ~ .slider-button {
    font-size: 2.4rem;
  }
}

.product-sticky-thumbs {
  // Sticky Thumbs
  flex: 0 0 calc(90px + calc(2 * var(--alpha-gap)));
  order: -1;

  img {
    cursor: pointer;
    width: 90px;
    margin-bottom: calc(2 * var(--alpha-gap));
    transition: border-color 0.2s;
    border: 1px solid transparent;
  }

  .active {
    border-color: var(--alpha-primary-color);
  }
}

.product-sticky-images {
  flex: 0 0 calc(100% - 90px - calc(2 * var(--alpha-gap)));
  max-width: calc(100% - 90px - calc(2 * var(--alpha-gap)));

  > * {
    position: relative;
    margin-bottom: calc(2 * var(--alpha-gap));
  }
}

.product-single-sticky-thumbs {
  .product-label-group {
    left: 12rem;
  }
}

// 4. Product Image Buttons
.product-gallery-btn {
  padding: 1rem;
  #{$right}: 2rem;
  bottom: 2rem;
  border: 0;
  color: var(--alpha-change-color-dark-1);
  background: transparent;
  font-size: 3rem;
  line-height: 1;
  transition: opacity 0.3s, color 0.3s, background-color 0.3s;
  z-index: 1;
  cursor: pointer;
  opacity: 0;

  &:hover {
    color: var(--alpha-primary-color);
  }

  .product-gallery & {
    position: absolute;
    width: auto;
  }

  + .product-gallery-btn {
    bottom: 6.5rem;

    + .product-gallery-btn {
      bottom: 11.5rem;
    }
  }

  :hover > &,
  .product-single-carousel-wrap & {
    opacity: 0.7;
  }

  .product-single-carousel-wrap:hover & {
    opacity: 0.3;
  }
}

.product-gallery button.product-gallery-btn:hover {
  color: var(--alpha-dark-color);
  opacity: 1;
}

// 5. Product Navigation
.product-navigation {
  display: flex;
  justify-content: space-between;
  padding-#{$left}: 2px;

  .main-content > &,
  .main > &,
  .main > div > & {
    margin-top: -2rem;
  }

  + .woocommerce-notices-wrapper > .alert:first-child {
    margin-top: 0;
  }
}

.product-nav {
  position: relative;
  display: flex;
  flex-direction: if-rtl(row-reverse, row);

  .product-nav-prev .product-nav-popup::before {
    #{$right}: 4.3rem;
  }

  .product-nav-prev:last-child .product-nav-popup::before {
    #{$right}: 1rem;
  }

  i {
    display: inline-block;
    color: var(--alpha-grey-color);
    font-size: 1.7em;
    text-align: center;
    vertical-align: middle;
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  }

  a {
    display: inline-block;
    position: relative;

    // Triangle
    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      height: 1.2rem;
      left: 0;
      width: 100%;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
      z-index: 1;
    }
  }

  span span {
    position: relative;
    color: var(--alpha-body-color);
    font-size: 1.2rem;
    line-height: 1.2;
    padding: 1rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    background: inherit;
    z-index: 1;
  }

  li:hover {
    i {
      color: var(--alpha-primary-color);
    }

    .product-nav-popup,
    a:before {
      opacity: 1;
      visibility: visible;
    }

    .product-nav-popup {
      transform: none;
    }
  }

  li + li {
    margin-#{$left}: 5px;
  }
}

.product-nav-popup {
  position: absolute;
  top: 100%;
  #{$right}: 0;
  z-index: 30;
  width: 12rem;
  padding: 0 0.5rem 1rem;
  line-height: 1.5;
  text-align: center;
  background-color: var(--alpha-change-color-light-1);
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  transform: scale(0.9);
  transform-origin: top;
  transition: opacity 0.3s, transform 0.3s;

  img {
    position: relative;
    width: 100%;
    padding-top: 0.5rem;
    background-color: var(--alpha-change-color-light-1);
  }
}

// 6. Product Summary
// 6-1. Wrap
.summary {
  padding: 1.2rem 0 3rem;
}

.product-single {
  position: relative;

  .select-type {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  }

  .product-soac-wrapper {
    align-items: center;

    .btn-product-icon {
      margin: side-values(0 2rem 1rem 0);

      span {
        display: none;
      }

      &.compare {
        color: var(--alpha-body-color);
      }
    }
  }

  .product-divider {
    margin-top: 1.8rem;
    margin-bottom: 2.2rem;
  }

  .btn-product-icon + .product-divider {
    margin-top: 2.7rem;
  }
}

hr.product-divider {
  width: 100%;
  background-color: var(--alpha-change-light-border-color);
}

// 6-2. Title
.product-title-wrap {
  display: flex;
  align-items: center;

  .product-navigation {
    margin-bottom: 1.5rem;
  }

  .product_title {
    margin-#{$right}: auto;
  }
}

.product_title {
  font-size: 1.857em;
  font-weight: 500;
  margin-bottom: 1.5rem;

  a {
    color: inherit;
  }

  @include mq(lg, max) {
    font-size: 1.6em;
  }
}

// 6-3. Meta
.product-brands {
  .product-price-rating & img {
    height: 4rem;

    &:not(.d-lazyload) {
      width: auto;
    }
  }

  .alpha-product-brand-thumbnail {
    display: inline-block;
    border: 1px solid var(--alpha-change-light-border-color);
    margin: side-values(0 1.7rem 1rem 0);

    &:last-child {
      margin-#{$right}: 0;
    }
  }
}

.product_meta {
  color: var(--alpha-change-color-dark-1);
  line-height: 1.9;

  img {
    border-radius: inherit;
  }

  > span {
    display: block;

    span,
    a {
      color: var(--alpha-body-color);
      margin-#{$left}: 5px;
    }
  }

  a:hover {
    color: var(--alpha-primary-color);
  }

  label {
    margin-#{$right}: 1rem;
  }

  > * {
    margin-#{$right}: 1.7rem;
    margin-bottom: 1.5rem;
  }

  .product-brands {
    a {
      margin-#{$left}: 0;
    }
  }
}

// 6-4. Price
.summary .price {
  display: block;
  margin: side-values(0 auto 1rem 0);
  font-size: 2.571em;
  font-weight: 700;
  line-height: 1.2;

  del {
    font-size: 0.665em;
  }

  small {
    // for tax in quickview magnific popup.
    display: inline;
    color: inherit;
    font-size: 0.8em;
    line-height: inherit;
  }

  @include mq(lg, max) {
    font-size: 2em;
  }
  @include mq(sm, max) {
    font-size: 1.6em;
  }
}

.product-price-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

// 6-5. Product Rating
.single-product {
  .avg-rating-container,
  .woocommerce-product-rating {
    .star-rating {
      &::before,
      span::after {
        color: var(--alpha-primary-color-hover);
      }
    }
  }
}

.summary {
  .woocommerce-review-link {
    color: var(--alpha-grey-color);
    font-size: 0.8em;
  }

  .woocommerce-product-rating {
    margin-bottom: 1rem;
    font-size: 1.0714em;

    &:not(:last-child) {
      margin-#{$right}: 3rem;
    }
  }

  .star-rating {
    letter-spacing: 0.1em;

    span::after {
      color: #ffb639;
    }
  }
}

// 6-6. Short Description
.summary .woocommerce-product-details__short-description {
  margin-bottom: 3.3rem;

  ul {
    margin-bottom: 0;
  }
}

p.out-of-stock,
p.alpha-pre-order-date,
.woocommerce-variation p,
p.stock.available-on-backorder {
  display: inline-block;
  padding: 4px 2rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  border-radius: 2px;
  color: var(--alpha-white-color);
  background: #d26e4b;
}

p.out-of-stock {
  background: var(--alpha-light-color);
}

// 6-8. Countdown
.product-countdown-container {
  position: relative;
  margin: -0.6rem 0 3rem;
  color: var(--alpha-change-color-dark-1);
  font-size: 1.6rem;
  font-weight: 500;

  .product-list-sm & {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    margin-bottom: 0;
    font-size: 0.6429em;
    justify-content: center;

    .countdown-amount {
      margin-left: 0;
    }
  }

  &::before {
    content: "";
    position: absolute;
    height: 2.4rem;
    #{$left}: -1.7rem;
    top: 50%;
    transform: translateY(-50%);
    border-#{$right}: 1px solid var(--alpha-change-color-light-1);
    opacity: 0.2;
  }

  label {
    margin-#{$right}: 0.5rem;
    text-transform: none;
    font-weight: 400;
    color: var(--alpha-white-color);
  }

  .countdown-amount {
    color: inherit;
    font-size: inherit;
  }
}

.countdown-variations {
  display: none;
}

.product-countdown {
  display: inline;
  margin-#{$left}: 1.5rem;
  padding: 0.6rem 1.5rem;
  color: var(--alpha-white-color);
  background-color: var(--alpha-primary-color);
  font-size: 1.4rem;
  font-weight: 500;
}

.product-gallery + .product-countdown-container {
  position: absolute;
  bottom: 20px;
  margin: 0 -50% 0 50%;
  transform: translateX(-50%);
}

// 6-9. Cart Form
.woocommerce-variation-add-to-cart,
form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

form.cart {
  .quantity-wrapper {
    display: flex;
    align-self: stretch;
    align-items: center;
    margin-bottom: 1.4rem;

    label {
      margin-#{$right}: 1px;
    }
  }

  .quantity {
    margin-#{$right}: 1rem;
  }

  label {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 3.2rem;
    color: var(--alpha-change-color-dark-1);
    min-width: 7.7rem;
  }
}

@include mq(sm, max) {
  form.cart .quantity-wrapper label {
    margin-#{$right}: 5px;
  }
}

form.variations_form {
  display: block;
}

.quantity {
  position: relative;

  .cart & {
    align-items: center;
    align-self: stretch;
  }

  .qty {
    height: 100%;
    padding: 0 3.7rem;
    color: var(--alpha-change-color-dark-1);
    transition: color 0.3s, border 0.3s;
  }

  .fixed & {
    align-self: center;
  }

  .fixed & .qty {
    height: 5.3rem;
  }
}

.reset_variations {
  transition: color .3s, background-color .3s;
}

// 6-10. Buttons
.summary {
  .yith-wcwl-add-to-wishlist {
    position: relative;
    display: inline-block;
    margin-#{$right}: 3.2rem;

    a {
      display: inline-block;
      color: var(--alpha-change-color-dark-1);

      &::before {
        font-size: 1.43em;
      }

      &:hover {
        color: var(--alpha-primary-color);
      }
    }
  }

  .feedback i {
    font-size: 1.2em;
    vertical-align: -0.05em;
  }

  .yith-wcwl-wishlistaddedbrowse {
    a {
      &::before {
        float: none;
        width: auto;
      }
    }
  }
}

.single-product .yith-wcwl-add-to-wishlist {
  .feedback ~ a:before {
    content: none;
  }
}

.product-gallery .yith-wcwl-add-to-wishlist:last-child {
  margin-top: 2rem;
}

.yith-wcwl-add-to-wishlist a.button {
  padding: 0 1em;
  line-height: 4rem;
  color: var(--alpha-white-color);
  border-radius: 2px;

  &:hover {
    color: var(--alpha-white-color);
  }
}

form.cart {
  .single_add_to_cart_button {
    display: block;
    flex: 1;
    margin-bottom: 1.4rem;
    line-height: 5.3rem;
    padding: 0 1em;
    border-radius: 2px;
    border-width: 0;

    .product-sticky-content.fixed & {
      padding: 0 1em;
    }
  }

  .summary & {
    margin-bottom: 1rem;
  }
}

.single_add_to_cart_button::#{$before} {
  content: "\e93a";
  font-family: $theme-font;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
  margin-#{$right}: 8px;
  position: relative;
  bottom: -1px;
}

.summary {
  .add-to-compare {
    display: inline-block;
    vertical-align: -1px;
  }
  .compare {
    color: var(--alpha-change-color-dark-1);

    &:before {
      font-size: 1.62em;
    }

    &:hover {
      color: var(--alpha-primary-color);
    }
  }
}

// 6-11. Share
.summary {
  .social-icons {
    margin-#{$left}: 1.5rem;

    .social-icon {
      background-color: transparent;
      color: var(--alpha-change-color-dark-1);
      opacity: 0.75;
      transition: opacity 0.3s;

      &:hover {
        opacity: 1;
      }
    }
  }

  .social-icon {
    margin: side-values(0 1.5rem 0 0);
    padding: 5px;
    width: auto;
    height: auto;
  }
}

.product-links-wrapper {
  color: var(--alpha-change-color-dark-1);

  .product_meta + & {
    margin-top: -2px;
  }
}

// 6-12. Grouped Products
.woocommerce-grouped-product-list {
  margin-bottom: 3rem;
}

.woocommerce-grouped-product-list-item {
  padding: 1.5rem 0;
  font-size: 1rem;

  .product-thumbnail {
    width: 95px;
    padding: 25px 0;
  }
  @media (min-width: 992px) {
    .product-name {
      width: 195px;
    }
    .product-thumbnail img {
      padding-#{$right}: 10px;
    }
  }
  .product-quantity {
    width: 110px;
    .quantity-wrapper {
      margin: 0;

      label {
        display: none;
      }
    }

    .quantity {
      margin: 0;
      @media (max-width: 991px) {
        width: 9.8rem;
      }
    }

    .qty {
      font-weight: 600;
    }
  }
  &:last-child td {
    border-bottom: 1px solid var(--alpha-change-light-border-color);
  }
  td {
    vertical-align: middle;
    border-top: 1px solid var(--alpha-change-light-border-color);

    &:last-child {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .product-name {
    label {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color: var(--alpha-dark-color);
      font-size: 1.5em;
      line-height: 1.4;
      text-transform: capitalize;
    }

    a {
      font-weight: 400;
      color: inherit;

      &:hover {
        color: var(--alpha-primary-color);
      }
    }
  }

  .quantity {
    width: 12.8em;
    height: 5.3em;
    .qty {
      font-size: 1.3em;
    }
  }

  .price-column .price {
    font-size: 1.8em;
    font-weight: 600;
    margin: 0;
  }

  @include mq(xs, max) {
    .product-quantity {
      width: 85px;
    }
  }
}
@include mq(xl, max) {
  .woocommerce-grouped-product-list-item {
    font-size: 0.9rem;
  }
}

.product-type-grouped .summary {
  .grouped_form {
    border-bottom: 1px solid var(--alpha-change-light-border-color);
    margin-bottom: 2rem;
  }

  .single_add_to_cart_button {
    margin-bottom: 3rem;
  }
}

// 7. Product Tabs
// 7-1. Tab
.woocommerce-tabs {
  margin-top: 3rem;

  > ul .active > .nav-link,
  > ul .nav-link.active,
  > ul > li:hover > .nav-link {
    color: var(--alpha-change-color-dark-1);
    border-bottom-color: var(--alpha-primary-color);
  }

  > ul > li > a {
    color: var(--alpha-grey-color);
  }

  > ul .nav-link {
    padding: 1.5rem 2.8rem;
    font-size: 1.14em;
    font-weight: 600;
    text-transform: none;
    line-height: 1.3;
  }

  .woocommerce-Tabs-panel {
    line-height: 2;
  }

  > .tab-pane {
    padding: 4.3rem 0;
  }

  > .tab-pane + .tab-pane {
    display: none;
  }

  .wc-tab > h2 {
    display: none;
  }

  .wc-tabs {
    justify-content: center;

    .nav-item {
      flex: inherit;
      margin-bottom: 0;
    }

    .nav-item:not(:last-child) {
      margin-right: 2px;
    }

    .nav-link:after {
      height: 3px;
      background-color: var(--alpha-primary-color-hover);
    }
  }

  .woocommerce-Tabs-panel--seller > h2:not(.title-wrapper) {
    display: none;
    margin: 1.7rem 0 0.8rem;
    font-weight: 600;
    font-size: 1.4286em;
  }

  .woocommerce-Tabs-panel--reviews {
    padding-bottom: 1.5rem;
    margin-bottom: 0;

    &.tab-pane {
      padding-bottom: 3.6rem;
    }
  }

  p {
    margin-bottom: 3.8rem;
  }

  .form-submit {
    display: inline-block;
    margin: side-values(0 1.5rem 0 0);
  }

  table p {
    margin-bottom: 0;
  }

  .shop_attributes {
    margin: -0.8rem 0 1rem;
    font-size: 1.4rem;
    border-collapse: collapse;
    border: none;

    td,
    th {
      border: none;
      padding: 0.5rem 0;
    }

    th {
      width: 20rem;
      padding-#{$right}: 1rem;
      color: var(--alpha-change-color-dark-1);
      font-weight: 500;
      text-align: $left;
      text-transform: capitalize;
    }
  }

  .product-single > &.accordion .card {
    border-width: 1px 0 0;

    &:last-child {
      border-width: 1px 0 1px;
    }
  }
}

.reviews_tab span {
  display: inline-block;
  height: 0.9em;
  overflow: hidden;
  vertical-align: middle;
  line-height: 1;
}

.woocommerce-Reviews .comment-respond {
  margin: 0;
}

@include mq(sm, max) {
  .woocommerce-tabs tbody th {
    width: 100px;
  }

  .woocommerce-tabs .commentlist {
    padding: 0 0 2.5rem;
  }
}

// 7-2. Accordion
.woocommerce-tabs {
  &.accordion .comment-respond {
    padding: 1.5rem 2rem 0.5rem;
    background: transparent;
  }

  .card-header {
    font-size: 1.4rem;
    text-transform: capitalize;
  }

  .card-body {
    padding-top: 2rem;
    padding-bottom: 2rem;

    > h2 {
      margin-top: 0;
    }
  }

  &.accordion {
    margin-top: 1rem;
    margin-bottom: 5.5rem;
  }
}

.woocommerce-Tabs-panel--description.card-body {
  margin-bottom: 2rem;
}

// 7-3. Sections
.tab-section {
  margin-bottom: 4rem;

  .title-wrapper {
    margin-bottom: 3.5rem;

    .title {
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: 0;
      padding: 1.6rem 0;
    }
  }

  &.woocommerce-Tabs-panel--description,
  &.woocommerce-Tabs-panel--vendor {
    margin-bottom: 2rem;
  }
}

// 8. Add to Cart Sticky
.product-sticky-content,
.sticky-content-wrapper {
  width: 100%;
}

.product-sticky-content {
  .container {
    display: flex;
    align-items: center;
  }

  &:not(.fixed) .container {
    padding: 0;
    flex-wrap: wrap;
  }

  &.fixed {
    padding: 2rem 0;

    .quantity {
      margin-#{$right}: 0.8rem;
    }

    .quantity-wrapper label {
      display: none;
    }

    .single_add_to_cart_button {
      flex: 0;
      min-width: 21rem;
    }
  }
}

.sticky-content.fixed .quantity-wrapper,
.sticky-content.fixed .single_add_to_cart_button {
  margin-bottom: 0;
}

.sticky-product-details {
  display: none;
  align-items: center;
  margin-#{$right}: auto;

  img {
    width: 8.5rem;
    height: 8.5rem;
    object-fit: cover;
    margin-#{$right}: 1rem;
  }

  .price {
    padding: 0;
    border: 0;
    margin: 0;
    font-weight: 600;
    font-size: 1.1429em;

    del {
      font-size: inherit;
    }
  }

  .product-title {
    @include text-block(1);
    margin-bottom: 0.7rem;
    font-size: 1em;
    font-weight: 400;
  }
}

@include mq(md, max) {
  .sticky-product-details img {
    width: 4.4rem;
    height: 4.4rem;
  }

  .sticky-product-details .product-title {
    display: none;
  }

  .product-sticky-content.fixed {
    padding: 1rem 0;
  }
}

@include mq(sm, max) {
  .sticky-product-details p.price {
    display: none;
  }

  .product-sticky-content.fixed {
    .quantity {
      width: auto;
    }

    .single_add_to_cart_button {
      min-width: auto;
      flex: 1;

      &::before {
        content: none;
      }
    }
  }
}

@include mq("375px", max) {
  .product-sticky-content.fixed .single_add_to_cart_button {
    margin-#{$right}: 0;
  }
}

@include mq(sm) {
  .product-sticky-content.fixed .sticky-product-details {
    display: flex;
  }
}

@include mq(sm, "max") {
  .product-fbt .products .product:not(:first-child) {
    &:before,
    &:after,
    .product-media:before,
    .product-media:after {
      content: none;
    }

    margin-#{$left}: 0;
  }
}

// 10. Product Review
.woocommerce-Reviews-title {
  font-size: 2rem;
}

.fa-spinner {
  animation: spin 2s infinite linear;
}

.entry-content .avg-reviews-title {
  margin-bottom: 2.4rem;
  font-size: 2.6rem;
  font-weight: 500;
}

.avg-rating-container {
  display: flex;
  align-items: center;
  font-weight: 400;
  line-height: 1;
  margin-#{$left}: -0.4rem;
  margin-bottom: 3rem;

  mark {
    margin-bottom: 0;
    margin-#{$right}: 1.6rem;
    font-size: 8rem;
    font-weight: 600;
    line-height: 1;
    background: none;
  }

  .star-rating {
    font-size: 1.6rem;
  }
}

.avg-rating-title {
  display: block;
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
}

.ratings-list,
.commentlist {
  .star-rating {
    &:before,
    span:after {
      color: var(--alpha-grey-color);
    }
  }
}

.ratings-list {
  .star-rating {
    margin-#{$right}: 2.8rem;
  }

  .progress-value {
    margin-#{$left}: 1.9rem;
    min-width: 2.9rem;
    font-size: 1.4rem;
  }
}

.ratings-item {
  display: flex;
  align-items: center;
  line-height: 1;
  margin-bottom: 1.5rem;
  font-size: 0.85714em;
}

.rating-percent {
  background: var(--alpha-change-light-border-color);
  height: 1rem;
  width: 22.5rem;
  max-width: 100%;

  span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--alpha-primary-color-hover);
  }
}

.recommended-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2.5rem;
  font-weight: 400;
  letter-spacing: -0.025em;

  mark {
    margin-#{$right}: 2rem;
    background: none;
    font-size: 1.8em;
    font-weight: 600;
    color: var(--alpha-dark-color);
  }

  span {
    margin-#{$left}: 0.6rem;
    font-size: 0.8242em;
    color: var(--alpha-change-color-light-2);
  }
}

.woocommerce-Reviews {
  font-size: var(--alpha-body-font-size);

  .review {
    padding: 4rem 0 1.5rem;
  }

  .review-empty {
    margin-bottom: 2rem;
  }

  .meta {
    color: var(--alpha-grey-color);
    font-size: 1.4rem;
    margin-bottom: 0;
    line-height: 1.5;

    em {
      font-size: 1.3rem;
      font-style: normal;
    }
  }

  .description {
    margin: 0.7rem 0 2rem;
    line-height: 1.86;
  }

  .review-filter {
    padding-bottom: 2rem;
  }

  .btn-submit {
    border-color: #454545;
    background: #454545;

    &:hover,
    &:focus,
    &:active {
      border-color: var(--alpha-change-color-dark-2);
      background: var(--alpha-change-color-dark-2);
    }
  }

  .ratings-review,
  .recommend-compare {
    display: inline-flex;
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    font-size: 1.2rem;
    color: var(--alpha-change-color-light-2);
  }

  .comment-respond {
    .comment-reply-title {
      margin-bottom: 1rem;
      font-size: 2.6rem;
      font-weight: 500;
    }

    .form-control:not(.file-input) {
      padding: 1.4rem 1.8rem;
    }

    .stars span {
      font-size: 1.4rem;
    }

    .btn-submit {
      padding: 1.75rem 3.7rem;
      margin-bottom: 2rem;
      text-transform: capitalize;
    }
  }

  .tab-content .commentlist {
    padding: 0;

    &.loading {
      opacity: 0.5;
      pointer-events: none;
    }

    .star-rating {
      margin-bottom: 5px;
    }
  }

  .offcanvas-content .comment-respond {
    padding: 0;
    background: transparent;
  }

  .form-submit p {
    display: none;
  }

  .submit-review-toggle {
    margin-top: 1rem;
  }

  .offcanvas .offcanvas-content {
    width: 50rem;

    body.admin-bar & {
      margin-top: 3.2rem;
    }
  }

  .tab-templates,
  .commentlist {
    & + .pagination {
      border-top: 1px solid var(--alpha-change-light-border-color);
      padding-top: 3rem;
    }
  }
}

@include mq(md, max) {
  .alpha-comment-tabs .nav-item .nav-link {
    padding-left: 1em;
    padding-right: 1em;
  }

  .woocommerce-Reviews .review-filter {
    padding-top: 2rem;
  }
}

.woocommerce-review__author {
  margin-#{$right}: 0.5rem;
  color: var(--alpha-dark-color);
  font-weight: 500;
}

// Responsive
@include mq(lg) {
  .product-single .col-md-6 .summary,
  .product-single .col-md-6 .woocommerce-tabs {
    padding-#{$left}: 1rem;
  }

  // Sticky Both Type
  .woocommerce-product-gallery + .col-lg-3 {
    order: -1;
  }
}

// 11. Related Products
.related.products {
  margin-top: 5rem;
}