.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;
      }

      /* CEL | drop the desktop inset so the copy runs full width, like the details wrapper does. */
      .text-warning_cel {
        padding-inline: 0;

        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) {
      /* CEL | 53px left the body copy floating far below the tab underline on phones. */
      .product-benefits_cel__tabs {
        gap: var(--gap-28);
      }
    }

    .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;

      /* CEL | body-b20's 120% is too tight for the 8-9 lines a long description wraps to on a phone. */
      @media screen and (max-width: 768px) {
        line-height: var(--font-line-height-130);
      }
    }



    @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-34);
    }

    .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);
  font-family: var(--primary-font);
  font-size: 15px;
  font-style: italic;
  font-weight: var(--font-weight-400);
  line-height: var(--font-line-height-120);

  /* CEL | 70% made this narrower than the body copy above it, so it read as an indented block.
     Mirrors the 620px tabs cap plus the details wrapper's 30px inset for an identical measure. */
  max-width: 620px;
  overflow-wrap: break-word;
  padding-inline: var(--spacer-30);
  text-align: center;
  width: 100%;

  /* CEL | the admin wraps this copy in <strong>, which theme.css maps to `bolder` — without this
     reset the statement renders bold no matter what weight is set above. */
  b,
  strong {
    font-weight: inherit;
  }
}

@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;
    }
  }
}