.util-tile.product {
  padding: .5rem .5rem 1rem;
  height: 15.5rem;
  display: grid;
  gap: 0;
  grid-template-rows: 9.375rem 1rem 2rem 1.625rem;

  &.swiper-slide {
    margin-right: .5rem;
    width: var(--product--w, calc(100% / 2 - .25rem));

    @container app (min-width: 536px) {
      --product--w: calc(100% / 3 - .3275rem);
    }

    @container app (min-width: 712px) {
      --product--w: calc(100% / 4 - .375rem);
    }
  }

  .link {
    display: block;
    text-decoration: none;

    .img {
      width: 100%;
      height: 5.25rem;
      object-fit: contain;
    }

    .name {
      padding-top: .5rem;
      padding-bottom: .25rem;
      font-weight: 700;
      font-size: .875rem;
      line-height: 1.125rem;
      color: #373635;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }

  .old {
    padding-top: .75rem;
    padding-bottom: .25rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;

    .price {
      font-weight: 400;
      font-size: .75rem;
      line-height: 1rem;
      color: #4D4F53;
      text-decoration-line: line-through;
      text-decoration-thickness: 1px;
      text-decoration-style: solid;
      text-decoration-color: #E81331;
    }

    .discount {
      padding-inline: .5rem;
      border-radius: 99999px;
      font-weight: 500;
      font-size: .625rem;
      line-height: 1rem;
      color: #FFFFFF;
      background-color: #E81331;
    }
  }

  .bottom {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: .375rem;

    .price {
      font-weight: 700;
      font-size: 1.375rem;
      line-height: 1.625rem;
      color: #373635;
    }

    .currency {
      font-weight: 700;
      font-size: .875rem;
      line-height: 1.125rem;
      color: #373635;
    }
  }

  .cart {
    position: relative;
    flex-shrink: 0;
    margin: 0 .5rem 0 auto;
    border: none;
    background-color: transparent;
    text-decoration: none;

    &:not([hidden]) {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .svg {
      position: relative;
      z-index: 1;
      width: 1.375rem;
      height: 1.375rem;
    }

    &.to-cart {
      color: #009AE3;
    }

    &.in-cart {
      color: #FFFFFF;

      &:before {
        content: "";
        position: absolute;
        inset: -.5rem;
        z-index: 0;
        border-radius: 99999px;
        background-color: #009AE3;
      }
    }
  }
}