@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&family=Roboto+Condensed:wght@400;500;600;700;800;900&display=swap");

:root {
  --pink-dark: #831538;
  --pink-hover: #C82184;  
  --pink-darker: #620D2A;
  --pink-bright: #D82F55;
  --pink-soft: #FFF4F7;
  --pink-border: #EDCBD6;
  --black-color: #000000;
  --text: #171717;
  --muted: #646064;
  --line: #E8E1E3;
  --green: #3E9B50;
  --black: #000000;
  --h1-size: 40px;
  --h2-size: 32px;
  --h3-size: 24px;
  --paragraph-size: 16px;
  --lead-size: 17px;
  --benefit-size: 16px;
  --product-image-height: 535px;
  --thumbnail-height: 76px;
  --thumbnail-gap: 9px;
  --bundle-gap: 16px;
  --bundle-padding-y: 16px;
  --bundle-padding-x: 14px;
  --bundle-min-height: 108px;
  --bundle-title-size: 20px;
  --bundle-text-size: 21px;
  --bundle-price-size: 22px;
  --bundle-small-size: 13px;
  --button-size: 20px;
  --ribbon-red: #C91F3F;
  --ribbon-top-position: -16px;
  --ribbon-pop-scale: 1.10;
  --ribbon-pop-speed: 1.35s;
  --stock-low-color: #F71111;
  --stock-empty-border: #CDD3DC;
  --stock-low-animation: lowStockBlink 1s steps(1,end) infinite;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--text);
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

p {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: var(--paragraph-size);
}

h1,
h2,
h3 {
  margin-top: 0;
  font-family: "Roboto Condensed", Arial, sans-serif;
}

.offer-bar {
  position: relative;
  width: 100%;
  z-index: 1;
  padding: 14px 18px;
  background: var(--pink-dark);
  color: #FFFFFF;
}

.offer-bar-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.offer-countdown-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 7px;
  background: #E62F4D;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.offer-percent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #E62F4D;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.offer-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  color: #FFFFFF;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}

.timer-separator {
  margin: 0 2px;
}

.offer-message {
  min-width: 0;
  display: block;
  color: #FFFFFF;
  text-align: left;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

.offer-message strong,
.offer-message span {
  display: inline;
}

.offer-message strong {
  font-weight: 800;
}

.offer-message strong + span::before,
.offer-message span + strong::before {
  content: " ";
}

.margin-top-15px {
  margin-top: 15px;
}

.margin-top-25px {
  margin-top: 25px;
}

.padding-top-15px {
  margin-top: 15px;
}

.brand {
  min-height: 72px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo {
  width: 180px;
  max-height: 70px;
  object-fit: contain;
}

.hero {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 24px 55px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: 52px;
  align-items: start;
}

.visual-column {
  width: 100%;
  min-width: 0;
}

.product-gallery {
  width: 100%;
}

.gallery-stage {
  position: relative;
  width: 100%;
  height: var(--product-image-height);
  overflow: hidden;
  border: 1px solid var(--pink-border);
  border-radius: 18px;
  background: linear-gradient(145deg,#FFFFFF,#FFF6F9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-main-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transition: opacity 0.14s ease;
}

.gallery-main-image.is-changing {
  opacity: 0.25;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  background: rgba(216,47,85,0.36);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.gallery-arrow svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-prev {
  left: 12px;
}

.gallery-next {
  right: 12px;
}

.gallery-arrow.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gallery-thumbnails {
  width: 100%;
  margin-top: 13px;
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: var(--thumbnail-gap);
}

.gallery-thumb {
  width: 100%;
  height: var(--thumbnail-height);
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 7px;
  background: #FFFFFF;
  opacity: 0.68;
  cursor: pointer;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.gallery-thumb.active {
  opacity: 1;
  border-color: var(--pink-dark);
  box-shadow: 0 3px 11px rgba(131,21,56,0.17);
}

.customer-reviews {
  margin-top: 27px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
}

.review-card {
  width: 100%;
  padding: 22px 24px;
  border: 1px solid #8f0077;
  border-radius: 14px;
  background: #FFFFFF;
}

.review-tagline {
  margin: 0 0 12px;
  color: #1C171A;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.review-copy {
  margin: 0 0 13px;
  color: #242124;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.9;
}

.review-card-stars {
  margin: 0 0 16px;
  margin-top: 8px;
  color: #FFB91C;
  font-family: Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1px;
}

.review-meta {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  column-gap: 12px;
  margin-top: 25px;
}

.review-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #F2F2F2;
}

.review-name {
  min-width: 0;
  color: #171417;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.review-verified {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.review-verified-icon {
  display: block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  object-fit: contain;
  flex: 0 0 22px;
}

.review-verified-text {
  display: block;
  margin: 0;
  color: #171417;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}

.review-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 18px auto 15px;
  border-radius: 9px;
}

.copy-column {
  width: 100%;
  min-width: 0;
}

.copy-column h1 {
  margin: 0 0 18px;
  color: #181316;
  font-size: var(--h1-size);
  font-weight: 800;
  line-height: 1.3;
}

.headline-line {
  width: 40%;
  height: 2px;
  margin-bottom: 21px;
  border-radius: 20px;
  background: var(--pink-dark);
}

.lead {
  margin: 0 0 16px;
  font-size: var(--lead-size);
  font-weight: 500;
  color: #2f2f2f;
  line-height: 1.65;
}

.support {
  margin: 0 0 20px;
  color: #4A4447;
  font-size: var(--paragraph-size);
  line-height: 1.65;
}

.benefit-list {
  list-style: none;
  margin: 0 0 21px;
  padding: 0;
}

.benefit-list li {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #EFE7EA;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  column-gap: 11px;
  align-items: center;
}

.benefit-list li:last-child {
  border-bottom: 0;
}

.benefit-check {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-check img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.benefit-text {
  color: #2f2f2f;
  font-size: var(--benefit-size);
  font-weight: 600;
  line-height: 1.5;
}

.stockline {
  margin-top: 7px;
  padding: 11px 0;
  border-top: 1px solid #EFE7EA;
  border-bottom: 1px solid #EFE7EA;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.per-tub-serving {
  margin-top: 0;
  padding: 11px 0;
  border-bottom: 1px solid #EFE7EA;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.stock-meter {
  display: inline-flex;
  gap: 4px;
}

.stock-box {
  width: 16px;
  height: 16px;
  border: 2px solid var(--stock-empty-border);
  background: #FFFFFF;
}

.stock-box.is-filled {
  border-color: var(--stock-low-color);
  background: var(--stock-low-color);
}

.stock-low {
  color: var(--stock-low-color);
  font-size: 24px;
  font-weight: 900;
  animation: var(--stock-low-animation);
}

@keyframes lowStockBlink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }

}

.bundle-title {
  margin: 26px 0 14px;
  color: var(--pink-bright);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: var(--bundle-title-size);
  font-weight: 900;
}

.bundle-list {
  display: grid;
  gap: var(--bundle-gap);
}

.bundle {
  position: relative;
  width: 100%;
  min-height: var(--bundle-min-height);
  padding: var(--bundle-padding-y) var(--bundle-padding-x);
  border: 2px solid #E6D5DB;
  border-radius: 14px;
  background: #FFFFFF;
  display: grid;
  grid-template-columns: 26px 100px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  cursor: pointer;
}

.bundle.active {
  border-color: var(--pink-dark);
  background: var(--pink-soft);
}

.bundle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio {
  width: 23px;
  height: 23px;
  border: 2px solid #B9ADB1;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.radio::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: transparent;
}

.bundle.active .radio {
  border-color: var(--pink-dark);
}

.bundle.active .radio::after {
  background: var(--pink-dark);
}

.bundle-img {
  width: 100px;
  height: 72px;
  object-fit: contain;
}

.bundle-copy,
.bundle-2nd-copy {
  color: #211A1E;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: var(--bundle-text-size);
  line-height: 1.02;
}

.bundle-copy {
  font-weight: 900;
}

.bundle-2nd-copy {
  font-weight: 500;
}

.bundle-price {
  text-align: right;
  white-space: nowrap;
}

.bundle-price strong {
  color: var(--black-color);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: var(--bundle-price-size);
  font-weight: 900;
}

.per-each {
  color: #5D5558;
  font-size: 0.58em;
}

.bundle-price small {
  display: block;
  margin-top: 5px;
  color: #000000;
  font-size: var(--bundle-small-size);
}

.ribbon {
  position: absolute;
  right: 12px;
  top: var(--ribbon-top-position);
  z-index: 5;
  padding: 8px 16px;
  border-radius: 22px;
  background: var(--ribbon-red);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.ribbon-star {
  margin-right: 5px;
  color: #FFD43B;
}

.ribbon-float {
  transform-origin: center center;
  animation: ribbonPop var(--ribbon-pop-speed) ease-in-out infinite;
}

@keyframes ribbonPop {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(var(--ribbon-pop-scale));
  }

}

.responsive-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.responsive-image img {
  width: 100%;
  max-width: 700px;
  margin-top: 20px;
  padding-bottom: 10px;
  height: auto;
  display: block;
  object-fit: contain;
}

.bundle-sub {
  padding: 12px 0 2px;
  color: #71686C;
  text-align: center;
  font-size: 13px;
}

.divider {
  margin: 0 8px;
}

.cta {
  width: 100%;
  margin-top: 14px;
  padding: 17px 20px;
  border: 0;
  border-radius: 32px;
  background: var(--pink-bright);
  color: #FFFFFF;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: var(--button-size);
  font-weight: 900;
  cursor: pointer;
}

.cta:hover {
  background: var(--pink-hover);
}

.delivery {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  color: #5F565A;
  font-size: 12px;
}

.delivery span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.green-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.guarantee-box {
  width: 100%;
  margin-top: 19px;
  padding: 24px 28px;
  border: 2px solid var(--pink-bright);
  border-radius: 12px;
  background: #FFFFFF;
  display: grid;
  grid-template-columns: 140px minmax(0,1fr);
  align-items: center;
  gap: 22px;
}

.guarantee-badge-wrap {
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guarantee-badge-image {
  display: block;
  width: 100%;
  max-width: 140px;
  height: auto;
  object-fit: contain;
}

.guarantee-content {
  min-width: 0;
}

.guarantee-title {
  margin: 0 0 10px;
  color: #171717;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
}

.guarantee-text {
  margin: 0;
  color: #242124;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
}

.faq-section {
  width: 100%;
  margin-top: 36px;
  background: #FFFFFF;
}

.faq-main-title {
  margin: 0 0 18px;
  color: #171717;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
}

.faq-list {
  width: 100%;
  border-top: 1px solid #DCDCDC;
}

.faq-item {
  width: 100%;
  border-bottom: 1px solid #DCDCDC;
  overflow-anchor: none;
}

.faq-question {
  width: 100%;
  min-height: 76px;
  padding: 22px 0;
  border: 0;
  background: transparent;
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  cursor: pointer;
}

.faq-question-text {
  min-width: 0;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.2;
}

.faq-chevron {
  width: 23px;
  height: 23px;
  min-width: 23px;
  fill: none;
  stroke: #111111;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transform-origin: top center;
  transition:
    max-height 0.38s ease,
    opacity 0.22s ease,
    transform 0.28s ease,
    visibility 0s linear 0.38s;
}

.faq-item.is-open .faq-answer {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    max-height 0.38s ease,
    opacity 0.22s ease,
    transform 0.28s ease,
    visibility 0s;
}

.faq-answer-inner {
  width: 100%;
  padding: 0 2px 28px;
  overflow: visible;
  color: #383438;
  font-family: "Open Sans", Arial, sans-serif;
}

.faq-answer-heading {
  display: grid;
  grid-template-columns: 50px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 17px;
}

.faq-answer-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pink-soft);
  color: var(--pink-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-answer-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-answer-heading h3 {
  margin: 0;
  color: #1A1719;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.faq-answer-inner p {
  margin: 0 0 16px;
  color: #3B373A;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.72;
}

.faq-answer-inner p:last-child {
  margin-bottom: 0;
}

.faq-answer-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.faq-answer-list li {
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid #EFE7EA;
  color: #343033;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  column-gap: 10px;
  align-items: center;
}

.faq-answer-list li:last-child {
  border-bottom: 0;
}

.faq-answer-list li::before {
  content: none;
  display: none;
}

.faq-list-check {
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.faq-list-check img {
  display: block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: none;
  margin: 0;
  padding: 0;
  object-fit: contain;
}

.faq-list-text {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.faq-answer-list strong {
  color: #1D191B;
  font-weight: 800;
}

.faq-timeline {
  margin-top: 18px;
  display: grid;
  gap: 15px;
}

.faq-timeline-block {
  padding: 16px 17px;
  border: 1px solid #E8DCE1;
  border-radius: 10px;
  background: #FFF9FB;
}

.faq-timeline-block h4 {
  margin: 0 0 7px;
  color: var(--pink-dark);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

.faq-timeline-block p {
  margin: 0;
}

.faq-question:focus-visible {
  outline: 3px solid rgba(216,47,85,0.25);
  outline-offset: 4px;
  border-radius: 4px;
}

.slim-trust-section {
  width: 100%;
  padding: 24px 20px;
  background: #FFF7F9;
  border-top: 1px solid #F0DDE3;
  border-bottom: 1px solid #F0DDE3;
  margin-bottom: 10px;
}

.slim-trust-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  align-items: stretch;
}

.slim-trust-item {
  min-width: 0;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-right: 1px solid #E8D7DD;
}

.slim-trust-item:last-child {
  border-right: 0;
}

.slim-trust-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: #D82F55;
  box-shadow: 0 2px 10px rgba(131,21,56,0.09);
}

.slim-trust-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slim-trust-item:first-child .slim-trust-icon svg {
  fill: rgba(216,47,85,0.10);
}

.slim-trust-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.slim-trust-text strong {
  margin: 0;
  color: #181316;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

.slim-trust-text span {
  margin-top: 4px;
  color: #70676B;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.mobile-sticky {
  display: none;
}

.section-divider {
  width: 50%;
  height: 1.3px;
  margin: 5px auto;
  border: 0;
  background: var(--pink-dark);
}





























/* ==========================================================
   SLIMSODA FOOTER
========================================================== */

.slimsoda-footer {

  /* EASY CUSTOMIZATION */

  --footer-max-width: 1180px;

  --footer-logo-width: 190px;

  --footer-link-size: 17px;

  --footer-copyright-size: 16px;


  width: 100%;

  padding:
    55px
    20px
    55px;

  background:
    #FFFFFF;

}


/* ==========================================================
   BIG CONTAINER
========================================================== */

.slimsoda-footer-container {

  width: 100%;

  max-width:
    var(--footer-max-width);

  margin:
    0 auto;

}


/* ==========================================================
   INNER DIV
========================================================== */

.slimsoda-footer-inner {

  width: 100%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

}


/* ==========================================================
   LOGO
========================================================== */

.slimsoda-footer-logo-wrap {

  width: 100%;

  margin-bottom:
    24px;

  display:
    flex;

  justify-content:
    center;

}


.slimsoda-footer-logo {

  display:
    block;

  width:
    var(--footer-logo-width);

  max-width:
    100%;

  height:
    auto;

  object-fit:
    contain;

}


/* ==========================================================
   LINKS
========================================================== */

.slimsoda-footer-links {

  margin:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    14px;

  color:
    #111111;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--footer-link-size);

  font-weight:
    500;

  line-height:
    1.5;

  text-align:
    center;

}


.slimsoda-footer-links a {

  color:
    #111111;

  text-decoration:
    none;

  transition:
    color
    0.2s
    ease;

}


.slimsoda-footer-links a:hover {

  color:
    var(--pink-dark);

  text-decoration:
    none;

}


/* DIVIDER */

.slimsoda-footer-links span {

  color:
    #444444;

  line-height:
    1;

}


/* ==========================================================
   COPYRIGHT
========================================================== */

.slimsoda-footer-copyright {

  margin:
    22px
    0
    0;

  color:
    #111111;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--footer-copyright-size);

  font-weight:
    500;

  line-height:
    1.5;

  text-align:
    center;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 850px) {

  .slimsoda-footer {

    --footer-logo-width: 170px;

    --footer-link-size: 16px;

    --footer-copyright-size: 15px;

    padding:
      45px
      16px
      45px;

  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 520px) {

  .slimsoda-footer {

    --footer-logo-width: 150px;

    --footer-link-size: 15px;

    --footer-copyright-size: 14px;

    padding:
      38px
      13px
      90px;

  }


  .slimsoda-footer-logo-wrap {

    margin-bottom:
      21px;

  }


  .slimsoda-footer-links {

    gap:
      9px;

    line-height:
      1.6;

  }


  .slimsoda-footer-copyright {

    margin-top:
      18px;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

  .slimsoda-footer {

    --footer-logo-width: 140px;

    --footer-link-size: 14px;

    --footer-copyright-size: 13px;

  }

}












/* ==========================================================
   SLIMSODA FAQ SECTION
========================================================== */

.slimsoda-faq-section {

  /* ======================================================
     EASY CUSTOMIZATION
  ====================================================== */

  --faq-max-width: 1160px;

  --faq-title-size: 38px;

  --faq-question-size: 22px;

  --faq-answer-size: 16px;

  --faq-card-radius: 5px;


  width: 100%;

  padding:
    58px
    24px
    65px;

  /*
    SUPER LIGHT PINK
    Almost white.
  */

  background:
    #FFFBFC;

}


/* ==========================================================
   CONTAINER
========================================================== */

.slimsoda-faq-container {

  width: 100%;

  max-width:
    var(--faq-max-width);

  margin:
    0 auto;

}


/* ==========================================================
   HEADER
========================================================== */

.slimsoda-faq-header {

  width: 100%;

  margin:
    0
    auto
    38px;

  text-align:
    center;

}


.slimsoda-faq-title {

  margin:
    0;

  color:
    #171317;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--faq-title-size);

  font-weight:
    800;

  line-height:
    1.15;

  text-align:
    center;

}


/* ==========================================================
   FAQ LIST
========================================================== */

.slimsoda-faq-list {

  width: 100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

}


/* ==========================================================
   FAQ ITEM
========================================================== */

.slimsoda-faq-item {

  width: 100%;

  overflow:
    hidden;

  border:
    1px
    solid
    #D9D4D6;

  border-radius:
    var(--faq-card-radius);

  background:
    #FFFFFF;

  transition:
    border-color
    0.2s
    ease,
    box-shadow
    0.2s
    ease;

}


/* OPEN FAQ */

.slimsoda-faq-item.is-open {

  border-color:
    #D7AFBC;

  box-shadow:
    0
    2px
    8px
    rgba(70, 25, 42, 0.04);

}


/* ==========================================================
   QUESTION BUTTON
========================================================== */

.slimsoda-faq-question {

  width: 100%;

  min-height:
    66px;

  padding:
    17px
    20px;

  margin:
    0;

  border:
    0;

  background:
    #FFFFFF;

  color:
    #171317;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  text-align:
    left;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--faq-question-size);

  font-weight:
    800;

  line-height:
    1.35;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

}


/* QUESTION TEXT */

.slimsoda-faq-question > span {

  flex:
    1;

  min-width:
    0;

}


/* ==========================================================
   ARROW
========================================================== */

.slimsoda-faq-arrow {

  display:
    block;

  width:
    20px;

  height:
    20px;

  min-width:
    20px;

  color:
    #171317;

  transition:
    transform
    0.25s
    ease;

  pointer-events:
    none;

}


/* ROTATE WHEN OPEN */

.slimsoda-faq-item.is-open
.slimsoda-faq-arrow {

  transform:
    rotate(180deg);

}


/* ==========================================================
   ANSWER
========================================================== */

.slimsoda-faq-answer {

  max-height:
    0;

  overflow:
    hidden;

  opacity:
    0;

  transition:
    max-height
    0.35s
    ease,
    opacity
    0.25s
    ease;

}


/* OPEN */

.slimsoda-faq-item.is-open
.slimsoda-faq-answer {

  opacity:
    1;

}


/* ==========================================================
   ANSWER INNER
========================================================== */

.slimsoda-faq-answer-inner {

  padding:
    0
    20px
    20px;

  border-top:
    1px
    solid
    #F0EAED;

}


.slimsoda-faq-answer-inner p {

  margin:
    16px
    0
    0;

  color:
    #4A4447;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--faq-answer-size);

  font-weight:
    500;

  line-height:
    1.7;

}


/* ==========================================================
   HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

  .slimsoda-faq-question:hover {

    background:
      #FFFDFE;

  }

}


/* ==========================================================
   KEYBOARD FOCUS
========================================================== */

.slimsoda-faq-question:focus-visible {

  outline:
    2px
    solid
    #831538;

  outline-offset:
    -2px;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 850px) {

  .slimsoda-faq-section {

    --faq-title-size: 32px;

    --faq-question-size: 17px;

    --faq-answer-size: 15px;

    padding:
      48px
      16px
      55px;

  }


  .slimsoda-faq-header {

    margin-bottom:
      32px;

  }


  .slimsoda-faq-question {

    min-height:
      62px;

    padding:
      16px
      18px;

  }


  .slimsoda-faq-answer-inner {

    padding:
      0
      18px
      19px;

  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 520px) {

  .slimsoda-faq-section {

    --faq-title-size: 29px;

    --faq-question-size: 16px;

    --faq-answer-size: 15px;

    --faq-card-radius: 5px;

    padding:
      40px
      13px
      46px;

  }


  .slimsoda-faq-header {

    margin-bottom:
      27px;

  }


  .slimsoda-faq-list {

    gap:
      8px;

  }


  .slimsoda-faq-question {

    min-height:
      58px;

    padding:
      15px
      15px;

    gap:
      13px;

  }


  .slimsoda-faq-arrow {

    width:
      18px;

    height:
      18px;

    min-width:
      18px;

  }


  .slimsoda-faq-answer-inner {

    padding:
      0
      15px
      17px;

  }


  .slimsoda-faq-answer-inner p {

    margin-top:
      14px;

    line-height:
      1.65;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

  .slimsoda-faq-section {

    --faq-title-size: 27px;

    --faq-question-size: 15px;

    --faq-answer-size: 14px;

  }


  .slimsoda-faq-question {

    padding-left:
      13px;

    padding-right:
      13px;

  }


  .slimsoda-faq-answer-inner {

    padding-left:
      13px;

    padding-right:
      13px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .slimsoda-faq-answer,
  .slimsoda-faq-arrow,
  .slimsoda-faq-item {

    transition:
      none;

  }

}













/* ==========================================================
   SLIMSODA CUSTOMER STORIES / REVIEWS
========================================================== */

.slimsoda-stories-section {

  /* ======================================================
     EASY CUSTOMIZATION
  ====================================================== */

  --stories-max-width: 1180px;

  --stories-dark-pink: #831538;

  --stories-title-size: 38px;

  --stories-subtitle-size: 17px;

  --stories-tagline-size: 22px;

  --stories-review-size: 16px;

  --stories-star-size: 18px;

  --stories-top-star-size: 24px;

  --stories-strip-image-height: 115px;

  --stories-strip-image-width: 112px;

  --stories-strip-gap: 8px;

  --stories-avatar-size: 42px;

  --stories-verified-icon-size: 18px;


  width: 100%;

  padding:
    55px
    24px
    58px;

  background:
    #FFFFFF;

}


/* ==========================================================
   CONTAINER
========================================================== */

.slimsoda-stories-container {

  width: 100%;

  max-width:
    var(--stories-max-width);

  margin:
    0 auto;

}


/* ==========================================================
   HEADER
========================================================== */

.slimsoda-stories-header {

  width: 100%;

  margin:
    0
    auto
    30px;

  text-align:
    center;

}


.slimsoda-stories-top-stars {

  margin:
    0
    0
    12px;

  color:
    #FFB91C;

  font-family:
    Arial,
    sans-serif;

  font-size:
    var(--stories-top-star-size);

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    2px;

}


.slimsoda-stories-title {

  margin:
    0
    0
    10px;

  color:
    #181316;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--stories-title-size);

  font-weight:
    800;

  line-height:
    1.15;

}


.slimsoda-stories-title span {

  color:
    var(--stories-dark-pink);

}


.slimsoda-stories-subtitle {

  margin:
    0;

  color:
    #696267;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--stories-subtitle-size);

  font-weight:
    500;

  line-height:
    1.5;

}


/* ==========================================================
   AUTO MOVING CUSTOMER IMAGE STRIP
========================================================== */

/*
  IMPORTANT:

  This is now ONLY the visible viewport.

  The actual movement happens on:
  .slimsoda-stories-images-track
*/

.slimsoda-stories-images {

  position:
    relative;

  width:
    100%;

  margin:
    0
    auto
    32px;

  overflow:
    hidden;

}


/*
  TRACK:

  JS moves this entire track continuously
  from right to left.

  width:max-content prevents wrapping.
*/

.slimsoda-stories-images-track {

  display:
    flex;

  align-items:
    stretch;

  gap:
    var(--stories-strip-gap);

  width:
    max-content;

  min-width:
    max-content;

  will-change:
    transform;

  transform:
    translate3d(0, 0, 0);

}


/*
  EACH COMPLETE SET OF 10 IMAGES

  JS automatically clones this group once.

  Result:

  GROUP 1:
  1 2 3 4 5 6 7 8 9 10

  GROUP 2:
  1 2 3 4 5 6 7 8 9 10

  This creates the seamless infinite loop.
*/

.slimsoda-stories-images-group {

  display:
    flex;

  align-items:
    stretch;

  gap:
    var(--stories-strip-gap);

  flex:
    0 0 auto;

  width:
    max-content;

}


/* ==========================================================
   EACH TOP CUSTOMER IMAGE
========================================================== */

.slimsoda-story-image-wrap {

  flex:
    0
    0
    var(--stories-strip-image-width);

  width:
    var(--stories-strip-image-width);

  min-width:
    var(--stories-strip-image-width);

  height:
    var(--stories-strip-image-height);

  overflow:
    hidden;

  border-radius:
    8px;

  background:
    #F5F2F3;

}


.slimsoda-story-image-wrap img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

}


/* ==========================================================
   REVIEW CAROUSEL TRACK
========================================================== */

.slimsoda-stories-grid {

  width:
    100%;

  display:
    flex;

  gap:
    18px;

  align-items:
    stretch;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  scroll-behavior:
    smooth;

  scroll-snap-type:
    x mandatory;

  scrollbar-width:
    none;

  -ms-overflow-style:
    none;

}


.slimsoda-stories-grid::-webkit-scrollbar {

  display:
    none;

}


/* ==========================================================
   REVIEW CARD

   DESKTOP:
   3 REVIEWS VISIBLE AT ONCE
========================================================== */

.slimsoda-story-card {

  flex:
    0
    0
    calc(
      (100% - 36px) / 3
    );

  width:
    auto;

  min-width:
    0;

  padding:
    25px
    24px
    20px;

  border:
    1px
    solid
    #E4DEE1;

  border-radius:
    13px;

  background:
    #FFFFFF;

  display:
    flex;

  flex-direction:
    column;

  scroll-snap-align:
    start;

}


/* ==========================================================
   RATING
========================================================== */

.slimsoda-story-rating {

  margin-bottom:
    15px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

}


.slimsoda-story-rating-number {

  color:
    #292429;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    15px;

  font-weight:
    700;

}


.slimsoda-story-stars {

  color:
    #FFB91C;

  font-family:
    Arial,
    sans-serif;

  font-size:
    var(--stories-star-size);

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    1px;

}


/* ==========================================================
   TAGLINE
========================================================== */

.slimsoda-story-tagline {

  margin:
    0
    0
    11px;

  color:
    var(--stories-dark-pink);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--stories-tagline-size);

  font-weight:
    800;

  line-height:
    1.22;

}


/* ==========================================================
   REVIEW TEXT
========================================================== */

.slimsoda-story-review {

  margin:
    0;

  color:
    #383337;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--stories-review-size);

  font-weight:
    500;

  line-height:
    1.8;

  padding-top: 10px;

  flex:
    1;

}


/* ==========================================================
   REVIEW FOOTER
========================================================== */

.slimsoda-story-footer {

  width:
    100%;

  margin-top:
    22px;

  padding-top:
    17px;

  border-top:
    1px
    solid
    #ECE7E9;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

}


/* ==========================================================
   CUSTOMER
========================================================== */

.slimsoda-story-person {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.slimsoda-story-avatar {

  width:
    var(--stories-avatar-size);

  height:
    var(--stories-avatar-size);

  min-width:
    var(--stories-avatar-size);

  border-radius:
    50%;

  object-fit:
    cover;

  object-position:
    center;

  background:
    #EFEAEB;

}


.slimsoda-story-person-info {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

}


.slimsoda-story-person-info strong {

  color:
    #2A2528;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.3;

}


/* ==========================================================
   STARS BELOW CUSTOMER NAME
========================================================== */

.slimsoda-story-person-stars {

  margin-top:
    4px;

  color:
    #FFB91C;

  font-family:
    Arial,
    sans-serif;

  font-size:
    13px;

  line-height:
    1;

  letter-spacing:
    0.7px;

}


/* ==========================================================
   VERIFIED CUSTOMER
========================================================== */

.slimsoda-story-verified {

  flex:
    0
    0
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  color:
    var(--stories-dark-pink);

}


.slimsoda-story-verified-icon {

  display:
    block;

  width:
    var(--stories-verified-icon-size);

  height:
    var(--stories-verified-icon-size);

  min-width:
    var(--stories-verified-icon-size);

  max-width:
    none;

  margin:
    0;

  padding:
    0;

  object-fit:
    contain;

  object-position:
    center;

}


.slimsoda-story-verified span {

  white-space:
    nowrap;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.7px;

}


/* ==========================================================
   BOTTOM DOTS + ARROWS
========================================================== */

.slimsoda-stories-navigation {

  margin-top:
    20px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    14px;

}


/* ==========================================================
   DOTS
========================================================== */

.slimsoda-story-dots {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

}


.slimsoda-story-dots span {

  width:
    9px;

  height:
    9px;

  border-radius:
    50%;

  background:
    #D7D3D5;

  cursor:
    pointer;

  transition:
    width
    0.2s
    ease,
    background
    0.2s
    ease;

}


.slimsoda-story-dots span.active {

  width:
    28px;

  border-radius:
    999px;

  background:
    var(--stories-dark-pink);

}


/* ==========================================================
   PREVIOUS / NEXT BUTTONS
========================================================== */

.slimsoda-story-arrows {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

}


.slimsoda-story-arrows button {

  width:
    48px;

  height:
    48px;

  min-width:
    48px;

  flex:
    0 0
    48px;

  padding:
    0;

  margin:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    transparent;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  box-sizing:
    border-box;

  line-height:
    0;

  transition:
    opacity
    0.2s
    ease,
    transform
    0.2s
    ease;

}


/* ==========================================================
   SVG ARROW
========================================================== */

.slimsoda-story-arrow-svg {

  display:
    block;

  width:
    48px;

  height:
    48px;

  min-width:
    48px;

  max-width:
    none;

  margin:
    0;

  padding:
    0;

  flex:
    0 0
    48px;

  overflow:
    visible;

  pointer-events:
    none;

}


/* ==========================================================
   ARROW HOVER
========================================================== */

@media (hover: hover) and (pointer: fine) {

  .slimsoda-story-arrows button:not(:disabled):not(.is-disabled):hover {

    transform:
      scale(1.04);

  }

}


/* ==========================================================
   ARROW KEYBOARD FOCUS
========================================================== */

.slimsoda-story-arrows button:focus-visible {

  outline:
    2px
    solid
    var(--stories-dark-pink);

  outline-offset:
    3px;

}


/* ==========================================================
   DISABLED ARROW
========================================================== */

.slimsoda-story-arrows button.is-disabled,
.slimsoda-story-arrows button:disabled {

  opacity:
    0.35;

  cursor:
    default;

  pointer-events:
    none;

}





/* ==========================================================
   VERIFIED REVIEWS BOX
========================================================== */

.verified-reviews-box {

  /* EASY CUSTOMIZATION */

  --verified-box-max-width: 1180px;

  --verified-heading-size: 28px;

  --verified-text-size: 17px;

  --verified-icon-size: 40px;


  width: calc(100% - 40px);

  max-width:
    var(--verified-box-max-width);

  margin:
    35px auto;

  padding:
    28px
    32px;

  border-radius:
    18px;

  background:
    #121712;

  color:
    #FFFFFF;

}


/* ==========================================================
   HEADING
========================================================== */

.verified-reviews-heading {

  width: 100%;

  margin-bottom:
    18px;

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

}


/* VERIFY SVG */

.verified-reviews-icon {

  display:
    block;

  width:
    var(--verified-icon-size);

  height:
    var(--verified-icon-size);

  min-width:
    var(--verified-icon-size);

  object-fit:
    contain;

  object-position:
    center;

}


/* HEADING TEXT */

.verified-reviews-heading h3 {

  margin:
    0;

  color:
    #FFFFFF;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--verified-heading-size);

  font-weight:
    800;

  line-height:
    1.2;

}


/* ==========================================================
   PARAGRAPH
========================================================== */

.verified-reviews-text {

  margin:
    0;

  color:
    #D9D9D9;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--verified-text-size);

  font-weight:
    500;

  line-height:
    1.6;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 850px) {

  .verified-reviews-box {

    --verified-heading-size: 25px;

    --verified-text-size: 16px;

    --verified-icon-size: 36px;

    width:
      calc(100% - 32px);

    padding:
      26px
      26px;

    border-radius:
      16px;

  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 520px) {

  .verified-reviews-box {

    --verified-heading-size: 23px;

    --verified-text-size: 15px;

    --verified-icon-size: 34px;

    width:
      calc(100% - 26px);

    margin:
      28px auto;

    padding:
      24px
      18px;

    border-radius:
      16px;

  }


  .verified-reviews-heading {

    margin-bottom:
      16px;

    gap:
      13px;

  }


  .verified-reviews-text {

    line-height:
      1.65;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

  .verified-reviews-box {

    --verified-heading-size: 21px;

    --verified-text-size: 14px;

    --verified-icon-size: 32px;

    padding:
      21px
      16px;

  }

}













/* ==========================================================
   TABLET
   2 REVIEWS VISIBLE
========================================================== */

@media (max-width: 900px) {

  .slimsoda-stories-section {

    --stories-title-size: 32px;

    --stories-tagline-size: 20px;

    --stories-review-size: 15px;

    --stories-strip-image-height: 100px;

    --stories-strip-image-width: 104px;

    padding:
      48px
      16px
      52px;

  }


  .slimsoda-stories-grid {

    gap:
      14px;

  }


  .slimsoda-story-card {

    flex:
      0
      0
      calc(
        (100% - 14px) / 2
      );

    padding:
      21px
      17px
      18px;

  }


  .slimsoda-story-footer {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .slimsoda-story-verified {

    justify-content:
      flex-start;

    padding-left: 26px;

  }


  .slimsoda-story-arrows button,
  .slimsoda-story-arrow-svg {

    width:
      48px;

    height:
      48px;

    min-width:
      48px;

    flex-basis:
      48px;

  }


}


/* ==========================================================
   MOBILE
   1 REVIEW AT A TIME + SWIPE
========================================================== */

@media (max-width: 650px) {

  .slimsoda-stories-section {

    --stories-strip-image-height: 92px;

    --stories-strip-image-width: 92px;

    padding:
      40px
      13px
      45px;

  }


  .slimsoda-stories-grid {

    gap:
      12px;

    overflow-x:
      auto;

    overflow-y:
      hidden;

    scroll-snap-type:
      x mandatory;

    scroll-behavior:
      smooth;

    padding-bottom:
      5px;

    scrollbar-width:
      none;

    -ms-overflow-style:
      none;

  }


  .slimsoda-stories-grid::-webkit-scrollbar {

    display:
      none;

  }


  .slimsoda-story-card {

    flex:
      0
      0
      92%;

    width:
      92%;

    min-width:
      92%;

    scroll-snap-align:
      center;

  }


  .slimsoda-story-arrows button,
  .slimsoda-story-arrow-svg {

    width:
      46px;

    height:
      46px;

    min-width:
      46px;

    flex-basis:
      46px;

  }

}


/* ==========================================================
   MOBILE 520PX
========================================================== */

@media (max-width: 520px) {

  .slimsoda-stories-section {

    --stories-title-size: 29px;

    --stories-subtitle-size: 15px;

    --stories-tagline-size: 20px;

    --stories-review-size: 15px;

    --stories-top-star-size: 21px;

    --stories-star-size: 16px;

    --stories-avatar-size: 39px;

    --stories-verified-icon-size: 17px;

    --stories-strip-image-width: 86px;

    --stories-strip-image-height: 86px;

  }


  .slimsoda-stories-header {

    margin-bottom:
      25px;

  }


  .slimsoda-story-card {

    flex:
      0
      0
      92%;

    width:
      92%;

    min-width:
      92%;

    padding:
      20px
      17px
      17px;

  }


  .slimsoda-story-review {

    line-height:
      1.8;

  }


  .slimsoda-story-footer {

    margin-top:
      19px;

  }


  .slimsoda-story-arrows {

    gap:
      8px;

  }


  .slimsoda-story-arrows button,
  .slimsoda-story-arrow-svg {

    width:
      44px;

    height:
      44px;

    min-width:
      44px;

    flex-basis:
      44px;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

  .slimsoda-stories-section {

    --stories-title-size: 27px;

    --stories-tagline-size: 19px;

    --stories-review-size: 14px;

    --stories-strip-image-width: 80px;

    --stories-strip-image-height: 80px;

  }


  .slimsoda-story-card {

    flex:
      0
      0
      94%;

    width:
      94%;

    min-width:
      94%;

  }


  .slimsoda-story-arrows button,
  .slimsoda-story-arrow-svg {

    width:
      42px;

    height:
      42px;

    min-width:
      42px;

    flex-basis:
      42px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .slimsoda-stories-grid {

    scroll-behavior:
      auto;

  }


  .slimsoda-story-dots span,
  .slimsoda-story-arrows button {

    transition:
      none;

  }

}





























/* ==========================================================
   SLIMSODA VS INJECTIONS & OTHER OPTIONS
   TWO COLUMN VERSION
========================================================== */

.slimsoda-vs-section {

  /* ======================================================
     EASY CUSTOMIZATION
  ====================================================== */

  --vs-max-width: 1040px;

  --vs-left-width: 50%;
  --vs-right-width: 50%;


  /* COLORS */

  --vs-pink: #B30169;

  /*
    VERY VERY LIGHT PINK
    SLIMSODA SIDE
  */

  --vs-slimsoda-bg: #FFF6FA;

  /*
    RIGHT SIDE
  */

  --vs-other-bg: #FFFFFF;

  --vs-section-bg: #FFF9FB;

  --vs-border-color: #392944;

  --vs-divider-color: #E7DCE2;


  /* TYPOGRAPHY */

  --vs-title-size: 38px;

  --vs-intro-size: 17px;

  --vs-column-title-size: 23px;

  --vs-left-text-size: 17px;

  --vs-right-text-size: 15px;


  /* PRODUCT IMAGES */

  --vs-left-image-width: 150px;

  --vs-left-image-height: 165px;

  --vs-right-image-width: 145px;

  --vs-right-image-height: 165px;


  /* ICONS */

  --vs-check-icon-size: 34px;

  --vs-status-icon-size: 34px;


  /* VS CIRCLE */

  --vs-circle-size: 70px;

  --vs-circle-font-size: 25px;


  /* TABLE */

  --vs-head-height: 140px;

  --vs-row-min-height: 108px;


  width:
    100%;

  padding:
    58px
    24px
    70px;

  background:
    var(--vs-section-bg);

}


/* ==========================================================
   CONTAINER
========================================================== */

.slimsoda-vs-container {

  width:
    100%;

  max-width:
    var(--vs-max-width);

  margin:
    0 auto;

}


/* ==========================================================
   MAIN HEADER
========================================================== */

.slimsoda-vs-header {

  width:
    100%;

  max-width:
    900px;

  margin:
    0 auto 105px;

  text-align:
    center;

}


.slimsoda-vs-title {

  margin:
    0
    0
    15px;

  color:
    #171317;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--vs-title-size);

  font-weight:
    800;

  line-height:
    1.16;

  text-align:
    center;

}


.slimsoda-vs-intro {

  width:
    100%;

  max-width:
    850px;

  margin:
    0 auto;

  color:
    #343033;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--vs-intro-size);

  font-weight:
    600;

  line-height:
    1.65;

  text-align:
    center;

}


/* ==========================================================
   TABLE
========================================================== */

.slimsoda-vs-table {

  position:
    relative;

  width:
    100%;

  border:
    2px
    solid
    var(--vs-border-color);

  border-radius:
    14px;

  background:
    #FFFFFF;

  overflow:
    visible;

}


/* ==========================================================
   VS CIRCLE
========================================================== */

.slimsoda-vs-circle {

  position:
    absolute;

  z-index:
    20;

  top:
    calc(
      var(--vs-circle-size) / -2
    );

  left:
    50%;

  width:
    var(--vs-circle-size);

  height:
    var(--vs-circle-size);

  border:
    3px
    solid
    var(--vs-border-color);

  border-radius:
    50%;

  background:
    #FFFFFF;

  color:
    var(--vs-border-color);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  transform:
    translateX(-50%);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--vs-circle-font-size);

  font-weight:
    900;

  line-height:
    1;

}


/* ==========================================================
   TOP HEADER ROW
========================================================== */

.slimsoda-vs-head {

  width:
    100%;

  min-height:
    var(--vs-head-height);

  display:
    grid;

  grid-template-columns:
    var(--vs-left-width)
    var(--vs-right-width);

  align-items:
    stretch;

}


/* ==========================================================
   LEFT HEADER - SLIMSODA
========================================================== */

.slimsoda-vs-head-left {

  position:
    relative;

  min-width:
    0;

  padding:
    90px
    15px
    22px;

  border-radius:
    11px
    0
    0
    0;

  background:
    var(--vs-slimsoda-bg);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    flex-end;

  text-align:
    center;

}


/* SLIMSODA IMAGE */

.slimsoda-vs-product-image {

  position:
    absolute;

  left:
    50%;

  bottom:
    52px;

  display:
    block;

  width:
    var(--vs-left-image-width);

  height:
    var(--vs-left-image-height);

  max-width:
    none;

  object-fit:
    contain;

  object-position:
    center;

  transform:
    translateX(-50%);

}


/* SLIMSODA TITLE */

.slimsoda-vs-head-left h3 {

  margin:
    0;

  color:
    var(--vs-pink);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--vs-column-title-size);

  font-weight:
    800;

  line-height:
    1.2;

}


/* ==========================================================
   RIGHT HEADER
========================================================== */

.slimsoda-vs-head-right {

  position:
    relative;

  min-width:
    0;

  padding:
    90px
    15px
    22px;

  border-left:
    1px
    solid
    var(--vs-divider-color);

  border-radius:
    0
    11px
    0
    0;

  background:
    var(--vs-other-bg);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    flex-end;

  text-align:
    center;

}


/* OTHER IMAGE */

.slimsoda-vs-other-image {

  position:
    absolute;

  left:
    50%;

  bottom:
    52px;

  display:
    block;

  width:
    var(--vs-right-image-width);

  height:
    var(--vs-right-image-height);

  max-width:
    none;

  object-fit:
    contain;

  object-position:
    center;

  transform:
    translateX(-50%);

}


/* OTHER TITLE */

.slimsoda-vs-head-right h3 {

  margin:
    0;

  color:
    var(--vs-pink);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--vs-column-title-size);

  font-weight:
    800;

  line-height:
    1.2;

}


/* ==========================================================
   EACH ROW
========================================================== */

.slimsoda-vs-row {

  width:
    100%;

  min-height:
    var(--vs-row-min-height);

  display:
    grid;

  grid-template-columns:
    var(--vs-left-width)
    var(--vs-right-width);

  align-items:
    stretch;

}


/* ==========================================================
   LEFT SLIMSODA CELL
========================================================== */

.slimsoda-vs-left-cell {

  min-width:
    0;

  padding:
    18px
    28px;

  border-top:
    1px
    solid
    var(--vs-divider-color);

  background:
    var(--vs-slimsoda-bg);

  display:
    grid;

  grid-template-columns:
    var(--vs-check-icon-size)
    minmax(0, 1fr);

  align-items:
    center;

  column-gap:
    16px;

}


/* CHECK ICON */

.slimsoda-vs-check-icon {

  display:
    block;

  width:
    var(--vs-check-icon-size);

  height:
    var(--vs-check-icon-size);

  min-width:
    var(--vs-check-icon-size);

  max-width:
    none;

  object-fit:
    contain;

  object-position:
    center;

}


/* LEFT TEXT */

.slimsoda-vs-left-cell p {

  margin:
    0;

  color:
    #171317;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--vs-left-text-size);

  font-weight:
    700;

  line-height:
    1.45;

  text-align:
    left;

  overflow-wrap:
    anywhere;

}


/* ==========================================================
   RIGHT CELL
========================================================== */

.slimsoda-vs-right-cell {

  min-width:
    0;

  padding:
    16px
    26px;

  border-top:
    1px
    solid
    var(--vs-divider-color);

  border-left:
    1px
    solid
    var(--vs-divider-color);

  background:
    var(--vs-other-bg);

  display:
    grid;

  grid-template-columns:
    var(--vs-status-icon-size)
    minmax(0, 1fr);

  align-items:
    center;

  column-gap:
    16px;

}


/* RIGHT STATUS ICON */

.slimsoda-vs-status-icon {

  display:
    block;

  width:
    var(--vs-status-icon-size);

  height:
    var(--vs-status-icon-size);

  min-width:
    var(--vs-status-icon-size);

  max-width:
    none;

  object-fit:
    contain;

  object-position:
    center;

}


/* RIGHT TEXT */

.slimsoda-vs-right-cell p {

  margin:
    0;

  color:
    #393337;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--vs-right-text-size);

  font-weight:
    500;

  line-height:
    1.5;

  text-align:
    left;

  overflow-wrap:
    anywhere;

}


/* ==========================================================
   LAST ROW
========================================================== */

.slimsoda-vs-row-last
.slimsoda-vs-left-cell {

  border-radius:
    0
    0
    0
    11px;

}


.slimsoda-vs-row-last
.slimsoda-vs-right-cell {

  border-radius:
    0
    0
    11px
    0;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 850px) {

  .slimsoda-vs-section {

    --vs-title-size: 32px;

    --vs-intro-size: 16px;

    --vs-column-title-size: 20px;

    --vs-left-text-size: 16px;

    --vs-right-text-size: 14px;

    --vs-left-image-width: 125px;

    --vs-left-image-height: 140px;

    --vs-right-image-width: 120px;

    --vs-right-image-height: 140px;

    --vs-check-icon-size: 30px;

    --vs-status-icon-size: 30px;

    --vs-circle-size: 62px;

    --vs-circle-font-size: 22px;

    --vs-head-height: 125px;

    --vs-row-min-height: 100px;


    padding:
      48px
      16px
      60px;

  }


  .slimsoda-vs-header {

    margin-bottom:
      90px;

  }


  .slimsoda-vs-head-left,
  .slimsoda-vs-head-right {

    padding:
      80px
      12px
      19px;

  }


  .slimsoda-vs-product-image,
  .slimsoda-vs-other-image {

    bottom:
      45px;

  }


  .slimsoda-vs-left-cell {

    padding:
      16px
      18px;

    column-gap:
      12px;

  }


  .slimsoda-vs-right-cell {

    padding:
      15px
      17px;

    column-gap:
      12px;

  }

}


/* ==========================================================
   MOBILE
   STILL 2 COLUMNS
========================================================== */

@media (max-width: 520px) {

  .slimsoda-vs-section {

    --vs-title-size: 28px;

    --vs-intro-size: 14px;

    --vs-column-title-size: 16px;

    --vs-left-text-size: 13px;

    --vs-right-text-size: 12px;

    --vs-left-image-width: 85px;

    --vs-left-image-height: 95px;

    --vs-right-image-width: 82px;

    --vs-right-image-height: 95px;

    --vs-check-icon-size: 24px;

    --vs-status-icon-size: 24px;

    --vs-circle-size: 52px;

    --vs-circle-font-size: 18px;

    --vs-head-height: 98px;

    --vs-row-min-height: 92px;


    padding:
      38px
      10px
      48px;

  }


  .slimsoda-vs-header {

    margin-bottom:
      65px;

  }


  .slimsoda-vs-title {

    margin-bottom:
      12px;

    line-height:
      1.15;

  }


  .slimsoda-vs-intro {

    line-height:
      1.6;

  }


  .slimsoda-vs-table {

    border-width:
      1.5px;

    border-radius:
      10px;

  }


  .slimsoda-vs-head-left,
  .slimsoda-vs-head-right {

    padding:
      61px
      6px
      13px;

  }


  .slimsoda-vs-product-image,
  .slimsoda-vs-other-image {

    bottom:
      34px;

  }


  .slimsoda-vs-left-cell {

    padding:
      11px
      8px;

    grid-template-columns:
      24px
      minmax(0, 1fr);

    column-gap:
      8px;

  }


  .slimsoda-vs-right-cell {

    padding:
      11px
      7px;

    grid-template-columns:
      24px
      minmax(0, 1fr);

    column-gap:
      7px;

  }


  .slimsoda-vs-left-cell p,
  .slimsoda-vs-right-cell p {

    line-height:
      1.4;

  }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

  .slimsoda-vs-section {

    --vs-title-size: 26px;

    --vs-intro-size: 13px;

    --vs-column-title-size: 14px;

    --vs-left-text-size: 12px;

    --vs-right-text-size: 11px;

    --vs-left-image-width: 72px;

    --vs-left-image-height: 82px;

    --vs-right-image-width: 70px;

    --vs-right-image-height: 82px;

    --vs-check-icon-size: 21px;

    --vs-status-icon-size: 21px;

    --vs-circle-size: 46px;

    --vs-circle-font-size: 16px;

    --vs-row-min-height: 88px;

  }


  .slimsoda-vs-left-cell {

    padding:
      10px
      6px;

    grid-template-columns:
      21px
      minmax(0, 1fr);

    column-gap:
      6px;

  }


  .slimsoda-vs-right-cell {

    padding:
      10px
      6px;

    grid-template-columns:
      21px
      minmax(0, 1fr);

    column-gap:
      6px;

  }

}
































/* ==========================================================
   SLIMSODA PROGRESS TIMELINE
========================================================== */

.slimsoda-progress-section {

  /* ======================================================
     EASY SIZE CONTROLS
  ====================================================== */

  --progress-max-width: 1050px;

  --progress-title-size: 38px;

  --progress-intro-size: 17px;

  --progress-date-size: 32px;

  --progress-card-title-size: 23px;

  --progress-card-text-size: 16px;

  --progress-dot-size: 44px;


  width: 100%;

  padding:
    58px
    24px
    65px;

  background:
    #FFFFFF;

}


/* ==========================================================
   MAIN CONTAINER
========================================================== */

.slimsoda-progress-container {

  width:
    100%;

  max-width:
    var(--progress-max-width);

  margin:
    0 auto;

}


/* ==========================================================
   HEADER
========================================================== */

.slimsoda-progress-header {

  width:
    100%;

  max-width:
    900px;

  margin:
    0 auto 54px;

  text-align:
    center;

}


.slimsoda-progress-title {

  margin:
    0
    0
    16px;

  color:
    #181316;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--progress-title-size);

  font-weight:
    800;

  line-height:
    1.18;

  text-align:
    center;

}


.slimsoda-progress-intro {

  max-width:
    840px;

  margin:
    0 auto;

  color:
    #454044;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--progress-intro-size);

  font-weight:
    500;

  line-height:
    1.7;

  text-align:
    center;

}


.slimsoda-progress-intro strong {

  color:
    #282225;

  font-weight:
    700;

}


/* ==========================================================
   TIMELINE
========================================================== */

.slimsoda-progress-timeline {

  position:
    relative;

  width:
    100%;

}


/* CENTER VERTICAL LINE */

.slimsoda-progress-line {

  position:
    absolute;

  top:
    22px;

  bottom:
    22px;

  left:
    50%;

  width:
    2px;

  border-left:
    2px
    dotted
    var(--pink-dark);

  transform:
    translateX(-50%);

  z-index:
    0;

}


/* ==========================================================
   EACH ROW
========================================================== */

.slimsoda-progress-row {

  position:
    relative;

  width:
    100%;

  min-height:
    210px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    70px
    minmax(0, 1fr);

  align-items:
    center;

  column-gap:
    22px;

}


/* ==========================================================
   DATE
========================================================== */

.slimsoda-progress-date {

  width:
    100%;

  display:
    flex;

  align-items:
    center;

}


.slimsoda-progress-date-left {

  justify-content:
    flex-start;

}


.slimsoda-progress-date-right {

  justify-content:
    flex-start;

}


.slimsoda-progress-date-inner {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    11px;

  color:
    var(--pink-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--progress-date-size);

  font-weight:
    500;

  line-height:
    1.1;

}


.slimsoda-progress-calendar {

  width:
    25px;

  height:
    25px;

  min-width:
    25px;

  fill:
    none;

  stroke:
    var(--pink-dark);

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


/* ==========================================================
   CENTER DOT
========================================================== */

.slimsoda-progress-dot {

  position:
    relative;

  z-index:
    3;

  width:
    var(--progress-dot-size);

  height:
    var(--progress-dot-size);

  margin:
    0 auto;

  border-radius:
    50%;

  background:
    var(--pink-dark);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  box-shadow:
    0
    0
    0
    6px
    #FFFFFF;

}


.slimsoda-progress-dot span {

  width:
    22px;

  height:
    22px;

  border-radius:
    50%;

  background:
    #D96A88;

  color:
    #FFFFFF;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-family:
    Arial,
    sans-serif;

  font-size:
    11px;

  font-weight:
    900;

}


/* ==========================================================
   CONTENT CARD
========================================================== */

.slimsoda-progress-card {

  position:
    relative;

  width:
    100%;

  max-width:
    390px;

  padding:
    23px
    25px;

  border:
    2px
    solid
    var(--pink-dark);

  border-radius:
    10px;

  background:
    #FFF8FA;

}


/* CARD TITLE */

.slimsoda-progress-card h3 {

  margin:
    0
    0
    9px;

  color:
    var(--pink-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--progress-card-title-size);

  font-weight:
    800;

  line-height:
    1.2;

}


/* CARD PARAGRAPH */

.slimsoda-progress-card p {

  margin:
    0;

  color:
    #302B2E;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--progress-card-text-size);

  font-weight:
    500;

  line-height:
    1.62;

}


/* LEFT CARD POSITION */

.slimsoda-progress-card-left {

  justify-self:
    start;

}


/* RIGHT CARD POSITION */

.slimsoda-progress-card-right {

  justify-self:
    end;

}


/* ==========================================================
   CARD ARROWS
========================================================== */

/* RIGHT-SIDE CARD ARROW */

.slimsoda-progress-card-right::before {

  content:
    "";

  position:
    absolute;

  left:
    -13px;

  top:
    50%;

  width:
    0;

  height:
    0;

  border-top:
    11px
    solid
    transparent;

  border-bottom:
    11px
    solid
    transparent;

  border-right:
    13px
    solid
    var(--pink-dark);

  transform:
    translateY(-50%);

}


/* LEFT-SIDE CARD ARROW */

.slimsoda-progress-card-left::after {

  content:
    "";

  position:
    absolute;

  right:
    -13px;

  top:
    50%;

  width:
    0;

  height:
    0;

  border-top:
    11px
    solid
    transparent;

  border-bottom:
    11px
    solid
    transparent;

  border-left:
    13px
    solid
    var(--pink-dark);

  transform:
    translateY(-50%);

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 850px) {

  .slimsoda-progress-section {

    --progress-title-size: 32px;

    --progress-date-size: 27px;

    --progress-card-title-size: 21px;

    --progress-card-text-size: 15px;

    --progress-dot-size: 40px;

    padding:
      48px
      16px
      55px;

  }


  .slimsoda-progress-header {

    margin-bottom:
      42px;

  }


  .slimsoda-progress-row {

    grid-template-columns:
      minmax(0, 1fr)
      58px
      minmax(0, 1fr);

    column-gap:
      14px;

    min-height:
      205px;

  }


  .slimsoda-progress-card {

    padding:
      20px
      18px;

  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

  .slimsoda-progress-section {

    padding:
      40px
      13px
      45px;

  }


  .slimsoda-progress-header {

    margin-bottom:
      35px;

  }


  /*
    Mobile timeline shifts to the left.
  */

  .slimsoda-progress-line {

    left:
      20px;

    top:
      18px;

    bottom:
      18px;

  }


  .slimsoda-progress-row {

    min-height:
      0;

    margin-bottom:
      35px;

    padding-left:
      55px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      12px;

  }


  .slimsoda-progress-row:last-child {

    margin-bottom:
      0;

  }


  /*
    Dot sits on left timeline.
  */

  .slimsoda-progress-dot {

    position:
      absolute;

    top:
      4px;

    left:
      20px;

    width:
      32px;

    height:
      32px;

    margin:
      0;

    transform:
      translateX(-50%);

    box-shadow:
      0
      0
      0
      4px
      #FFFFFF;

  }


  .slimsoda-progress-dot span {

    width:
      16px;

    height:
      16px;

    font-size:
      9px;

  }


  /*
    Put date first on mobile regardless of
    desktop left/right position.
  */

  .slimsoda-progress-date {

    order:
      1;

    width:
      100%;

    justify-content:
      flex-start;

  }


  .slimsoda-progress-card {

    order:
      2;

    width:
      100%;

    max-width:
      none;

    justify-self:
      auto;

  }


  .slimsoda-progress-date-inner {

    font-size:
      25px;

  }


  .slimsoda-progress-calendar {

    width:
      22px;

    height:
      22px;

    min-width:
      22px;

  }


  /*
    Remove desktop arrows.
  */

  .slimsoda-progress-card-left::after,
  .slimsoda-progress-card-right::before {

    display:
      none;

  }

}


/* ==========================================================
   MOBILE - 520PX
========================================================== */

@media (max-width: 520px) {

  .slimsoda-progress-section {

    --progress-title-size: 29px;

    --progress-intro-size: 15px;

    --progress-card-title-size: 20px;

    --progress-card-text-size: 15px;

  }


  .slimsoda-progress-title {

    margin-bottom:
      13px;

  }


  .slimsoda-progress-intro {

    line-height:
      1.7;

  }


  .slimsoda-progress-row {

    padding-left:
      48px;

    margin-bottom:
      30px;

  }


  .slimsoda-progress-line {

    left:
      17px;

  }


  .slimsoda-progress-dot {

    left:
      17px;

    width:
      29px;

    height:
      29px;

  }


  .slimsoda-progress-dot span {

    width:
      15px;

    height:
      15px;

  }


  .slimsoda-progress-date-inner {

    gap:
      8px;

    font-size:
      23px;

  }


  .slimsoda-progress-card {

    padding:
      18px
      16px;

    border-radius:
      9px;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

  .slimsoda-progress-section {

    --progress-title-size: 27px;

    --progress-card-title-size: 19px;

    --progress-card-text-size: 14px;

  }


  .slimsoda-progress-date-inner {

    font-size:
      21px;

  }

}











.buy-save-section {

  /* ======================================================
     EASY SIZE CONTROLS
     ====================================================== */

  --buy-button-width: 600px;
  --buy-button-max-width: 90%;

  --buy-button-height: 70px;

  --buy-button-font-size: 28px;

  --guarantee-font-size: 22px;

  --guarantee-icon-size: 25px;


  width: 100%;

  padding:
    30px
    20px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

}


/* ==========================================================
   BUY NOW BUTTON
   ========================================================== */

.buy-save-button {

  width:
    var(--buy-button-width);

  max-width:
    var(--buy-button-max-width);

  min-height:
    var(--buy-button-height);

  padding:
    14px
    30px;

  border:
    0;

  border-radius:
    999px;

  background:
    var(--pink-bright);

  color:
    #FFFFFF;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  text-decoration:
    none;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--buy-button-font-size);

  font-weight:
    900;

  line-height:
    1.1;

  cursor:
    pointer;

}


/* HOVER */

.buy-save-button:hover {

  background:
    var(--pink-hover);

}


/* ==========================================================
   MONEY BACK GUARANTEE
   ========================================================== */

.buy-save-guarantee {

  width: 100%;

  margin-top:
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  color:
    #111111;

  text-align:
    center;

}


/* ==========================================================
   SVG ICON
   ========================================================== */

.buy-save-guarantee-icon {

  display:
    block;

  width:
    var(--guarantee-icon-size);

  height:
    var(--guarantee-icon-size);

  min-width:
    var(--guarantee-icon-size);

  flex:
    0 0
    var(--guarantee-icon-size);

  margin:
    0;

  padding:
    0;

}


/*
  Force SVG path to stay black.
*/

.buy-save-guarantee-icon path {

  fill:
    #000000;

}


/* ==========================================================
   GUARANTEE TEXT
   ========================================================== */

.buy-save-guarantee-text {

  display:
    block;

  margin:
    0;

  padding:
    0;

  color:
    #111111;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--guarantee-font-size);

  font-weight:
    500;

  line-height:
    1.25;

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 850px) {

  .buy-save-section {

    --buy-button-width: 400px;

    --buy-button-height: 66px;

    --buy-button-font-size: 25px;

    --guarantee-font-size: 20px;

    --guarantee-icon-size: 23px;

    padding:
      26px
      16px;

  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 520px) {

  .buy-save-section {

    --buy-button-width: 350px;

    --buy-button-height: 58px;

    --buy-button-font-size: 22px;

    --guarantee-font-size: 16px;

    --guarantee-icon-size: 21px;

    padding:
      22px
      13px;

  }


  .buy-save-button {

    padding:
      12px
      20px;

  }


  .buy-save-guarantee {

    margin-top:
      20px;

    gap:
      9px;

  }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 360px) {

  .buy-save-section {

    --buy-button-font-size: 20px;

    --guarantee-font-size: 15px;

    --guarantee-icon-size: 20px;

  }

}






/* ==========================================================
   HOW TO USE SLIMSODA
========================================================== */

.slimsoda-howto-section {

  /* EASY SIZE CONTROLS */

  --howto-max-width: 1080px;

  --howto-image-width: 255px;

  --howto-card-min-height: 205px;

  --howto-title-size: 38px;

  --howto-subtitle-size: 17px;

  --howto-step-title-size: 25px;

  --howto-step-text-size: 16px;


  width: 100%;

  padding:
    50px
    24px
    60px;

  background:
    #FFF8FA;

}


/* ==========================================================
   MAIN CONTAINER
========================================================== */

.slimsoda-howto-container {

  width: 100%;

  max-width:
    var(--howto-max-width);

  margin:
    0 auto;

}


/* ==========================================================
   HEADER
========================================================== */

.slimsoda-howto-header {

  width: 100%;

  margin:
    0
    auto
    36px;

  text-align:
    center;

}


.slimsoda-howto-title {

  margin:
    0
    0
    10px;

  color:
    #171317;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--howto-title-size);

  font-weight:
    800;

  line-height:
    1.15;

  text-align:
    center;

}


.slimsoda-howto-subtitle {

  margin:
    0;

  color:
    #4C4549;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--howto-subtitle-size);

  font-weight:
    500;

  line-height:
    1.5;

  text-align:
    center;

}


/* ==========================================================
   TIMELINE + CARDS
========================================================== */

.slimsoda-howto-layout {

  width:
    100%;

  max-width:
    960px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    45px
    minmax(0, 1fr);

  column-gap:
    16px;

  align-items:
    stretch;

}


/* ==========================================================
   TIMELINE
========================================================== */

.slimsoda-howto-timeline {

  position:
    relative;

  width:
    45px;

}


.slimsoda-timeline-line {

  position:
    absolute;

  top:
    102px;

  bottom:
    102px;

  left:
    50%;

  width:
    2px;

  background:
    #F6B9C7;

  transform:
    translateX(-50%);

}


.slimsoda-timeline-dot {

  position:
    absolute;

  left:
    50%;

  width:
    19px;

  height:
    19px;

  border:
    3px
    solid
    #FFFFFF;

  border-radius:
    50%;

  background:
    var(--pink-bright);

  box-shadow:
    0
    0
    0
    2px
    #F5B3C2;

  transform:
    translateX(-50%);

}


.slimsoda-timeline-dot.dot-1 {

  top:
    94px;

}


.slimsoda-timeline-dot.dot-2 {

  top:
    50%;

  transform:
    translate(-50%, -50%);

}


.slimsoda-timeline-dot.dot-3 {

  bottom:
    93px;

  color:
    #FFFFFF;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-family:
    Arial,
    sans-serif;

  font-size:
    10px;

  font-weight:
    900;

}


/* ==========================================================
   STEPS
========================================================== */

.slimsoda-howto-steps {

  width:
    100%;

  display:
    grid;

  gap:
    16px;

}


/* ==========================================================
   STEP CARD DIV
========================================================== */

.slimsoda-howto-card {

  width:
    100%;

  min-height:
    var(--howto-card-min-height);

  overflow:
    hidden;

  border:
    1px
    solid
    #F4E4E8;

  border-radius:
    14px;

  background:
    #FFFFFF;

  display:
    grid;

  grid-template-columns:
    var(--howto-image-width)
    minmax(0, 1fr);

}


/* ==========================================================
   IMAGE
========================================================== */

.slimsoda-howto-image-wrap {

  width:
    100%;

  height:
    100%;

  overflow:
    hidden;

}


.slimsoda-howto-image {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

}


/* ==========================================================
   CONTENT
========================================================== */

.slimsoda-howto-content {

  min-width:
    0;

  padding:
    28px
    32px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


/* STEP LABEL */

.slimsoda-howto-step-label {

  display:
    block;

  margin:
    0
    0
    10px;

  color:
    var(--pink-bright);

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1;

}


/* STEP TITLE */

.slimsoda-howto-step-title {

  margin:
    0
    0
    10px;

  color:
    #171317;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    var(--howto-step-title-size);

  font-weight:
    800;

  line-height:
    1.2;

}


/* STEP TEXT */

.slimsoda-howto-step-text {

  margin:
    0;

  color:
    #474145;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size:
    var(--howto-step-text-size);

  font-weight:
    500;

  line-height:
    1.65;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 850px) {

  .slimsoda-howto-section {

    --howto-image-width: 220px;

    --howto-card-min-height: 190px;

    --howto-title-size: 32px;

    --howto-step-title-size: 23px;

    --howto-step-text-size: 15px;

    padding:
      45px
      16px
      50px;

  }


  .slimsoda-howto-layout {

    max-width:
      760px;

  }


  .slimsoda-howto-content {

    padding:
      24px
      25px;

  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

  .slimsoda-howto-layout {

    display:
      block;

  }


  .slimsoda-howto-timeline {

    display:
      none;

  }


  .slimsoda-howto-card {

    display:
      block;

    min-height:
      0;

  }


  .slimsoda-howto-image-wrap {

    width:
      100%;

    height:
      230px;

  }


  .slimsoda-howto-content {

    padding:
      22px
      20px
      24px;

  }

}


/* ==========================================================
   MOBILE 520PX
========================================================== */

@media (max-width: 520px) {

  .slimsoda-howto-section {

    --howto-title-size: 29px;

    --howto-subtitle-size: 15px;

    --howto-step-title-size: 21px;

    --howto-step-text-size: 15px;

    padding:
      38px
      13px
      43px;

  }


  .slimsoda-howto-header {

    margin-bottom:
      26px;

  }


  .slimsoda-howto-image-wrap {

    height:
      200px;

  }


  .slimsoda-howto-steps {

    gap:
      14px;

  }


  .slimsoda-howto-card {

    border-radius:
      12px;

  }


  .slimsoda-howto-content {

    padding:
      20px
      17px
      22px;

  }


  .slimsoda-howto-step-label {

    margin-bottom:
      8px;

    font-size:
      13px;

  }


  .slimsoda-howto-step-title {

    margin-bottom:
      8px;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 360px) {

  .slimsoda-howto-section {

    --howto-title-size: 27px;

    --howto-step-title-size: 20px;

    --howto-step-text-size: 14px;

  }


  .slimsoda-howto-image-wrap {

    height:
      180px;

  }

}








/* ==========================================================
   EXISTING RESPONSIVE RULES
   ========================================================== */

@media (max-width: 950px) {

  .slim-trust-container {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 0;
  }

  .slim-trust-item {
    min-height: 82px;
    border-right: 1px solid #E8D7DD;
    border-bottom: 1px solid #E8D7DD;
  }

  .slim-trust-item:nth-child(3) {
    border-right: 0;
  }

  .slim-trust-item:nth-child(4),
  .slim-trust-item:nth-child(5) {
    border-bottom: 0;
  }

  .slim-trust-item:nth-child(5) {
    border-right: 0;
  }

}

@media (max-width: 850px) {

  :root {
    --h1-size: 34px;
    --h3-size: 22px;
    --product-image-height: 440px;
    --thumbnail-height: 68px;
    --bundle-text-size: 17px;
    --bundle-price-size: 18px;
  }

  .hero {
    display: flex;
    flex-direction: column;
    padding: 22px 16px 100px;
  }

  .visual-column,
  .copy-column {
    display: contents;
    transform: none !important;
  }

  .copy-column > h1 {
    order: 1;
    width: 100%;
    margin-bottom: 22px;
  }

  .visual-column > .product-gallery {
    order: 2;
    width: 100%;
    margin-bottom: 26px;
  }

  .copy-column > :not(h1) {
    order: 3;
    width: 100%;
  }

  .copy-column > .faq-section {
    order: 3;
  }

  .visual-column > .customer-reviews {
    order: 4;
    width: 100%;
    margin-top: 30px;
  }

  .visual-column {
    margin-bottom: 0;
  }

  .faq-section,
  .faq-list,
  .faq-item,
  .faq-question,
  .faq-answer {
    overflow-anchor: none;
  }

  .faq-section {
    order: 3;
    width: 100%;
    margin-top: 34px;
  }

  .faq-question {
    min-height: 74px;
    padding: 21px 0;
    scroll-margin-top: 12px;
  }

  .faq-question-text {
    font-size: 22px;
  }

  .faq-answer-inner {
    padding-bottom: 27px;
  }

  html.faq-mobile-adjust {
    scroll-behavior: auto !important;
  }

  .slim-trust-section {
    padding: 18px 12px;
    margin-top: -55px;
    margin-bottom: 10px;
  }

  .bundle {
    grid-template-columns: 25px 88px minmax(0,1fr) auto;
    gap: 8px;
    padding: 13px 10px;
  }

  .bundle-img {
    width: 88px;
    height: 62px;
  }

  .ribbon {
    right: 8px;
    top: -13px;
    padding: 7px 11px;
    font-size: 11px;
  }

  .mobile-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: block;
    padding: 10px 16px;
    background: rgba(255,255,255,0.96);
  }

  .mobile-sticky button {
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: 30px;
    background: var(--pink-bright);
    color: #FFFFFF;
    font-family: "Roboto Condensed", Arial, sans-serif;
    font-size: 19px;
    font-weight: 900;
  }

}

@media (max-width: 650px) {

  .slim-trust-section {
    padding: 18px 12px;
  }

  .slim-trust-container {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .slim-trust-item {
    min-height: 84px;
    padding: 13px 10px;
    justify-content: flex-start;
    border-right: 1px solid #E8D7DD;
    border-bottom: 1px solid #E8D7DD;
  }

  .slim-trust-item:nth-child(2n) {
    border-right: 0;
  }

  .slim-trust-item:nth-child(3) {
    border-right: 1px solid #E8D7DD;
  }

  .slim-trust-item:nth-child(4) {
    border-bottom: 1px solid #E8D7DD;
  }

  .slim-trust-item:last-child {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
    justify-content: center;
  }

  .slim-trust-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .slim-trust-icon svg {
    width: 22px;
    height: 22px;
  }

  .slim-trust-text strong {
    font-size: 16px;
    white-space: normal;
  }

  .slim-trust-text span {
    font-size: 11px;
  }

}

@media (max-width: 600px) {

  .offer-bar {
    padding: 11px 10px;
  }

  .offer-bar-inner {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 11px;
    width: 100%;
  }

  .offer-countdown-chip {
    gap: 6px;
    padding: 7px 9px;
    border-radius: 7px;
  }

  .offer-percent-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
    font-size: 14px;
  }

  .offer-countdown {
    min-width: 79px;
    font-size: 18px;
    letter-spacing: 0;
  }

  .timer-separator {
    margin: 0 1px;
  }

  .offer-message {
    min-width: 0;
    width: 100%;
    text-align: left;
    font-size: 15px;
    line-height: 1.28;
    overflow-wrap: normal;
    word-break: normal;
  }

  .responsive-image img {
    max-width: 100%;
  }

}

@media (max-width: 520px) {

  :root {
    --h1-size: 30px;
    --product-image-height: 375px;
    --thumbnail-height: 56px;
    --thumbnail-gap: 5px;
    --benefit-size: 15px;
  }

  .hero {
    padding-left: 13px;
    padding-right: 13px;
  }

  .gallery-arrow {
    width: 42px;
    height: 42px;
  }

  .gallery-arrow svg {
    width: 21px;
    height: 21px;
  }

  .gallery-prev {
    left: 7px;
  }

  .gallery-next {
    right: 7px;
  }

  .stockline,
  .per-tub-serving {
    gap: 7px;
    font-size: 16px;
  }

  .stock-meter {
    gap: 3px;
  }

  .stock-box {
    width: 16px;
    height: 16px;
  }

  .stock-low {
    font-size: 20px;
  }

  .benefit-list li {
    grid-template-columns: 22px minmax(0,1fr);
    column-gap: 9px;
    align-items: center;
  }

  .benefit-check,
  .benefit-check img {
    width: 20px;
    height: 20px;
  }

  .bundle {
    grid-template-columns: 23px 66px minmax(0,1fr) auto;
    gap: 6px;
  }

  .bundle-img {
    width: 66px;
    height: 54px;
  }

  .bundle-copy,
  .bundle-2nd-copy {
    font-size: 15px;
  }

  .bundle-price strong {
    font-size: 16px;
  }

  .customer-reviews {
    margin-top: 22px;
    padding-top: 16px;
  }

  .review-card {
    padding: 18px 16px;
    border-radius: 12px;
  }

  .review-tagline {
    margin-bottom: 10px;
    font-size: 22px;
  }

  .review-copy {
    margin-bottom: 14px;
    font-size: 17px;
    line-height: 1.9;
  }

  .review-card-stars {
    margin-bottom: 14px;
    font-size: 18px;
  }

  .review-meta {
    grid-template-columns: minmax(0,1fr) auto;
    column-gap: 9px;
  }

  .review-person {
    gap: 7px;
  }

  .review-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .review-name {
    font-size: 13px;
    line-height: 1.9;
  }

  .review-verified {
    gap: 5px;
  }

  .review-verified-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-basis: 18px;
  }

  .review-verified-text {
    font-size: 12px;
    line-height: 18px;
  }

  .guarantee-box {
    padding: 16px 14px;
    grid-template-columns: 92px minmax(0,1fr);
    gap: 14px;
    border-radius: 10px;
  }

  .guarantee-badge-wrap {
    width: 92px;
  }

  .guarantee-badge-image {
    max-width: 92px;
  }

  .guarantee-title {
    margin-bottom: 7px;
    font-size: 20px;
  }

  .guarantee-text {
    font-size: 16px;
    line-height: 1.65;
  }

  .faq-section {
    margin-top: 30px;
  }

  .faq-question {
    min-height: 66px;
    padding: 18px 0;
    gap: 12px;
  }

  .faq-question-text {
    font-size: 20px;
    line-height: 1.22;
  }

  .faq-chevron {
    width: 21px;
    height: 21px;
    min-width: 21px;
  }

  .faq-answer-inner {
    padding: 0 0 24px;
  }

  .faq-answer-heading {
    grid-template-columns: 40px minmax(0,1fr);
    gap: 11px;
    margin-bottom: 14px;
  }

  .faq-answer-icon {
    width: 40px;
    height: 40px;
  }

  .faq-answer-icon svg {
    width: 26px;
    height: 26px;
  }

  .faq-answer-heading h3 {
    font-size: 20px;
    line-height: 1.25;
  }

  .faq-answer-inner p {
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.72;
  }

  .faq-answer-list {
    margin-top: 16px;
    gap: 0;
  }

  .faq-answer-list li {
    padding: 11px 0;
    grid-template-columns: 20px minmax(0,1fr);
    column-gap: 9px;
    align-items: center;
    font-size: 15px;
    line-height: 1.68;
  }

  .faq-list-check,
  .faq-list-check img {
    width: 20px;
    height: 20px;
    min-width: 20px;
  }

  .faq-timeline {
    margin-top: 16px;
    gap: 12px;
  }

  .faq-timeline-block {
    padding: 14px;
  }

  .faq-timeline-block h4 {
    font-size: 18px;
  }

}

@media (max-width: 430px) {

  .offer-bar {
    padding: 10px 8px;
  }

  .offer-bar-inner {
    gap: 9px;
  }

  .offer-countdown-chip {
    gap: 5px;
    padding: 6px 7px;
  }

  .offer-percent-icon {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
    font-size: 12px;
  }

  .offer-countdown {
    min-width: 72px;
    font-size: 17px;
  }

  .offer-message {
    font-size: 14px;
    line-height: 1.24;
  }

}

@media (max-width: 390px) {

  .slim-trust-section {
    padding-left: 8px;
    padding-right: 8px;
  }

  .slim-trust-item {
    padding: 12px 7px;
    gap: 8px;
  }

  .slim-trust-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .slim-trust-icon svg {
    width: 20px;
    height: 20px;
  }

  .slim-trust-text strong {
    font-size: 14px;
  }

  .slim-trust-text span {
    font-size: 10px;
  }

  .guarantee-box {
    padding: 14px 12px;
    grid-template-columns: 78px minmax(0,1fr);
    gap: 11px;
  }

  .guarantee-badge-wrap {
    width: 80px;
  }

  .guarantee-badge-image {
    max-width: 100px;
  }

  .guarantee-title {
    font-size: 18px;
  }

  .guarantee-text {
    font-size: 16px;
  }

}

@media (max-width: 360px) {

  .offer-bar {
    padding: 9px 6px;
  }

  .offer-bar-inner {
    gap: 7px;
  }

  .offer-countdown-chip {
    gap: 4px;
    padding: 6px;
  }

  .offer-percent-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    font-size: 11px;
  }

  .offer-countdown {
    min-width: 67px;
    font-size: 16px;
  }

  .offer-message {
    font-size: 13px;
    line-height: 1.22;
  }

  .review-card {
    padding: 16px 13px;
  }

  .review-tagline {
    font-size: 20px;
  }

  .review-meta {
    column-gap: 6px;
  }

  .review-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .review-name {
    font-size: 12px;
  }

  .review-verified-text {
    font-size: 11px;
  }

  .guarantee-box {
    padding: 14px 12px;
    grid-template-columns: 78px minmax(0,1fr);
    gap: 11px;
  }

  .guarantee-badge-wrap {
    width: 78px;
  }

  .guarantee-badge-image {
    max-width: 78px;
  }

  .guarantee-title {
    font-size: 17px;
  }

  .guarantee-text {
    font-size: 15px;
  }

  .faq-question-text {
    font-size: 18px;
  }

  .faq-answer-heading h3 {
    font-size: 18px;
  }

  .faq-answer-inner p,
  .faq-answer-list li {
    font-size: 14px;
  }

  .faq-answer-list li {
    grid-template-columns: 19px minmax(0,1fr);
    column-gap: 8px;
  }

  .faq-list-check,
  .faq-list-check img {
    width: 19px;
    height: 19px;
    min-width: 19px;
  }

}

@media (min-width: 851px) {

  .visual-column,
  .copy-column {
    will-change: transform;
    transform: translate3d(0,0,0);
  }

}

@media (prefers-reduced-motion: reduce) {

  .stock-low {
    animation: none;
  }

}

/* ==========================================================
   WHY SLIMSODA WORKS
   ========================================================== */

.why-slimsoda-section {
  width: 100%;
  padding: 35px 24px 35px;
  background: #FFFFFF;
}


/* FULL-WIDTH HEADLINE */

.why-slimsoda-title {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto 28px;
  color: #181316;
  text-align: center;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.7;
}

.why-slimsoda-content {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto 28px;
  color: #181316;
  text-align: center;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
}


/* IMAGE + INTRO + THREE STEPS */

.why-slimsoda-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(0, 1.08fr);

  grid-template-areas:
    "media intro"
    "media steps";

  column-gap: 58px;
  row-gap: 0;

  align-items: stretch;
}


/* LEFT IMAGE
   Natural image height.
   No fixed-height box.
   No background behind image.
   Border is applied directly to the image.
*/

.why-slimsoda-media {
  grid-area: media;
  width: 100%;
  min-width: 0;

  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.why-slimsoda-image {
  display: block;
  width: 100%;
  height: auto;

  border: 1px solid var(--pink-border);
  border-radius: 18px;

  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;

  background: transparent;
}


/* INTRO */

.why-slimsoda-intro-wrap {
  grid-area: intro;
  width: 100%;
  min-width: 0;
}

.why-slimsoda-intro {
  margin: 0 0 28px;
  color: #343033;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.75;
}


/* THREE STEPS */

.why-slimsoda-steps {
  grid-area: steps;

  display: grid;
  gap: 0;

  border-top: 1px solid #EFE7EA;
}

.why-slimsoda-step {
  width: 100%;
  padding: 22px 0;
  border-bottom: 1px solid #EFE7EA;

  display: grid;

  grid-template-columns:
    44px
    minmax(0,1fr);

  column-gap: 16px;
  align-items: start;
}

.why-slimsoda-step-number {
  width: 40px;
  height: 40px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--pink-dark);
  color: #FFFFFF;

  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.why-slimsoda-step-copy {
  min-width: 0;
}

.why-slimsoda-step-copy h3 {
  margin: 0 0 7px;
  color: #1B1719;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.why-slimsoda-step-copy p {
  margin: 0;
  color: #454044;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}

.why-slimsoda-step-copy strong {
  color: #201B1E;
  font-weight: 800;
}


/* FULL WIDTH AFTER STEPS */

.why-slimsoda-bottom {
  width: 100%;
  max-width: 1180px;
  margin: 30px auto 0;
}

.why-slimsoda-flow {
  width: 100%;
  margin: 0;
  padding: 17px 18px;

  border: 1px solid var(--pink-border);
  border-radius: 12px;

  background: var(--pink-soft);
  color: var(--pink-dark);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  text-align: center;

  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.4px;
}

.why-slimsoda-flow-arrow {
  color: var(--pink-bright);
  font-size: 24px;
  line-height: 1;
}

.why-slimsoda-summary {
  margin: 22px 0 0;
  color: #181316;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.3;
}

.why-slimsoda-final {
  margin: 13px 0 0;
  color: #403A3E;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.72;
}


/* ==========================================================
   WHY SLIMSODA - 850PX AND BELOW

   ORDER:
   1. Full-width headline
   2. Intro
   3. Image
   4. Three steps
   5. Full-width bottom content
   ========================================================== */

@media (max-width: 850px) {

  .why-slimsoda-section {
    padding: 35px 16px 48px;
  }

  .why-slimsoda-title {
    margin-bottom: 15px;
    font-size: 32px;
  }

  .why-slimsoda-container {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .why-slimsoda-intro-wrap {
    order: 1;
    width: 100%;
  }

  .why-slimsoda-media {
    order: 2;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
  }

  .why-slimsoda-steps {
    order: 3;
    width: 100%;
  }

  .why-slimsoda-image {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .why-slimsoda-intro {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.7;
  }

  .why-slimsoda-step {
    padding: 19px 0;
  }

  .why-slimsoda-bottom {
    margin-top: 28px;
  }

}


/* ==========================================================
   WHY SLIMSODA - 520PX AND BELOW
   ========================================================== */

@media (max-width: 520px) {

  .why-slimsoda-section {
    padding: 35px 13px 48px;
  }

  .why-slimsoda-container {
    gap: 22px;
  }

  .why-slimsoda-title {
    margin-bottom: 14px;
    font-size: 29px;
    line-height: 1.15;
  }

  .why-slimsoda-image {
    border-radius: 14px;
  }

  .why-slimsoda-intro {
    font-size: 15px;
    line-height: 1.72;
  }

  .why-slimsoda-step {
    grid-template-columns:
      38px
      minmax(0,1fr);

    column-gap: 12px;
    padding: 17px 0;
  }

  .why-slimsoda-step-number {
    width: 36px;
    height: 36px;
    font-size: 19px;
  }

  .why-slimsoda-step-copy h3 {
    font-size: 21px;
    line-height: 1.22;
  }

  .why-slimsoda-step-copy p {
    font-size: 15px;
    line-height: 1.68;
  }

  .why-slimsoda-bottom {
    margin-top: 23px;
  }

  .why-slimsoda-flow {
    padding: 15px 10px;
    gap: 7px;
    font-size: 18px;
  }

  .why-slimsoda-flow-arrow {
    font-size: 20px;
  }

  .why-slimsoda-summary {
    margin-top: 19px;
    font-size: 21px;
  }

  .why-slimsoda-final {
    margin-top: 11px;
    font-size: 15px;
    line-height: 1.7;
  }

}


/* ==========================================================
   WHY SLIMSODA - 360PX AND BELOW
   ========================================================== */

@media (max-width: 360px) {

  .why-slimsoda-title {
    font-size: 27px;
  }

  .why-slimsoda-flow {
    gap: 5px;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 16px;
  }

  .why-slimsoda-flow-arrow {
    font-size: 18px;
  }

}



/* ==========================================================
   SLIMSODA INGREDIENTS
   ========================================================== */


.slim-ingredients-section {

  --ingredient-image-size: 100px;

  width: 100%;

  padding:
    48px
    24px
    54px;

  background: #FFFFFF;

}


.slim-ingredients-shell {

  width: 100%;
  max-width: 1180px;

  margin: 0 auto;

}


/* ==========================================================
   SECTION HEADING
   ========================================================== */

.slim-ingredients-head {

  width: 100%;
  max-width: 940px;

  margin:
    0
    auto
    38px;

  text-align: center;

}


.slim-ingredients-title {

  margin:
    0
    0
    10px;

  color: #181316;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;

  text-align: center;

}


.slim-ingredients-subtitle {

  margin:
    0
    0
    16px;

  color: var(--pink-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;

  text-align: center;

}


.slim-ingredients-intro {

  width: 100%;
  max-width: 880px;

  margin: 0 auto;

  color: #403A3E;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size: 17px;
  font-weight: 500;
  line-height: 1.75;

  text-align: center;

}


.slim-ingredients-intro strong {

  color: #201B1E;

  font-weight: 700;

}


/* ==========================================================
   THREE INGREDIENTS CONTAINER
   ========================================================== */

.slim-ingredients-list {

  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 0;

  border-top:
    1px
    solid
    #EFE7EA;

  border-bottom:
    1px
    solid
    #EFE7EA;

}


/* ==========================================================
   EACH INGREDIENT
   ========================================================== */

.slim-ingredient-item {

  width: 100%;
  min-width: 0;

  padding:
    32px
    30px
    34px;

  text-align: center;

}


.slim-ingredient-item + .slim-ingredient-item {

  border-left:
    1px
    solid
    #EFE7EA;

}


/* ==========================================================
   CIRCULAR INGREDIENT IMAGE
   ========================================================== */

.slim-ingredient-image-wrap {

  width:
    var(--ingredient-image-size);

  height:
    var(--ingredient-image-size);

  margin:
    0
    auto
    20px;

  overflow: hidden;

  border:
    2px
    solid
    var(--pink-border);

  border-radius: 50%;

  background: #FFFFFF;

}


/*
  object-fit: cover means image pura circle fill karegi.

  Agar tum future me crop bilkul nahi chahte ho to:
  object-fit: cover;
  ko
  object-fit: contain;
  kar dena.
*/

.slim-ingredient-image {

  display: block;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  object-fit: cover;
  object-position: center;

}


/* ==========================================================
   INGREDIENT NAME
   ========================================================== */

.slim-ingredient-name {

  margin:
    0
    0
    11px;

  color: #1B1719;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;

  text-align: center;

}


/* ==========================================================
   INGREDIENT DESCRIPTION
   ========================================================== */

.slim-ingredient-copy {

  width: 100%;
  max-width: 340px;

  margin: 0 auto;

  color: #454044;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size: 16px;
  font-weight: 500;
  line-height: 1.72;

  text-align: center;

}


.slim-ingredient-copy strong {

  color: #201B1E;

  font-weight: 800;

}


/* ==========================================================
   THE REAL SECRET IS THE RATIO
   ========================================================== */

.slim-ingredients-ratio {

  width: 100%;

  margin-top: 30px;

  padding:
    22px
    26px;

  border:
    1px
    solid
    var(--pink-border);

  border-radius: 12px;

  background:
    var(--pink-soft);

  text-align: center;

}


.slim-ingredients-ratio-title {

  margin:
    0
    0
    8px;

  color:
    var(--pink-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 23px;
  font-weight: 800;
  line-height: 1.25;

}


.slim-ingredients-ratio-copy {

  width: 100%;
  max-width: 980px;

  margin: 0 auto;

  color: #403A3E;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size: 16px;
  font-weight: 500;
  line-height: 1.72;

}


.slim-ingredients-ratio-copy strong {

  color: #201B1E;

  font-weight: 800;

}


/* ==========================================================
   SLIMSODA INGREDIENTS
   850PX AND BELOW
   ========================================================== */

@media (max-width: 850px) {

  .slim-ingredients-section {

    --ingredient-image-size: 90px;

    padding:
      42px
      16px
      48px;

  }


  .slim-ingredients-head {

    margin-bottom: 30px;

  }


  .slim-ingredients-title {

    font-size: 32px;

  }


  .slim-ingredients-subtitle {

    font-size: 22px;

  }


  .slim-ingredients-intro {

    font-size: 16px;
    line-height: 1.72;

  }


  /*
    Desktop:
    ingredient 1 | ingredient 2 | ingredient 3

    850px and below:
    ingredient 1
    ingredient 2
    ingredient 3
  */

  .slim-ingredients-list {

    grid-template-columns: 1fr;

  }


  .slim-ingredient-item {

    width: 100%;

    padding:
      28px
      20px;

  }


  .slim-ingredient-item + .slim-ingredient-item {

    border-left: 0;

    border-top:
      1px
      solid
      #EFE7EA;

  }


  .slim-ingredient-copy {

    max-width: 680px;

  }


  .slim-ingredients-ratio {

    margin-top: 26px;

  }

}


/* ==========================================================
   SLIMSODA INGREDIENTS
   520PX AND BELOW
   ========================================================== */

@media (max-width: 520px) {

  .slim-ingredients-section {

    --ingredient-image-size: 90px;

    padding:
      36px
      13px
      42px;

  }


  .slim-ingredients-head {

    margin-bottom: 25px;

  }


  .slim-ingredients-title {

    margin-bottom: 9px;

    font-size: 29px;
    line-height: 1.15;

  }


  .slim-ingredients-subtitle {

    margin-bottom: 13px;

    font-size: 20px;
    line-height: 1.3;

  }


  .slim-ingredients-intro {

    font-size: 15px;
    line-height: 1.72;

  }


  .slim-ingredient-item {

    padding:
      25px
      8px;

  }


  .slim-ingredient-image-wrap {

    margin-bottom: 17px;

  }


  .slim-ingredient-name {

    margin-bottom: 9px;

    font-size: 21px;

  }


  .slim-ingredient-copy {

    font-size: 15px;
    line-height: 1.7;

  }


  .slim-ingredients-ratio {

    margin-top: 23px;

    padding:
      18px
      15px;

  }


  .slim-ingredients-ratio-title {

    font-size: 21px;

  }


  .slim-ingredients-ratio-copy {

    font-size: 15px;
    line-height: 1.7;

  }

}


/* ==========================================================
   SLIMSODA INGREDIENTS
   360PX AND BELOW
   ========================================================== */

@media (max-width: 360px) {

  .slim-ingredients-section {

    --ingredient-image-size: 80px;

  }


  .slim-ingredients-title {

    font-size: 27px;

  }


  .slim-ingredients-subtitle {

    font-size: 19px;

  }


  .slim-ingredient-name {

    font-size: 20px;

  }

}