:host {
  display: block;
  width: 100%;
}

.product-row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border-color);
  background: transparent;

  &__title {
    font-size: 16px;
    font-weight: 700;
    color: #666666;
    letter-spacing: 0.5px;
  }

  &__description {
    font-size: 13px;
    color: #777; /* lighter grey for text */
    line-height: 1.4;
    max-width: 600px;

    /* Simulate the bold text for 'NiÃ±os menores...' if it was HTML. 
       Since it's passed as string we just let it be, unless we parse it. */
  }

  &__price {
    display: block;
    align-self: flex-end;
    font-size: 20px;
    font-weight: 800;
    color: var(--tenant-primary, #009933) !important;
    white-space: nowrap;
  }

  &__actions {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 230px);
    align-items: stretch;
    gap: 0.75rem 2.5rem;
  }

  &__summary,
  &__buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }

  &__buttons {
    width: 100%;
    max-width: 230px;
  }

  &__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  &__btn-wrapper {
    app-button {
      display: block;
      width: 100%;

      ::ng-deep .btn {
        width: 100%;
        font-weight: 600;
        border-radius: 4px;
      }
    }
  }
}

@media (min-width: 992px) {
  .product-row-card {
    &__info {
      min-width: 0;
    }

    &__actions {
      flex: 0 0 auto;
    }

    &__selectors {
      width: auto;

      ::ng-deep .variant-selector {
        display: flex;
        width: auto;
      }

      ::ng-deep .variant-selector__select {
        width: auto;
        min-width: 108px;
      }
    }

  }
}

@media (max-width: 991.98px) {
  .product-row-card {
    align-items: stretch;
    flex-direction: column;

    &__actions {
      grid-template-columns: minmax(0, 1fr) minmax(0, 230px);
    }
  }
}
