/** Shopify CDN: Minification failed

Line 590:67 Unexpected "{"

**/
/* ==========================================================================
   Ux Clinical Doses
   Mobile: Figma node 14354:3708 — horizontal rail, 7 identical 200px pills,
           each with circular image on top and three text tiers below.
   Desktop: Figma node 15367:13146 / 15367:13147 — dark 12px-rounded container,
           red radial glow on the left half, heading on the left, focus-stack
           of 7 cards on the right at natively-scaled dimensions.
   ========================================================================== */

clinical-doses-slider {
  display: block;
}

.clinical-doses {
  display: block;
  background-color: #1a1a1a;
  background-image: radial-gradient(
    ellipse 90% 85% at 50% 110%,
    rgba(230, 51, 41, 0.9) 0%,
    rgba(230, 51, 41, 0.65) 20%,
    rgba(230, 51, 41, 0.4) 40%,
    rgba(230, 51, 41, 0.18) 60%,
    rgba(230, 51, 41, 0.05) 80%,
    rgba(26, 26, 26, 0) 100%
  );
  color: #fff;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.clinical-doses__inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.clinical-doses__content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* -----------------------------  Heading  --------------------------------- */
.clinical-doses__heading {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: #fff;
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.clinical-doses__heading-primary,
.clinical-doses__heading-secondary {
  display: block;
}

.clinical-doses__heading-secondary {
  color: rgba(255, 255, 255, 0.6);
}

/* Sub description */
.clinical-doses__sub-description {
  margin: 0 auto;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.375;
  color: #DBD8D4;
  max-width: 523px;
  letter-spacing: 0.07px;
  font-feature-settings: 'liga' off, 'clig' off;
}

/* Alignment modifiers */
.clinical-doses__content--left   { align-items: flex-start; text-align: left; }
.clinical-doses__content--center { align-items: center;     text-align: center; }
.clinical-doses__content--right  { align-items: flex-end;   text-align: right; }

.clinical-doses__content--left .clinical-doses__heading,
.clinical-doses__content--left .clinical-doses__sub-description { text-align: left; }
.clinical-doses__content--center .clinical-doses__heading,
.clinical-doses__content--center .clinical-doses__sub-description { text-align: center; }
.clinical-doses__content--right .clinical-doses__heading,
.clinical-doses__content--right .clinical-doses__sub-description { text-align: right; }

/* ---------------------------  Card visual base  ------------------------- */
.clinical-doses__cards {
  width: 100%;
  margin: 0;
  padding: 0;
}

.clinical-doses__cards::-webkit-scrollbar {
  display: none;
}

.clinical-doses__card {
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 20px;
  border-radius: 126px;
  background: rgba(255, 255, 255, 0.1);
  /*backdrop-filter: blur(13.3px);*/
  /*-webkit-backdrop-filter: blur(13.3px);*/
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
}

.clinical-doses__card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ----  Mobile slider only — rail + transform-based focus stack -----------
   Scoped to (max-width: 989px) so none of these rules touch the desktop
   coverflow column layout. */
@media (max-width: 1299px) {
  .clinical-doses__left {
    padding-left: var(--screen-padding);
    padding-right: var(--screen-padding);
  }

  .clinical-doses__inner .slideshow-inner {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .clinical-doses__inner {
    padding-left: 0;
    padding-right: 0;
  }

  .clinical-doses__cards {
    position: relative;
    overflow: hidden;
    height: 400px;
    isolation: isolate;
  }

  .clinical-doses__card {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Fixed minimum height so card backgrounds match the tallest card. */
    min-height: 360px;
    /* Focused = scale 1 (taller), neighbors = scale 0.84 (shorter).
       transform-origin: center keeps cards on a common vertical axis. */
    transform-origin: center center;
    --cd-scale: 0.84;
    transform: translate3d(calc(-50% + var(--cd-x, 0px)), -50%, 0) scale(var(--cd-scale, 1));
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .clinical-doses__card.is-focused {
    --cd-scale: 1;
    z-index: 2;
  }
}

.clinical-doses__image {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 100px;
  background: #fff;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.clinical-doses__image img {
  position: absolute;
  left: 0;
  top: 8.99%;
  width: 100%;
  height: 82.02%;
  object-fit: contain;
  display: block;
}

.clinical-doses__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  letter-spacing: 0.07px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 989px) {
  .clinical-doses__text {
    max-width: 150px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 4px;
  }
}

.clinical-doses__card-amount {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}

.clinical-doses__card-combined {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #fff;
  opacity: 0.75;
  margin: 0;
}

.clinical-doses__card-description {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.07px;
  color: #807e7e;
  margin: 0;
  overflow-wrap: normal;
  word-wrap: normal;
  hyphens: none;
}

/* -----------------------------  Desktop  -------------------------------- */
@media screen and (min-width: 1300px) {
  .clinical-doses__inner {
    padding-top: 56px;
    padding-bottom: 56px;
    border-radius: 12px;
    min-height: 652px;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }

  .clinical-doses__content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .clinical-doses__left {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .clinical-doses__heading {
    font-size: clamp(40px, 4.5vw, 56px);
    letter-spacing: -1px;
    padding: 0;
    width: auto;
    min-width: 0;
  }

  .clinical-doses__content--left   { align-items: flex-start; text-align: left; }
  .clinical-doses__content--center { align-items: center;     text-align: center; }
  .clinical-doses__content--right  { align-items: flex-end;   text-align: right; }

  /* ---- Coverflow stack ------------------------------------------------
     All cards share one base size on desktop. Per-card translateY + scale
     come from CSS vars set by JS so refocusing animates as a smooth wheel
     instead of jumping flex order. SSR fallback: cards stack at full size
     in DOM order (still readable without JS). */

  .clinical-doses__cards {
    flex: 0 0 auto;
    width: 547px;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0;
  }

  .clinical-doses-slider--js .clinical-doses__cards {
    position: relative;
    height: 780px;
    gap: 0;
    overscroll-behavior: contain;
  }

  /* Amount line is hidden on desktop; `combined` becomes the bold title. */
  .clinical-doses__card-amount {
    display: none;
  }

  .clinical-doses__card {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    border-radius: 100px;
    background: linear-gradient(
      -90deg,
      rgba(69, 69, 69, 0.27) 0%,
      rgb(69, 69, 69) 100%
    );
    width: auto;
    min-height: 0;
    height: 136px;
    padding: 20px;
    gap: 12px;
    scroll-snap-align: none;
    backdrop-filter: blur(13.3px);
    -webkit-backdrop-filter: blur(13.3px);
  }

  .clinical-doses__card .clinical-doses__image {
    aspect-ratio: 1 / 1;
    border-radius: 100px;
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
  }

  .clinical-doses__card .clinical-doses__image img {
    top: 8.99%;
    height: 82.02%;
  }

  .clinical-doses__card .clinical-doses__text {
    text-align: left;
    width: 238px;
    flex: 0 0 238px;
    min-width: 0;
    gap: 4px;
  }

  .clinical-doses__card-combined {
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.6px;
    color: #fff;
    opacity: 1;
    line-height: 1.2;
    overflow-wrap: normal;
    word-wrap: normal;
    hyphens: none;
    /* Cap title to 2 lines so the card height stays predictable for the
       coverflow Y_OFFSETS math regardless of substance length. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .clinical-doses-slider--js .clinical-doses__card .clinical-doses__card-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .clinical-doses__card-description {
    font-size: 16px;
    line-height: 22px;
  }

  /* JS-driven coverflow placement. Each visible position has Figma-exact
     dimensions and opacity (16623:20154). Cards animate between positions
     by transitioning all size/opacity properties simultaneously. */
  .clinical-doses-slider--js .clinical-doses__card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate3d(-50%, calc(-50% + var(--cd-y, 0px)), 0);
    transition:
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
      height 600ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 600ms cubic-bezier(0.22, 1, 0.36, 1),
      gap 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity, height;
  }

  .clinical-doses-slider--js .clinical-doses__card .clinical-doses__image,
  .clinical-doses-slider--js .clinical-doses__card .clinical-doses__text,
  .clinical-doses-slider--js .clinical-doses__card .clinical-doses__card-combined,
  .clinical-doses-slider--js .clinical-doses__card .clinical-doses__card-description {
    transition:
      width 600ms cubic-bezier(0.22, 1, 0.36, 1),
      height 600ms cubic-bezier(0.22, 1, 0.36, 1),
      flex-basis 600ms cubic-bezier(0.22, 1, 0.36, 1),
      font-size 600ms cubic-bezier(0.22, 1, 0.36, 1),
      line-height 600ms cubic-bezier(0.22, 1, 0.36, 1),
      gap 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .clinical-doses-slider--js .clinical-doses__card[data-cd-hidden='true'] {
    pointer-events: none;
    opacity: 0;
  }

  /* ---- Position-specific dimensions per Figma 16623:20154 ---------------- */

  /* pos-4 (center, focused): scale 1.0 — height 136px, width 386px, opacity 1 */
  .clinical-doses-slider--js .clinical-doses__card--pos-4 {
    width: 386px;
    height: 136px;
    padding: 20px;
    gap: 12px;
    opacity: 1;
    z-index: 10;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-4 .clinical-doses__image {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-4 .clinical-doses__text {
    width: 238px;
    flex: 0 0 238px;
    gap: 4px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-4 .clinical-doses__card-combined {
    font-size: 20px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-4 .clinical-doses__card-description {
    font-size: 16px;
    line-height: 22px;
  }

  /* pos-3 / pos-5: scale 0.836 — height 113.682px, width 322.66px, opacity 0.70 */
  .clinical-doses-slider--js .clinical-doses__card--pos-3,
  .clinical-doses-slider--js .clinical-doses__card--pos-5 {
    width: 322.66px;
    height: 113.682px;
    padding: 16.72px;
    gap: 10.03px;
    opacity: 0.7;
    z-index: 8;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-3 .clinical-doses__image,
  .clinical-doses-slider--js .clinical-doses__card--pos-5 .clinical-doses__image {
    width: 80.246px;
    height: 80.246px;
    flex: 0 0 80.246px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-3 .clinical-doses__text,
  .clinical-doses-slider--js .clinical-doses__card--pos-5 .clinical-doses__text {
    width: 198.944px;
    flex: 0 0 198.944px;
    gap: 3.344px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-3 .clinical-doses__card-combined,
  .clinical-doses-slider--js .clinical-doses__card--pos-5 .clinical-doses__card-combined {
    font-size: 16.72px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-3 .clinical-doses__card-description,
  .clinical-doses-slider--js .clinical-doses__card--pos-5 .clinical-doses__card-description {
    font-size: 13.37px;
    line-height: 18.39px;
  }

  /* pos-2 / pos-6: scale 0.641 — height 87.179px, width 247.43px, opacity 0.42 */
  .clinical-doses-slider--js .clinical-doses__card--pos-2,
  .clinical-doses-slider--js .clinical-doses__card--pos-6 {
    width: 247.43px;
    height: 87.179px;
    padding: 12.82px;
    gap: 7.69px;
    opacity: 0.42;
    z-index: 6;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-2 .clinical-doses__image,
  .clinical-doses-slider--js .clinical-doses__card--pos-6 .clinical-doses__image {
    width: 61.538px;
    height: 61.538px;
    flex: 0 0 61.538px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-2 .clinical-doses__text,
  .clinical-doses-slider--js .clinical-doses__card--pos-6 .clinical-doses__text {
    width: 152.564px;
    flex: 0 0 152.564px;
    gap: 2.564px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-2 .clinical-doses__card-combined,
  .clinical-doses-slider--js .clinical-doses__card--pos-6 .clinical-doses__card-combined {
    font-size: 12.82px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-2 .clinical-doses__card-description,
  .clinical-doses-slider--js .clinical-doses__card--pos-6 .clinical-doses__card-description {
    font-size: 10.26px;
    line-height: 14.103px;
  }

  /* pos-1 / pos-7: scale 0.433 — height 58.933px, width 167.27px, opacity 0.10 */
  .clinical-doses-slider--js .clinical-doses__card--pos-1,
  .clinical-doses-slider--js .clinical-doses__card--pos-7 {
    width: 167.27px;
    height: 58.933px;
    padding: 8.67px;
    gap: 5.2px;
    opacity: 0.1;
    z-index: 4;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-1 .clinical-doses__image,
  .clinical-doses-slider--js .clinical-doses__card--pos-7 .clinical-doses__image {
    width: 41.6px;
    height: 41.6px;
    flex: 0 0 41.6px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-1 .clinical-doses__text,
  .clinical-doses-slider--js .clinical-doses__card--pos-7 .clinical-doses__text {
    width: 103.133px;
    flex: 0 0 103.133px;
    gap: 1.733px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-1 .clinical-doses__card-combined,
  .clinical-doses-slider--js .clinical-doses__card--pos-7 .clinical-doses__card-combined {
    font-size: 8.67px;
  }
  .clinical-doses-slider--js .clinical-doses__card--pos-1 .clinical-doses__card-description,
  .clinical-doses-slider--js .clinical-doses__card--pos-7 .clinical-doses__card-description {
    font-size: 6.93px;
    line-height: 9.533px;
  }

  .clinical-doses__inner {
    padding-top: 0;
    padding-bottom: 0;
    align-items: stretch;
    gap: 0;
  }

  .clinical-doses__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0 100px 0 0;
  }

  .clinical-doses__heading {
    flex: 1 1 0;
    min-width: 320px;
    text-align: left;
    font-size: 56px;
  }

  .clinical-doses__left {
    padding-left: 80px;
  }

  /* On wide layout, left-alignment is default for heading in side-by-side mode */
  .clinical-doses__content--center .clinical-doses__heading,
  .clinical-doses__content--center .clinical-doses__sub-description,
  .clinical-doses__content--right  .clinical-doses__heading,
  .clinical-doses__content--right .clinical-doses__sub-description,{
    text-align: inherit;
  }
}

/* ---  Wide desktop (Figma-accurate side-by-side layout) ------------------- */
@media screen and (min-width: 750px) and (max-width: 1299px) {
  .clinical-doses__content .slideshow-inner {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .clinical-doses__content {
    display: block;
  }
}