.usk-shiny-grid {
  --btn-width: 100%;
  .usk-item {
    box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
    overflow: hidden;

    &:hover {
      .img{
        transform: scale(1.1);
      }
      .usk-action-btn {
        transform: translateX(0px);
      }

      .usk-button,
      .added_to_cart {
        transform: translateY(0px);
        opacity: 1;
        visibility: visible;
      }
    }

    .usk-item-box {
      .usk-content {
        .usk-content-inner {
          .title {
            margin: 0;
            .usk-title {
              display: inline-block;
            }
          }
        }
      }
    }
  }

  .img{
    transition: all 0.3s ease-in-out;
  }

  .usk-action-btn {
    transform: translateX(25px);
  }

  .usk-shoping {
    top: clamp(10px, 1vw, 25px);
    right: clamp(10px, 1vw, 25px);
  }

  .usk-badge-label-wrapper {
    left: 0;
    top: 0;
  }

  .usk-button {
    &.added {
      display: none;
      transition: all 3s ease-in-out;
    }

    &.loading {
      &::after {
        content: "";
        width: 20px;
        height: 20px;
        border: 2px dotted #fff;
        border-radius: 50%;
        margin-left: -15px;
        display: inline-block;
        position: relative;
        position: absolute;
        top: 31%;
        text-align: center;
        animation: rotation 2s linear infinite;
      }

      i {
        transition: all 0.3s ease-in-out;
        transform: translate(70px);
        opacity: 0.02;
      }
    }
  }

  .added_to_cart {
    transition: all 3s ease;

    &::after {
      content: "\2713";
      margin-left: 5px;
      font-size: 20px;
    }

    i {
      display: none;
    }
  }

  .usk-button,
  .added_to_cart {
    position: absolute;
    font-weight: 600;
    text-align: center;
    left: 0;
    bottom: 0;
    width: var(--btn-width);
    margin: 0 calc(calc(100% - var(--btn-width)) / 2);
    background: #2b2d42;
    text-decoration: none;
    color: #fff;
    text-transform: capitalize;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;

    a {
      color: #fff;
    }

    .button-icon:before {
      margin: -5px;
      transition: all 0.3s ease;
      opacity: 0;
      visibility: hidden;
    }

    &:hover {
      .button-icon:before {
        margin-left: 10px;
        opacity: 1;
        visibility: visible;
      }
    }
  }

  .usk-grid-layout {
    .usk-price {
      margin: 0;
    }

    .usk-have-rating {
      .usk-price {
        opacity: 1;
        transition: all 0.3s ease;
        transform: translateY(0);
      }

      .usk-rating {
        transform: translateY(0);
        opacity: 0;
        transition: all 0.3s ease;
      }

      &:hover {
        .usk-rating {
          transform: translateY(-20px);
          opacity: 1;
        }

        .usk-price {
          transform: translateY(-20px);
          opacity: 0;
          visibility: hidden;
        }
      }
    }

    .usk-rating {
      position: absolute;
      width: 100%;
      display: flex;
    }

    .usk-button,
    .added_to_cart {
      height: clamp(40px, 3vw, 50px);
      line-height: clamp(40px, 3vw, 50px);
      font-size: 14px;
    }
  }

  .usk-list-layout {
    .usk-button,
    .added_to_cart {
      height: clamp(30px, 3vw, 40px);
      line-height: clamp(30px, 3vw, 40px);
      font-size: 12px;
    }
  }
}
