$product-title-fontsize: 26px !default;
$review-stars-margin-top: -1px !default;

.product-main {
   margin-bottom: 50px;

   > .container-wide {
      padding: 0;
   }

   .breadcrumbs {
      a,
      .active,
      li:not(:last-child)::after {
         color: #8b8b8b;
      }
   }

   @media screen and (max-width: $lg - 1) {
      margin-bottom: 10px;

      .products-carousel-wrapper {
         .container {
            padding-left: 0;
            padding-right: 0;
         }

         .wpj-carousel-controls {
            display: none;
         }
      }
   }

   .icons_question {
      margin-left: 20px;
   }
}

.header-product {
   border-bottom: 0;

   @media screen and (min-width: $lg) {
      border-bottom: 1px solid $border-color;
   }
}

.product-top {
   display: flex;
   justify-content: center;

   .column-left {
      flex-grow: 1;
   }

   .column-right {
      margin-right: 200px; //1920px - $xxl(1520px) / 2
      margin-left: 75px;
      max-width: 450px;
      width: 100%;
   }

   .product-top-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .review-stars-wrapper {
         margin-right: auto;
      }

      .fc {
         color: $brand-ctr;
      }

      .icons_star_full {
         margin-right: 5px;
         position: relative;
         top: $review-stars-margin-top;
      }
   }

   .product-title {
      font-size: $product-title-fontsize;
      font-weight: 400;
      margin-bottom: 10px;
   }

   .add-to-favorites {
      .fc {
         color: $text-muted;
         font-size: 18px;
      }

      &.active .fc {
         color: $red;
      }
   }

   .annotation {
      color: $text-muted;
   }

   .set-title {
      color: $text-dark;
      font-size: $font-size-larger;
      font-weight: 500;
      margin-bottom: 5px;
   }

   .delivery-timetable {
      height: 30px;
   }

   .product-watchdog {
      margin-bottom: $grid-gutter-width;
   }

   .submit-block {
      margin-bottom: 0;
   }

   .sellers-link {
      margin: 10px 0;
   }

   .bonus-points {
      line-height: $line-height-sm;

      a {
         font-weight: $font-weight-bold;
      }

      p {
         margin-bottom: 10px;
      }
   }

   [data-focus-opener="product-watchdog"] {
      position: relative;

      .fc {
         position: absolute;
         left: 35px;
         top: 15px;
      }
   }

   .question-link {
      margin-left: 15px;
   }

   .product-links-wrapper {
      margin-top: 10px;
   }

   @media screen and (min-width: $lg) {
      margin-bottom: 20px;

      .sticky {
         position: sticky;
         top: 20px;
      }
   }

   @media screen and (max-width: $lg - 1) {
      margin-bottom: 20px;
   }
}

.product-attachments {
   margin-bottom: 30px;

   .title-default {
      font-weight: 700;
   }
}

.product-outlinks {
   margin-bottom: 20px;

   ul {
      @include list-triangle;
   }
}

.focus.sizetable {
   .focus-content {
      width: auto;
   }

   table {
      border: 0;
      margin-bottom: 20px;
   }

   td {
      border: 0;
      border-bottom: 1px solid $border-color;
      padding: 2px 5px;
   }
}

.product-sizetable {
   .focus-content {
      width: fit-content;
   }
}

.product-articles {
   @media screen and (min-width: $xs) {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .article-small {
         flex: none;
         width: calc(50% - 10px);
      }
   }
}

.reviews-empty.reviews-empty {
   text-align: left;
}

.reviews-header {
   display: flex;
   align-items: center;

   .rating-stars {
      font-size: 16px;
      display: inline-flex;
      align-items: center;
      margin-left: 12px;
   }

   .fc {
      margin-left: 4px;
   }
}

.review-text {
   .cons,
   .pros {
      padding-left: 40px;
      position: relative;

      &::before {
         @include fonticon;

         position: absolute;
         left: 0;
         top: 6px;
      }
   }

   .pros {
      color: $state-success;

      &::before {
         content: $icons_plus-square;
      }
   }

   .cons {
      color: $state-error;

      &::before {
         content: $icons_minus-square;
      }
   }
}

@media screen and (max-width: $xxl - 1) {
   .product-top {
      .column-right {
         max-width: unset;
         margin: 0 20px;
         width: calc(50% - 40px);
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .product-main {
      .breadcrumbs {
         margin-top: 0;

         a, li::before {
            color: $text-dark;
         }
      }
   }

   .product-top {
      flex-wrap: wrap;

      .column-right {
         width: calc(100% - 40px);
      }
   }

   /*.submit-button {
      position: fixed;
      bottom: 37px;
      left: 30px;
      z-index: 102;
   }*/
}
