.eshop-products-wrapper {
  position:                                                 relative;

  .product-title {
    clear:                                                  both;
    color:                                                  $product-title-color;
    min-height:                                             $product-title-min-height;
  }

  .eshop-products {
    @extend                                                  .row;

    &.list {
      .eshop-product-wrapper {
        @extend                                              .col-xl-12;
        @extend                                              .col-lg-12;
        @extend                                              .col-md-12;
        @include                                            fade-in-2(1);
        padding:                                            0 !important;

        opacity:                                            0;

        .eshop-product {
          flex-direction:                                   row;
          min-height:                                       245px;

          .product-image {
            display:                                        inline-block !important;
            vertical-align:                                 top !important;
            width:                                          $product-image-size !important;
          }
          .product-content {
            vertical-align:                                 top !important;

            &before {
              content:                                      none;
            }
          }
        }

        @include                                              media-breakpoint-down(md) {
          width:                                              100%;
          max-width:                                          100%;
          flex:                                               0 0 100%
        }
      }
    }

    &.grid-big {
      .eshop-product-wrapper {
        @extend                                                .col-xl-4;
        @extend                                                .col-lg-4;
        @extend                                                .col-md-6;
      }
    }

    // Center spinner
    .fa-pulse {
      margin:                                               10% auto;
      width:                                                auto;
      height:                                               36px;
    }

    .eshop-product-wrapper {
      @include                                              fade-in(1);
      @extend                                               .col-xl-3;
      @extend                                               .col-lg-3;
      @extend                                               .col-6;
      @extend                                               .p-#{$products-spacing-gutter};

      opacity:                                              0;
      @for $i from 1 through 15 {
        &:nth-of-type(#{$i}) {
          animation-delay:                                  #{0.1+($i)/14}s;
        }
      }

      .eshop-product {
        @extend                                              .panel;

        display:                                            flex;
        flex-direction:                                     column;
        min-height:                                         420px;
        overflow:                                           hidden;
        position:                                           relative;

        > .product-count {
          position:                                         absolute;
          left:                                             0px;
          top:                                              0px;
          background:                                       $primary;
          color:                                            $white;
          z-index:                                          1000;

          @extend                                            .py-#{$products-spacing-gutter};
          @extend                                            .px-#{$products-spacing-gutter * 2};
        }
        .product-like {
          margin:                                           4px;

          button {
            border:                                         none;
            background:                                     none;
            padding:                                        0px;
            margin:                                         0px;
            cursor:                                         pointer;

            > .fa-icon {
              overflow:                                     visible;

              .fa-icon:first-child {
                fill:                                       $white;
                stroke:                                     $border-color;
                stroke-width:                               2px;
                overflow:                                   visible;
                transition-duration:                        .8s;
                transition-timing-function:                 ease-out;
                transition-property:                        fill, stroke;
              }
              &.liked {
                $drop-shadow:                               drop-shadow(0px 3px 0px rgba(0,0,0,0.2));
                filter:                                     $drop-shadow;
                -webkit-filter:                             $drop-shadow;
                .fa-icon:first-child {
                  fill:                                     $success;
                  stroke:                                   transparent;
                }
                .fa-icon.heart {

                }
                .fa-icon.heart-shadow {
                  color:                                    rgba(0,0,0,0.3);
                  > path {
                    transform:                              translate(2px, 2px);
                  }
                }
              }
            }
          }
        }
        .product-image {
          @extend                                            .p-#{$product-image-spacing};
          height:                                           $product-image-size;
          text-align:                                       center;
          vertical-align:                                   middle;
          &:before {
            content:                                        '';
            display:                                        inline-block;
            height:                                         100%;
            width:                                          0px !important;
            vertical-align:                                 middle;
          }
          img {
            max-width:                                      100%;
            max-height:                                     100%;
            -webkit-transition:                             $product-image-scale;
            -moz-transition:                                $product-image-scale;
            -o-transition:                                  $product-image-scale;
            -ms-transition:                                 $product-image-scale;
            transition:                                     $product-image-scale;
          }
          :hover img {
            -webkit-transform:                              $product-image-hover-scale;
            -moz-transform:                                 $product-image-hover-scale;
            -ms-transform:                                  $product-image-hover-scale;
            -o-transform:                                   $product-image-hover-scale;
            transform:                                      $product-image-hover-scale;
          }
        }
        .product-ribbon {
          @extend                                           .text-uppercase;
          @include                                          rotate(-45);

          text-align:                                       center;
          position:                                         absolute;
          top:                                              44px;
          left:                                             -60px;
          padding:                                          5px 60px;
          color:                                            $product-ribbon-color;
        }
        .product-content {
          @extend                                            .p-#{$product-best-content-spacing};

          display:                                          flex;
          flex-direction:                                   column;
          flex:                                             1 1 auto;
          padding-top: 0px !important;

          .tag {
            @extend                                          .mr-#{$product-best-content-spacing / 2};

            float:                                          left;
            color:                                          $product-tag-default-color;
            font-weight:                                    500;

            &.colored {
              @extend                                        .py-#{$product-best-content-spacing / 4};
              @extend                                        .px-#{$product-best-content-spacing / 2};
              @extend                                        .mb-#{$product-best-content-spacing / 4};

              font-size:                                    $product-tag-font-size;
              border-radius:                                3px;
              letter-spacing:                               $product-tag-font-size / 12;
              font-weight:                                  400;

              &.fpp {
                color:                                      $product-tag-color-fpp;
                background-color:                           $product-tag-bg-fpp;
              }
              &.amp {
                color:                                      $product-tag-color-amp;
                background-color:                           $product-tag-bg-amp;
              }
              &.upgrade {
                color:                                      $product-tag-color-upgrade;
                background-color:                           $product-tag-bg-upgrade;
              }
            }
            &.fpp {
              color:                                        $product-tag-bg-fpp;
            }
            &.amp {
              color:                                        $product-tag-bg-amp;
            }
            &.upgrade {
              color:                                        $product-tag-bg-upgrade;
            }
          }
          &:before {
            @extend                                          .py-#{$product-best-content-spacing / 4};
            @extend                                          .mb-#{$product-best-content-spacing / 4};

            content: '\00a0';
            float:                                          left;
            max-width:                                      0px !important;
          }
          .product-title {
            clear:                                          both;
            color:                                          $product-title-color;
            min-height:                                     $product-title-min-height;
          }
          .product-code {
            color:                                          $product-code-color;
            clear: both;
          }
          .product-price {
            color:                                          $product-price-color;
            font-weight:                                    500;
            margin-top:                                     auto;
          }
          .product-rate {
            .fa-icon {
              @extend                                        .mt-#{$product-rate-spacing};
              @extend                                        .mr-#{$product-rate-spacing};

              color:                                        $product-rate-color;
            }
            .active {
              color:                                        $product-rate-active-color;
            }
          }
          .product-quantity {
            margin-top:                                     auto;
          }
        }
        &.disabled {
          &:after {
            content:                                        '';
            position:                                       absolute;
            left:                                           0px;
            top:                                            0px;
            height:                                         100%;
            width:                                          100%;
            background:                                     $secondary;
            opacity:                                        0.1;
            z-index:                                        1000;
          }
          .tag.colored {
            z-index:                                        10;
            position:                                       absolute;
            bottom:                                         0;
            margin:                                         4px;
            right:                                          0px;
            border:                                         solid 2px white;
          }
          .product-quantity {
            z-index:                                        10;
          }
          .product-like {
            z-index:                                        10;
          }
        }
        &.disabled-clear {
          &:after {
            content:                                        '';
            position:                                       absolute;
            left:                                           0px;
            top:                                            0px;
            height:                                         100%;
            width:                                          100%;
            background:                                     transparent;
            opacity:                                        0.1;
            z-index:                                        1000;
          }
          .tag.colored {
            z-index:                                        10;
            position:                                       absolute;
            bottom:                                         0;
            margin:                                         4px;
            right:                                          0px;
            border:                                         solid 2px white;
          }
          .product-quantity {
            z-index:                                        10;
          }
          .product-like {
            z-index:                                        10;
          }
        }
        &.simple {
          .cv {
            .box {
              @extend                                        .d-flex;
              @extend                                        .flex-row;
              @extend                                        .mt-2;
              @extend                                        .mb-2;
              @extend                                        .rounded-1;

              flex:                                         1 1 auto;
              border:                                       solid 0.5px $gray-500;

              .title {
                @extend                                      .p-1;
                @extend                                      .text-center;

                flex:                                       0.4;
                border-right:                               solid 0.7px $gray-500;
                color:                                      #414e81 !important;
                font-size:                                  $font-size-base * 1.5;
                line-height:                                40px;
              }
              .content {
                @extend                                      .d-flex;
                @extend                                      .flex-column;
                @extend                                      .p-1;

                flex:                                       0.6;
                .subcontent {
                  font-weight:                              $font-weight-bold-extra;
                  color:                                    #1b2a68 !important;
                }
              }
            }
          }
        }
        .disabled-area {
          z-index: 2000;
          .fa-icon {
            fill: white;
          }
          .tag {
            @extend                                        .py-#{$product-best-content-spacing / 4};
            @extend                                        .px-#{$product-best-content-spacing / 2};

            font-size:                                      $product-tag-font-size;
            border-radius:                                  3px;
            letter-spacing:                                 $product-tag-font-size / 12;
            font-weight:                                    400;
            border-width:                                   $border-width * 2 !important;
          }
        }
      }

      @include                                              media-breakpoint-down(xs0) {
        width:                                              100%;
        max-width:                                          100%;
        flex:                                               0 0 100%
      }
    }
  }
}
