.product-benefits_cel {
  --image-height: 1084px;
  width: 100%;

  .product-benefits_cel__wrapper {
    @media screen and (width >=1280px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      min-height: var(--image-height);
      padding: 0;
    }
  }

  .product-benefits_cel__content {
    align-items: center;
    background: linear-gradient(180deg, var(--color-pure-white) 29%, var(--product-benefits-gradient-color) 74%);
    justify-content: space-between;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--gap-60);
    max-height: 1084px;
    padding: var(--spacers-120) var(--spacer-20);
    position: relative;

    .product-benfit-icon_cel {
      position: absolute;
      left: 33px;
      top: 32px;
      width: 99px;

      @media screen and (width >=1500px) {
        left: 60px;
      }
    }

    @media screen and (max-width: 768px) {
      padding: var(--spacer-80) var(--spacer-20) 15px var(--spacer-20);

      .product-benfit-icon_cel {
        display: none;

      }

      @media screen and (width >=1280px) {
        gap: var(--gap-80);
        padding: var(--spacer-120) var(--spacer-80);
      }

      @media screen and (width <=700px) {
        padding-bottom: var(--spacer-10) !important;
      }

      .text-warning_cel {
        font-size: var(--font-size-14);
        font-weight: var(--font-weight-700);
        color: var(--color-indigo);
        line-height: var(--font-line-height-130);
        text-align: center;

        p {
          margin-bottom: 5px;
        }
      }
    }

    .product-benefits_cel__tabs {
      display: flex;
      flex-direction: column;
      gap: var(--gap-80);
      width: 100%;

      @media screen and (width >=700px) {
        min-width: 560px;
        max-width: 620px;

      }

      @media screen and (width <=699px) {
        gap: var(--gap-60);
      }
    }

    @media screen and (max-width: 768px) {
      .product-benefits_cel__tabs {
        gap: 53px;
      }
    }

    .product-benefits_cel__nav {
      display: flex;
      gap: var(--gap-40);
      justify-content: center;
      width: 100%;
    }

    .product-benefits_cel__radio {
      display: none;
    }

    .product-benefits_cel__label {
      color: var(--color-indigo);
      cursor: pointer;
      font-weight: var(--font-weight-700);
      padding-bottom: var(--spacers-14);
      text-transform: uppercase;
      transition: all 0.3s ease-in-out;
       letter-spacing: -3px;
    }

    .product-benefits_cel__label:hover {
      border-bottom: 4px solid var(--color-indigo);
      transition: all 0.3s ease-in-out;


    }

    .product-benefits_cel__radio:checked+.product-benefits_cel__label {
      border-bottom: 4px solid var(--color-indigo);
    }

    .product-benefits_cel__panel {
      display: none;
    }

    &:has(#tab-details:checked) .product-benefits_cel__panel[data-tab='details'] {
      display: block;
    }

    &:has(#tab-nutrition:checked) .product-benefits_cel__panel[data-tab='nutrition'] {
      display: block;
    }

    &:has(#tab-supplement:checked) .product-benefits_cel__panel[data-tab='supplement'] {
      display: block;
    }

    .product-benefits_cel__content_wrap {
      display: flex;
      gap: 63px;
      flex-direction: column;

      @media screen and (width <=700px) {
        gap: var(--gap-60);
      }

      .product-benefits_cel_heading {
        display: flex;
        position: relative;
        justify-content: center;

        img {
          position: absolute;
          top: -30px;
          left: -10px;
          object-fit: contain;
        }

        @media screen and (max-width: 768px) {

          img {
            display: none;
          }
        }
      }

      @media screen and (max-width: 768px) {
        gap: 50px;
      }

    }

    .product-benefits_cel_heading {
      display: flex;
      position: relative;
      justify-content: center;

      h3 {
        line-height: var(--font-line-height-50);
      }

      @media screen and (max-width: 768px) {
        h3 {
          line-height: normal;
        }
      }

    }
  }

  .product-benefits_cel__panel-details-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--gap-95);
    width: 100%;
    padding: 0 30px;

    .paragraph {
      letter-spacing: -0.4px;
      text-wrap: auto;
    }



    @media screen and (max-width:640px) {
      .product-benefits_cel__panel-details-wrapper {
        padding: 0 0px;
      }

      .gap-5 {
        gap: 0.35rem;
      }
    }

    .text-list_cel {
      flex-wrap: wrap;
      justify-content: center;
      display: flex;
      margin: 0px;
      row-gap: 5px;

      /* CEL | Keep all items + star separators on a single row on desktop.
         Longer feature text (e.g. Creatine, Super Greens) previously forced
         whole items onto a second row, which dropped the stars to the next
         line. Items now shrink and their text stacks to 2 lines instead. */
      @media screen and (width >=700px) {
        flex-wrap: nowrap;
      }

      @media screen and (width <=700px) {
        .icon {
          height: 34px;
          transition: transform .2s;
          width: 27px;
          transform: rotate(90deg);
        }
      }


      li {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: var(--font-weight-700);
        min-width: 0;

        span {
          overflow-wrap: break-word;
          text-align: center;
          word-break: normal;
        }

        &:last-child {
          svg {
            display: none;
          }
        }
      }
    }
  }

  @media screen and (max-width:768px) {
    .product-benefits_cel__panel-details-wrapper {
      gap: var(--gap-50);
    }

    .text-list_cel {
      row-gap: 6px;
      column-gap: 5px;
    }

    .icon {
      height: 43px;
      transition: transform .2s;
      width: 29px;
    }
  }

  .product-benefits_cel__description {
    color: var(--color-indigo);
    text-align: center;
  }

  .product-benefits_cel__benefit-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--gap-10);
    width: 85px;

    @media screen and (width >=1280px) {
      width: 90px;
    }

    img {
      height: 60px;
      width: 60px;

      @media screen and (width >=1280px) {
        height: 90px;
        width: 90px;
      }
    }

    p {
      color: var(--color-indigo);
      font-weight: var(--font-weight-700);
      text-align: center;
    }
  }

  .product-benefits_cel__panel-nutrition-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap-24);
    margin: 0 auto;
    max-width: 412px;
    width: 100%;
  }

  .product-benefits_cel__nutrition-table {
    border-collapse: collapse;
    color: var(--color-indigo);
    width: 100%;

    td {
      border-bottom: 1px solid var(--color-indigo);
      font-family: var(--primary-font);
      font-size: var(--font-size-10);
      font-weight: var(--font-weight-500);
      line-height: 1;
      padding: var(--spacer-8);
      text-align: center;
    }

    td:first-child {
      font-weight: var(--font-weight-700);
      text-align: left;
    }

    .product-benefits_cel__nutrition-header td {
      font-weight: var(--font-weight-700);
      text-align: center;
    }

    .product-benefits_cel__nutrition-info td {
      border-bottom: 1px solid var(--color-indigo);
      padding: var(--spacer-8);
    }

    tbody tr:last-child td {
      border-bottom: 4px solid var(--color-indigo);
    }

    .product-benefits_cel__nutrition-info:first-child td {
      border-top: 4px solid var(--color-indigo);
    }

    .product-benefits_cel__nutrition-info:nth-child(2) td {
      border-bottom: 4px solid var(--color-indigo);
    }

    .product-benefits_cel__nutrition-info td:nth-child(2) {
      text-align: right;
    }
  }

  .product-benefits_cel__nutrition-ingredients {
    color: var(--color-indigo);
    font-size: var(--font-size-10);
    font-weight: var(--font-weight-400);
  }

  .product-benefits_cel__nutrition-daily-value {
    color: var(--color-indigo);
    font-size: var(--font-size-10);
    font-weight: var(--font-weight-700);
    text-wrap: inherit;
  }

  .product-benefits_cel__image {
    display: none;
    flex: 1;
    max-height: 1084px;

    img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    @media screen and (width >=1280px) {
      display: block;
    }
  }
}

/* CEL | nutrition/supplement panels can exceed the 1084px cap — release BOTH the content
   column and the image column on those tabs so the image grows to fill the taller row
   (no white gap beside the table). The image block itself is unchanged. Kept at root so
   the :has() subject is the section, not __content */
.product-benefits_cel:has(#tab-nutrition:checked) .product-benefits_cel__content,
.product-benefits_cel:has(#tab-nutrition:checked) .product-benefits_cel__image,
.product-benefits_cel:has(#tab-supplement:checked) .product-benefits_cel__content,
.product-benefits_cel:has(#tab-supplement:checked) .product-benefits_cel__image {
  max-height: none;
}

.text-warning_cel {
  color: var(--color-indigo);
  text-align: center;
  line-height: var(--font-line-height-130);
  font-family: var(--primary-font);
  font-size: var(--font-size-14);
}

@media screen and (max-width: 749px) {
  .product-benefits_cel {
    & .product-benefits_cel__content {
      .product-benefits_cel__nav {
        flex-wrap: wrap;
        row-gap: 20px;
      }
    }
  }

  .product-benefits_cel {
    .product-benefits_cel__panel-details-wrapper {
      padding: 0 0;
    }
  }
}