.ybl-accordion{
  position: relative;
  max-width: 1340px;
  padding: 0 20px;
  margin: 0 auto 0;
  @media screen and (max-width: 778px) {
    margin-bottom: 0;
  }
  
    .nextvital-information{
      position: relative;
      margin: 0 auto;
      padding: 40px 0;

      @media screen and (max-width: 878px) {
          padding-top: 16px;
          padding-bottom: 16px;
          grid-gap: 12px;
      }

    .nextvital-accordion-item{

        &.product-set-item{
          .nextvital-accordion-header{
            > .ybl-headline-icon{
              width: 40px;
              height: 40px;
              @media screen and (min-width: 478px) {
                width: 40px;
                height: 40px;
              }
            }
          }
          .text-content{
            > h3{
              margin-top: 0;
            }
          }
        }

          .nextvital-accordion-header{
              position: relative;
              padding: 24px 0;
              display: grid;
              grid-template-columns: 20px 1fr;
              grid-gap: 16px;
              display: flex;
              align-items: center;
              cursor: pointer;
              @media screen and (min-width: 478px) {
                grid-template-columns: 24px 1fr;
                grid-gap: 16px;
              }

              > .ybl-headline-icon{
                position: relative;
                top: -2px;
                width: 20px;
                height: 20px;
                @media screen and (min-width: 478px) {
                  width: 26px;
                  height: 26px;
                }
              }
              
              > h3{
                  margin: 0;
                  max-width: 90%;
                  @media screen and (min-width: 478px) {
                    max-width: unset;
                  }
              }

              &.active{
                  &:after{
                    transform: rotate(180deg);
                  }
              }

              &:after {
                display: block;
                content: '';
                width: 24px;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                transition: all .5s ease;
                transform: rotateZ(0deg);
                background: url('/cdn/shop/files/Dropdown_arrow_collapsed.svg?v=1712929128') no-repeat center center;
                background-size: contain;
              }
          }

          .nextvital-accordion-content{
              position: relative;
              overflow: hidden;
              background-color: #FFFFFF;
              height: 0;
              transition: all .5s ease-in-out;
              border-bottom: solid 1px rgba(51,51,51,0.5);

            &.show-content-preview{
                .show-more-wrapper{
                  position: relative;
                  display: block;
                  opacity: 1;
                  transition: all .5s ease;
                  position: absolute;
                  bottom: 0;
                  text-align: center;
                  padding: 30px 0 20px 0;
                  width: 100%;
                  background: rgb(255,255,255);
                  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9262079831932774) 80%, rgba(0,0,0,0) 100%);
                  cursor: pointer;
                  > span{
                    color: #033E46;
                    font-size: 16px;
                    line-height: 24px;
                    letter-spacing: 0.64px;
                    position: relative;
                    &:after{
                      position: absolute;
                      content: " ";
                      width: 14px;
                      height: 14px;
                      background-image: url("/cdn/shop/files/icon-arrow-right-green.svg?v=1741958893");
                      background-size: contain;
                      background-repeat: no-repeat;
                      transform: rotate(90deg);
                      top: 8px;
                      right: -20px; 
                    }                
                  }
                  &:hover{
                    > span{
                      text-decoration: underline;
                    }
                  }
                }
              }

              .nextvital-accordion-content-wrapper{
                  position: absolute;
                  color: #033E46;
                  padding: 0 80px 0 0;
                  @media screen and (max-width: 578px) {
                    padding-right: 0;  
                    width: 100%;
                  }

                > h3{
                  position: relative;
                    .ybl-acc-anchor{
                      position: absolute;
                      top: -150px;
                      color: transparent;
                    }
                }

                @media screen and (max-width: 578px) {
                  .ybl-intake-icon{
                    width: 100%;
                    height: auto;
                  }
                }

                .nextvital-quick-navigator-bar{
                  display: flex;
                  flex-direction: row;
                  gap: 20px;
                  padding-top: 12px;
                  position: relative;
                  overflow-x: auto;
                  overflow-y: hidden;  
                  padding: 16px 0;
                  
                  /*
                  a{
                    color: #033E46;
                    text-decoration: underline;
                    text-underline-offset: 0.3rem;

                    &:hover{
                      text-decoration-thickness: 0.2rem;
                  }
                  */

                  .anker-item{
                    position: relative;
                    width: fit-content !important;
                    display: inline-block;
                    margin-right: 8px;
                    cursor: pointer;

                    .anker-link{
                      position: absolute;
                      top:0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                    }

                    .anker-content{
                      display: grid;
                      grid-template-columns: auto;
                      gap: 10px;
                      padding: 12px 16px; 
                      border-radius: 100px;
                      border: 2px solid #033E46; 
                      max-width: 280px;
                      width: fit-content;
                      align-items: center;
                      transition: all 0.1s ease-in-out;

                      @media screen and (max-width: 1200px) {
                        border: 1.5px solid #033E46; 
                      }

                      .text-wrapper{
                        &.line-wrap{
                          white-space: nowrap;
                        }
                      }

                      
                      @media screen and (max-width: 1200px) {
                        padding-top: 8px;
                        padding-bottom: 8px;
                      
                        /*
                        grid-template-columns: 1fr;
                        */
                      }

                      .img-wrapper{
                        display: flex;
                        justify-content: center;
                        width: 40px;
                        height: 40px;
                        position: relative;

                        >.anker-icon{
                          position: absolute;
                          top: 50%;
                          left: 50%;
                          transform: translate(-50%, -50%);

                          &.hover-icon{
                            opacity: 0;
                          }
                        }
                        
                        @media screen and (max-width: 1200px) {
                          width: 24px;
                          height: 24px;
                          /*
                          display: none;
                          */
                          img{
                            width: 24px;
                            height: 24px;
                          }
                        }
                        
                      }

                      p{
                        margin: 0;
                        font-size: 14px;
                        font-style: normal;
                        font-family: Mulish-ExtraBold, Mulish;
                        line-height: 16px; /* 142.857% */
                        letter-spacing: 0.42px;
                        color: #033E46;
                        width: min-content;
                      }
                    }

                    &.active{
                      .anker-content{
                        background: #033E46;
                        p{
                          color: #FFF;
                        }
                        .img-wrapper{
                          >.anker-icon{
                            opacity: 0;
                            &.hover-icon{
                              opacity: 1;
                            }
                          }
                        }
                      }
                    }

                    &:hover{
                      .anker-content{
                        border-color: #9FD8B4;
                        background-color: #9FD8B4;
                        p{ 
                          color: #FFF;
                        }
                        .img-wrapper{
                          >.anker-icon{
                            opacity: 0;
                            &.hover-icon{
                              opacity: 1;
                            }
                          }
                        }
                      }  
                    }
                  }
                }

                &.double-grid-layout{
                  display: grid;
                  grid-template-columns: 1fr 1fr;
                  grid-gap: 16px;
                }

                .text-content{
                  max-width: 700px;
                  
                  table{
                     position:relative;
                     width: 100% !important;
                      min-width: 500px;
                    right: -1px;
                     @media screen and (max-width: 600px) {
                       width: 99% !important;
                       min-width: unset;
                     }
                  }

                  p > strong{
                    font-family: Mulish-ExtraBold, Mulish;
                  }

                  p > a{
                    text-decoration: underline;
                    text-decoration-thickness: 1px !important;
                    text-underline-offset: 4px !important;
                    &:hover{
                      text-decoration-thickness: 2px !important;
                    }
                  }
                  

                  span{
                    a{
                      &:hover{
                        text-decoration: underline;
                      }
                    }
                  }
                  
                  .metafield-rich_text_field{
                  color:  #033E46;
                  p{
                    color: #033E46;
                     a{
                      position: relative;
                      background-color: #e1e1e1;
                      font-size: 15px;
                      font-weight: 500;
                      letter-spacing: 1px;
                      padding: 3px 30px 3px 16px;
                      color: ##033E46;
                      border-radius: 4px;
                      text-transform: uppercase;
                      text-decoration: none;
                      margin-right: 8px;
                      display: inline-block;
                      margin-bottom: 8px;
  
                      &:after{
                          position: absolute;
                          top: 2px;
                          right: 8px;
                          content: "";
                          background-image: url("https://cdn.shopify.com/s/files/1/0685/2755/4807/files/arrow-right_362a8c51-bf4f-4234-8d0a-13cc5fb0fe36.svg?v=1725920372");
                          width: 24px;
                          height: 24px;
                      }

                      &:hover{
                        text-decoration: underline;
                      }
                    }

                  }
                }
                @media screen and (max-width: 600px) {
                  img{
                    max-width: 600px;
                    width: 100%;
                    height: auto;
                  }
                }
                }

                .image-content{
                  
                }
              }
          }
          
          .show-more-wrapper{
            display: none;
          }


          
      }

      .acc-bullet-list{
            width: 100%;
            
            .nextvital-accordion-content{

              .nextvital-accordion-content-wrapper{
                padding: 24px 0 0;
                @media screen and (min-width: 478px) {
                  padding: 50px 0 0;
                }
              }
              
              
              .ybl-list-wrapper{

                 .ybl-list-item{
                    position: relative;
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-gap: 16px;
                    margin-bottom: 40px;
                    align-items: center;

                    @media screen and (min-width: 478px) {
                      grid-template-columns: 40px 1fr;
                      grid-gap: 40px; 
                    }

                   .list-icon-wrapper{
                      position: relative;
                      background-color: #F7F7F7;
                      border-radius: 100px;
                      height: 40px;
                      width: 40px;
                      display: flex;
                      justify-content: center;
                      align-items: center;

                     .ybl-list-item-icon{
                      width: 24px;
                      height: 24px;
                    } 
                   }
    

                   > .text-content{
                     max-width: 700px;
                     > p {margin: 0;}
                   }
                 }
              }
            }
      }

      .image-text-item{
        .nextvital-accordion-content-wrapper{
          display: flex;
          flex-direction: row;
          gap: 40px;
          padding-top: 40px !important;

          @media screen and (max-width: 1024px) {
            flex-direction: column;
            padding-top: 20px !important;
            gap: 16px;
          }

          .image-content-wrapper{
            @media screen and (min-width: 1024px) {
              min-width: 500px;
            }
            @media screen and (min-width: 1300px) {
              min-width: 630px;
            }

            > img{
              width: 100%;
              height: auto;
            }
          }

          .text-content-wrapper{
            p{
              margin: 0 0 8px 0;
            }
          }
        }

        &.nxt-set-intake{
          .nextvital-accordion-content-wrapper{
            flex-direction: column;
            gap: 0;  

            .product-item-intake-wrapper{
              display: flex;
              flex-direction: row;
              gap: 40px;

              p > a{
                color: #033E46;
                text-decoration: underline;
                text-underline-offset: 0.3rem;

                &:hover{
                  text-decoration-thickness: 0.2rem;
                }
              }

              img.ybl-headline-icon{
                width: 100%;
              }

              @media screen and (max-width: 1024px) {
                flex-direction: column;
                padding-top: 20px !important;
                gap: 16px;
              }
            }
          }
        }
      }
  }
}