.value__packs {
  .value__packs-heading {
    font-size: 1.6rem;
    line-height: 2.4rem;
    letter-spacing: normal;
    font-family: var(--typeBasePrimary), var(--typeBaseFallback);
    font-weight: 700;
    color: var(--color-body-text);
    margin-bottom: var(--spacing2XS);
    .theme-styling--tena & {
         color: #000000;
    }
  }

  .value__packs-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing20px);
    list-style: none;
    padding: 0;
    margin: 0;

    .value__pack-item {
      padding: var(--spacing2XS) var(--spacing5XS) var(--spacing3XS);
      border: 1px solid #D7D3D3;
      border-radius: var(--spacing6px);
      background: linear-gradient(0.01deg, #F6F3F3 0.01%, #F6F3F3 45%, #F4E2EA 84.99%, #FAC9CC 99.99%);
      text-align: center;
      margin: 0;
      cursor: pointer;
      .theme-styling--tena & {
        background: linear-gradient(0.01deg, #EAEDF4 0.01%, #EAEDF4 45%, #DBE6F3 99.99%);
      }
      .theme-styling--tena &.disabled.default {
        .value__pack-label {
          background: #D8D8D8;
        }
      }
      .value__pack-label {
        font-size: 1.1rem;
        line-height: 1.4rem;
        letter-spacing: normal;
        color: #FFFFFF;
        padding: var(--spacing4XS) var(--spacing3XS);
        background: var(--colorPrice);
        font-family: var(--typeBasePrimary), var(--typeBaseFallback);
        font-weight: 700;
        width: fit-content;
        margin: 0 auto var(--spacing4XS);
        border-radius: var(--spacing40px);
        .theme-styling--tena & {
          border-radius: 0 !important;
        }
      }

      .value__pack-text {
        font-size: 1.4rem;
        line-height: 2.2rem;
        letter-spacing: normal;
        font-family: var(--typeBasePrimary), var(--typeBaseFallback);
        font-weight: 700;
        color: var(--color-body-text);
        .theme-styling--tena & {
          letter-spacing: 1px;
           color: #000000;
        }
      }

      .value__pack-price .discount-text,
      .oos-text {
        font-size: 1.4rem;
        line-height: 2.2rem;
        color: #746969;
        font-family: var(--typeBasePrimary), var(--typeBaseFallback);
        font-weight: 500;
      }

       

      .value__pack-price {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        .price {
          font-size: 1.6rem;
          line-height: 2.4rem;
          font-family: var(--typeBasePrimary), var(--typeBaseFallback);
          font-weight: 700;
          letter-spacing: normal;
          color: var(--colorPrice);
        }

        .discount-text {
          margin-right: var(--spacing3XS);
        }
      }

      .oos-text {
        display: none;
        
      }

      &.selected {
        border-color: #2F2F2F;
      }

      &.default {
        background: #FFFFFF;

        .value__pack-label {
          color: #746969;
          background: #F6EEEC;
          .theme-styling--tena & {
            background: #EAEDF4; 
            color: #757575;
          }
        }

        .value__pack-price {
          .price {
            font-size: 1.4rem;
            line-height: 2.2rem;
            color: #746969;
            font-family: var(--typeBasePrimary), var(--typeBaseFallback);
            font-weight: 500;
          }
        }
      }

      &.disabled {
        background: #F6F3F3;
        border-color: #F6F3F3;
        pointer-events: none;

        .value__pack-label {
          background: #C0B4B4;
        }

        .value__pack-price {
          span {
            &:not(.oos-text) {
              display: none;
            }

            &.oos-text {
              display: block;
            }
          }
        }
      }
      .theme-styling--tena &.disabled {
          background: #ebebeb; 
          border-color: #ebebeb;
          pointer-events: none;

          .value__pack-label {
            background: #B1B3B3; 
          }

          .value__pack-price {
            span.oos-text {
              color: #757575;
            }
          }
        }
    }
    
    @media screen and (max-width: 768px) {
      .value__pack-item {
        .value__pack-price {
          gap: 0 var(--spacing6px);

          .discount-text {
            margin-right: 0;
          }
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .value__packs-heading {
      text-align: left;
    }
  }
}