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

.product-row-card {
  width: 100%;
  background-color: #f8f9fa; /* slightly light bg matching the screenshot if needed, but let's use white or #f8f9fa based on the border */
  border-color: #e9ecef !important;

  &__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 {
    font-size: 20px;
    font-weight: 800;
    color: var(--tenant-primary, #009933) !important; /* Green matching screenshot */
  }

  &__select {
    width: auto;
    min-width: 150px;
    font-size: 14px;
    height: 38px;
    color: #666;
    border-color: #ccc;
    cursor: pointer;

    &:focus {
      border-color: var(--tenant-primary);
      box-shadow: 0 0 0 0.25rem rgba(0, 153, 51, 0.25);
    }
  }

  &__btn-wrapper {
    min-width: 160px; /* To make both buttons equal width as in screenshot */

    app-button {
      display: block;
      width: 100%;

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