.content-block-product {
   padding: 35px 45px 30px;

   @media screen and (max-width: 500px) {
      padding: 25px;
   }

   h1 {
      font-size: 28px;

      @media screen and (max-width: 991px) {
         font-size: 24px;
      }
   }

   .pa-to-3 {
      padding-top: 15px;
   }

   .btn-heart {
      color: $gray-dark;
      margin-right: 20px;

      i {
         margin-right: 8px;
      }

      .fc-heart-o,
      .fa-heart-o {
         color: $gray;
      }
   }

   .btn-caret {
      color: $gray-dark;

      .fc,
      .fa {
         color: $brand-primary;
         margin-left: 8px;
         font-size: 16px;
         position: relative;
         top: 2px;
      }
   }

   .price-common {
      text-decoration: line-through;
      color: $gray;
      font-size: 18px;
      margin-bottom: 0;
   }

   .price-novat {
      color: $gray;
      font-size: 14px;
   }

   .price-final {
      color: $gray-dark;
      font-size: 32px;
      line-height: 1em;
      margin: 0;
   }

   .buy_count {
      display: inline-block;
      width: 25px;
      text-align: center;
      vertical-align: middle;
      margin-right: 5px;

      i {
         display: block;
         font-size: 18px;

         &:hover {
            color: $brand-primary;
            cursor: pointer;
         }
      }

      @media screen and (max-width: 400px) {
         display: none;
      }
   }

   .submit-block {

      .form-control {
         margin-left: 5px;
         text-align: center;
         width: auto;
         display: inline-block;
         max-width: 50px;


         @media screen and (max-width: 400px) {
            float: left;
            margin-top: 6px;
         }
      }

      label {
         font-size: 12px;

         @media screen and (max-width: 1199px) and (min-width: 992px) {
            display: none;
         }

         @media screen and (max-width: 500px) {
            display: none;
         }
      }

      @media screen and (max-width: 991px) {
         margin-top: 15px;
         padding-top: 15px;
         border-top: 1px solid $border-color;
      }

      @media screen and (max-width: 400px) {
         .btn {
            font-size: 12px;
            padding: 15px 44px 14px 10px;

            i {
               height: 48px;
               width: 34px;
            }
         }
      }
   }

   .params {
      margin: 10px 0;
      font-size: 12px;
      color: $gray;

      li {
         padding: 5px 0 0;
      }
   }

   @media screen and (min-width: 450px) {
      .pa-to-3 {
         padding-top: 3rem;
      }
   }
}

.table-variations {
   border-collapse: collapse;
   margin: 20px 0;

   @media screen and (max-width: 500px) {
      font-size: 12px;
   }

   .display-row {
      border: 1px solid $border-color;
      cursor: pointer; // pro click eventu na mobilech

      &:hover,
      &.selected {
         background: lighten($brand-primary, 5%);
         border-color: $brand-primary;
         cursor: pointer;

         .display-cell {
            border-top: 1px solid $brand-primary;
         }
      }
   }

   .display-cell {
      padding: 12px 20px 10px;

      @media screen and (max-width: 767px) {
         padding: 12px 10px 10px;
      }

      @media screen and (max-width: 544px) {
         padding: 10px 4px 8px;
         font-size: 11px;

         .var-check {
            text-align: center;
            width: 30px;
         }
      }
   }

   .variation-price {
      text-align: right;

      @media screen and (min-width: 500px) {
         font-size: 16px;
      }
   }
}

.btn-link {
   text-decoration: underline;
   font-size: 12px;
   display: inline-block;

   &:hover,
   &:active,
   &:focus {
      text-decoration: none;
   }
}

.attachments {
   a {
      display: block;
      width: 33.33%;
      float: left;
      padding: 0 10px 10px 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      @include underline-default;

      &[href$=".pdf"] i::before {
         content: "\f1c1";
      }

      &[href$=".jpg"] i::before,
      &[href$=".png"] i::before,
      &[href$=".gif"] i::before {
         content: "\f1c5";
      }

      &[href$=".zip"] i::before,
      &[href$=".rar"] i::before {
         content: "\f1c6";
      }

      &[href$=".doc"] i::before,
      &[href$=".docx"] i::before {
         content: "\f1c2";
      }
   }

   hr {
      margin: 30px -45px;
   }

   i {
      color: $brand-primary;
      position: absolute;
      left: 0;
      top: 3px;
   }
}

.producer-link {
   img {
      margin-right: 20px;
   }

   a:first-child + .btn-link {
      padding-top: 8px;
   }

   img + .btn-link {
      display: inline-block;
      padding-top: 19px;
   }
}

@media screen and (max-width: 450px) {
   .delivery-time-table {
      display: block;
      text-align: center;

      > div {
         display: block;
      }
   }
}

.dotaz-na-produkt {
   overflow: auto;
}

.tabs .active,
.nav-tabs .nav-link.active {
   background: $white;
}
