.product-exercises {
    --product-exercises--background-color: #284744;
    --product-exercises--exercise-background-color: #1A1A1A;
    --product-exercises--text-color: #FFF;
    --product-exercises--max-width: 1440px;
    --product-exercises--content-x-padding: 1rem;
    --product-exercises--accordion-padding: 1rem;
    --product-exercises--accordion-content-padding: 0rem;
    --product-exercises--accordion-border-width: 1px;
    --product-exercises--accordion-border-color: #FFF;
    --product-exercises--left-side-width: 100%;
    --product-exercises--right-side-width: 100%;
    --product-exercises--icon-width: 35px;
    --product-exercises--button-background-color: #1A1A1A;
    --product-exercises--button-color: #FFF;
    --product-exercises--button-border-radius: 100px;
    --product-exercises--button-border-color: #FFF;
    --product-exercises--button-border-width: 1px;
    --product-exercises--button-padding-x: 1rem;
    --product-exercises--button-padding-y: 0.5rem;
    --product-exercises--background-delay: 0.4s;
    --product-exercises--content-delay: 0.2s;
    --product-exercises--background-final-opacity: 1;
    --product-exercises--play-icon-width: 40px;
    --product-exercises--buttons-gap: 0.5rem;
    --product-exercises--fade-out-duration: 0.2s;
    --product-exercises--fade-in-duration: 0.3s;
    background-color: var(--product-exercises--background-color);
    max-width: var(--product-exercises--max-width);
    color: var(--product-exercises--text-color);
    margin: 0 auto;
    padding: 36px 60px
}

@media(max-width: 768px) {
    .product-exercises {
        padding: 36px 0px;
    }
}

@media(min-width: 768px) {
    .product-exercises {
        --product-exercises--left-side-width: 50%;
        --product-exercises--right-side-width: 50%;
        --product-exercises--accordion-content-padding: 1rem;
        --product-exercises--content-padding: 0rem;
        --product-exercises--content-x-padding: 0rem
    }
}

.product-exercises h3 {
    padding-left: var(--product-exercises--content-x-padding);
    padding-right: var(--product-exercises--content-x-padding)
}

@media(min-width: 768px) {
    .product-exercises .muscle-group__content {
        padding-left: var(--product-exercises--content-x-padding);
        padding-right: var(--product-exercises--content-x-padding)
    }
}

@media(max-width: 768px) {
    .product-exercises .muscle-group__left-side {
        padding-left: var(--product-exercises--content-x-padding);
        padding-right: var(--product-exercises--content-x-padding);
        padding-bottom: var(--product-exercises--content-x-padding);
        background-color: var(--product-exercises--exercise-background-color)
    }
}

.product-exercises .muscle-group__right-side .current-exercise__name-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.product-exercises .muscle-group__right-side .current-exercise__name-wrapper span {
    font-size: .8rem;
    line-height: 1
}

@media(max-width: 768px) {.product-exercises .muscle-groups .muscle-group__accordion[open] .muscle-group__content
    .product-exercises .muscle-group__right-side .current-exercise__name-wrapper {
        background-color: var(--product-exercises--exercise-background-color);
        padding-left: var(--product-exercises--content-x-padding);
        padding-right: var(--product-exercises--content-x-padding);
        padding-bottom: var(--product-exercises--content-x-padding);
        padding-top: var(--product-exercises--content-x-padding)
    }
    .product-exercises .muscle-group__right-side .current-exercise__name-wrapper{
      background-color: #1a1a1a;
      padding: 25px 15px 15px 15px;
    }
}

@media(max-width: 768px) {
    .product-exercises .muscle-group__right-side .current-exercise__name {
        margin-bottom: 0;
        font-size: calc(1.1rem*var(--adjust-heading))
    }
}

.product-exercises .muscle-group__right-side .current-exercise__count {
    display: flex;
    align-items: center;
    gap: .1rem
}

@media(min-width: 768px) {
    .product-exercises .muscle-group__right-side .current-exercise__count {
        display: none
    }
}

@media(max-width: 768px) {
    .product-exercises .muscle-group__right-side .exercise__buttons {
        /* padding-left: var(--product-exercises--content-x-padding); */
        padding-left: 15px;
        padding-right: var(--product-exercises--content-x-padding)
    }
}

@media(max-width: 768px) {
    .product-exercises h3.current-exercise__name {
        padding-left: 0
    }
}

.product-exercises .muscle-group__heading {
    margin-left: var(--product-exercises--content-x-padding);
    margin-right: var(--product-exercises--content-x-padding)
}

.product-exercises h3,
.product-exercises .current-exercise__count,
.product-exercises .muscle-group__heading__text,
.product-exercises .muscle-group__arrow,
.product-exercises .current-exercise__video,
.product-exercises .current-exercise__video__play-button,
.product-exercises .exercise__title {
    color: var(--product-exercises--text-color)
}

.product-exercises .muscle-groups .muscle-group__accordion .muscle-group__heading {
    border-top: var(--product-exercises--accordion-border-width) solid var(--product-exercises--accordion-border-color)
}

.product-exercises .muscle-groups .muscle-group__accordion:last-of-type:after {
    content: "";
    display: block;
    margin-left: var(--product-exercises--content-x-padding);
    margin-right: var(--product-exercises--content-x-padding);
    border-bottom: var(--product-exercises--accordion-border-width) solid var(--product-exercises--accordion-border-color)
}

.product-exercises .muscle-groups .muscle-group__accordion summary.muscle-group__heading {
    padding: var(--product-exercises--accordion-padding) 0
}

.product-exercises .muscle-groups .muscle-group__accordion[open] .muscle-group__background {
    opacity: var(--product-exercises--background-final-opacity);
    /* transition-delay: var(--product-exercises--background-delay) */
}

.product-exercises .muscle-groups .muscle-group__accordion[open] .muscle-group__content {
    opacity: 1;
    transition: opacity var(--product-exercises--fade-in-duration) ease-in-out;
    transition-delay: var(--product-exercises--content-delay)
}

@media all and (max-width: 768px) {
    .product-exercises .muscle-groups .muscle-group__accordion[open] .muscle-group__content{
       padding: 0;
    }
}

.product-exercises .muscle-groups .muscle-group__accordion[open] .muscle-group__arrow svg {
    transform: rotate(180deg)
}

.product-exercises .current-exercise__video--playing .exercise__poster {
    opacity: 0;
    /* transition: opacity var(--product-exercises--fade-out-duration) ease-in-out */
}

.product-exercises .current-exercise__video--playing button.current-exercise__video__play-button svg {
    display: none
}

.product-exercises .current-exercise__count,
.product-exercises .current-exercise__name {
    opacity: 0;
    /* transition: opacity var(--product-exercises--fade-out-duration) ease-in-out */
}

.product-exercises .current-exercise__count.show,
.product-exercises .current-exercise__name.show {
    opacity: 1;
    /* transition: opacity var(--product-exercises--fade-out-duration) ease-in-out */
}

.product-exercises .current-exercise__video {
    position: relative;
    opacity: 0;
    /* transition: opacity var(--product-exercises--fade-out-duration) ease-in-out */
}

.product-exercises .current-exercise__video.show {
    opacity: 1;
    /* transition: opacity var(--product-exercises--fade-out-duration) ease-in-out */
}

.product-exercises .current-exercise__video .exercise__poster {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: auto
}

.product-exercises .current-exercise__video button {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3
}

.product-exercises .current-exercise__video button svg {
    width: var(--product-exercises--play-icon-width)
}

.product-exercises .current-exercise__video video {
    width: 100%;
    height: auto
}

.product-exercises .muscle-group__background {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: -2;
    height: 90%;
    width: auto;
    opacity: 0;
    transition: opacity .4s ease-in-out;
    display: none
}

@media(min-width: 768px) {
    .product-exercises .muscle-group__background {
        display: block
    }
}

.product-exercises .muscle-group__content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    z-index: 0;
    padding-top: var(--product-exercises--accordion-content-padding);
    padding-bottom: var(--product-exercises--accordion-content-padding);
    opacity: 0;
    /* transition: opacity var(--product-exercises--fade-out-duration) ease-in-out */
}

@media(min-width: 768px) {
    .product-exercises .muscle-group__content {
        flex-direction: row
    }
}

.product-exercises .muscle-group__left-side {
    width: var(--product-exercises--left-side-width)
}

.product-exercises .muscle-group__right-side {
    width: var(--product-exercises--right-side-width);
    display: flex;
    flex-direction: column-reverse
}

@media(min-width: 768px) {
    .product-exercises .muscle-group__right-side {
        padding-left: 2rem;
        flex-direction: column
    }
}

.product-exercises .muscle-group__icon {
    width: var(--product-exercises--icon-width);
    height: auto
}

.product-exercises .exercise__buttons {
    display: flex;
    align-items: start;
    gap: var(--product-exercises--buttons-gap);
    margin-bottom: 1rem;
    overflow-x: auto
}

@media(min-width: 768px) {
    .product-exercises .exercise__buttons {
        flex-direction: column;
        margin-bottom: 0
    }
}

.product-exercises .exercise__button {
    padding: var(--product-exercises--button-padding-y) var(--product-exercises--button-padding-x);
    background-color: var(--product-exercises--button-background-color);
    color: var(--product-exercises--button-color);
    border-radius: var(--product-exercises--button-border-radius);
    border: var(--product-exercises--button-border-width) solid rgba(0, 0, 0, 0);
    flex-shrink: 0
}

@media(max-width: 768px) {
    .product-exercises .exercise__button {
        font-size: calc(.85rem*var(--adjust-body))
    }
}

.product-exercises .exercise__button.exercise__button--active {
    border-color: var(--product-exercises--button-border-color)
}

.product-exercises .muscle-group__heading {
    justify-content: space-between
}

.product-exercises .muscle-group__heading,
.product-exercises .muscle-group__heading .muscle-group__heading__text,
.product-exercises .muscle-group__heading .muscle-group__arrow {
    display: flex;
    align-items: center
}

.product-exercises .muscle-group__heading .muscle-group__arrow {
    width: 24px
}

.product-exercises .muscle-group__heading .muscle-group__arrow svg {
    transform: rotate(0deg);
    transition: transform .3s ease-in-out
}

.product-exercises .muscle-group__heading .muscle-group__heading__text {
    gap: 1rem;
    font-weight: 700;
    flex-grow: 1
}

.product-exercises .muscle-groups .muscle-group__accordion summary.muscle-group__heading {
    -webkit-appearance: none;
    list-style: none;
}

/* For Firefox compatibility */
.product-exercises .muscle-groups .muscle-group__accordion summary.muscle-group__heading::-webkit-details-marker {
    display: none;
}

.image-bg {
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    z-index: -1;
    /* mix-blend-mode: multiply; */
    mix-blend-mode: overlay;
    /* background: linear-gradient(to bottom, #284744 0%, rgba(40, 71, 68, 0) 30%), linear-gradient(to top, #284744 0%, rgba(40, 71, 68, 0) 30%), radial-gradient(ellipse at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%); */
    /* background: 
    linear-gradient(to bottom, 
      #284744 0%, 
      rgba(40, 71, 68, 0) 10%),
    linear-gradient(to top, 
      #284744 0%, 
      rgba(40, 71, 68, 0) 10%),
    radial-gradient(
      ellipse at center, 
      rgba(255, 255, 255, 0.2) 0%, 
      rgba(255, 255, 255, 0) 70%); */
      /* background: 
    linear-gradient(to bottom, 
      #284744 0%, 
      rgba(40, 71, 68, 0.8) 15%,
      rgba(40, 71, 68, 0) 40%),
    linear-gradient(to top, 
      #284744 0%, 
      rgba(40, 71, 68, 0.8) 15%,
      rgba(40, 71, 68, 0) 40%); */
  mix-blend-mode: multiply;
  background: linear-gradient(
    180deg,
    rgba(40, 71, 68, 0.8) 0%,          
    rgba(40, 71, 68, 0.4) 10%,         
    rgba(40, 71, 68, 0) 50%,           
    rgba(40, 71, 68, 0) 50%,           
    rgba(40, 71, 68, 0.4) 90%,         
    rgba(40, 71, 68, 0.8) 100%
  );
}