/** Shopify CDN: Minification failed

Line 235:0 Unexpected "{"
Line 235:1 Expected identifier but found "%"
Line 237:2 Unexpected "{"
Line 237:3 Expected identifier but found "%"
Line 509:4 Unexpected "{"
Line 509:5 Expected identifier but found "%"
Line 509:36 Unexpected "{"
Line 509:37 Expected identifier but found "%"
Line 619:4 Unexpected "{"
Line 619:5 Expected identifier but found "%"
... and 2 more hidden warnings

**/


.flavour-swatch-new .title {
    padding: 0 8px;
    text-align: center;
    display: block;
    font-size: 12px;
    line-height: 28px;
}
  .fon-packaging[data-packaging="sachets"]{
    position:relative;
}

.fon-packaging[data-packaging="sachets"]:after {
    position: absolute;
    top: -12px;
    border-radius: 20px;
    background: #0171E3;
    box-shadow: 0 2px 6px -2px rgba(164, 0, 17, 0.25);
    right: 15px;
    color: #FFF;
    text-align: center;
    font-family: "Tomato Grotesk Medium";
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.09px;
    text-transform: uppercase;
    width: auto;
    height: 14px;
    display: flex;
    display: flex;
    min-width: auto;
    height: 21px;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    content:'Most Popular';
    z-index: 1;
    line-height:normal;
}
.fon-flavour[data-variant-title="Chocolate Milkshake"]{
  position:relative;
}




.fon-flavour[data-variant-title="Chocolate Milkshake"]:after {
    position: absolute;
    top: -12px;
    border-radius: 20px;
    background: #0171E3;
    box-shadow: 0 2px 6px -2px rgba(164, 0, 17, 0.25);
    right: 15px;
    color: #FFF;
    text-align: center;
    font-family: "Tomato Grotesk Medium";
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.09px;
    text-transform: uppercase;
    width: auto;
    height: 14px;
    display: flex;
    display: flex;
    min-width: auto;
    height: 21px;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    content:'Most Loved';
    z-index: 1;
    line-height:normal;
}

#product-options .fon-selector-heading {
    margin-bottom: 20px;
}

.flavour-swatch-new .title {
    margin-bottom: 5px;
}
.fon-flavour.active {
    border: none;
    position:relative;
    border-radius: 4px;
}

.fon-flavour.active:before{
    border-radius: 4px;
    border: 2px solid #0171E3;
    box-shadow: 2px 2px 4.2px #0000001a;
    position:absolute;
    inset:0;
    content:'';
}
.fon-flavour.active img.flavour-image {
    width: 100%;
    border-top-left-radius: 4px;
}

[data-dynamic-value]{
  opacity:0;
  transition:opacity .9s;
}
[data-dynamic-value].value-updated{
  opacity:1;
  transition:opacity .9s;
}
  span.ups-ico {
    font-size: 23px;
    line-height: normal;
}
.after-add-to-cart-text p {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.after-add-to-cart-text p span {
    display: block;
    line-height: normal;
}

.after-add-to-cart-text p img {
    position: relative;
    top: -1px;
}
.option-description {
    margin-top: 10px;
    padding-left: 0;
}
.option-description p {
    align-items: center;
    margin-bottom:5px;
    text-transform:capitalize;
}
.option-popup .expand {
    color: #3E3E3E;
    font-family: "Tomato Grotesk Medium";
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 21.6px; /* 196.364% */
    letter-spacing: -0.4px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: capitalize;
}
.option-popup .expand {
    font-size: 12px;
    position:relative;
    display: flex;
    align-items: center;
    gap: 5px;
    position:relative;
    cursor:pointer;
}
.option-popup .expand:after {
    display: block;
    content: '';
    width: 10px;
    height: 5px;
    background-image: url(/cdn/shop/files/for_me_read_more.svg?v=1769746146);
    background-size: contain;
    background-repeat: no-repeat;
    transition: all .3s;
}
.option-popup .expand.active:after {
    transform: rotate(180deg);
    transition: all .5s;
}
.expand-content p {
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 10px;
    color:#3E3E3E;
}
.expand-content {
    margin-top: 10px;
    display:none;
}

.expand-content p:last-child {
    margin-bottom: 0;
}
.option-popup {
    border-top: 1px solid #DEDEDE;
    padding-top: 10px;
    margin-top: 10px;
}


.fon-ups-box {
    border-radius: 7px;
    background: rgba(251, 249, 255, 0.77);
    box-shadow: 0 0 9.4px 0 rgba(0, 0, 0, 0.15);
}
div#fon-onetime-option .option-heading {
    border: none;
    padding: 0;
}
.option-heading {
    border-bottom: 1px solid #DEDEDE;
    padding-bottom: 10px;
}
.option-title {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-direction: column;
}
{% comment %} .option-ticker{
  display:none;
} {% endcomment %}
.fon-subscription-option.active .option-ticker{
  display:flex;
}
.option-ticker-wrapper {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: start;
}
div#fon-onetime-option .option-title {
    gap: 0;
}
div#fon-onetime-option .option-heading {
    align-items: center;
}




.flavour-swatch-title-container {
    flex-direction: column;
    align-items: start;
    width: 100%;
    justify-content: start;
    align-content: stretch;
}
.flavour-swatch-new .title {
    padding: 0 8px;
    text-align: center;
    display: block;
    font-size: 12px;
    line-height: 28px;
}
img.flavour-image {
    width: 100%;
}

.flavour-swatch-new {
    width: 100%;
}
img.flavour-image {
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.flavour-options>div,.flavour-options>div.active {
    height: 100%;
    padding: 0px;
    border-radius: 5px;
}
.flavour-swatch-new-status .checked {
    visibility: hidden;
    display:none;
}
.flavour-options>div,.flavour-options>div.active .flavour-swatch-new-status .checked {
    visibility: visible;
}
.flavour-swatch-new-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 2px;
    margin-top: -6px;
    padding: 0 8px 5px;
}

.flavour-swatch-new-status img {
    margin-left: auto;
    display: block;
}


.flavour-swatch-new-status img {
    max-width: 18px;
}

.flavour-swatch-new-status > span.variant-availability {
    font-size: 14px;
    line-height: 14px;
    display:none;
}

.flavour-swatch-title-container {
    gap: 0px;
}
.flavour-options>div {
    flex: 1 1 calc(33.33% - 8px);
    max-width: calc(33.33% - 8px);
}

.flavour-options {
    display: flex;
    gap: 12px;
}
.bundle-best-value {
    padding-left: 0px;
    border: 1px solid #1d1d21;
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative!important;
    left: 0;
    top: 0;
    margin-top:20px;
}

.bundle-best-value .image {
    padding-left: 10px;
}

.bundle-best-value .text p {
    font-size: 11px;
    line-height: 13px;
    color:#1d1d21;
}

.bundle-best-value .savings p:last-child {
    font-size: 8px;
    font-weight: 400;
}
.bundle-best-value .savings {
    padding: 5px 11px;
    border-radius: 0;
}

.bundle-best-value .savings p:first-child {
    font-weight: bold;
    font-size: 16px;
}

.bundle-best-value .text {
    color: #1d1d21;
    padding: 10px 0px;
}
.bundle-best-value .savings {
    padding: 13px 11px;
    border-radius: 0;
}
.bundle-best-value .text p {
    font-size: 13px;
    line-height: 15px;
    color: #1d1d21;
}
.bundle-best-value .image {
    padding-left: 10px;
    font-size: 24px;
}
div#paying-options>div {
    position: relative;
}
div#paying-options>div .option-badge {
    position: absolute;
    top: -14px;
    border-radius: 20px;
    background: #0171E3;
    box-shadow: 0 2px 6px -2px rgba(164, 0, 17, 0.25);
    right: 15px;
    color: #FFF;
    text-align: center;
    font-family: "Tomato Grotesk Medium";
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.09px;
    text-transform: uppercase;
    width: 182px;
    height: 14px;
    display: flex;
    display: flex;
    height: 25px;
    padding: 4px 7px;
    justify-content: center;
    align-items: center;
}

.option-title label {
    font-size: 18px;
    font-family: 'Tomato Grotesk Medium';
    font-weight: 500;
    line-height: normal;
}
div#paying-options>div label span {
    
    font-weight: 600;
    font-family: 'Tomato Grotesk SemiBold';
}
div#paying-options>div.active label span {
    color: #16A34A;
}
p.option-sub {
    color: #3E3E3E;
    font-family: "Tomato Grotesk Medium";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 18.9px;
    letter-spacing: -0.4px;
    display: flex;
    gap: 5px;
    align-items: center;
}
p.option-sub .option-sub-before-price {
    color: #BEBEBE;
    font-weight: 500;
    line-height: 18.9px;
    letter-spacing: -0.4px;
    text-decoration: line-through;
}
.option-label-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: start;
}

div#paying-options>div p.option-sub-badge {
    border-radius: 100px;
    border: 1px solid #9AD6AF;
    background: rgba(245, 245, 245, 0.50);
    box-shadow: 0 0 8px 0 rgba(154, 154, 154, 0.30);
    color: #9AD6AF;
    text-align: center;
    font-family: "Tomato Grotesk Bold";
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 25.2px;
    letter-spacing: -0.42px;
    margin-top: 5px;
    flex-basis: auto;
    padding: 0 12px;
}
div#paying-options>div p.option-sub-badge strong{
    color: #9AD6AF;
  font-family: "Tomato Grotesk Bold";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 18.9px; /* 157.5% */
  letter-spacing: -0.4px;
}

div#paying-options>div.active p.option-sub-badge strong{
  color: #16A34A;
}
div#paying-options>div.active p.option-sub-badge {
    border-radius: 100px;
    border: 1px solid #16A34A;
    background: rgba(245, 245, 245, 0.50);
    box-shadow: 0 0 8px 0 rgba(154, 154, 154, 0.30);
    color: #16A34A;
}


.option-pricing > div {
    color: #3E3E3E;
    text-align: right;
    font-family: "Tomato Grotesk Bold";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 21.6px;
    letter-spacing: -0.4px;
}
div#paying-options>div.active .option-pricing > div {
  color: #0171E3;
}
.option-heading .option-pricing {
    display: flex;
    gap: 10px;
    {% comment %} padding-top: 4px; {% endcomment %}
}
.option-ticker {
    width: 27px;
    height: 27px;
}
div#paying-options>div.active .option-ticker {
    border-radius: 1000px;
    border: 1px solid #0171E3;
    box-shadow: 0 -1px 4px #0171e366;
    position: relative;
}
div#paying-options>div.active .option-ticker span {
    display: block;
    width: 17px;
    height: 17px;
    background: #0171e3;
    border-radius: 50%;
}
div#paying-options>div.active {
    border-radius: 9px;
    border: 1px solid #DEDEDE;
    background: #FFF;
    transition: border-color .9s;
}

div#paying-options>div{
  border:none;
}
div#paying-options>div:before {
    position:relative;
    border: 2px solid transparent;
    transition: all .9s;
}
div#paying-options>div.active:before {
    border-radius: 8px;
    border: 2px solid #0171E3;
    position:absolute;
    inset:0;
    content:'';
    transition: all .9s;
}

.scrolled-add-to-cart section.section-onefit-all-sticky {
    display: block;
    top: 0%;
    display: none;
}

body div#paying-options>div.active label span {
    color: inherit;
}

h1.fon-title .title-price {
    text-decoration: none;
}

.onefit-pay-total-container {
    color: #3E3E3E;
}
@media screen and (max-width:768px){
    body .section-media-faq .fon-media-faq h2 {
    font-family: Tomato Grotesk Medium;
    font-size: 22px;
    font-weight: 500;
    }


  .option-heading {
    border-bottom: 1px solid #DEDEDE;
    padding-bottom: 15px;
}


div#paying-options>div .option-badge, div#paying-options>div .option-badge, .fon-packaging[data-packaging="sachets"]:after, .fon-flavour[data-variant-title="Chocolate Milkshake"]:after {
    font-size: 9px;
    width: auto;
    padding: 3px 10px;
    height: auto;
    right: 7px;
    top: -11px;
    line-height: normal;
}

div#paying-options>div .option-badge {
    font-size: 11px;
    width: auto;
    padding: 4px 22px;
    height: auto;
    top: -11px;
}


.option-title label {
    font-size: 14px;
}
div#paying-options>div .option-ticker {
    flex-basis: 20px;
    min-width: 20px;
    height: 20px;
}
p.option-sub {
    font-size: 14px;
}



.option-pricing > div {
    font-size: 14px;
    position: relative;
    {% comment %} padding-top: 3px; {% endcomment %}
}
.option-label-wrapper {
    gap: 3px;
}
div#paying-options>div.active .option-ticker span {
    width: 12px;
    height: 12px;
}


.flavour-swatch-new .title {
    padding: 0 8px;
    text-align: center;
    display: block;
    font-size: 2.3vw;
    line-height: 20px;
    padding-top: 0px;
    margin-bottom: 1px;
}
  .flavour-swatch-new-status > span.variant-availability{
  font-size:11px;

  }
    .flavour-swatch-new-status img {
      max-width: 14px;
  }
  .bundle-best-value .text p {
      font-size: 11px;
      line-height: 12px;
  }
  .bundle-best-value .savings p:first-child {
      font-weight: bold;
      font-size: 13px;
  }
  .bundle-best-value .savings p:last-child {
      font-size: 7px;
      font-weight: 400;
  }
      ul.collection-filter {
      overflow: auto;
  }

  .bundle-best-value {
      margin-top: 15px;
  }
      .collection-bundles-items .collection-bundle-item {
      border-radius: 2px;
  }

}
.fon-selector-active {
    display: flex;
    gap: 14px;
    margin-bottom:15px;
}

.fon-selector-active > div {
    flex: 1 1 calc(50% - 14px);
    border-radius: 2px;
    border: 1px solid rgba(63, 63, 63, 0.10);
    background: #FAFAFA;
    padding: 10px;
}


.flavour-swatch-new img {
    display: none;
}
.fon-flavour[data-variant-title="Chocolate Milkshake"]:after{
    display:none;
}
.flavour-options>div {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
    height:auto!important;
}

.flavour-options>div, 
.flavour-options>div.active {
    height: 100%;
    padding: 8px 10px!important;
}

.flavour-options>div.active{
    height:auto;
    display:none;
}
.flavour-swatch-title-container {
    gap: 0px;
}
.flavour-swatch-new-status {
    display: none;
}
.flavour-swatch-new .title {
    text-align: start;
}
[data-plant-based] .flavour-swatch-new .title {
    justify-content: start;
}
[data-plant-based] .flavour-swatch-new .title:before {
    display: none;
}
.flavour-swatch-new {
    display: flex;
    align-items: center;
    gap: 10px;
}
.flavour-swatch-new .title {
    text-align: start;
    line-height: normal;
    padding: 0;
    margin: 0;
}

span.swatch-circle {
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 50%;
}


span.swatch.swatch-OF-CH-BOX-700-V4-6 {
    background: #90635D;
}
span.swatch.swatch-OF-TC-BOX-700-V4-6 {
    background: #FDCD1A;
}
span.swatch.swatch-OF-VI-BOX-700-V4-6{
    background: #E1CCB3;
}
span.swatch.swatch-OF-FV-BOX-700-V4-6{
    background: #E5D2B9;
}
span.swatch.swatch-OF-CO-BOX-700-V4-6{
    background: #7D3931;
}

.option-title label {
    font-size: 23px;
}
.option-ticker {
    margin-top: 4px;
}
div#paying-options > div {
    padding: 30px 20px;
}

div#paying-options>div .option-badge {
    width: 100px;
    background: #00B443;
    box-shadow: 0 2px 6px -2px rgba(164, 0, 17, 0.25);
}

.option-pricing > div {
    font-size: 26px;
    color: #0171E3;
    text-align: right;
    text-shadow: 0 0 6.2px rgba(1, 113, 227, 0.40);
    font-family: "Tomato Grotesk ExtraBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 21.6px;
    letter-spacing: -0.4px;
}
.option-pricing > div span {
    font-size: 75%;
}

.option-description p {
    display: flex;
    font-size: 15px;
    font-weight: 400;
    font-family: 'Tomato Grotesk Regular';
    gap: 12px;
    margin-bottom: 8px;
    color: #000;
    line-height: normal;
}

.option-welcome-kit-outer {
    background: linear-gradient(var(--ab-angle, 0deg), rgba(0, 0, 0, .06), rgba(0, 0, 0, .06), rgba(220, 220, 220, .2), rgba(255, 255, 255, 1), rgba(180, 180, 180, .6), rgba(0, 0, 0, .06), rgba(0, 0, 0, .06));
    animation: ab-spin-border 2.8s linear infinite;
    box-shadow: 0 2px 8px #0000000f;
    border-radius: 4px;
    padding:2px;
    margin-bottom: 10px;
    position:relative;
    z-index:1;
}
.option-welcome-kit {
    border-radius: 4px;
    border: 1px solid var(--silver, #F5F7FA);
    background: white;
    box-shadow: 0 1px 5.3px #00000026;
    display: flex;
    align-items: center;
    gap:15px;
    padding-right: 20px;
    position: relative;
    border-radius: 4px;
    padding: 2px 10px 2px 1px;
    border-radius: 4px;
    border: 1px solid var(--silver, #F5F7FA);
    background: var(--purple-linear, linear-gradient(0deg, rgba(250, 249, 253, 0.30) 33.17%, rgba(250, 249, 253, 0.80) 66.83%, #EEECF3 100%));
    box-shadow: 0 1px 5.3px 0 rgba(0, 0, 0, 0.15);
    background: #ffffff;
}
.option-welcome-kit:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
    position: absolute;
    z-index: 0;
    border-radius: 4px;
/* border: 1px solid var(--silver, #F5F7FA); */
background: var(--purple-linear, linear-gradient(0deg, rgba(250, 249, 253, 0.30) 33.17%, rgba(250, 249, 253, 0.80) 66.83%, #EEECF3 100%));
box-shadow: 0 1px 5.3px 0 rgba(0, 0, 0, 0.15);
}

.option-welcome-kit * {
    position: relative;
    z-index: 1111;
}

  @property --ab-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes ab-spin-border {
    to { --ab-angle: 360deg; }
  }
.option-welcome-kit .welcome-kit-image {
    max-width: 35%;
}
.welcome-kit-image img {
    background: white;
    width: 100%;
    border-radius:10px;
}

.welcome-kit-image {
    padding: 10px;
    fill: #FFF;
    filter: drop-shadow(0 0 5.7px rgba(0, 0, 0, 0.14));
    border-radius: 25px;
}

.option-welcome-kit h3 {
    color: #333;
    font-family: Tomato Grotesk SemiBold;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.option-welcome-kit h3+p {
    color: #333;
    font-family: Tomato Grotesk SemiBold;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom:5px;
}
.option-welcome-kit ul {
    margin: 2px 0;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.option-welcome-kit li p{
    color: #3E3E3E;
    font-family: "Tomato Grotesk Regular";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 13px;
    letter-spacing: -0.15px;
    text-transform: capitalize;
        display: flex;
    justify-content: space-between;
    line-height: normal;
}
.option-welcome-kit .welcome-kit-text {
    flex-grow: 1;
        display: flex;
    flex-direction: column;
    gap: 4px;
}

.option-welcome-kit ul li p {
    display: flex;
}
@keyframes shimmer {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}

.option-welcome-kit li p span.anim-free {
  background: linear-gradient(
    80deg,
    #333  0%,
    #dadfe2ff 18%,
    #dfd8d8ff  28%,
    #D0D5D8 36%,
    #9AA0A4 50%,
    #D0D5D8 64%,
    #dfd8d8ff  72%,
    #dadfe2ff 82%,
    #333 100%
  );
  background-size: 300% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  font-weight: 700;
  font-family: 'Tomato Grotesk Bold';
}

span.flavour-detail {
    border-radius: 100px;
    background: #1B6BFF;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    color: white;
    padding: 5px 17px;
    margin-left: 10px;
    font-weight: 500;
    font-family: 'Tomato Grotesk Medium';
    font-size: 12px;
}
.fon-selector-active {
    gap: 12px;
}
.fon-selector-active > div.selector-selected {
    border: 2px solid #0171E3;
    border-radius: 4px;
    background:white;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.fon-selector-active  .selector-swatch {
    width: 20px;
    height: 20px;
    background: #90635d;
    border-radius: 50%;
}
.selector-text {
    font-size: 15px;
    font-weight: 600;
    font-family: 'Tomato Grotesk SemiBold';
    color: #3E3E3E;
    line-height: normal;
}
.flavour-swatch-new .title {
    padding: 0 8px;
    text-align: center;
    display: block;
    font-size: 14px;
    line-height: 28px;
    font-weight: 400;
    font-family: Tomato Grotesk Regular;
    padding: 0;
}
.flavour-swatch-new {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selector-button {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size:14px;
    cursor:pointer;
    background:#FAFAFA;
}

.flavour-options-wrapper{
    display:none;
}

.fon-packaging[data-packaging="sachets"]:after,
.fon-quantity-picker-recommended:not(.active):after, 
div#paying-options .fon-subscription-option:not(.active) .option-badge, 
.fon-flavour[data-variant-title="Chocolate Milkshake"]:not(.active):after, 
.fon-packaging[data-packaging="sachets"]:not(.active):after, 
.onelife-user:not(.active):after {
    background: #00B443!important;
    transition: none;
}

/* ── FAQ Accordion ───────────────────────── */

.product-info-list {
  border-bottom: 1px solid #e8e8e8;
}

.product-info-list:first-child {
  border-top: 1px solid #e8e8e8;
}

/* Header row */
.product-info-faq {
    margin-top: 30px;
}
.product-info-list h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
font-family: "Tomato Grotesk SemiBold";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 26px; /* 185.714% */
text-transform: capitalize;
}
.product-info-list.active h3 {
  color: #0171E3;
}

/* Chevron icon */
.product-info-list h3 img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-info-list.active h3 img {
  transform: rotate(180deg);
}

/* Collapsible body — grid trick for smooth height */
.product-info-list .text {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-info-list.active .text {
  grid-template-rows: 1fr;
}

/* Inner wrapper — required for grid trick */
.product-info-list .text > *:first-child {
  overflow: hidden;
}

/* Content fade + slide */
.product-info-list .text p {
  padding: 0 0 20px;
  font-size: 14px;
  color: #4a4a4a;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.04s,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.04s;
    color: #434655;
font-family: "Tomato Grotesk Regular";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22.75px; /* 162.5% */
}

.product-info-list.active .text p {
  opacity: 1;
  transform: translateY(0);
}

.product-info-list .text p + p {
  padding-top: 0;
  margin-top: -8px;
}
.product-info-list.active img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(88%) saturate(3232%) hue-rotate(198deg) brightness(97%) contrast(99%);
}

body div#paying-options>div.active label span {
    color: #3E3E3E;
}
@media screen and (max-width:566px){

    body div#paying-options>div .option-badge {
    font-size: 11px;
    width: auto;
    padding: 4px 22px;
    height: auto;
    top: -10px;
}
    body section.section-onefit-main-info {
        padding-top: 0;
    }
    span.flavour-detail {
        font-size: 10px;
        padding: 6px 9px;
        position: relative;
        top: -2px;
    }
    span.swatch-circle,
    .fon-selector-active  .selector-swatch {
        width: 15px;
        height: 15px;
    }
    .selector-text {
        font-size: 11px;
    }
    .flavour-swatch-new .title,
    .selector-button {
        font-size: 11px;
    }
    .selector-button img {
        max-width: 15px;
    }
    .flavour-options>div, .flavour-options>div.active {
        height: 100%;
        padding: 6px 10px!important;
    }
div#paying-options>div .option-badge {
    font-size: 9px;
    width: auto;
    padding: 4px 22px;
    height: auto;
    top: -10px;
}
    div#paying-options > div {
        padding: 20px 15px;
    }
    .option-description p {
        font-size: 14px;
    }
    .option-image.open {
        padding-bottom: 20px;
    }
    .option-popup {
        padding-top: 15px;
    }
    .option-title label {
        font-size: 19px;
    }

    .option-welcome-kit h3 {
        font-size: 12px;
    }
    .option-welcome-kit h3+p {
        font-size: 10px;
        margin-bottom: 5px;
    }
    .option-welcome-kit ul li p {
        display: flex;
        font-size: 10px;
    }
    .option-welcome-kit {
        gap: 5px;
    }
    .option-welcome-kit .welcome-kit-image {
        max-width: 35%;
        padding: 5px;
    }
    .option-welcome-kit ul {
        gap: 0px;
    }
    .option-welcome-kit .welcome-kit-text {
        gap: 0px;
    }
    section#fon-reviews {
        padding-top: 30px;
    }
    .below-footer-container.below-footer-container-product {
        background: #f9f8f7 !important;
        padding-top: 0;
    }
    .onefit-solo-packaging-options .packaging-swatch {
        gap: 10px;
        height: 85px;
    }
    p.option-sub{
        font-size:14px;
    }
    div#paying-options>div.active p.option-sub{
        font-size:12px;
    }
    .section-onefit-padding h2 {
        font-size: 22px;
        line-height: normal;
        text-align: left;
    }
    div#fon-onetime-option p.option-sub {
        font-size: 12px;
        line-height: normal;
    }
    div#paying-options> div#fon-onetime-option.active p.option-sub {
        font-size: 11px;
    }
    .flavour-options {
        display: flex;
        gap: 5px 5px;
    }
    .fon-selector-active {
    gap: 12px;
    margin-bottom: 5px;
}
    .flavour-options > div{
        flex: 1 1 calc(50% - 20px)!important;
        max-width: calc(50% - 0px);
    }
}