@media (max-width: 833px) {
  .shopify-section--journey-product:has(.journey-pux) {
    padding: 0;
  }
  .shopify-section--journey-product:has(.journey-pux-scrolling-column) .journey_progress-bar {
    display: none;
  }
  .shopify-section--journey-product .desktop-back {
    display: none;
  }
  .journey-main-widget button:hover, 
  .journey-main-widget button:active,
  .journey-main-widget button:focus {
    background: var(--color-brand-Berry, #BC2653);
  }  
}
@media (min-width: 834px) {
  .shopify-section--journey-product:has(.journey-pux-scrolling-column) {
    min-height: revert;
  }
  .shopify-section--journey-product:has(.journey-pux-scrolling-column) .journey_progress-bar__desktop {
    display: none;
  }
  .shopify-section--journey-product:has(.journey-pux-scrolling-column) .journey_lock_page.step.step-1 {
    margin-bottom: 0;
  }
  .journey-main-widget.journey-pux .journey_content_right .arrow-back.desktop-back  {
    display: block;
    margin: 8px 0 24px !important;
    cursor: pointer;
  }
}

.journey-main-widget.journey-pux {

  & .journey_content {

    @media (min-width: 834px) {
      grid-template-columns: 2fr 1fr;
    }
  }

  & .journey_widget {
    text-align: left;
  }

  .journey_purchase-types {
    display: flex;
    flex-direction: column;
    gap: 24px;

    & label {
      display: flex;
      position: relative;
      padding: 16px 16px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 10px;
      align-self: stretch;
      border-radius: 12px;
      border: 2px solid #B3B2B3;
      background: var(--colors-surface-Surface-Kind_White, #FEFEFE);

      &.journey_purchase-types__sub {
        padding-top: 24px;
      }

      &.closed {
        padding: 15px 16px;
      }
      
      & .journey_purchase-type__badge {
        display: flex;
        padding: 4px 12px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 30px;
        border: 2px solid var(--color-brand-Berry, #BC2653);
        background: var(--color-brand-Berry, #BC2653);
        color: white;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: -19px;
        width: fit-content;
        color: #FFF;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px;

        @media (min-width: 834px) {
          display: none;
        }        
        
        &.secondary {
          background: #ffffff;
          color: var(--color-brand-Berry, #BC2653);
          font-weight: 400;
          display: none;

          @media (min-width: 834px) {
            display: flex;
          }
        }                   
      }
      
      &:has(input:checked) {
        border: 2px solid var(--color-brand-Berry, #BC2653) !important;
      }
  
      &:has(input:not(:checked)) {
        & .journey_purchase-type__badge {
          border: 1px solid #B3B2B3;
          background: #B3B2B3;

          &.secondary {
            color: #ffffff;
          }       
        }
        
        & .journey_purchase-type__header {
          & h3 {
            color: #727273;
          }
        }

        & .journey_purchase-type__image, .journey_purchase-type__content {
          display: none;
        }
      }

      & .journey_purchase-type__header {
        padding-left: 38px;
        width: 100%;
  
        & h3 {
          display: flex;
          justify-content: space-between;
          width: 100%;
          /*
          margin-top: 6px;
          margin-bottom: 2px;
          */
          margin: 0;
          color: var(--colors-text-Text-Primary, #323232);
          font-family: var(--text-font-family);
          font-size: 22px;
          font-style: normal;
          font-weight: 500;
          line-height: 28px;
          gap: 10px;
          
          &.no-flex {
            @media (max-width: 500px) {
              display: block;
            }
            @media (min-width: 834px) {
              display: block;
            }            
          }
        }

        & .price-wrap, .subtext {
          display: flex;
        }
  
        & .price-wrap {
          font-size: 22px;
          font-style: normal;
          line-height: 30px;
          gap: 8px;
          
          & .price-crossed {
            color: #727273;
            text-decoration: line-through;
          }
        }

        & .price {
          font-weight: 500;
          color: rgba(var(--link-color));
        }
  
        & .subtext {
          color: var(--colors-text-Text-Primary, #323232);
          font-size: 18px;
          font-style: normal;
          font-weight: 400;
          line-height: 14px;      
        }
      }
  
      .journey_purchase-type__content {
        & ul {
          list-style-type: none;
          padding: 0;
  
          & li {
            display: flex;
            gap: 12px;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px;
            color: var(--colors-text-Text-Primary, #323232);
            text-align: left;   
            margin-bottom: 8px;         

            & svg {
              min-width: 20px;
              min-height: 20px;
              width: 20px;
              height: 20px;
              margin-top: 2px;
            }

            & svg path {
              stroke: #00CFB4;
            }
  
            & span.icon {
              padding-top: 2px;
  
              & svg {
                min-width: 20px;
                min-height: 20px;
                width: 20px;
                height: 20px;
              }
            }
  
            & span.text {
              font-size: 16px;
              font-style: normal;
              font-weight: 400;
              line-height: 24px;
              color: var(--colors-text-Text-Primary, #323232);
              text-align: left;
            }
           
          }
        } 
      }
    }
  }

  & .journey_variants {

    & .journey_variants_heading {
      flex-direction: column;
      text-align: left;
      margin-bottom: 16px;

      & h3 {
        color: var(--colors-text-Text-Primary, #323232);
        font-size: 22px;
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
      }

      & p {
        color: var(--colors-text-Text-Primary, #323232);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        margin-top: 8px;
        display: flex;
        gap: 8px;
        align-items: center;
      }
    }
    
    & .journey_variants-variants {

      display: flex;
      flex-direction: column;
      gap: 16px;
      
      & label {
        display: flex;
        padding: 8px 12px;
        align-items: center;
        gap: 12px;
        align-self: stretch;

        border-radius: 12px;
        border: 2px solid transparent;
        outline: 1px solid #B3B2B3;
        outline-offset: -1px;

        background: #FEFEFE;
        font-weight: 300;


        & svg {
          min-width: 24px;
          min-height: 24px;          
          width: 24px;
          height: 24px;
        }

        & .variant-text {

          text-align: left;

          & span {
            display: block;
          }
        }

        & input {
          position: absolute;
          opacity: 0;
          cursor: pointer;
        }

        &:has(input:checked) {
          border: 2px solid var(--color-brand-Berry, #BC2653) !important;
          outline: none !important;
          font-weight: 400;

          & span:first-of-type {
            font-weight: 500;
          };
        }          
      }
    }

    & .journey_variants-usps {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16px;
      row-gap: 10px;

      & .journey_variants-usps__item {
        width: 50%;
        display: flex;
        text-align: left;
        font-size: 16px;
        align-items: center;
        gap: 4px;

        & span {
          line-height: 1.2;
        }
        
        & svg {
          color: #323232;
          fill: #323232;
          width: 16px;
          height: 24px;
        }
      }
    }
  }

  & [hidden] {
    display: none !important;
  }

  & .journey_content_right {
    
    padding-bottom: 32px;
    
    @media (min-width: 834px) {
      width: 390px;

      & .arrow-back {
        display: none;
      }      
    }
    
    @media (min-width: 1000px) {
      width: 440px;
    }

    .trustpilot-widget {
      width: 100%;
      margin: 0;
      margin-left: 0 !important;
      height: 40px;
      margin-top: 32px;
      display: none;
    }    
  }

  &.journey-pux-step-by-step .journey_content_left, &.journey-researcher-page .journey_content_left {
    display: none;

    @media (min-width: 834px) {
      display: block;
    }
  }
  
  &.journey-pux-step-by-step, &.journey-researcher-page {
    position: relative;
    z-index: 3;

    & .journey_content_right {
      overflow: scroll;
      
      @media (min-width: 834px) {
        overflow: hidden;
      }

      & .journey-heading {

        text-align: left;
        display: none;

        &:not(.journey-heading + .metafield-rich_text_field) {
          margin-bottom: 46px;
        }
        
        @media (min-width: 834px) {
          display: block;
        }

        & h2 {
          color: var(--colors-text-Text-Primary, #323232);
          font-size: var(--font-size-H3, 22px);
          font-style: normal;
          font-weight: 500;
          line-height: var(--font-line-height-H3, 36px);
          margin-bottom: 0;

          @media (min-width: 834px) {
            font-size: 24px;
          }

          & span.berry-discount {
            color: #BC2653;
          }
        }

        & p {
          margin-top: 0;
          margin-bottom: 46px !important;

          &.no-badge {
            margin-bottom: 20px !important;
          }
        }
      }    
      
      & .arrow-back {
        margin-bottom: 8px;
        margin-left: 2px;
      }
      
      @media (max-width: 833px) {
        position: fixed;
        height: calc(100vh - 163px);
        overflow-x: hidden;
      }      
    }

    & #journey_add_to_cart {
      display: none;
    }

    & .mobile-step-progress {
      display: block;

      @media (min-width: 834px) {
        display: none;
      }            

      & .social-proof {
        margin-bottom: 4px;
      }
    }  

    & .journey_lock-content .editorial-content-tag {
      @media (max-width: 833px) {
        display: none;
      } 
    }

  }

  &.journey-pux-scrolling-column {

    position: relative;
    z-index: 3;
    
    & .journey_content {
      margin-bottom: 40px;
    }

    & .journey_content_left {
      @media (max-width: 833px) {
        background: white;
      }

      .arrow-back {
        margin: 8px 0px 7px 16px;

        @media (min-width: 834px) {
          display: none;
        }
      }
    }

    & .journey_content_right {

      & .journey-heading {

        text-align: left;
        
        &:not(.journey-heading + .metafield-rich_text_field) {
            margin-bottom: 46px;
        }

        & h2 {
          color: var(--colors-text-Text-Primary, #323232);
          font-size: var(--font-size-H3, 22px);
          font-style: normal;
          font-weight: 500;
          line-height: var(--font-line-height-H3, 36px);
          margin-bottom: 0;

          @media (min-width: 834px) {
            font-size: 24px;
          }
          
          & span.berry-discount {
            color: #BC2653;
          }          
        }

        & p {
          margin-top: 0;
          margin-bottom: 46px !important;
        }
      }

      & .journey_purchase-type__badge {
        background: white;
        color: #323232;
        font-weight: 400;

        &.secondary {
          display: flex;
        }        
      }
      
      & .journey_variants {
        border-top: 1px solid #deddde;
        border-bottom: 1px solid #deddde;
        margin-top: 48px;
        padding-top: 48px;
        margin-bottom: 48px;
        padding-bottom: 48px;        
      }

      & .social-proof {
        text-align: center;
        margin-bottom: 6px;
      }

      & #journey_add_to_cart {
        display: flex;
        padding: var(--spacing-Spacing-3, 8px) 28px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        color: var(--Mono-000, #FFF);
        font-family: var(--font-family-Sans-Serif, "TT Norms Pro");
        font-size: var(--font-size-H4, 18px);
        font-style: normal;
        font-weight: 600;
        line-height: var(--font-line-height-Subheading, 28px);         
      }
    }

    & .mobile-tower-progress {
      display: block;
      padding-top: 9px;
      
      @media (min-width: 834px) {
        display: none;
      }
     
    }
    @media (max-width: 833px) {
      & .mobile-progress__title {
        margin-bottom: 0;
      }
      & .journey_purchase-type__header__price .price-wrap {
        font-size: 20px;
        margin-bottom: 9px;
        & .subscription-period {
          font-size: 18px;
        }

      }
      & .journey_lock-content__column .journey_lock_editorial-tag {
        display: none;
      }
    }  
  }
}

.journey_purchase-types label {

  & input {
    position: absolute;
    opacity: 0;
    cursor: pointer;

    &:checked ~ .checkmark {
      border: 2px solid rgba(var(--primary-button-border-color));
      background-color: #fff;  
    }
  }

  & .checkmark {
    position: absolute;
    top: 24px;
    left: 16px;
    height: 28px;
    width: 28px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid rgba(var(--tertiary-button-border-color-focus));
  }

  &.closed {
    & .checkmark {
      top: 15px;
    }
  }  
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.journey_purchase-types label input:checked ~ .checkmark:after {
  display: block;
}

.journey_purchase-types label .checkmark:after {
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(var(--primary-button-background));;
}

/* Journey PUX step by step - Progress */

.journey_progress .social-proof {
  margin-bottom: 8px !important;
}

.journey_progress, .mobile-tower-progress, .mobile-step-progress {
  bottom: 0;
  z-index: 3;
  padding: 16px 24px;
  text-align: center;
  width: 100%;
  background: white;
  margin-left: -24px;

  @media (max-width: 833px) {
    position: fixed;
  }

  @media (min-width: 833px) {
    margin: 0;
    padding: 0;
    padding-top: 16px;
  }  

  & .journey_progress-most-popular {
    color: var(--colors-text-Text-Primary, #323232);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin: 0;

    @media (min-width: 834px) {
      display: none;
    }
  }

  & .journey_progress-next {
    padding: 10px 28px !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 100px;
    background: var(--color-brand-Berry, #BC2653);
    border-color: var(--color-brand-Berry, #BC2653);
    width: 100%;
    color: white;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: var(--font-line-height-Button, 20px);
    margin-bottom: 20px;
    &:focus {
      border-width: 2px;
    }
  }

}

.mobile-tower-progress, .mobile-step-progress {
  display: none;
  /*margin-left: -40px;*/


  & .mobile-progress__title {
    color: var(--colors-text-Text-Primary, #323232);
    font-family: var(--font-family-Sans-Serif, "TT Norms Pro");
    font-size: var(--font-size-Body, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--font-line-height-Body, 26px);
  }

  @media (min-width: 834px) {
    display: none;
  }
}

.mobile-step-progress {
  margin-left: 0;
}

.journey_progress-bar, .journey_progress-bar__desktop {
  padding: 4px;
  border-radius: 100px;
  border: 1px solid var(--colors-border-Border-invert, #323232);
  
  & .journey_progress-bar__fill {
    height: 8px;
    border-radius: 100px;
    background: #00CFB4;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;      
    width: 25%;          
  }

  &.progress-step-2 .journey_progress-bar__fill {
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    width: 50%;
  }

  &.progress-step-3 .journey_progress-bar__fill {
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    width: 75%;
  }    
}