/* TODO: HANDLE COLORS WITH UIKIT */
.product-item {
  border-radius: var(--base-radius);
  overflow: hidden;
  position: relative;

  &,
  .product-information,
  .product-link {
    display: flex;
    flex-direction: column;
  }

  .product-information {
    flex: 1;
    gap: 0.5rem;

    .product-item__footer,
    .product-item__actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .product-link {
      gap: 0.5rem;
      height: auto;

      .footer-format {
        margin-block: 0;
        flex: 1;
      }
    }

    .price {
      color: var(--COLOR-TEXT-DARK, var(--text));
    }
  }

  .product-item__title {
    font-weight: var(--FONT-WEIGHT-SEMIBOLD);
    color: var(--theme-color-black-light);
    font-size: calc(var(--font-heading-small) - 4px);
  }

  .product-item__descr {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--theme-color-gray);
    p {
      font-size: 14px;
      font-weight: var(--FONT-WEIGHT-LIGHT);
      line-height: 1.2;
    }
  }

  .product-item__actions {
    margin-top: auto;
  }

  .product-item__add-info,
  .footer-format {
    color: var(--theme-color-gray);
    font-weight: var(--FONT-WEIGHT-MEDIUM);
  }
}