cf-buy-card-kibble,
cf-buy-card-fresh,
cf-buy-card-topping {
  display: contents;

  .product-card {
    border: 2px solid #00000040;
    border-radius: 32px;
    padding: 24px;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 32px;

    .product-card-header {
      display: flex;
      align-items: center;
      gap: 16px;

      .title {
        flex: 1;
        font-family: Fraunces;
        font-weight: 400;
        font-size: 16px;
        line-height: 107%;
        letter-spacing: 0%;
        text-transform: uppercase;
      }

      .price {
        font-family: Inter;
        font-weight: 700;
        font-size: 16.59px;
        line-height: 23.5px;
        letter-spacing: 0%;
        color: rgba(11, 11, 11, 1);
      }

      .check {
        height: 32px;
        width: 32px;
        background-color: rgb(234, 226, 213);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        > svg {
          stroke: rgb(234, 226, 213);
          height: 17px;
          width: 17px;
        }
      }
    }

    .product-card-body {
      display: flex;
      position: relative;
      flex: 1;
      /* align-items: center; */

      .product-card-details {
        flex: 2.5;
        display: flex;
        flex-direction: column;
        gap: 0;

        .body-title {
          font-family: Inter;
          font-weight: 600;
          font-size: 20px;
          line-height: 130%;
          letter-spacing: 0%;
          color: black;
        }

        .body-subtitle {
          font-family: Inter;
          font-weight: 500;
          font-size: 16px;
          line-height: 130%;
          letter-spacing: 0%;
          color: rgba(86, 76, 76, 1);
          margin: 4px 0 14px 0;
        }

        .body-list-item {
          display: flex;
          gap: 8px;
          align-items: center;

          .list-item-text {
            font-family: Inter;
            font-weight: 600;
            font-size: 14px;
            line-height: 160%;
            letter-spacing: 0%;
          }
        }
      }

      .product-image {
        aspect-ratio: auto;
        width: 30%;
      }
    }

    .product-card-footer {
      display: flex;
      align-items: center;
      gap: 24px;

      .size-selector-row {
        flex: 1;
        position: relative;

        .input-number-wrapper {
          border-radius: 68px;
          height: 50px;
          min-width: 100px;
          box-sizing: border-box;
          border: 1px solid black;
          display: flex;
          align-items: center;
          justify-content: center;

          .input-control {
            cursor: pointer;
            flex: 1;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;

            > svg {
              height: 24px;
              width: 24px;
            }
          }
          .input-display {
            text-align: center;
            flex: 1;
          }
        }

        .size-select {
          border-radius: 68px;
        }

        .size-select-chevron {
          position: absolute;
          right: 8px;
          top: 50%;
          transform: translateY(-50%);
          height: 24px;
        }
      }

      .suggested-amount {
        flex: 1.5;
        font-family: Inter;
        font-weight: 500;
        font-size: 12px;
        line-height: 130%;
        letter-spacing: 0%;
        color: rgba(111, 105, 105, 1);
      }
    }

    .bullet-point {
      min-height: 14px;
      min-width: 14px;
      height: 14px;
      width: 14px;
      background-color: black;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

      > svg {
        height: 8px;
        width: 8px;
        stroke: rgb(234, 226, 213);
      }
    }

    &:has(input:checked) {
      background-color: rgba(246, 238, 231, 1);
      border-color: black;

      .check {
        background-color: black;
      }
    }

    &:has(input:not(:checked)) {
      .size-selector-row {
        opacity: 0.5;
        pointer-events: none;
      }
    }
  }
}