/** Shopify CDN: Minification failed

Line 4900:1 Expected identifier but found "."
Line 5759:2 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:cta-banner-new (INDEX:15) */
/* ===== Common container ===== */
  .cta-banner .container {
    width: 100%;
    max-width: 1352px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* ===== CTA Banner ===== */
  .cta-banner {
    background: #ffffff;
    width: 100%;
    padding: 40px 0;
  }

  .cta-banner__card {
    position: relative;
    background: #f8edd9;
    border-radius: 12px;
    height: 540px;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
  }

  /* CONTENT */
  .cta-banner__content {
    position: absolute;
    top: 50%;
    left: 45px;
    transform: translateY(-50%);
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 2;
  }

  .cta-banner__title {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: 1px;
    color: #008758;
    text-transform: capitalize;
    margin: 0;
  }

  .cta-banner__description {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #2c5236;
    margin: 0;
  }

  /* BUTTON */
  .cta-banner__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 71px;
    padding: 12px 0;
    background: #f1c400;
    color: #008758;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
  }

  .cta-banner__btn:hover {
    opacity: 0.9;
  }

  .cta-banner__btn-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  /* RATING — DESKTOP: stars + text inline */
  .cta-banner__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .cta-banner__stars {
    display: inline-flex;
    align-items: center;
  }

  .cta-banner__star {
    width: 30px;
    height: 30px;
    display: inline-flex;
  }

  .cta-banner__star svg {
    width: 100%;
    height: 100%;
  }

  .cta-banner__rating-text {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 1px;
    color: #2c5236;
    text-transform: capitalize;
  }

  /* IMAGE */
  .cta-banner__image-wrap {
    position: absolute;
    top: 50%;
    left: calc(50% + 387px);
    transform: translate(-50%, -50%);
    max-width: 500px;
    width: 100%;
    z-index: 1;
    pointer-events: none;
  }

  .cta-banner__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1280px) {
    .cta-banner__card {
      height: 500px;
    }

    .cta-banner__content {
      width: 50%;
      max-width: calc(60% - 45px);
    }

    .cta-banner__title {
      font-size: 42px;
      line-height: 46px;
    }

    .cta-banner__image-wrap {
      width: 45%;
      height: 100%;
      left: auto;
      right: 0;
      top: 0;
      transform: none;
    }
  }

  @media (max-width: 1023px) {
    .cta-banner {
      padding: 32px 0;
    }

    .cta-banner__card {
      height: auto;
      min-height: 420px;
    }

    .cta-banner__content {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      width: 60%;
      max-width: 60%;
      padding: 40px 32px;
      gap: 20px;
    }

    .cta-banner__title {
      font-size: 32px;
      line-height: 36px;
      letter-spacing: 0.5px;
    }

    .cta-banner__description {
      font-size: 16px;
      line-height: 22px;
    }

    .cta-banner__image-wrap {
      width: 40%;
      height: 100%;
    }

    .cta-banner__btn {
      height: 60px;
      font-size: 18px;
    }

    .cta-banner__star {
      width: 24px;
      height: 24px;
    }

    .cta-banner__rating-text {
      font-size: 14px;
      letter-spacing: 0.5px;
    }
  }

  /* ===== MOBILE — matches Figma 6213:4301 exactly ===== */
  @media (max-width: 767px) {
    .cta-banner {
      padding: 24px 0;
    }

    .cta-banner .container {
      padding: 0 16px;
    }

    /* Card: padding 32px 16px, content stacks at TOP, image below */
    .cta-banner__card {
      min-height: 0;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding-bottom: 0;
      overflow: hidden;
    }

    /* ✅ Content takes top, all CENTER-aligned per Figma */
    .cta-banner__content {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      width: 100%;
      max-width: 100%;
      padding: 32px 16px 0;
      gap: 20px;
      align-items: center;
      order: 1;
    }

    /* ✅ Heading 32px / 32px CENTER per Figma */
    .cta-banner__title {
      font-size: 32px;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 1px;
      text-align: center;
      width: 100%;
    }

    /* ✅ Description 18px / 24px CENTER per Figma */
    .cta-banner__description {
      font-size: 18px;
      line-height: 24px;
      text-align: center;
      width: 100%;
    }

    /* ✅ Button: 71px tall, 17px font with NEGATIVE letter-spacing per Figma */
    .cta-banner__btn {
      height: 71px;
      padding: 12px 0;
      font-size: 17px;
      line-height: 20px;
      letter-spacing: -1.5px;
      gap: 0;
    }

    /* Hide the icon on mobile (Figma omits it) */
    .cta-banner__btn-icon {
      display: none;
    }

    /* ✅ Rating column: stars TOP, text BELOW, both centered per Figma */
    .cta-banner__rating {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .cta-banner__star {
      width: 20px;
      height: 20px;
    }

    /* ✅ Rating text 16px / 22px center per Figma Mobile/Body/Body */
    .cta-banner__rating-text {
      font-size: 16px;
      line-height: 22px;
      letter-spacing: 0;
      text-align: center;
      width: 100%;
    }

    /* ✅ Image fills below content, bleeds to edges per Figma layout */
    .cta-banner__image-wrap {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      max-width: 100%;
      width: 100%;
      height: 448px;
      margin-top: 32px;
      order: 2;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .cta-banner__image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }
  }
/* END_SECTION:cta-banner-new */

/* START_SECTION:feature-bar (INDEX:22) */
/* ===== Common container (1312px) ===== */
  .feature-bar .container {
    width: 100%;
   max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* ===== Feature Bar ===== */
  .feature-bar {
    background: var(--fb-bg, #008758);
    width: 100%;
    padding: 8px 0;
  }

  /* .feature-bar .container {
    padding-left: 24px;
    padding-right: 24px;
  } */

  .feature-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    flex-wrap: nowrap;
  }

  .feature-bar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-shrink: 1;
    min-width: 0;
  }

  .feature-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .feature-bar__icon img,
  .feature-bar__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .feature-bar__text {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1px;
    color: var(--fb-text, #f8edd9);
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
  }

  .feature-bar__divider {
    display: inline-block;
    width: 1px;
    height: 34px;
    background: var(--fb-divider, #f8edd9);
    flex-shrink: 0;
    opacity: 0.6;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1240px) {
    .feature-bar__text {
      font-size: 14px;
      letter-spacing: 0.8px;
    }

    .feature-bar__inner {
      gap: 12px;
    }
  }

  @media (max-width: 1023px) {
    .feature-bar {
      padding: 10px 0;
    }

    .feature-bar__text {
      font-size: 13px;
      letter-spacing: 0.5px;
      white-space: normal;
    }

    .feature-bar__item {
      gap: 8px;
    }

    .feature-bar__icon {
      width: 20px;
      height: 20px;
    }

    .feature-bar__divider {
      height: 28px;
    }
  }

  @media (max-width: 767px) {
    .feature-bar {
      padding: 8px 16px;
      overflow: hidden;
    }
.feature-bar .container{
  padding: 0;
}

    .feature-bar__inner {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 12px;
      justify-content: flex-start;
    }

    .feature-bar__inner::-webkit-scrollbar {
      display: none;
    }

    .feature-bar__item {
      scroll-snap-align: start;
      flex-shrink: 0;
    }

    .feature-bar__divider {
      height: 24px;
      flex-shrink: 0;
    }

    .feature-bar__text {
      font-size: 14px;
      line-height: 14px;
      letter-spacing: 1px;
    }

    .feature-bar__icon {
      width: 24px;
      height: 24px;
    }
  }
/* END_SECTION:feature-bar */

/* START_SECTION:hero-section (INDEX:33) */
/* ===== Common container (1312px) ===== */
    .hero-section .container {
      width: 100%;
      max-width: 1352px;
      margin: 0 auto;
      padding: 0 20px;
      box-sizing: border-box;
    }

    /* ===== Hero Section ===== */
    .hero-section {
      position: relative;
      width: 100%;
      overflow: hidden;
      isolation: isolate;
    }

    .hero-section__bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      pointer-events: none;
    }

    .hero-section__right-image {
      position: absolute;
      bottom: 0;
      right: 0;
      max-width: 864px;
      height: 623px;
      z-index: 9;
      pointer-events: none;
      overflow: hidden;
    }

    .hero-section__right-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .hero-section .container {
      position: relative;
      z-index: 3;
    }

    .hero-section__inner {
      display: flex;
      align-items: center;
      min-height: 800px;
      padding: 73px 0;
    }

    .hero-section__card {
      border-radius: 12px;
      background: rgba(248, 237, 217, 0.90);
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 80px;
      max-width: 800px;
      width: 100%;
    }

    .hero-section__content {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .hero-section__heading-wrap {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* ===== Rating ===== */
    .hero-section__rating {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .hero-section__stars {
      display: flex;
      align-items: center;
    }

    .hero-section__star {
      width: 30px;
      height: 30px;
      display: inline-flex;
    }

    .hero-section__star svg {
      width: 100%;
      height: 100%;
    }

    .hero-section__rating-text {
      font-family: 'Archivo SemiExpanded',sans-serif;
      font-weight: 400;
      font-size: 18px;
      line-height: 24px;
      letter-spacing: 1px;
      color: #2c5236;
      text-transform: capitalize;
    }

    /* ===== Title ===== */
    .hero-section__title {
      font-family: 'New Spirit', serif;
      font-weight: 600;
      font-size: 64px;
      line-height: 64px;
      letter-spacing: -1px;
      color: #008758;
      text-transform: capitalize;
      margin: 0;
      /* max-width: 726px; */
    }

    /* ===== Description ===== */
    .hero-section__description {
      font-family: 'Archivo SemiExpanded', sans-serif;
      font-weight: 400;
      font-size: 18px;
      line-height: 24px;
      color: #2c5236;
      margin: 0;
      max-width: 703px;
    }
  /* .hero-section__description p{
    margin: 10px 0;
  } */
    /* ===== Buttons Wrapper ===== */
    .hero-section__buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
    }

    /* Primary button (Yellow) */
    .hero-section__btn-primary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      height: 71px;
      padding: 12px 0;
      background: #f1c400;
      color: #008758;
      font-family: 'Archivo SemiExpanded', sans-serif;
      font-weight: 600;
      font-size: 20px;
      line-height: 20px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      text-decoration: none;
      overflow: hidden;
      transition: opacity 0.2s ease, transform 0.2s ease;
      border: none;
      cursor: pointer;
    }

    .hero-section__btn-primary:hover {
      opacity: 0.9;
    }

    .hero-section__btn-primary svg {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }

    /* Badge button (orange pill) */
    .hero-section__btn-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 25px;
      background: rgba(243, 120, 48, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 65.7px;
      backdrop-filter: blur(1.06px);
      -webkit-backdrop-filter: blur(1.06px);
      color: #f37830;
      font-family: 'Archivo SemiExpanded', sans-serif;
      font-weight: 400;
      font-size: 22px;
      line-height: 1.3;
      text-transform: uppercase;
      text-decoration: none;
      transition: opacity 0.2s ease;
    }

    .hero-section__btn-badge:hover {
      opacity: 0.85;
    }

    .hero-section__badge-image {
      display: inline-flex;
      align-items: center;
      width: 64px;
      height: 31px;
      flex-shrink: 0;
    }

    .hero-section__badge-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .hero-section__badge-text {
      white-space: nowrap;
    }
    .mb_show{
      display: none;
    }

    .hero-section__mobile-rating-image {
      display: none !important;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1280px) {
      .hero-section__title {
        font-size: 56px;
        line-height: 58px;
      }
      .hero-section__right-image {
        width: 30%;
        height: auto;
        bottom: 0;
      }
    }

    @media (max-width: 1023px) {
      .hero-section__inner {
        min-height: 700px;
        padding: 60px 0;
      }

      .hero-section__card {
        max-width: 100%;
        padding: 28px;
        gap: 60px;
      }

      .hero-section__title {
        font-size: 44px;
        line-height: 48px;
      }

      .hero-section__right-image {
        width: 50%;
      }

      .hero-section__btn-primary {
        height: 64px;
        font-size: 18px;
      }

      .hero-section__btn-badge {
        font-size: 18px;
        padding: 12px 20px;
      }
    }

    @media (max-width: 991px) {
      .hero-section .container {
        padding: 0 16px;
      }
      .mb_show {
          display: block;
          position: unset;
          width: 400px;
          margin: 0 auto;
      }
      .desktop-show{
        display: none;
      }
      .hero-section__inner {
        min-height: auto;
        padding: 40px 0 0;
        align-items: flex-start;
      }
      .hero-section__heading-wrap,.hero-section__stars,.hero-section__rating{
        justify-content: center;
      }
      .hero-section__mobile-rating-image {
        display: block !important;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
      }
      .hero-section__mobile-rating-image img {
        display: block !important;
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
      }
      .hero-section__description p,.hero-section__title,.hero-section__rating-text{
        text-align: center;
      }
      .hero-section__card {
        padding: 16px;
        gap: 20px;
        max-width: 100%;
      }

      .hero-section__content {
        gap: 20px;
      }

      .hero-section__title {
        font-size: 40px;
        line-height: 44px;
      }

      .hero-section__description {
        font-size: 18px;
        line-height: 24px;
      }

      .hero-section__rating-text {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0;
      }

      .hero-section__star {
        width: 20px;
        height: 20px;
      }

      .hero-section__btn-primary {
        height: 56px;
        font-size: 16px;
        letter-spacing: 1.5px;
      }

      .hero-section__btn-badge {
        font-size: 16px;
        padding: 12px;
        gap: 4px;
        line-height: 16px;
      }

      .hero-section__badge-image {
        width: 37px;
        height: 16px;
      }
    }
/* END_SECTION:hero-section */

/* START_SECTION:hh-hero (INDEX:37) */
/* ============================================================
   HH LANDING HERO
   FINAL RESPONSIVE CSS

   - Background = full width
   - Image + Text = max-width 1440px
   - Desktop design ratio = 1440 / 600
   - Tablet design ratio = 768 / 500
   - Mobile design ratio = 375 / 450
============================================================ */


/* ============================================================
   GIFT LINE — hidden by default, shown only when the HHMFREEGIFT
   discount is pending on this session (see script below the
   javascript block). Not gated on UTM params so it tracks the
   actual discount state rather than guessing from the URL.
============================================================ */

.hh-hero__gift-line {
  display: none;
}
.hh-hero__gift-line.is-visible {
  display: block;
}


/* ============================================================
   BASE
============================================================ */

.hh-hero {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  overflow: hidden;

  background: #008758;
}


.hh-hero *,
.hh-hero *::before,
.hh-hero *::after {
  box-sizing: border-box;
}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.hh-visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  border: 0 !important;
}


/* ============================================================
   HERO FULL WIDTH BACKGROUND
============================================================ */

.hh-hero__band {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  background: #008758;
}


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

   IMPORTANT:
   Background is NOT limited.
   Only image + text area is max 1440px.
============================================================ */

.hh-hero__canvas {
  position: relative;

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

  margin-left: auto;
  margin-right: auto;

  overflow: hidden;

  background: #008758;
}


/* ============================================================
   IMAGE SEQUENCE WRAPPER
============================================================ */

.hh-frame-sequences {
  position: relative;

  width: 100%;
  max-width: 100%;

  margin: 0;

  overflow: hidden;

  background: #008758;
}


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

.hh-frame-sequence {
  position: relative;

  display: none;

  width: 100%;
  max-width: 100%;

  margin: 0;

  overflow: hidden;

  background: #008758;
}


.hh-frame-sequence.is-current {
  display: block;
}


/* ============================================================
   DISPLAY RATIOS

   Large desktop is intentionally displayed with the same
   1440 / 600 composition.

   This prevents the hero from becoming taller again at 1600px.
============================================================ */

.hh-frame-sequence--large_desktop,
.hh-frame-sequence--desktop {
  aspect-ratio: 12 / 5;
}


/* Tablet */

.hh-frame-sequence--tablet {
  aspect-ratio: 768 / 500;
}


/* Mobile */

.hh-frame-sequence--mobile {
  aspect-ratio: 375 / 450;
}


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

.hh-frame {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  margin: 0;
  padding: 0;

  border: 0;

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

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  image-rendering: auto;

  filter: none !important;
  -webkit-filter: none !important;

  backface-visibility: visible;
  -webkit-backface-visibility: visible;

  transform: translateZ(0);

  transition:
    opacity var(--hh-frame-fade) linear,
    visibility 0s linear var(--hh-frame-fade);
}


/* Tablet image should follow its own artwork */

.hh-frame-sequence--tablet .hh-frame {
  object-fit: contain;
  object-position: center top;
}


/* Mobile image should follow its own artwork */

.hh-frame-sequence--mobile .hh-frame {
  object-fit: contain;
  object-position: center top;
}


/* Active image */

.hh-frame.is-active {
  z-index: 2;

  opacity: 1;

  visibility: visible;

  transition:
    opacity var(--hh-frame-fade) linear,
    visibility 0s;
}


/* ============================================================
   TEXT / COPY BASE
============================================================ */

.hh-hero__copy {
  position: absolute;

  z-index: 20;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: flex-start;

  width: 38%;
  max-width: 510px;

  margin: 0;
  padding: 0;

  text-align: left;

  pointer-events: auto;
}


/* ============================================================
   BODY TEXT
============================================================ */

.hh-hero__text {
  width: 100%;
  max-width: 510px;

  margin: 0;

  padding: 0;

  color: #FFFFFF;

  font-family:
    "Archivo SemiExpanded",
    Arial,
    sans-serif;

  font-size: 18px;

  font-style: normal;

  font-weight: 400;

  line-height: 24px;

  text-align: left;

  text-wrap: pretty;
}


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

.hh-hero__button {
  display: inline-flex;

  justify-content: center;

  align-items: center;

  flex: 0 0 auto;

  gap: 8px;

  width: fit-content;

  margin-top: 24px;

  padding: 17px 28px;

  background: #F1C400;

  border: 0;

  border-radius: 0;

  color: #008758;

  text-align: center;

  text-decoration: none;

  font-family:
    "Archivo SemiExpanded",
    Arial,
    sans-serif;

  font-size: 18px;

  font-style: normal;

  font-weight: 600;

  line-height: 20px;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  white-space: nowrap;

  cursor: pointer;

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


.hh-hero__button:hover {
  opacity: 0.9;
}


.hh-hero__button:active {
  transform: translateY(1px);
}


.hh-hero__button-arrow {
  display: inline-flex;

  justify-content: center;

  align-items: center;

  flex: 0 0 auto;

  color: #008758;
}


.hh-hero__button-arrow svg {
  display: block;

  width: 20px;
  height: 20px;

  flex: 0 0 20px;
}


/* ============================================================
   LARGE DESKTOP
   1600PX+

   Canvas stays 1440px.
   It does NOT grow with the viewport.
============================================================ */

@media screen and (min-width: 1600px) {

  .hh-hero__canvas {
    width: 100%;
    max-width: 1440px;

    margin-left: auto;
    margin-right: auto;
  }


  .hh-hero__copy {
    left: 5.5%;

    top: 53%;

    width: 36%;

    max-width: 510px;
  }


  .hh-hero__text {
    width: 100%;

    max-width: 510px;

    font-size: 18px;

    line-height: 24px;
  }


  .hh-hero__button {
    margin-top: 24px;

    padding: 17px 28px;

    font-size: 18px;

    line-height: 20px;
  }


  .hh-hero__button-arrow svg {
    width: 20px;

    height: 20px;
  }

}


/* ============================================================
   DESKTOP
   1280 - 1599
============================================================ */

@media screen and (min-width: 1280px) and (max-width: 1599px) {

  .hh-hero__copy {
    left: 14.5%;

    top: 53%;

    width: 37%;

    max-width: 510px;
  }


  .hh-hero__text {
    max-width: 510px;

    font-size: clamp(16px, 1.25vw, 18px);

    line-height: 1.34;
  }


  .hh-hero__button {
    margin-top: clamp(18px, 1.65vw, 24px);

    padding:
      clamp(14px, 1.1vw, 17px)
      clamp(23px, 1.95vw, 28px);

    font-size: clamp(16px, 1.25vw, 18px);

    line-height: 20px;
  }


  .hh-hero__button-arrow svg {
    width: 20px;

    height: 20px;
  }

}


/* ============================================================
   SMALL DESKTOP / LAPTOP
   1100 - 1279
============================================================ */

@media screen and (min-width: 1100px) and (max-width: 1279px) {

  .hh-hero__copy {
    left: 13%;

    top: 52.5%;

    width: 39%;

    max-width: 470px;
  }


  .hh-hero__text {
    max-width: 470px;

    font-size: clamp(15px, 1.35vw, 17px);

    line-height: 1.35;
  }


  .hh-hero__button {
    gap: 7px;

    margin-top: clamp(15px, 1.6vw, 20px);

    padding:
      clamp(12px, 1.1vw, 15px)
      clamp(20px, 1.9vw, 25px);

    font-size: clamp(15px, 1.35vw, 17px);

    line-height: 19px;
  }


  .hh-hero__button-arrow svg {
    width: 19px;

    height: 19px;
  }

}


/* ============================================================
   TABLET
   900 - 1099
============================================================ */

@media screen and (min-width: 900px) and (max-width: 1099px) {

  .hh-hero__copy {
    left: 9%;

    top: 52%;

    width: 41%;

    max-width: 420px;

    align-items: flex-start;

    text-align: left;
  }


  .hh-hero__text {
    width: 100%;

    max-width: 420px;

    font-size: clamp(14px, 1.55vw, 16px);

    line-height: 1.35;

    text-align: left;
  }


  .hh-hero__button {
    gap: 6px;

    margin-top: clamp(11px, 1.4vw, 16px);

    padding:
      clamp(10px, 1.1vw, 12px)
      clamp(17px, 1.9vw, 21px);

    font-size: clamp(13px, 1.45vw, 15px);

    line-height: 18px;

    letter-spacing: 1.2px;
  }


  .hh-hero__button-arrow svg {
    width: 18px;

    height: 18px;
  }

}


/* ============================================================
   SMALL TABLET
   750 - 899
============================================================ */

@media screen and (min-width: 750px) and (max-width: 899px) {

  .hh-hero__copy {
    left: 8%;

    top: 51%;

    width: 42%;

    max-width: 350px;

    align-items: flex-start;

    text-align: left;
  }


  .hh-hero__text {
    width: 100%;

    max-width: 350px;

    font-size: clamp(13px, 1.7vw, 15px);

    line-height: 1.35;

    text-align: left;
  }


  .hh-hero__button {
    gap: 5px;

    margin-top: clamp(9px, 1.4vw, 13px);

    padding:
      clamp(9px, 1.1vw, 11px)
      clamp(15px, 1.9vw, 19px);

    font-size: clamp(12px, 1.55vw, 14px);

    line-height: 17px;

    letter-spacing: 1.1px;
  }


  .hh-hero__button-arrow svg {
    width: 17px;

    height: 17px;
  }

}


/* ============================================================
   MOBILE / LARGE MOBILE
   431 - 749
============================================================ */

@media screen and (min-width: 431px) and (max-width: 749px) {

  .hh-hero__canvas {
    width: 100%;

    max-width: 100%;

    margin: 0;
  }


  .hh-hero__copy {
    left: 50%;

    top: auto;

    bottom: 3.5%;

    transform: translateX(-50%);

    width: calc(100% - 48px);

    max-width: 420px;

    align-items: center;

    text-align: center;
  }


  .hh-hero__text {
    width: 100%;

    max-width: 420px;

    margin: 0 auto;

    font-size: clamp(14px, 2.8vw, 16px);

    line-height: 1.4;

    text-align: center;

    text-wrap: balance;
  }


  .hh-hero__button {
    gap: 6px;

    margin-top: 10px;

    padding: 10px 18px;

    font-size: 15px;

    line-height: 18px;

    letter-spacing: 1.3px;
  }


  .hh-hero__button-arrow svg {
    width: 18px;

    height: 18px;
  }

}


/* ============================================================
   MOBILE
   <= 430
============================================================ */

@media screen and (max-width: 430px) {

  .hh-hero__canvas {
    position: relative;

    width: 100%;

    max-width: 100%;

    margin: 0;

    overflow: hidden;
    min-height: 500px;
  }


  .hh-frame-sequences {
    width: 100%;

    min-height: 0;

    overflow: hidden;
  }


  .hh-frame-sequence {
    width: 100%;

    min-height: 0;

    margin: 0;
  }


  .hh-frame {
    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: top center;
  }


  .hh-hero__copy {
    left: 50%;

    top: auto;

    bottom: 10px;

    transform: translateX(-50%);

    width: calc(100% - 36px);

    max-width: 330px;

    align-items: center;

    text-align: center;
  }


  .hh-hero__text {
    width: 100%;

    max-width: 320px;

    margin: 0 auto;

    font-size: 14px;

    line-height: 19px;

    text-align: center;

    text-wrap: balance;
  }


  .hh-hero__button {
    gap: 5px;

    margin-top: 8px;

    padding: 8px 16px;

    font-size: 14px;

    line-height: 18px;

    letter-spacing: 1.3px;
  }


  .hh-hero__button-arrow svg {
    width: 18px;

    height: 18px;
  }

}


/* ============================================================
   376 - 430
============================================================ */

@media screen and (min-width: 376px) and (max-width: 430px) {

  .hh-hero__copy {
    bottom: 10px;

    width: calc(100% - 36px);

    max-width: 330px;
  }


  .hh-hero__text {
    max-width: 320px;

    font-size: 14px;

    line-height: 19px;
  }

}


/* ============================================================
   351 - 375
============================================================ */

@media screen and (min-width: 351px) and (max-width: 375px) {

  .hh-hero__copy {
    bottom: 8%;

    width: calc(100% - 30px);

    max-width: 315px;
  }


  .hh-hero__text {
    max-width: 305px;

    font-size: 13.5px;

    line-height: 18px;
  }


  .hh-hero__button {
    gap: 5px;

    margin-top: 7px;

    padding: 8px 15px;

    font-size: 13px;

    line-height: 17px;

    letter-spacing: 1.2px;
  }


  .hh-hero__button-arrow svg {
    width: 17px;

    height: 17px;
  }

}


/* ============================================================
   SMALL MOBILE
   <= 350
============================================================ */

@media screen and (max-width: 350px) {

  .hh-hero__copy {
    bottom: 7px;

    width: calc(100% - 24px);

    max-width: 292px;
  }


  .hh-hero__text {
    max-width: 288px;

    font-size: 13px;

    line-height: 17px;
  }


  .hh-hero__button {
    gap: 4px;

    margin-top: 6px;

    padding: 7px 14px;

    font-size: 12.5px;

    line-height: 16px;

    letter-spacing: 1.1px;
  }


  .hh-hero__button-arrow svg {
    width: 16px;

    height: 16px;
  }

}


/* ============================================================
   MARQUEE

   IMPORTANT:
   Marquee remains FULL WIDTH.
   1440px max-width is ONLY for hero image + hero text.
============================================================ */

.hh-marquee {
  position: relative;

  z-index: 30;

  width: 100%;
  max-width: none;

  margin: 0;

  overflow: hidden;

  padding-block:
    var(--hh-marquee-padding-desktop);

  background: #98D0A1;
}


.hh-marquee__viewport {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0;

  overflow: hidden;
}


.hh-marquee__track {
  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  gap: 0;

  width: max-content;

  min-width: max-content;

  transform: translate3d(0, 0, 0);

  will-change: transform;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  animation-name: hhInfiniteMarquee;

  animation-duration:
    var(--hh-marquee-duration);

  animation-timing-function: linear;

  animation-iteration-count: infinite;
}


.hh-marquee__group {
  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  gap: 0;

  flex: 0 0 auto;

  width: max-content;

  min-width: max-content;
}


.hh-marquee__item {
  display: inline-flex;

  align-items: center;

  flex: 0 0 auto;

  gap: 10px;

  padding-right: 22px;

  white-space: nowrap;
}


.hh-marquee__text {
  display: inline-block;

  flex: 0 0 auto;

  color: #2C5236;

  font-family:
    "Archivo SemiExpanded",
    Arial,
    sans-serif;

  font-size: 16px;

  font-style: normal;

  font-weight: 600;

  line-height: 24px;

  white-space: nowrap;
}


.hh-marquee__icon {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  flex: 0 0 28px;
}


.hh-marquee__icon img,
.hh-marquee__icon svg {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;
}


/* ============================================================
   MARQUEE ANIMATION
============================================================ */

@keyframes hhInfiniteMarquee {

  from {
    transform: translate3d(
      0,
      0,
      0
    );
  }

  to {
    transform: translate3d(
      -50%,
      0,
      0
    );
  }

}


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

@media screen and (max-width: 749px) {

  .hh-marquee {
    padding-block:
      var(--hh-marquee-padding-mobile);
  }


  .hh-marquee__viewport {
    width: 100%;

    max-width: none;
  }


  .hh-marquee__item {
    gap: 8px;

    padding-right: 18px;
  }


  .hh-marquee__text {
    font-size: 14px;

    line-height: 20px;
  }


  .hh-marquee__icon {
    width: 24px;

    height: 24px;

    flex: 0 0 24px;
  }

}


/* ============================================================
   PAUSE MARQUEE
============================================================ */

@media (hover: hover) {

  .hh-marquee__track--pause:hover {
    animation-play-state: paused;
  }

}


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

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

  .hh-marquee__track {
    animation-play-state: paused;
  }


  .hh-hero__button {
    transition: none;
  }


  .hh-frame {
    transition: none;
  }

}
/* END_SECTION:hh-hero */

/* START_SECTION:hh-landing-hero (INDEX:41) */
/* Unused: this section (hh-landing-hero) is not referenced by any template. Styles removed to stop them colliding with hh-landing-hero-new, which shares the same class names. */
/* END_SECTION:hh-landing-hero */

/* START_SECTION:hh-split (INDEX:44) */
/* ==============================
     SECTION
     ============================== */

  .hh-split-banner {
    width: 100%;
    box-sizing: border-box;
    background: var(--hh-outer-bg);
    padding:
      var(--hh-desktop-padding-top)
      var(--hh-desktop-padding-x)
      var(--hh-desktop-padding-bottom);
  }

  .hh-split-banner *,
  .hh-split-banner *::before,
  .hh-split-banner *::after {
    box-sizing: border-box;
  }

  .hh-split-banner__container {
    width: 100%;
    max-width: var(--hh-max-width);
    margin: 0 auto;

    display: grid;

    grid-template-columns:
      minmax(0, var(--hh-image-width))
      minmax(0, var(--hh-content-width));

    gap: var(--hh-desktop-gap);

    min-height: var(--hh-desktop-height);
  }

  .hh-split-banner--full .hh-split-banner__container {
    max-width: none;
  }


  /* ==============================
     DESKTOP ORDER
     ============================== */

  .hh-split-banner--desktop-left .hh-split-banner__media {
    grid-column: 1;
    grid-row: 1;
  }

  .hh-split-banner--desktop-left .hh-split-banner__content {
    grid-column: 2;
    grid-row: 1;
  }


  .hh-split-banner--desktop-right .hh-split-banner__container {
    grid-template-columns:
      minmax(0, var(--hh-content-width))
      minmax(0, var(--hh-image-width));
  }

  .hh-split-banner--desktop-right .hh-split-banner__content {
    grid-column: 1;
    grid-row: 1;
  }

  .hh-split-banner--desktop-right .hh-split-banner__media {
    grid-column: 2;
    grid-row: 1;
  }


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

  .hh-split-banner__media {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: var(--hh-desktop-height);
    overflow: hidden;
    background: #eee;
  }

  .hh-split-banner__picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hh-split-banner__image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: var(--hh-desktop-image-position);
  }

  .hh-split-banner__placeholder {
    width: 100%;
    height: 100%;
    min-height: var(--hh-desktop-height);
  }

  .hh-split-banner__placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
  }


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

  .hh-split-banner__content {
    width: 100%;
    min-width: 0;
    min-height: var(--hh-desktop-height);

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

    padding:
      var(--hh-content-padding-y)
      var(--hh-content-padding-x);

    background: var(--hh-content-bg);

    text-align: center;
  }

  .hh-split-banner__content-inner {
    width: 100%;
    max-width: var(--hh-content-max-width);

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


  /* ==============================
     EYEBROW
     ============================== */

  .hh-split-banner__eyebrow {
    width: 100%;
    margin: 0 0 16px;

    color: var(--hh-text-color);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1px;

    text-align: center;
    text-transform: capitalize;
  }


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

  .hh-split-banner__heading {
    width: 100%;
    margin: 0;

    color: var(--hh-heading-color);

    font-family: "New Spirit", serif;
    font-size: 52px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    letter-spacing: 1px;

    text-align: center;
    text-transform: capitalize;
  }


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

  .hh-split-banner__description {
    width: 100%;
    max-width: 570px;

    margin: 26px auto 0;

    color: var(--hh-text-color);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;

    text-align: center;
  }


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

  .hh-split-banner__button {
    margin-top: 38px;

    min-width: 314px;

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

    gap: 12px;

    padding: 20px 30px;

    background: var(--hh-button-bg);
    color: var(--hh-button-color);

    border: 0;
    border-radius: 0;

    text-decoration: none;

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition:
      background-color 0.25s ease,
      color 0.25s ease;
  }

  .hh-split-banner__button:hover {
    background: var(--hh-button-hover-bg);
    color: var(--hh-button-hover-color);
  }

  .hh-split-banner__button-arrow {
    width: 16px;
    height: 16px;

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

    flex: 0 0 16px;
  }

  .hh-split-banner__button-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hh-split-banner__button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }


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

  @media screen and (max-width: 749px) {

    .hh-split-banner {
      padding:
        var(--hh-mobile-padding-top)
        var(--hh-mobile-padding-x)
        var(--hh-mobile-padding-bottom);
    }

    .hh-split-banner__container,
    .hh-split-banner--desktop-right .hh-split-banner__container {
      display: flex;
      flex-direction: column;

      width: 100%;
      gap: var(--hh-mobile-gap);

      min-height: 0;
    }


    /* Image first */

    .hh-split-banner--mobile-image_first .hh-split-banner__container {
      flex-direction: column;
    }


    /* Content first */

    .hh-split-banner--mobile-content_first .hh-split-banner__container {
      flex-direction: column-reverse;
    }


    /* Image */

    .hh-split-banner__media {
      width: 100%;
      height: auto;
      min-height: 0;

      aspect-ratio: 1 / 1;
    }

    .hh-split-banner__picture {
      width: 100%;
      height: 100%;
    }

    .hh-split-banner__image {
      width: 100%;
      height: 100%;

      object-fit: cover;
      object-position: var(--hh-mobile-image-position);
    }

    .hh-split-banner__placeholder {
      min-height: 0;
      aspect-ratio: 1 / 1;
    }


    /* Content */

    .hh-split-banner__content {
      width: 100%;
      min-height: 430px;

      padding:
        var(--hh-content-padding-y-mobile)
        var(--hh-content-padding-x-mobile);
    }

    .hh-split-banner__content-inner {
      width: 100%;
      max-width: 345px;
    }


    /* Eyebrow */

    .hh-split-banner__eyebrow {
      margin-bottom: 14px;

      font-size: 16px;
      line-height: 22px;
      letter-spacing: 0;
    }


    /* Heading */

    .hh-split-banner__heading {
      font-size: 32px;
      line-height: 32px;
      letter-spacing: 1px;
    }


    /* Description */

    .hh-split-banner__description {
      max-width: 315px;

      margin-top: 26px;

      font-size: 16px;
      line-height: 20px;
    }


    /* Button */

    .hh-split-banner__button {
      width: auto;
      min-width: 258px;

      margin-top: 22px;

      padding: 17px 24px;

      font-size: 16px;
      line-height: 18px;
      letter-spacing: 1.5px;
    }

  }


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

  @media screen and (max-width: 390px) {

    .hh-split-banner__content {
      min-height: 430px;
    }

    .hh-split-banner__content-inner {
      max-width: 320px;
    }

    .hh-split-banner__description {
      max-width: 300px;
    }

  }


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

  @media (prefers-reduced-motion: reduce) {
    .hh-split-banner__button {
      transition: none;
    }
  }
/* END_SECTION:hh-split */

/* START_SECTION:ingredients-section (INDEX:50) */
/* ===== Common container ===== */
  .ingredients-section .container {
    width: 100%;
    max-width: 1352px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* ===== Ingredients Section ===== */
  .ingredients-section {
    background: #ffffff;
    width: 100%;
    padding: 80px 0;
  }

  .ingredients-section__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    box-sizing: border-box;
  }

  /* HEAD */
  .ingredients-section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
  }

  .ingredients-section__head-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    max-width: 1072px;
    width: 100%;
    box-sizing: border-box;
  }

  .ingredients-section__title {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: 1px;
    color: #008758;
    text-transform: capitalize;
    margin: 0;
    text-align: center;
  }

  .ingredients-sec-sub {
    display: block;
  }

  /* TAGS */
  .ingredients-section__tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
  }

  .ingredients-section__tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  .ingredients-section__tag-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ingredients-section__tag-icon img,
  .ingredients-section__tag-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ingredients-section__tag-label {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1px;
    color: #2c5236;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* CARDS GRID */
  .ingredients-section__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    width: 100%;
  }

  /* INGREDIENT CARD - 416x416 square per Figma */
  .ingredient-card {
    position: relative;
    background: #f8edd9;
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    padding: 24px;
    box-shadow: 0px 3.899px 23.394px 0px rgba(217, 217, 217, 0.5);
    box-sizing: border-box;
  }

  .ingredient-card__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    position: relative;
    z-index: 2;
  }

  .ingredient-card__title {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 38px;
    color: #008758;
    text-transform: capitalize;
    text-align: center;
    margin: 0;
    width: 100%;
  }

  .ingredient-card__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .ingredient-card__subhead {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    color: #008758;
    text-transform: capitalize;
    margin: 0;
  }

  .ingredient-card__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ingredient-card__icon svg {
    width: 100%;
    height: 100%;
  }

  .ingredient-card__text {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #2c5236;
    margin: 0;
    width: 100%;
  }

  /* BENEFITS LIST */
  .ingredient-card__benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ingredient-card__benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #2c5236;
  }

  .ingredient-card__benefit-icon {
    width: 18.329px;
    height: 18.329px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ingredient-card__benefit-icon svg {
    width: 100%;
    height: 100%;
  }

  /* Decorative ingredient image (bottom-right) */
  .ingredient-card__image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 180px;
    height: 115px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
  }
   .ingredient-card:last-child .ingredient-card__image{
    width: 121px;
    height: 115px;
   }

  .ingredient-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: bottom right; */
    display: block;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1280px) {
    .ingredients-section__head-text {
      padding: 0 60px;
    }

    .ingredients-section__title {
      font-size: 42px;
      line-height: 46px;
    }

    .ingredients-section__tags {
      gap: 40px;
    }

    .ingredient-card__title {
      font-size: 28px;
      line-height: 34px;
    }
  }

  @media (max-width: 1023px) {
    .ingredients-section {
      padding: 60px 0;
    }

    .ingredients-section__inner {
      gap: 28px;
    }

    .ingredients-section__head-text {
      padding: 0;
    }

    .ingredients-section__title {
      font-size: 32px;
      line-height: 36px;
      letter-spacing: 0.5px;
    }

    .ingredients-section__tags {
      gap: 24px;
    }

    .ingredients-section__tag-label {
      font-size: 13px;
      letter-spacing: 0.5px;
    }

    .ingredients-section__cards {
      gap: 20px;
    }

    .ingredient-card {
      aspect-ratio: auto;
      min-height: 540px;
    }

    .ingredient-card__title {
      font-size: 24px;
      line-height: 28px;
    }

    .ingredient-card__subhead {
      font-size: 20px;
      line-height: 26px;
    }

    .ingredient-card__text,
    .ingredient-card__benefit {
      font-size: 16px;
      line-height: 22px;
    }

    .ingredient-card__image {
      width: 140px;
      height: 100px;
    }
  }

  /* ===== MOBILE — matches Figma 6216:982 ===== */
  @media (max-width: 767px) {
    .ingredients-section {
      padding: 40px 0;
    }
     .ingredients-section .container {
      padding:0 16px;
    }

    .ingredients-section__inner {
      gap: 24px;
    }

    /* Heading: 32px / 32px line-height per Figma */
    .ingredients-section__title {
      font-size: 32px;
      line-height: 32px;
      letter-spacing: 1px;
    }

    .ingredients-sec-sub {
      display: inline;
    }

    /* Mobile tags: 12px font, 8px gap, wrap */
    .ingredients-section__tags {
      gap: 16px 8px;
      justify-content: center;
    }

    .ingredients-section__tag {
      gap: 4px;
    }

    .ingredients-section__tag-icon {
      width: 14px;
      height: 14px;
    }

    .ingredients-section__tag-label {
      font-size: 12px;
      line-height: 12px;
      letter-spacing: 1px;
    }

    /* Cards: stack, 343px tall per Figma, 20px gap */
    .ingredients-section__cards {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    .ingredient-card {
      aspect-ratio: auto;
      height: 343px;
      min-height: 0;
      padding: 24px;
    }

    .ingredient-card__body {
      gap: 20px;
    }

    /* Mobile title: 20px / 20px line-height per Figma */
    .ingredient-card__title {
      font-size: 20px;
      line-height: 20px;
      letter-spacing: 1px;
    }

    /* Mobile subhead: 20px / 20px per Figma */
    .ingredient-card__subhead {
      font-size: 20px;
      line-height: 20px;
      gap: 8px;
    }

    .ingredient-card__icon {
      width: 18px;
      height: 18px;
    }

    /* Mobile body text & benefits: 18px / 24px per Figma */
    .ingredient-card__text,
    .ingredient-card__benefit,.ingredient-card__benefit-text {
      font-size: 18px;
      line-height: 24px;
    }

    .ingredient-card__benefits {
      gap: 12px;
    }

    .ingredient-card__image {
      width: 130px;
      height: 115px;
    }
      .ingredient-card:nth-child(2) .ingredient-card__image{
    width: 156px;
      height: 100px;

   }
  }
/* END_SECTION:ingredients-section */

/* START_SECTION:ocao-landing-marquee (INDEX:70) */
/* ==========================================================
     SECTION
  ========================================================== */

  .running-bar {
    width: 100%;
    max-width: 100%;
    background: var(--rb-bg);
    color: var(--rb-text);
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding-top: var(--rb-padding-top-desktop);
    padding-bottom: var(--rb-padding-bottom-desktop);
  }

  .running-bar .running-bar__inner {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--rb-padding-inline-desktop);
    box-sizing: border-box;
  }

  .running-bar .running-bar__inner--content {
    max-width: var(--page-width, 1440px);
  }

  .running-bar .running-bar__inner--full {
    max-width: none;
  }


  /* ==========================================================
     VIEWPORT
  ========================================================== */

  .running-bar .running-bar__viewport {
    position: relative;
    width: 100%;
    height: var(--rb-height-desktop);

    display: flex;
    align-items: center;

    overflow: hidden;
  }


  /* ==========================================================
     RUNNING TRACK
  ========================================================== */

  .running-bar .running-bar__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    width: max-content;
    min-width: max-content;

    will-change: transform;

    animation-name: runningBarScroll;
    animation-duration: var(--rb-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }


  /* LEFT DIRECTION */

  .running-bar .running-bar__track--left {
    animation-direction: normal;
  }


  /* RIGHT DIRECTION */

  .running-bar .running-bar__track--right {
    animation-direction: reverse;
  }


  /* PAUSE ON HOVER */

  @media (hover: hover) {
    .running-bar
    .running-bar__track--pause:hover {
      animation-play-state: paused;
    }
  }


  /* ==========================================================
     DUPLICATED GROUP
  ========================================================== */

  .running-bar .running-bar__group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    flex-shrink: 0;
    min-width: max-content;
  }


  /* ==========================================================
     EACH ITEM
  ========================================================== */

  .running-bar .running-bar__item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;

    gap: var(--rb-gap-desktop);

    padding-right: var(--rb-gap-desktop);

    white-space: nowrap;
  }


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

  .running-bar .running-bar__text {
    color: var(--rb-text);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: var(--rb-font-desktop);
    font-style: normal;
    font-weight: 600;

    /* STATIC AS PER DESIGN */
    line-height: 24px;

    white-space: nowrap;
  }


  /* ==========================================================
     X SEPARATOR
  ========================================================== */

  .running-bar .running-bar__cross {
    width: var(--rb-icon-size-desktop);
    height: var(--rb-icon-size-desktop);

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

    flex-shrink: 0;

    color: var(--rb-text);

    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--rb-icon-size-desktop);
    font-weight: 400;
    line-height: 1;

    transform: translateY(-1px);
  }


  /* ==========================================================
     ANIMATION

     The track is JS-cloned to always cover at least 2 viewport
     widths (see script below), so a fixed 2-group / -50% loop
     isn't wide enough on large screens and shows a gap once
     both groups have scrolled past. --rb-shift is set by that
     script to the exact pixel width of one group; -50% is only
     a fallback for the brief moment before JS runs.
  ========================================================== */

  @keyframes runningBarScroll {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(var(--rb-shift, -50%), 0, 0);
    }
  }


  /* ==========================================================
     MOBILE - 390PX REFERENCE
  ========================================================== */

  @media screen and (max-width: 749px) {

    .running-bar {
      padding-top: var(--rb-padding-top-mobile);
      padding-bottom: var(--rb-padding-bottom-mobile);
    }

    .running-bar .running-bar__inner {
      padding-inline: var(--rb-padding-inline-mobile);
    }

    .running-bar .running-bar__viewport {
      height: var(--rb-height-mobile);
    }


    .running-bar .running-bar__item {
      gap: var(--rb-gap-mobile);
      padding-right: var(--rb-gap-mobile);
    }


    .running-bar .running-bar__text {
      font-size: var(--rb-font-mobile);

      /* STATIC */
      line-height: 24px;
    }


    .running-bar .running-bar__cross {
      width: var(--rb-icon-size-mobile);
      height: var(--rb-icon-size-mobile);

      font-size: var(--rb-icon-size-mobile);
    }

  }


  /* ==========================================================
     ACCESSIBILITY
  ========================================================== */

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

    .running-bar .running-bar__track {
      animation-play-state: paused;
    }

  }
/* END_SECTION:ocao-landing-marquee */

/* START_SECTION:ocoa-landing-blogs (INDEX:73) */
.curl-journal {
    width: 100%;
    background: var(--cj-bg);
    padding-top: var(--cj-desktop-top);
    padding-bottom: var(--cj-desktop-bottom);
  }

  .curl-journal * {
    box-sizing: border-box;
  }

  .curl-journal .curl-journal__container {
    width: min(calc(100% - 80px), var(--cj-content-width));
    margin: 0 auto;
  }


  /* =========================
     Header
  ========================== */

  .curl-journal .curl-journal__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 48px;
  }

  .curl-journal .curl-journal__heading {
    margin: 0;
    color: var(--cj-heading);
    text-align: center;
    font-family: "New Spirit", serif;
    font-size: 52px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    letter-spacing: 1px;
    text-transform: capitalize;
  }

  .curl-journal .curl-journal__subheading {
    max-width: 570px;
    margin-top: 14px;
    color: var(--cj-text);
    text-align: center;
    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  .curl-journal .curl-journal__subheading p {
    margin: 0;
  }


  /* =========================
     Articles
  ========================== */

  .curl-journal .curl-journal__articles {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }

  .curl-journal .curl-journal__card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
  }

  .curl-journal .curl-journal__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1.58 / 1;
    overflow: hidden;
    background: #f5f5f2;
  }

  .curl-journal .curl-journal__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
  }

  .curl-journal .curl-journal__card:hover .curl-journal__image {
    transform: scale(1.02);
  }

  .curl-journal .curl-journal__placeholder {
    width: 100%;
    height: 100%;
  }

  .curl-journal .curl-journal__placeholder-svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .curl-journal .curl-journal__card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 14px;
  }

  .curl-journal .curl-journal__article-title {
    margin: 0;
    color: var(--cj-article-heading);
    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;

    /* Keep all headings consistent */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    /* Always reserve space for 2 lines */
    min-height: 48px;
    max-height: 48px;
  } 

  .curl-journal .curl-journal__article-title a {
    color: inherit;
    text-decoration: none;
  }

  .curl-journal .curl-journal__description {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    color: var(--cj-text);
    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height:70px;
  }

  .curl-journal .curl-journal__description p {
    margin: 0;
  }

  .curl-journal .curl-journal__read-more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin-top: 18px;
    color: var(--cj-text);
    text-align: center;
    text-decoration: none;
    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-transform: uppercase;
  }

  .curl-journal .curl-journal__read-more svg {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
  }

  .curl-journal .curl-journal__read-more:hover svg {
    transform: translate(2px, -2px);
  }


  /* =========================
     Buttons
  ========================== */

  .curl-journal .curl-journal__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 52px;
  }

  .curl-journal .curl-journal__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 64px;
    padding: 20px 32px;
    border: 1px solid transparent;
    text-align: center;
    text-decoration: none;
    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }

  .curl-journal .curl-journal__button:hover {
    opacity: 0.9;
  }

  .curl-journal .curl-journal__button--primary {
    color: var(--cj-primary-text);
    background: var(--cj-primary-bg);
    border-color: var(--cj-primary-bg);
  }

  .curl-journal .curl-journal__button--secondary {
    color: var(--cj-secondary-text);
    background: var(--cj-secondary-bg);
    border-color: var(--cj-secondary-border);
  }


  /* =========================
     Tablet
     DESKTOP/TABLET UNCHANGED
  ========================== */

  @media screen and (max-width: 989px) {
    .curl-journal .curl-journal__container {
      width: min(calc(100% - 48px), var(--cj-content-width));
    }

    .curl-journal .curl-journal__articles {
      flex-wrap: wrap;
      gap: 32px 16px;
    }

    .curl-journal .curl-journal__card {
      flex: 0 0 calc(50% - 8px);
    }
  }


  /* ========================================================
     MOBILE
     FIGMA REFERENCE: 390PX
  ======================================================== */

  @media screen and (max-width: 749px) {
    

    /* =========================
       Section
    ========================== */

    .curl-journal {
      padding-top: var(--cj-mobile-top);
      padding-bottom: var(--cj-mobile-bottom);
    }


    .curl-journal .curl-journal__container {
      width: calc(100% - 32px);
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }


    /* =========================
       Header
    ========================== */

    .curl-journal .curl-journal__header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;

      margin-bottom: 28px;
    }


    /* =========================
       Heading
       Mobile/Heading/H1
    ========================== */

    .curl-journal .curl-journal__heading {
      width: 100%;
      margin: 0;

      color: var(--cj-heading);
      text-align: center;

      font-family: "New Spirit", serif;
      font-size: 32px;
      font-style: normal;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 1px;
      text-transform: capitalize;
    }


    /* =========================
       Header Paragraph
       Mobile/Body/Body Regular
    ========================== */

    .curl-journal .curl-journal__subheading {
      width: 100%;
      max-width: 345px;

      margin-top: 10px;

      color: var(--cj-text);
      text-align: center;

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }


    .curl-journal .curl-journal__subheading p {
      margin: 0;
    }


    /* =========================
       Articles
    ========================== */

    .curl-journal .curl-journal__articles {
      width: 100%;

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: flex-start;

      gap: 28px;
    }


    .curl-journal .curl-journal__card {
      flex: 0 0 auto;

      width: 100%;
      min-width: 0;

      display: flex;
      flex-direction: column;

      margin: 0;
    }


    /* =========================
       Article Image
    ========================== */

    .curl-journal .curl-journal__image-wrap {
      width: 100%;
      aspect-ratio: 1.58 / 1;

      overflow: hidden;
    }


    .curl-journal .curl-journal__image {
      width: 100%;
      height: 100%;

      display: block;
      object-fit: cover;
    }


    /*
      Remove hover zoom on mobile
    */

    .curl-journal
    .curl-journal__card:hover
    .curl-journal__image {
      transform: none;
    }


    /* =========================
       Card Content
    ========================== */

    .curl-journal .curl-journal__card-content {
      display: flex;
      flex-direction: column;

      padding-top: 10px;
    }


    /* =========================
       Article Heading
       Mobile/Body/Body Large (B)
    ========================== */

    .curl-journal .curl-journal__article-title {
      width: 100%;

      margin: 0;

      color: #008556;

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px;
    }


    .curl-journal .curl-journal__article-title a {
      color: inherit;
      text-decoration: none;
    }


    /* =========================
       Article Description
       Mobile/Body/Body Small
    ========================== */

    .curl-journal .curl-journal__description {
      width: 100%;
      max-width: 100%;

      display: block;

      margin-top: 4px;

      overflow: hidden;

      color: var(--cj-text);

      text-overflow: ellipsis;
    

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 18px;

      -webkit-line-clamp: unset;
      -webkit-box-orient: unset;
    }


    .curl-journal .curl-journal__description p {
      display: block;

      width: 100%;
      max-width: 100%;

      margin: 0;

      overflow: hidden;
      text-overflow: ellipsis;

    }


    /* =========================
       READ MORE
       Mobile/UI/Label
    ========================== */

    .curl-journal .curl-journal__read-more {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      align-self: flex-start;

      gap: 6px;

      margin-top: 10px;

      color: var(--cj-text);
      text-align: center;
      text-decoration: none;

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 18px;
      text-transform: uppercase;
    }


    .curl-journal .curl-journal__read-more svg {
      flex: 0 0 auto;

      width: 13px;
      height: 13px;
    }


    /* =========================
       Bottom Section Buttons
       Kept Responsive
    ========================== */

    .curl-journal .curl-journal__buttons {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      margin-top: 40px;
      display:none;
    }


    .curl-journal .curl-journal__button {
      width: 100%;
      min-height: 58px;

      padding: 18px 20px;

      font-size: 17px;
      line-height: 20px;
      letter-spacing: 1.3px;
    }

  }


  /* ========================================================
     VERY SMALL MOBILE
     KEEP SAME FIGMA TYPOGRAPHY
  ======================================================== */

  @media screen and (max-width: 374px) {

    .curl-journal .curl-journal__container {
      width: calc(100% - 28px);
    }


    .curl-journal .curl-journal__heading {
      font-size: 32px;
      line-height: 32px;
      letter-spacing: 1px;
    }


    .curl-journal .curl-journal__subheading {
      font-size: 16px;
      line-height: 22px;
    }


    .curl-journal .curl-journal__article-title {
      font-size: 18px;
      line-height: 24px;
    }

    .curl-journal .curl-journal__description,
    .curl-journal .curl-journal__description p {
      display: -webkit-box !important;

      width: 100% !important;
      max-width: 100% !important;

      margin-top: 4px;

      overflow: hidden !important;

      white-space: normal !important;
      text-overflow: ellipsis !important;

      -webkit-box-orient: vertical !important;
      -webkit-line-clamp: 4 !important;

      color: var(--cj-text);

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 14px !important;
      font-style: normal;
      font-weight: 400;
      line-height: 18px !important;

      max-height: 72px !important;
    }

    .curl-journal .curl-journal__description p {
      margin: 0 !important;
    }



  }

  .curl-journal a:focus-visible {
    outline: 2px solid #008758;
    outline-offset: 2px;
  }
/* END_SECTION:ocoa-landing-blogs */

/* START_SECTION:ocoa-landing-faq (INDEX:74) */
/* ========================================================
     SECTION VARIABLES
  ======================================================== */

  [data-ocoa-faq] {
    position: relative;
    width: 100%;
    background: var(--ocoa-background);

    padding-top: var(--ocoa-padding-top);
    padding-bottom: var(--ocoa-padding-bottom);
    padding-left: 44px;
    padding-right: 44px;

    box-sizing: border-box;
  }


  [data-ocoa-faq] *,
  [data-ocoa-faq] *::before,
  [data-ocoa-faq] *::after {
    box-sizing: border-box;
  }


  /* ========================================================
     MAIN FLEX LAYOUT
  ======================================================== */

  [data-ocoa-faq] .ocoa-faq__inner {
    width: 100%;
    max-width: 1332px;
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    gap: 80px;
  }


  /* ========================================================
     LEFT COLUMN
  ======================================================== */

  [data-ocoa-faq] .ocoa-faq__content {
    flex: 0 0 470px;
    width: 470px;
    max-width: 470px;

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

    padding: 0;
    margin: 0;
  }


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

  [data-ocoa-faq] .ocoa-faq__heading {
    width: 100%;
    max-width: 470px;

    margin: 0;
    padding: 0;

    color: var(--ocoa-green);

    font-family: "New Spirit", serif;
    font-size: 52px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    letter-spacing: 1px;
    text-transform: capitalize;
  }


  /* ========================================================
     SHOP NOW BUTTON
  ======================================================== */

  [data-ocoa-faq] .ocoa-faq__button {
    width: fit-content;
    min-height: 64px;

    margin-top: 32px;
    padding: 18px 24px;

    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: 8px;

    background: var(--ocoa-yellow);
    color: var(--ocoa-green);

    border: 0;
    border-radius: 0;

    text-decoration: none;
    text-align: center;

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    transition:
      transform 0.25s ease,
      opacity 0.25s ease;
  }


  [data-ocoa-faq] .ocoa-faq__button:hover {
    transform: translateY(-2px);
  }


  [data-ocoa-faq] .ocoa-faq__button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
  }


  /* ========================================================
     ASK QUESTION TEXT
  ======================================================== */

  [data-ocoa-faq] .ocoa-faq__ask {
    margin-top: 12px;
    padding-left: 24px;

    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    gap: 4px;

    color: var(--ocoa-text);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.15px;
  }


  [data-ocoa-faq] .ocoa-faq__ask a {
    color: inherit;
    text-decoration: none;
  }


  [data-ocoa-faq] .ocoa-faq__ask a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }


  /* ========================================================
     RIGHT AREA
  ======================================================== */

  [data-ocoa-faq] .ocoa-faq__main {
    flex: 0 1 718px;

    width: 100%;
    max-width: 718px;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
  }


  /* ========================================================
     FAQ TABS
  ======================================================== */

  [data-ocoa-faq] .ocoa-faq__tabs {
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 6px;

    margin: 0 0 24px;
    padding: 0;
  }


  [data-ocoa-faq] .ocoa-faq__tab {
    min-height: 52px;

    padding: 10px 22px;

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

    border: 1px solid transparent;
    border-radius: 7px;

    background: var(--ocoa-inactive-tab);
    color: var(--ocoa-green);

    cursor: pointer;

    text-align: center;

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    text-transform: uppercase;

    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;
  }


  [data-ocoa-faq] .ocoa-faq__tab:first-child {
    min-width: 122px;
  }


  [data-ocoa-faq] .ocoa-faq__tab:nth-child(2) {
    min-width: 174px;
  }


  [data-ocoa-faq] .ocoa-faq__tab:nth-child(3) {
    min-width: 156px;
  }


  [data-ocoa-faq] .ocoa-faq__tab.is-active {
    background: var(--ocoa-active-tab);
    border-color: var(--ocoa-green);
  }


  [data-ocoa-faq] .ocoa-faq__tab:hover {
    border-color: var(--ocoa-green);
  }


  /* ========================================================
     ACCORDION OUTER
  ======================================================== */

  [data-ocoa-faq] .ocoa-faq__accordion {
    width: 100%;

    padding: 0 24px;

    display: flex;
    flex-direction: column;

    background: var(--ocoa-card-background);

    border: 1px solid var(--ocoa-green);
    border-radius: 8px;

    overflow: hidden;
  }


  /* ========================================================
     ACCORDION ITEM
  ======================================================== */

  [data-ocoa-faq] .ocoa-faq__item {
    width: 100%;

    display: flex;
    flex-direction: column;

    border-bottom: 1px solid var(--ocoa-border);
  }


  [data-ocoa-faq] .ocoa-faq__item:last-child {
    border-bottom: 0;
  }


  [data-ocoa-faq] .ocoa-faq__item.is-hidden {
    display: none;
  }


  /* ========================================================
     ACCORDION QUESTION
  ======================================================== */

  [data-ocoa-faq] .ocoa-faq__question {
    width: 100%;
    min-height: 88px;

    padding: 20px 0;
    margin: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    border: 0;
    outline: 0;

    background: transparent;
    color: var(--ocoa-green);

    cursor: pointer;
    text-align: left;
  }


  [data-ocoa-faq] .ocoa-faq__question-text {
    flex: 1 1 auto;
    min-width: 0;

    display: block;

    color: var(--ocoa-green);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
  }


  /* ========================================================
     PLUS SVG
  ======================================================== */



  /* ========================================================
   ACCORDION ICONS
======================================================== */

[data-ocoa-faq] .ocoa-faq__plus {
  flex: 0 0 24px;

  width: 24px;
  height: 24px;

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

[data-ocoa-faq] .ocoa-faq__plus svg {
  width: 24px;
  height: 24px;
}


/* CLOSED STATE */
[data-ocoa-faq] .ocoa-faq__icon-closed {
  display: block;
}

[data-ocoa-faq] .ocoa-faq__icon-open {
  display: none;
}


/* OPEN STATE */
[data-ocoa-faq]
.ocoa-faq__question[aria-expanded="true"]
.ocoa-faq__icon-closed {
  display: none;
}

[data-ocoa-faq]
.ocoa-faq__question[aria-expanded="true"]
.ocoa-faq__icon-open {
  display: block;
}


  /* ========================================================
     ACCORDION ANSWER
     NO GRID USED
  ======================================================== */

  [data-ocoa-faq] .ocoa-faq__answer-wrapper {
    width: 100%;
    max-height: 0;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transition:
      max-height 0.4s ease,
      opacity 0.25s ease,
      visibility 0.25s ease;
  }


  [data-ocoa-faq] .ocoa-faq__item.is-open
  .ocoa-faq__answer-wrapper {
    opacity: 1;
    visibility: visible;
  }


  [data-ocoa-faq] .ocoa-faq__answer {
    width: 100%;

    padding: 0 0 24px;

    color: var(--ocoa-text);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }


  [data-ocoa-faq] .ocoa-faq__answer p {
    margin-top: 0;
    margin-bottom: 12px;
  }


  [data-ocoa-faq] .ocoa-faq__answer p:last-child {
    margin-bottom: 0;
  }


  [data-ocoa-faq] .ocoa-faq__answer a {
    color: var(--ocoa-green);
    text-underline-offset: 3px;
  }


  /* ========================================================
     ACCESSIBILITY
  ======================================================== */

  [data-ocoa-faq] button:focus {
    outline: none;
  }


  [data-ocoa-faq] button:focus-visible,
  [data-ocoa-faq] a:focus-visible {
    outline: 2px solid var(--ocoa-green);
    outline-offset: 3px;
  }


  /* ========================================================
     SMALLER DESKTOP / TABLET
  ======================================================== */

  @media screen and (max-width: 1200px) {

    [data-ocoa-faq] {
      padding-left: 32px;
      padding-right: 32px;
    }


    [data-ocoa-faq] .ocoa-faq__inner {
      gap: 50px;
    }


    [data-ocoa-faq] .ocoa-faq__content {
      flex: 0 0 400px;

      width: 400px;
      max-width: 400px;
    }


    [data-ocoa-faq] .ocoa-faq__heading {
      max-width: 400px;

      font-size: 48px;
      line-height: 48px;
    }


    [data-ocoa-faq] .ocoa-faq__main {
      flex: 1 1 auto;
    }

  }


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

  @media screen and (max-width: 990px) {

    [data-ocoa-faq] .ocoa-faq__inner {
      gap: 36px;
    }


    [data-ocoa-faq] .ocoa-faq__content {
      flex: 0 0 330px;

      width: 330px;
      max-width: 330px;
    }


    [data-ocoa-faq] .ocoa-faq__heading {
      max-width: 330px;

      font-size: 42px;
      line-height: 44px;
    }


    [data-ocoa-faq] .ocoa-faq__tab {
      min-width: 0 !important;

      padding-left: 15px;
      padding-right: 15px;

      font-size: 17px;
    }

  }


  /* ========================================================
     MOBILE
     FIGMA REFERENCE: 390PX
  ======================================================== */

  @media screen and (max-width: 749px) {

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

    [data-ocoa-faq] {
      padding-top: var(--ocoa-mobile-padding-top);
      padding-bottom: var(--ocoa-mobile-padding-bottom);

      padding-left: 20px;
      padding-right: 20px;
    }


    /* ===============================
       MAIN FLEX
    =============================== */

    [data-ocoa-faq] .ocoa-faq__inner {
      width: 100%;
      max-width: 100%;

      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;

      gap: 12px;
    }


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

    [data-ocoa-faq] .ocoa-faq__content {
      flex: 0 0 auto;

      width: 100%;
      max-width: 100%;

      align-items: flex-start;
    }


    /* ===============================
       MOBILE HEADING
       32 / 32
    =============================== */

    [data-ocoa-faq] .ocoa-faq__heading {
      width: 100%;
      max-width: 320px;

      margin: 0;

      color: var(--ocoa-green);

      font-family: "New Spirit", serif;
      font-size: 32px;
      font-style: normal;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 1px;
      text-transform: capitalize;
    }


    /* ===============================
       SHOP NOW BUTTON
    =============================== */

    [data-ocoa-faq] .ocoa-faq__button {
      width: fit-content;
      min-height: 48px;

      margin-top: 20px;
      padding: 15px 16px;

      gap: 6px;

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 18px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }


    [data-ocoa-faq] .ocoa-faq__button-arrow {
      width: 18px;
      height: 18px;

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

      flex: 0 0 18px;
    }


    [data-ocoa-faq] .ocoa-faq__button-arrow svg {
      display: block;

      width: 18px;
      height: 18px;
    }


    /* ===============================
       GOT A QUESTION?
    =============================== */

    [data-ocoa-faq] .ocoa-faq__ask {
      width: 100%;

      margin-top: 10px;
      padding-left: 0;

      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;

      gap: 3px;

      color: #08495B;

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.15px;
    }


    [data-ocoa-faq] .ocoa-faq__ask a {
      color: #08495B;

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      letter-spacing: -0.15px;

      text-decoration: none;
    }


    /* ===============================
       RIGHT AREA
    =============================== */

    [data-ocoa-faq] .ocoa-faq__main {
      flex: 0 0 auto;

      width: 100%;
      max-width: 100%;
      min-width: 0;
    }


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

       ULTA + PRODUCTS
       SHIPPING
    =============================== */

    [data-ocoa-faq] .ocoa-faq__tabs {
      width: 100%;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;

      gap: 6px;

      margin: 0 0 14px;
      padding: 0;
    }


    [data-ocoa-faq] .ocoa-faq__tab,
    [data-ocoa-faq] .ocoa-faq__tab:first-child,
    [data-ocoa-faq] .ocoa-faq__tab:nth-child(2),
    [data-ocoa-faq] .ocoa-faq__tab:nth-child(3) {
      min-width: 0;
      min-height: 48px;

      padding: 14px 14px;

      border-radius: 7px;

      color: #008758;

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 18px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }


    /* ULTA */

    [data-ocoa-faq] .ocoa-faq__tab:first-child {
      flex: 0 0 33%;
      width: 33%;
    }


    /* PRODUCTS */

    [data-ocoa-faq] .ocoa-faq__tab:nth-child(2) {
      flex: 0 0 51%;
      width: 51%;
    }


    /* SHIPPING */

    [data-ocoa-faq] .ocoa-faq__tab:nth-child(3) {
      flex: 0 0 47%;
      width: 47%;
    }


    [data-ocoa-faq] .ocoa-faq__tab.is-active {
      background: var(--ocoa-active-tab);
      border-color: var(--ocoa-green);
      color: #008758;
    }


    /* ===============================
       ACCORDION CARD
    =============================== */

    [data-ocoa-faq] .ocoa-faq__accordion {
      width: 100%;

      padding-left: 24px;
      padding-right: 24px;

      background: var(--ocoa-card-background);

      border: 1px solid var(--ocoa-green);
      border-radius: 8px;

      overflow: hidden;
    }


    /* ===============================
       ACCORDION QUESTION
    =============================== */

    [data-ocoa-faq] .ocoa-faq__question {
      width: 100%;
      min-height: 88px;

      padding: 24px 0;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      gap: 14px;
    }


    /* ===============================
       ACCORDION HEADING
       18 / 24
    =============================== */

    [data-ocoa-faq] .ocoa-faq__question-text {
      flex: 1 1 auto;
      min-width: 0;

      color: var(--ocoa-green);

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 18px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px;
    }


    /* ===============================
       PLUS ICON
    =============================== */

    [data-ocoa-faq] .ocoa-faq__plus {
      flex: 0 0 21px;

      width: 21px;
      height: 21px;

      color: var(--ocoa-green);
    }


    [data-ocoa-faq] .ocoa-faq__plus svg {
      width: 21px;
      height: 21px;
    }


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

    [data-ocoa-faq] .ocoa-faq__answer {
      width: 100%;

      padding: 0 0 20px;

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 21px;
    }

  }


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

  @media screen and (max-width: 374px) {

    [data-ocoa-faq] {
      padding-left: 16px;
      padding-right: 16px;
    }


    /*
      Keep Figma mobile heading typography.
    */

    [data-ocoa-faq] .ocoa-faq__heading {
      max-width: 300px;

      font-size: 32px;
      line-height: 32px;
      letter-spacing: 1px;
    }


    [data-ocoa-faq] .ocoa-faq__button {
      font-size: 16px;
      line-height: 18px;
      letter-spacing: 1.5px;
    }


    [data-ocoa-faq] .ocoa-faq__ask,
    [data-ocoa-faq] .ocoa-faq__ask a {
      font-size: 16px;
      line-height: 20px;
      letter-spacing: -0.15px;
    }


    [data-ocoa-faq] .ocoa-faq__tab,
    [data-ocoa-faq] .ocoa-faq__tab:first-child,
    [data-ocoa-faq] .ocoa-faq__tab:nth-child(2),
    [data-ocoa-faq] .ocoa-faq__tab:nth-child(3) {
      min-height: 46px;

      padding-left: 9px;
      padding-right: 9px;

      font-size: 14px;
      line-height: 18px;
      letter-spacing: 1px;
    }


    [data-ocoa-faq] .ocoa-faq__question-text {
      font-size: 18px;
      line-height: 24px;
    }

  }
/* END_SECTION:ocoa-landing-faq */

/* START_SECTION:ocoa-landing-hero (INDEX:75) */
...
/* END_SECTION:ocoa-landing-hero */

/* START_SECTION:ocoa-landing-ingredients (INDEX:76) */
/* =========================================================
     BASE
  ========================================================= */

  .ing-section,
  .ing-section * {
    box-sizing: border-box;
  }

  .ing-section {
    width: 100%;
    max-width: 100%;
    position: relative;

    overflow: hidden;

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

    padding-top: var(--ing-padding-top);
    padding-bottom: var(--ing-padding-bottom);

  }


  .ing-section .ing-container {
    width: 100%;
    max-width: var(--ing-container-max-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--ing-desktop-padding-x);
    padding-right: var(--ing-desktop-padding-x);
  }



  /* =========================================================
     HEADER
     FLEX — NO GRID
  ========================================================= */

  .ing-section .ing-header {
    width: 100%;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--ing-column-gap);

    margin-bottom: var(--ing-block-gap);
  }


  .ing-section .ing-heading-wrap {
    width: 100%;
    min-width: 0;

    flex: 1 1 50%;
  }


  .ing-section .ing-description-wrap {
    width: 100%;
    min-width: 0;

    flex: 1 1 50%;

    display: flex;
    justify-content: center;
  }



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

  .ing-section .ing-heading {
    width: 100%;
    max-width: 650px;

    margin: 0;
    padding: 0;

    color: var(--ing-heading-color);
    text-align: var(--ing-text-align);

    font-family: "New Spirit", Georgia, serif;
    font-size: var(--ing-heading-size);
    font-style: normal;
    font-weight: 600;

    line-height: 52px;
    letter-spacing: 1px;

    text-transform: capitalize;

    overflow-wrap: normal;
    word-break: normal;
  }



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

  .ing-section .ing-description {
    width: 100%;
    max-width: 485px;

    margin: 0;

    color: var(--ing-text-color);
    text-align: var(--ing-text-align);

    font-family: "Archivo SemiExpanded", Arial, sans-serif;
    font-size: var(--ing-body-size);
    font-style: normal;
    font-weight: 400;

    line-height: 24px;
  }


  .ing-section .ing-description p {
    margin: 0;
    padding: 0;
  }


  .ing-section .ing-description p + p {
    margin-top: 10px;
  }



  /* =========================================================
     SLIDER AREA
  ========================================================= */

  .ing-section .ing-slider-area {
    width: calc(100vw - var(--ing-slider-left));

    margin-left: var(--ing-slider-left);

    position: relative;
  }


  .ing-section .ing-slider {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    position: relative;

    cursor: grab;

    scrollbar-width: none;
    -ms-overflow-style: none;

    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    overscroll-behavior-x: contain;

    touch-action: pan-x pan-y;

    outline: none;
  }


  .ing-section .ing-slider::-webkit-scrollbar {
    display: none;
  }

  .ing-section[data-drag-desktop="false"] .ing-slider {
    cursor: default;
  }


  .ing-section .ing-slider.is-dragging {
    cursor: grabbing;

    scroll-snap-type: none;
    scroll-behavior: auto;

    user-select: none;
    -webkit-user-select: none;
  }



  /* =========================================================
     TRACK
     FLEX ONLY
  ========================================================= */

  .ing-section .ing-track {
    width: max-content;
    min-width: 100%;

    display: flex;
    align-items: stretch;
    justify-content: flex-start;

    flex-wrap: nowrap;

    gap: var(--ing-card-gap);

    padding: 0;
    margin: 0;
  }

  .ing-section[data-card-sizing="cards_per_view"] .ing-track {
    width: 100%;
  }



  /* =========================================================
     SLIDE
  ========================================================= */

  .ing-section .ing-slide {
    width: var(--ing-card-width);
    min-width: 0;

    flex: 0 0 var(--ing-card-width);

    scroll-snap-align: start;
    scroll-snap-stop: normal;

    position: relative;

    margin: 0;
    padding: 0;
  }

  .ing-section[data-card-sizing="cards_per_view"] .ing-slide {
    width: var(--ing-card-basis-desktop);
    flex-basis: var(--ing-card-basis-desktop);
  }


  .ing-section .ing-slide-inner {
    width: 100%;

    position: relative;

    /*
      Ingredient image lives in this top area,
      therefore it does not get clipped.
    */
    padding-top: 34px;

    height: calc(var(--ing-card-height) + 34px);
  }



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

  .ing-section .ing-card {
    width: 100%;
    height: var(--ing-card-height);

    position: relative;

    overflow: hidden;

    background: var(--ing-card-bg);

    border-radius: var(--ing-card-radius);
  }


  .ing-section .ing-card-content {
    width: auto;

    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 18px;
  }



  /* =========================================================
     CARD TITLE
  ========================================================= */

  .ing-section .ing-card-title {
    margin: 0 0 2px;
    padding: 0;

    color: var(--ing-text-color);

    font-family: "Archivo SemiExpanded", Arial, sans-serif;
    font-size: var(--ing-card-heading-size);
    font-style: normal;
    font-weight: 600;

    line-height: 24px;
  }



  /* =========================================================
     CARD TEXT
  ========================================================= */

  .ing-section .ing-card-text {
    margin: 0;
    padding: 0;

    color: var(--ing-text-color);

    font-family: "Archivo SemiExpanded", Arial, sans-serif;
    font-size: var(--ing-card-text-size);
    font-style: normal;
    font-weight: 400;

    line-height: 22px;
  }


  .ing-section .ing-card-text p {
    margin: 0;
    padding: 0;
  }



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

  .ing-section .ing-image-wrap {
    width: var(--image-width);
    max-width: 50%;

    position: absolute;

    top: 0;

    z-index: 3;

    pointer-events: none;

    transform: translate(
      var(--image-x),
      var(--image-y)
    );
  }


  .ing-section .ing-image-wrap picture {
    display: block;
    width: 100%;
  }


  .ing-section .ing-image-wrap.ing-image--left {
    left: 20px;
    right: auto;
  }


  .ing-section .ing-image-wrap.ing-image--center {
    left: 50%;
    right: auto;

    transform: translate(
      calc(-50% + var(--image-x)),
      var(--image-y)
    );
  }


  .ing-section .ing-image-wrap.ing-image--right {
    right: 18px;
    left: auto;
  }


  .ing-section .ing-image {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;
    max-height: 120px;

    object-fit: contain;
    object-position: center;

    -webkit-user-drag: none;
    user-select: none;
  }



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

  .ing-section .ing-controls {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  padding: 0;
  margin: 0;

  pointer-events: none;

  z-index: 20;
}


.ing-section .ing-arrow {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ing-arrow-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ing-arrow-color);
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
  overflow: visible;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}


/* PREVIOUS */
.ing-section .ing-arrow--prev {
  left: 20px;
}


/* NEXT */
.ing-section .ing-arrow--next {
  right: 32px;
}


/* little yellow tail */
.ing-section .ing-arrow::after {
  display:none;
}


/* next arrow tail on right */
.ing-section .ing-arrow--next::after {
  display:none;
}


.ing-section .ing-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
  z-index: 2;
}


.ing-section .ing-arrow:hover:not(:disabled) {
  background: var(--ing-arrow-bg);

  transform: translateY(-50%) scale(1.05);
}


.ing-section .ing-arrow:disabled {
  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}

.ing-section .ing-arrow:focus-visible {
  outline: 2px solid #008758;
  outline-offset: 2px;
}

@media screen and (min-width: 750px) {
  .ing-section .ing-controls {
    display: var(--ing-controls-display-desktop, block);
  }
}


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

  @media screen and (max-width: 1024px) and (min-width: 750px) {

    .ing-section .ing-header {
      gap: 40px;
    }


    .ing-section .ing-heading {
      font-size: clamp(38px, 4.5vw, var(--ing-heading-size));
      line-height: 1;
    }


    .ing-section .ing-description {
      font-size: clamp(16px, 1.8vw, var(--ing-body-size));
    }

  }



  /* =========================================================
     MOBILE
     REFERENCE: 390PX
  ========================================================= */

  @media screen and (max-width: 749px) {

    .ing-section {
      padding-top: var(--ing-padding-top-mobile);
      padding-bottom: var(--ing-padding-bottom-mobile);

      /*
        Slider starts from mobile content padding
        and continues to right viewport edge.
      */
      --ing-slider-left: var(--ing-mobile-padding-x);
    }


    .ing-section .ing-container {
      width: 100%;
      max-width: 100%;

      padding-left: var(--ing-mobile-padding-x);
      padding-right: var(--ing-mobile-padding-x);
    }



    /* ================================
       MOBILE HEADER — FLEX COLUMN
    ================================= */

    .ing-section .ing-header {
      width: 100%;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      gap: var(--ing-column-gap-mobile);

      margin-bottom: var(--ing-block-gap-mobile);
    }


    .ing-section .ing-heading-wrap,
    .ing-section .ing-description-wrap {
      width: 100%;

      flex: 0 0 auto;
    }


    .ing-section .ing-description-wrap {
      display: flex;
      justify-content: center;
    }



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

       Figma:
       32px
       600
       32px LH
       1px LS
    ================================= */

    .ing-section .ing-heading {
      width: 100%;
      max-width: 350px;

      margin-left: auto;
      margin-right: auto;

      color: var(--ing-heading-color);

      text-align: var(--ing-text-align-mobile);

      font-family: "New Spirit", Georgia, serif;
      font-size: var(--ing-heading-size-mobile);
      font-style: normal;
      font-weight: 600;

      line-height: 32px;
      letter-spacing: 1px;

      text-transform: capitalize;
    }



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

       Figma:
       16px
       400
       22px LH
    ================================= */

    .ing-section .ing-description {
      width: 100%;
      max-width: 350px;

      margin: 0 auto;

      color: var(--ing-text-color);

      text-align: var(--ing-text-align-mobile);

      font-family: "Archivo SemiExpanded", Arial, sans-serif;
      font-size: var(--ing-body-size-mobile);
      font-style: normal;
      font-weight: 400;

      line-height: 22px;
    }



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

    .ing-section .ing-slider-area {
      width: calc(
        100vw - var(--ing-mobile-padding-x)
      );

      margin-left: var(--ing-mobile-padding-x);
    }


    .ing-section .ing-track {
      gap: var(--ing-card-gap-mobile);
    }

    .ing-section[data-card-sizing="cards_per_view"] .ing-track {
      width: 100%;
    }

    .ing-section[data-swipe-mobile="false"] .ing-slider {
      overflow-x: hidden;
      touch-action: pan-y;
    }



    /*
      Width from theme customizer is respected,
      but it can never become too large for a
      small mobile device.

      This also keeps a portion of the next
      card visible, like the supplied design.
    */
    .ing-section .ing-slide {
      width: min(
        var(--ing-card-width-mobile),
        calc(100vw - 74px)
      );

      flex: 0 0 min(
        var(--ing-card-width-mobile),
        calc(100vw - 74px)
      );
    }

    .ing-section[data-card-sizing="cards_per_view"] .ing-slide {
      width: var(--ing-card-basis-mobile);
      flex-basis: var(--ing-card-basis-mobile);
    }



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

    .ing-section .ing-slide-inner {
      padding-top: 32px;

      height: calc(
        var(--ing-card-height-mobile) + 32px
      );
    }


    .ing-section .ing-card {
      height: var(--ing-card-height-mobile);
    }


    .ing-section .ing-card-content {
      left: 18px;
      right: 18px;
      bottom: 18px;
    }



    /* ================================
       MOBILE CARD TITLE

       Figma:
       14px
       600
       18px LH
    ================================= */

    .ing-section .ing-card-title {
      margin-bottom: 2px;

      color: var(--ing-text-color);

      font-family: "Archivo SemiExpanded", Arial, sans-serif;
      font-size: var(--ing-card-heading-size-mobile);
      font-style: normal;
      font-weight: 600;

      line-height: 18px;
    }



    /* ================================
       MOBILE CARD TEXT

       Figma:
       14px
       400
       18px LH
    ================================= */

    .ing-section .ing-card-text {
      color: var(--ing-text-color);

      font-family: "Archivo SemiExpanded", Arial, sans-serif;
      font-size: var(--ing-card-text-size-mobile);
      font-style: normal;
      font-weight: 400;

      line-height: 18px;
    }



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

    .ing-section .ing-image-wrap {
      width: var(--image-width-mobile);

      max-width: 48%;
    }


    .ing-section .ing-image-wrap.ing-image--left {
      left: 18px;
    }


    .ing-section .ing-image-wrap.ing-image--right {
      right: 16px;
    }


    .ing-section .ing-image {
      max-height: 108px;
    }



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

    .ing-section .ing-controls {
      padding-top: 16px;
      padding-right: var(--ing-mobile-padding-x);
    }

    .ing-section .ing-controls {
      display: var(--ing-controls-display-mobile, block);
    }

  }
 
    
    .ing-section .ing-arrow {
      width: 40px;
      height: 40px;
      
      flex-basis: 40px;
    }

    .ing-section .ing-arrow.ing-arrow--prev{
      
      left:10px;
    }
    
    .ing-section .ing-arrow.ing-arrow--next{
      right:10px;
    }
    
  }



  /* =========================================================
     SMALL MOBILE
     320–359
  ========================================================= */

  @media screen and (max-width: 359px) {

    .ing-section .ing-heading {
      font-size: 30px;
      line-height: 30px;
    }


    .ing-section .ing-description {
      font-size: 15px;
      line-height: 21px;
    }


    .ing-section .ing-slide {
      width: calc(100vw - 64px);
      flex-basis: calc(100vw - 64px);
    }


    .ing-section .ing-card-content {
      left: 16px;
      right: 16px;
      bottom: 16px;
    }

  }



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

  @media screen and (min-width: 430px) and (max-width: 749px) {

    .ing-section .ing-heading {
      max-width: 390px;
    }


    .ing-section .ing-description {
      max-width: 390px;
    }

  }



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

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

    .ing-section .ing-slider {
      scroll-behavior: auto;
    }

  }
/* END_SECTION:ocoa-landing-ingredients */

/* START_SECTION:ocoa-landing-inside-accordian (INDEX:77) */
.wi-section {
    width: 100%;
    background: var(--wi-bg);
    padding-top: var(--wi-section-pt);
    padding-bottom: var(--wi-section-pb);
  }


  .wi-section * {
    box-sizing: border-box;
  }


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

  .wi-section .wi-section__container {
    width: calc(100% - 80px);
    max-width: var(--wi-max-width);
    margin: 0 auto;
  }


  .wi-section .wi-layout {
    width: 100%;
    display: grid;
    grid-template-columns: 48% 52%;
    overflow: hidden;
    border-radius: var(--wi-radius);
    background: var(--wi-green);
    min-height: 680px;
  }


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

  .wi-section .wi-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 680px;
    overflow: hidden;
  }


  .wi-section .wi-image-wrapper picture {
    display: block;
    width: 100%;
    height: 100%;
  }


  .wi-section .wi-main-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 680px;
    object-fit: cover;
    object-position: center;
  }


  .wi-section .wi-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 680px;
    background: #eeeeee;
  }


  .wi-section .wi-image-placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


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

  .wi-section .wi-content {
    background: var(--wi-green);
    padding: 94px 64px 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }


  /* Main heading exactly based
     on provided typography */

  .wi-section .wi-main-heading {
    margin: 0 0 42px;
    padding: 0;

    color: var(--wi-white);

    font-family: "New Spirit", serif;
    font-size: 54px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -1.08px;
    text-transform: capitalize;
  }


  /* =========================
     ACCORDION
  ========================= */

  .wi-section .wi-accordion {
    width: 100%;
    background: var(--wi-card-bg);
    border-radius: 12px;
    overflow: hidden;
  }


  .wi-section .wi-accordion-item {
    position: relative;
  }


  .wi-section .wi-accordion-item + .wi-accordion-item {
    border-top: 1px solid rgba(44, 82, 54, 0.75);
  }


  .wi-section .wi-accordion-trigger {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;

    margin: 0;
    padding: 23px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    text-align: left;
    cursor: pointer;
  }


  .wi-section .wi-accordion-title {
    color: var(--wi-lush-green);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;

    flex: 1;
  }


  .wi-section .wi-toggle-icons {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

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


  .wi-section .wi-icon-plus,
  .wi-section .wi-icon-close {
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .wi-section .wi-icon-close {
    display: none;
  }


  .wi-section
  .wi-accordion-trigger[aria-expanded="true"]
  .wi-icon-plus {
    display: none;
  }


  .wi-section
  .wi-accordion-trigger[aria-expanded="true"]
  .wi-icon-close {
    display: flex;
  }


  /* =========================
     ACCORDION OPEN CONTENT
  ========================= */

  .wi-section .wi-accordion-panel {
    width: 100%;
  }


  .wi-section .wi-accordion-panel[hidden] {
    display: none;
  }


  .wi-section .wi-accordion-content {
    padding: 0 24px 27px;
  }


  /* Paragraph typography */

  .wi-section .wi-description {
    color: var(--wi-rainforest);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;

    margin-bottom: 22px;
  }


  .wi-section .wi-description p {
    margin: 0;
  }


  .wi-section .wi-description p + p {
    margin-top: 8px;
  }


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

  .wi-section .wi-ingredients {
    display: flex;
    flex-direction: column;
    gap: 13px;
  }


  .wi-section .wi-ingredient {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }


  .wi-section .wi-ingredient-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;

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


  /*
    SVG, PNG or WebP uploaded
    through Shopify image picker
  */

  .wi-section .wi-ingredient-icon img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
  }


  .wi-section .wi-ingredient-text {
    flex: 1;
    min-width: 0;
  }


  /* Icon heading */

  .wi-section .wi-ingredient-heading {
    color: var(--wi-rainforest);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.15px;
  }


  /* Icon subheading */

  .wi-section .wi-ingredient-subheading {
    color: var(--wi-rainforest);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.15px;

    margin-top: 1px;
  }


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

  @media screen and (max-width: 1100px) {

    .wi-section .wi-section__container {
      width: calc(100% - 48px);
    }


    .wi-section .wi-layout {
      grid-template-columns: 46% 54%;
      min-height: 600px;
    }


    .wi-section .wi-image-wrapper,
    .wi-section .wi-main-image,
    .wi-section .wi-image-placeholder {
      min-height: 600px;
    }


    .wi-section .wi-content {
      padding: 70px 40px 55px;
    }


    .wi-section .wi-main-heading {
      font-size: 48px;
      margin-bottom: 34px;
    }

  }


  /* =========================
     MOBILE — 390px reference
  ========================= */

  @media screen and (max-width: 749px) {

    .wi-section {
      padding-top: var(--wi-mobile-pt);
      padding-bottom: var(--wi-mobile-pb);
    }


    .wi-section .wi-section__container {
      width: calc(100% - 32px);
      max-width: none;
    }


    .wi-section .wi-layout {
      display: flex;
      flex-direction: column;
      min-height: 0;
      border-radius: var(--wi-mobile-radius);
    }


    /* Mobile image */

    .wi-section .wi-image-wrapper {
      min-height: 0;
      height: var(--wi-mobile-image-height);
    }


    .wi-section .wi-main-image {
      width: 100%;
      height: var(--wi-mobile-image-height);
      min-height: 0;
      object-fit: cover;
    }


    .wi-section .wi-image-placeholder {
      min-height: 0;
      height: var(--wi-mobile-image-height);
    }


    /* Mobile green content */

    .wi-section .wi-content {
      padding: var(--wi-mobile-content-padding);

      min-height: 0;
    }


    /* Mobile main heading */

    .wi-section .wi-main-heading {
      font-size: 32px;
      line-height: 100%;
      letter-spacing: -0.8px;
      margin-bottom: 28px;
      text-align:center;
    }


    .wi-section .wi-accordion {
      border-radius: 10px;
    }


    .wi-section .wi-accordion-trigger {
      padding: 19px 17px;
      gap: 12px;
    }


    .wi-section .wi-accordion-title {
      font-size: 18px;
      line-height: 24px;
    }


    .wi-section .wi-accordion-content {
      padding: 0 17px 22px;
    }


    .wi-section .wi-description {
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 20px;
    }


    .wi-section .wi-ingredients {
      gap: 14px;
    }


    .wi-section .wi-ingredient {
      gap: 11px;
    }


    .wi-section .wi-ingredient-icon {
      width: 27px;
      min-width: 27px;
      height: 27px;
    }


    .wi-section .wi-ingredient-icon img {
      width: 27px;
      height: 27px;
    }


    .wi-section .wi-ingredient-heading {
      font-size: 18px;
    }


    .wi-section .wi-ingredient-subheading {
      font-size: 14px;
      line-height: 18px;
    }

  }


  /* Very small phones */

  @media screen and (max-width: 360px) {

    .wi-section .wi-section__container {
      width: calc(100% - 24px);
    }


    .wi-section .wi-content {
      padding-left: 16px;
      padding-right: 16px;
    }


    .wi-section .wi-main-heading {
      font-size: 32px;
    }

  }

  .wi-section button:focus-visible,
  .wi-section a:focus-visible {
    outline: 2px solid #008758;
    outline-offset: 2px;
  }



  /* =========================
   SHOP NOW CTA
========================= */

.wi-section .wi-cta-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

.wi-section .wi-cta-button {
  display: flex;
  width: 478px;
  max-width: 100%;
  padding: 20px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;

  background: #F1C400;

  color: #008758;
  text-align: center;
  text-decoration: none;

  font-family: "Archivo SemiExpanded", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;

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

.wi-section .wi-cta-button:hover {
  opacity: 0.9;
}

.wi-section .wi-cta-button:active {
  transform: translateY(1px);
}

.wi-section .wi-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

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

@media screen and (max-width: 749px) {
  .wi-section .wi-cta-wrapper {
    margin-top: 32px;
  }

  .wi-section .wi-cta-button {
    width: 100%;
    padding: 16px 17px;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: 1.5px;
    max-width: 185px;
    margin: 0 auto;
  }
}
/* END_SECTION:ocoa-landing-inside-accordian */

/* START_SECTION:ocoa-landing-linked-card (INDEX:78) */
.ocoa-works {
    width: 100%;
    overflow: hidden;
    background: var(--ocoa-section-bg);
    padding-top: var(--ocoa-padding-top);
    padding-bottom: var(--ocoa-padding-bottom);
  }

  .ocoa-works .ocoa-works__inner {
    width: calc(100% - 80px);
    max-width: 1180px;
    margin: 0 auto;
  }

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

  .ocoa-works .ocoa-works__heading {
    max-width: 760px;
    margin: 0 auto;
    color: var(--ocoa-heading-color);
    text-align: center;
    font-family: "New Spirit", serif;
    font-size: 52px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    letter-spacing: 1px;
    text-transform: capitalize;
  }

  /* =========================
     CARDS AREA
  ========================== */

  .ocoa-works .ocoa-works__cards {
    position: relative;
    display: grid;
    grid-template-columns: 470px 470px;
    justify-content: space-between;
    align-items: start;
    margin-top: 86px;
    min-height: 690px;
  }

  .ocoa-works .ocoa-works__card {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 16px 16px 28px;
    background: var(--ocoa-card-bg);
    border-radius: var(--ocoa-card-radius);
    box-sizing: border-box;
  }

  .ocoa-works .ocoa-works__card--right {
    margin-top: 120px;
  }

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

  .ocoa-works .ocoa-works__image-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: var(--ocoa-image-radius);
    aspect-ratio: 1.305 / 1;
    /* background: rgba(255, 255, 255, 0.25); */
    background: #DECDAD;
  }

  .ocoa-works .ocoa-works__image-wrapper img,
  .ocoa-works .ocoa-works__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ocoa-works .ocoa-works__placeholder {
    background: #e8ddc7;
  }

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

  .ocoa-works .ocoa-works__content {
    padding: 21px 16px 0;
  }

  .ocoa-works .ocoa-works__card-heading {
    margin: 0;
    color: var(--ocoa-card-heading-color);
    font-family: "New Spirit", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    text-transform: capitalize;
  }

  .ocoa-works .ocoa-works__description {
    margin-top: 8px;
    color: var(--ocoa-text-color);
    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  .ocoa-works .ocoa-works__description p {
    margin: 0;
  }

  .ocoa-works .ocoa-works__description p + p {
    margin-top: 10px;
  }

  /* =========================
     DESKTOP CONNECTOR
  ========================== */

  .ocoa-works .ocoa-works__connector--desktop {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 560px;
    pointer-events: none;
    overflow: visible;
  }

  .ocoa-works .ocoa-works__connector-path {
    fill: none;
    stroke: var(--ocoa-connector-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 7 8;
  }

  .ocoa-works .ocoa-works__connector-dot {
    fill: var(--ocoa-connector-color);
  }

  .ocoa-works .ocoa-works__connector--mobile {
    display: none;
  }

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

  @media screen and (max-width: 1100px) {
    .ocoa-works .ocoa-works__cards {
      grid-template-columns: minmax(0, 430px) minmax(0, 430px);
      column-gap: 100px;
    }
  }

  @media screen and (max-width: 900px) {
    .ocoa-works .ocoa-works__inner {
      width: calc(100% - 48px);
    }

    .ocoa-works .ocoa-works__heading {
      font-size: 44px;
      line-height: 46px;
    }

    .ocoa-works .ocoa-works__cards {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 60px;
    }

    .ocoa-works .ocoa-works__connector--desktop {
      opacity: 0.8;
    }
  }

  /* =========================
     MOBILE - 390PX REFERENCE
  ========================== */

  @media screen and (max-width: 749px) {
    .ocoa-works {
      padding-top: var(--ocoa-mobile-padding-top);
      padding-bottom: var(--ocoa-mobile-padding-bottom);
    }

    .ocoa-works .ocoa-works__inner {
      width: calc(100% - 32px);
      max-width: none;
    }

    .ocoa-works .ocoa-works__heading {
      max-width: 350px;
      font-size: 32px;
      font-style: normal;
      line-height: 32px;
      letter-spacing: 1px;
      text-transform: capitalize;
    }

    .ocoa-works .ocoa-works__cards {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 0;
      margin-top: 20px;
    }

    .ocoa-works .ocoa-works__card {
      width: 100%;
      padding: 10px 10px 22px;
      border-radius: var(--ocoa-card-radius);
    }

    .ocoa-works .ocoa-works__card--right {
      margin-top: 0;
    }

    .ocoa-works .ocoa-works__image-wrapper {
      aspect-ratio: 1.31 / 1;
    }

    .ocoa-works .ocoa-works__content {
      padding: 17px 10px 0;
    }

    .ocoa-works .ocoa-works__card-heading {
      font-size: 24px;
      line-height: 30px;
    }

    .ocoa-works .ocoa-works__description {
      margin-top: 6px;
      font-size: 16px;
      line-height: 22px;
    }

    .ocoa-works .ocoa-works__connector--desktop {
      display: none;
    }

    .ocoa-works .ocoa-works__connector--mobile {
      position: relative;
      display: block;
      width: 82px;
      height: 26px;
      margin: 0 auto;
      overflow: visible;
      flex: 0 0 26px;
    }
  }

  @media screen and (max-width: 390px) {
    .ocoa-works .ocoa-works__inner {
      width: calc(100% - 32px);
    }
  }

  .ocoa-works a:focus-visible,
  .ocoa-works button:focus-visible {
    outline: 2px solid #008758;
    outline-offset: 2px;
  }



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

@media screen and (min-width: 750px) {

  /* Card base animation */
  .ocoa-works .ocoa-works__card {
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  /* Lift card on hover */
  .ocoa-works .ocoa-works__card:hover {
    transform: translateY(-10px);
    box-shadow:
      0 20px 45px rgba(44, 82, 54, 0.12),
      0 6px 15px rgba(44, 82, 54, 0.06);
  }

  /* Image */
  .ocoa-works .ocoa-works__image-wrapper img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  /* Gentle image zoom */
  .ocoa-works .ocoa-works__card:hover .ocoa-works__image-wrapper img {
    transform: scale(1.045);
  }

  /* Heading */
  .ocoa-works .ocoa-works__card-heading {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ocoa-works .ocoa-works__card:hover .ocoa-works__card-heading {
    transform: translateX(5px);
  }

  /* Description */
  .ocoa-works .ocoa-works__description {
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.4s ease;
  }

  .ocoa-works .ocoa-works__card:hover .ocoa-works__description {
    transform: translateY(-2px);
  }

  /* Animate dotted connector */
  .ocoa-works .ocoa-works__connector-path {
    transition: stroke-dashoffset 0.6s ease;
  }

  .ocoa-works .ocoa-works__cards:hover .ocoa-works__connector-path {
    animation: ocoaConnectorMove 1.2s linear infinite;
  }

  /* Connector dots */
  .ocoa-works .ocoa-works__connector-dot {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.35s ease;
  }

  .ocoa-works .ocoa-works__cards:hover .ocoa-works__connector-dot {
    transform: scale(1.25);
  }
}

@keyframes ocoaConnectorMove {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -30;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .ocoa-works .ocoa-works__card,
  .ocoa-works .ocoa-works__image-wrapper img,
  .ocoa-works .ocoa-works__card-heading,
  .ocoa-works .ocoa-works__description,
  .ocoa-works .ocoa-works__connector-path,
  .ocoa-works .ocoa-works__connector-dot {
    transition: none !important;
    animation: none !important;
  }
}
/* END_SECTION:ocoa-landing-linked-card */

/* START_SECTION:ocoa-landing-pd-card (INDEX:80) */
.section-shop-the-range {
  margin: 0;
}
.shop-range {
  width: 100%;
  overflow: hidden;
  background: var(--sr-bg);
}
.shop-range *,
.shop-range *::before,
.shop-range *::after {
  box-sizing: border-box;
}
.shop-range .shop-range__inner {
  width: 100%;
  padding: var(--sr-pt-d) var(--sr-px-d) var(--sr-pb-d);
}
.shop-range .shop-range__header {
  display: flex;
  flex-direction: column;
  gap: var(--sr-header-gap);
  margin: 0 auto var(--sr-section-gap-d);
  padding: 0 20px;
}
.shop-range.shop-range--align-left .shop-range__header { align-items: flex-start; text-align: left; }
.shop-range.shop-range--align-center .shop-range__header { align-items: center; text-align: center; }
.shop-range.shop-range--align-right .shop-range__header { align-items: flex-end; text-align: right; }
.shop-range .shop-range__heading {
  margin: 0;
  color: var(--sr-green);
  text-align: inherit;
  font-family: "New Spirit", Georgia, serif;
  font-size: var(--sr-heading-d);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: capitalize;
}
.shop-range .shop-range__subheading {
  max-width: 680px;
  margin: 0;
  color: var(--sr-rainforest);
  text-align: inherit;
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}


.shop-range .shop-range__top-heading {
  margin: 0;
  color: #2C5236;
  text-align: inherit;
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.shop-range .shop-range__bottom-heading {
  margin: 0;
  color: #2C5236;
  text-align: inherit;
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}


.shop-range .shop-range__slider-wrap {
  position: relative;
  width: 100%;
}
.shop-range .shop-range__slider {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--sr-gap-d);
  width: 100%;
  max-width: 1308px;
  margin: 0 auto;
  padding: 0 0 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  list-style: none;
}
.shop-range.shop-range--layout-full .shop-range__slider { max-width: none; }
.shop-range .shop-range__slider::-webkit-scrollbar { display: none; }
.shop-range .shop-range-card {
  display: flex;
  flex: 0 0 var(--sr-card-basis-desktop);
  flex-direction: column;
  width: var(--sr-card-basis-desktop);
  max-width: none;
  min-width: 0;
  scroll-snap-align: start;
  padding: 8px 8px 12px;
  background: var(--sr-card-bg);
  border: 1px solid var(--sr-card-border);
  border-radius: 2px;
  box-shadow: 0 4px 11.4px rgba(164, 164, 164, 0.08);
}
.shop-range .shop-range-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 268px;
  padding: 18px;
  overflow: hidden;
  background: #ffffff;
  text-decoration: none;
}
.shop-range .shop-range-card__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}
@media (hover: hover) {
  .shop-range .shop-range-card:hover .shop-range-card__image {
    transform: scale(1.025);
  }
}

.shop-range .shop-range__inner .shop-range-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 13px;
  border-radius: 100px;
  background: var(--sr-badge-bg);
  color: var(--sr-badge-text);
  text-align: center;
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}


.shop-range .shop-range-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  padding-top: 10px;
}
.shop-range .shop-range-card__promo {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-bottom: 8px;
  padding: 2px 7px;
  background: var(--sr-yellow);
  color: var(--sr-rainforest);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}
.shop-range .shop-range-card__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-bottom: 3px;
}
.shop-range .shop-range-stars {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 75px;
  height: 14px;
  line-height: 0;
  overflow: hidden;
}
.shop-range .shop-range-stars__row {
  display: flex;
  align-items: center;
  width: 75px;
  height: 14px;
  white-space: nowrap;
}
.shop-range .shop-range-stars__row svg {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 14px;
}
.shop-range .shop-range-stars__row--empty {
  color: rgba(44, 82, 54, 0.22);
}
.shop-range .shop-range-stars__row--fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rating-width);
  overflow: hidden;
  color: var(--sr-yellow);
}
.shop-range .shop-range-card__rating-text {
  color: var(--sr-rainforest);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}
.shop-range .shop-range-card__title {
  margin: 0 0 5px;
  color: var(--sr-green);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.shop-range .shop-range-card__title a {
  color: inherit;
  text-decoration: none;
}
.shop-range .shop-range-card__title a:hover {
  text-decoration: underline;
}
.shop-range .shop-range-card__description {
  margin: 0 0 8px;
  color: var(--sr-rainforest);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
.shop-range .shop-range-card__form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: auto;
  padding: 0;
}
.shop-range .shop-range-card__variants {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
}
.shop-range .shop-range-card__variant {
  flex: 1 1 0;
  min-width: 0;
  padding: 1px 10px;
  border: 1px solid var(--sr-green);
  border-radius: 0;
  background: transparent;
  color: var(--sr-rainforest);
  text-align: inherit;
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
}
.shop-range .shop-range-card__variant:hover:not(:disabled):not(.is-active) {
  background: rgba(241, 196, 0, 0.15);
}
.shop-range .shop-range-card__variant.is-active {
  background: var(--sr-yellow);
  border-color: var(--sr-yellow);
}
.shop-range .shop-range-card__variant.is-sold-out {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}
.shop-range .shop-range-card__variant-select-wrap {
  width: 100%;
  margin-bottom: 8px;
}
.shop-range .shop-range-card__variant-select {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid rgba(44, 82, 54, 0.4);
  border-radius: 0;
  background: #fff;
  color: var(--sr-rainforest);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.shop-range .shop-range-card__purchase-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}
.shop-range .shop-range-card__purchase-toggle {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--sr-green);
  border-radius: 42px;
  background: transparent;
}
.shop-range .shop-range-card__purchase-btn {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  padding: 8px 6px;
  border: 0;
  border-radius: 500px;
  background: transparent;
  color: var(--sr-rainforest);
  text-align: center;
  font-family: "New Spirit", Georgia, serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    font-weight 0.15s ease;
}
.shop-range .shop-range-card__purchase-btn.is-active {
  background: var(--sr-green);
  color: #FFFFFF;
  font-weight: 600;
}
.shop-range .shop-range-card__purchase-toggle.is-one-time-only {
  gap: 0;
}
.shop-range .shop-range-card__purchase-toggle.is-one-time-only .shop-range-card__purchase-btn--one {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
}
.shop-range .shop-range-card__purchase-static {
  display: none !important;
}
.shop-range .is-hidden {
  display: none !important;
}
.shop-range .shop-range-card__atc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--sr-yellow);
  border-radius: 0;
  background: var(--sr-yellow);
  color: var(--sr-green);
  text-align: center;
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
}
.shop-range .shop-range-card__atc:hover:not(:disabled) {
  background: var(--sr-yellow);
  border-color: var(--sr-yellow);
  opacity: 0.92;
}
.shop-range .shop-range-card__atc:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.shop-range .shop-range-card__atc-dot {
  opacity: 0.7;
}
.shop-range .shop-range__empty {
  text-align: center;
  color: var(--sr-rainforest);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
}
@media screen and (min-width: 750px) and (max-width: 1239px) {
  .shop-range .shop-range__nav { display: none; }
  .shop-range .shop-range__slider { flex-wrap: wrap; gap: var(--sr-gap-t); overflow-x: visible; scroll-snap-type: none; }
  .shop-range .shop-range-card { flex: 0 0 var(--sr-card-basis-tablet); width: var(--sr-card-basis-tablet); max-width: none; }
}
@media screen and (max-width: 749px) {
  .shop-range .shop-range__inner {
    padding: var(--sr-pt-m) 0 var(--sr-pb-m);
  }
  .shop-range .shop-range__header {
    margin-bottom: var(--sr-section-gap-m);
    padding: 0 var(--sr-px-m);
  }
  .shop-range .shop-range__heading {
    font-size: var(--sr-heading-m);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
  }
  .shop-range .shop-range__subheading {
    font-size: 14px;
    line-height: 18px;
  }
  .shop-range .shop-range__slider {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--sr-gap-m);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--sr-px-m) 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--sr-px-m);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .shop-range .shop-range__slider::-webkit-scrollbar {
    display: none;
  }
  .shop-range .shop-range-card {
    flex: 0 0 min(var(--sr-mobile-width), var(--sr-mobile-basis));
    width: min(var(--sr-mobile-width), var(--sr-mobile-basis));
    min-width: min(var(--sr-mobile-width), var(--sr-mobile-basis));
    max-width: min(var(--sr-mobile-width), var(--sr-mobile-basis));
    padding: 7px 7px 10px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .shop-range .shop-range-card__media {
    height: 210px;
    padding: 14px;
  }
  .shop-range .shop-range-card__badge {
    padding: 1px 9px;
    font-size: 10px;
    line-height: 14px;
  }
  .shop-range .shop-range-card__body {
    padding-top: 8px;
  }
  .shop-range .shop-range-card__promo {
    margin-bottom: 6px;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 14px;
  }
  .shop-range .shop-range-card__rating {
    gap: 4px;
    margin-bottom: 2px;
  }
  .shop-range .shop-range-stars {
    font-size: 10px;
    line-height: 10px;
  }
  .shop-range .shop-range-card__rating-text {
    font-size: 14px;
    line-height: 12px;
  }
  .shop-range .shop-range-card__title {
    margin-bottom: 3px;
    font-size: 18px;
    line-height: 18px;
    padding: 5px 0;
  }
  .shop-range .shop-range-card__description {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 15px;
  }
  .shop-range .shop-range-card__variants {
    gap: 5px;
    margin-bottom: 6px;
  }
  .shop-range .shop-range-card__variant {
    padding: 1px 5px;
    font-size: 11px;
    line-height: 15px;
  }
  .shop-range .shop-range-card__variant-select {
    min-height: 30px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 16px;
  }
  .shop-range .shop-range-card__purchase-wrap {
    margin-bottom: 8px;
  }
  .shop-range .shop-range-card__purchase-toggle {
    padding: 2px;
    gap: 2px;
  }
  .shop-range .shop-range-card__purchase-btn {
    min-height: 30px;
    padding: 6px 4px;
    font-size: 11px;
    line-height: 14px;
  }
  .shop-range .shop-range-card__purchase-static {
    min-height: 30px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 16px;
  }
  .shop-range .shop-range-card__atc {
    min-height: 38px;
    gap: 4px;
    padding: 7px 6px;
    font-size: 13px;
    line-height: 18px;
  }



  .shop-range .shop-range__top-heading {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: normal;
  text-transform: none;
}

.shop-range .shop-range__bottom-heading {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
}
@media screen and (max-width: 360px) {
  .shop-range {
    --sr-mobile-width: 235px !important;
  }
  .shop-range .shop-range-card__media {
    height: 195px;
  }
}
.shop-range .shop-range__nav { pointer-events: none; position: absolute; inset: 50% 0 auto; z-index: 2; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 8px; }
.shop-range .shop-range__arrow { pointer-events: auto; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--sr-green); border-radius: 999px; background: var(--sr-bg); color: var(--sr-green); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.shop-range .shop-range__arrow:disabled { opacity: .35; cursor: default; }
.shop-range .shop-range__cta-wrap { display: flex; margin-top: var(--sr-section-gap-d); }
.shop-range.shop-range--align-left .shop-range__cta-wrap { justify-content: flex-start; }
.shop-range.shop-range--align-center .shop-range__cta-wrap { justify-content: center; }
.shop-range.shop-range--align-right .shop-range__cta-wrap { justify-content: flex-end; }
.shop-range .shop-range__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; font-family: "Archivo SemiExpanded", Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 20px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; }
.shop-range .shop-range__cta--primary { border: 1px solid var(--sr-yellow); background: var(--sr-yellow); color: var(--sr-green); }
.shop-range .shop-range__cta--secondary { border: 1px solid var(--sr-green); background: transparent; color: var(--sr-green); }
.shop-range .shop-range__cta--link { min-height: 0; padding: 4px 0; border: 0; background: transparent; color: var(--sr-green); text-decoration: underline; }
@media screen and (min-width: 1240px) { .shop-range .shop-range__nav--hide-desktop { display: none; } }
@media screen and (min-width: 750px) and (max-width: 1239px) { .shop-range .shop-range__nav { display: none; } }
@media screen and (max-width: 749px) { .shop-range .shop-range__nav--hide-mobile { display: none; } .shop-range .shop-range__cta-wrap { margin-top: var(--sr-section-gap-m); padding: 0 var(--sr-px-m); } }
.shop-range[data-drag="false"] .shop-range__slider { touch-action: pan-y; }
.shop-range button:focus-visible,
.shop-range select:focus-visible,
.shop-range a:focus-visible {
  outline: 2px solid var(--sr-green);
  outline-offset: 2px;
}




.shop-range .shop-range__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 14px;
}

.shop-range .shop-range__pagination[hidden] {
  display: none !important;
}

.shop-range .shop-range__pagination-dot {
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #D9D9D9;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.shop-range .shop-range__pagination-dot.is-active {
  background: var(--sr-yellow);
}

@media screen and (max-width: 749px) {
  .shop-range .shop-range__pagination {
    margin-top: 12px;
  }

  .shop-range .shop-range__pagination-dot {
    width: 9px;
    height: 9px;
  }
}
/* END_SECTION:ocoa-landing-pd-card */

/* START_SECTION:ocoa-landing-review-slider (INDEX:83) */
/* =========================================================
     OCOA CUSTOMER REVIEW SLIDER
     Scoped to this section
     ========================================================= */

  .ocoa-reviews-slider {
    --ocoa-green: #008758;
    --ocoa-rainforest: #2C5236;
    --ocoa-yellow: #F1C400;
    --ocoa-cream: #F8EDD9;
    --ocoa-white: #FFFFFF;

    width: 100%;
    overflow: hidden;
    background: var(--reviews-section-bg);
    padding-top: var(--reviews-padding-top);
    padding-bottom: var(--reviews-padding-bottom);
  }

  .ocoa-reviews-slider *,
  .ocoa-reviews-slider *::before,
  .ocoa-reviews-slider *::after {
    box-sizing: border-box;
  }


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

  .ocoa-reviews-slider .ocoa-reviews-slider__inner {
    width: min(calc(100% - 58px), 1382px);
    margin: 0 auto;
  }


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

  .ocoa-reviews-slider .ocoa-reviews-slider__header {
    text-align: center;
    margin-bottom: 30px;
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    color: var(--ocoa-green);
    text-align: center;

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: capitalize;

    margin-bottom: 6px;
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__top-stars {
    display: inline-block;

    color: var(--ocoa-yellow);
    font-size: 19px;
    line-height: 20px;
    letter-spacing: 0;
    white-space: nowrap;
    display:flex;
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__eyebrow-text {
    color: var(--ocoa-green);
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__heading {
    margin: 0;
    
    color: var(--ocoa-green);
    text-align: center;
    
    font-family: "New Spirit", Georgia, serif;
    font-size: 52px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    letter-spacing: 1px;
    text-transform: capitalize;
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__heading.mbl {
    display:none;
  }

  /* =========================================================
     SLIDER WRAPPER
     ========================================================= */

  .ocoa-reviews-slider .ocoa-reviews-slider__slider {
    position: relative;
    width: 100%;
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__viewport::-webkit-scrollbar {
    display: none;
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__track {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: max-content;
  }


  /* =========================================================
     REVIEW CARD
     Desktop:
     approximately 3 full cards + partial next card
     ========================================================= */

  .ocoa-reviews-slider .ocoa-review-card {
    flex: 0 0 calc((min(100vw - 58px, 1382px) - 48px) / 3.18);

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 24px;

    background: var(--reviews-card-bg);
    border-radius: 10px;

    text-align: left;

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }


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

  .ocoa-reviews-slider .ocoa-review-card__image-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: #e8e8e8;
    margin-bottom: 17px;
  }

  .ocoa-reviews-slider .ocoa-review-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .ocoa-reviews-slider .ocoa-review-card__image-placeholder,
  .ocoa-reviews-slider .ocoa-review-card__image-placeholder svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ocoa-reviews-slider .ocoa-review-card__image-placeholder svg {
    object-fit: cover;
  }


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

  .ocoa-reviews-slider .ocoa-review-card__rating {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 16px;

    font-family: "Archivo SemiExpanded", sans-serif;
  }

  .ocoa-reviews-slider .ocoa-review-card__stars {
    color: var(--ocoa-yellow);
    font-size: 17px;
    line-height: 18px;
    letter-spacing: 0;
    white-space: nowrap;
    display: flex;
  }


  .ocoa-reviews-slider .ocoa-review-card__rating-number {
    color: var(--ocoa-rainforest);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
  }


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

  .ocoa-reviews-slider .ocoa-review-card__review {
    flex: 1 1 auto;

    color: var(--ocoa-rainforest);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  .ocoa-reviews-slider .ocoa-review-card__review p {
    margin: 0;
    padding: 0;
  }

  .ocoa-reviews-slider .ocoa-review-card__review p + p {
    margin-top: 12px;
  }

  .ocoa-reviews-slider .ocoa-review-card__read-more {
    color: var(--ocoa-rainforest);
    font: inherit;
    font-weight: 600;

    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }


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

  .ocoa-reviews-slider .ocoa-review-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;

    width: 100%;

    margin-top: 28px;
  }

  .ocoa-reviews-slider .ocoa-review-card__footer-left,
  .ocoa-reviews-slider .ocoa-review-card__footer-right {
    min-width: 0;
  }

  .ocoa-reviews-slider .ocoa-review-card__footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }


  /* Customer name */

  .ocoa-reviews-slider .ocoa-review-card__name {
    color: var(--ocoa-green);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
  }


  /* Customer area */

  .ocoa-reviews-slider .ocoa-review-card__area {
    color: var(--ocoa-rainforest);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
  }


  /* Verified Buyer */

  .ocoa-reviews-slider .ocoa-review-card__verified {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;

    color: var(--ocoa-green);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;

    white-space: nowrap;
  }

  .ocoa-reviews-slider .ocoa-review-card__verified-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 13px;
    height: 13px;
    flex: 0 0 13px;

    border-radius: 50%;
    background: var(--ocoa-green);
  }

  .ocoa-reviews-slider .ocoa-review-card__verified-icon svg {
    display: block;
    width: 5px;
    height: 4px;
  }


  /* Date */

  .ocoa-reviews-slider .ocoa-review-card__date {
    color: var(--ocoa-rainforest);

    font-family: "Archivo SemiExpanded", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;

    text-align: right;
  }


  /* =========================================================
     SLIDER ARROWS
     ========================================================= */

  .ocoa-reviews-slider .ocoa-reviews-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 10;

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

    width: 52px;
    height: 52px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 50%;

    background: var(--ocoa-yellow);
    color: var(--ocoa-green);

    cursor: pointer;

    transform: translateY(-50%);

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

  .ocoa-reviews-slider .ocoa-reviews-slider__arrow:hover {
    transform: translateY(-50%) scale(1.06);
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__arrow:active {
    transform: translateY(-50%) scale(0.95);
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__arrow:focus-visible {
    outline: 2px solid #008758;
    outline-offset: 2px;
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__arrow svg {
    display: block;
    width: 24px;
    height: 24px;
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__arrow--prev {
    left: -23px;
  }

  .ocoa-reviews-slider .ocoa-reviews-slider__arrow--next {
    right: -23px;
  }


  /* =========================================================
     PAGINATION DOTS
     Hidden on desktop
     ========================================================= */

  .ocoa-reviews-slider .ocoa-reviews-slider__dots {
    display: none;
  }


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

  @media screen and (max-width: 989px) {

    .ocoa-reviews-slider .ocoa-reviews-slider__inner {
      width: calc(100% - 40px);
    }

    .ocoa-reviews-slider .ocoa-review-card {
      flex-basis: calc((100vw - 40px - 20px) / 2.2);
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__track {
      gap: 20px;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__arrow--prev {
      left: -16px;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__arrow--next {
      right: -16px;
    }

  }


  /* =========================================================
     MOBILE — 390px DESIGN
     ========================================================= */

  @media screen and (max-width: 749px) {

    .ocoa-reviews-slider {
      padding-top: var(--reviews-mobile-padding-top);
      padding-bottom: var(--reviews-mobile-padding-bottom);
    }


    /* Container */

    .ocoa-reviews-slider .ocoa-reviews-slider__inner {
      width: 100%;
    }


    /* Header */

    .ocoa-reviews-slider .ocoa-reviews-slider__header {
      width: calc(100% - 32px);
      margin: 0 auto 32px;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__eyebrow {
      display: flex;
      flex-direction: column;
      gap: 1px;

      color: var(--ocoa-green);
      text-align: center;

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;

      letter-spacing: 0;
      text-transform: none;

      margin-bottom: 4px;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__top-stars {
      font-size: 18px;
      line-height: 19px;
      letter-spacing: 0;
    }
    
    .ocoa-reviews-slider .ocoa-reviews-slider__top-stars  svg{
      width:24px;
      height:auto;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__eyebrow-text {
        font-size: 16px;
        line-height: 13px;
        padding-bottom: 12px;
        padding-top: 6px;
        text-wrap:nowrap;
    }


    /* Mobile heading */

    .ocoa-reviews-slider .ocoa-reviews-slider__heading {
      max-width: 330px;
      margin: 0 auto;

      color: var(--ocoa-green);
      text-align: center;

      font-family: "New Spirit", Georgia, serif;
      font-size: 32px;
      font-style: normal;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 1px;
      text-transform: capitalize;
    }

     .ocoa-reviews-slider .ocoa-reviews-slider__heading.mbl {
      display:block;
    }
     .ocoa-reviews-slider .ocoa-reviews-slider__heading.desk {
      display:none;
    }



    /* Slider viewport */

    .ocoa-reviews-slider .ocoa-reviews-slider__viewport {
      width: 100%;
      padding-left: 16px;
      padding-right: 0;

      scroll-padding-left: 16px;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__track {
      gap: 12px;
      padding-right: 16px;
    }


    /* Mobile card */

    .ocoa-reviews-slider .ocoa-review-card {
      flex: 0 0 72vw;
      max-width: 280px;

      padding: 12px;

      border-radius: 8px;
    }


    /* Image */

    .ocoa-reviews-slider .ocoa-review-card__image-wrap {
      margin-bottom: 10px;
      border-radius: 5px;
    }


    /* Rating */

    .ocoa-reviews-slider .ocoa-review-card__rating {
      gap: 5px;
      margin-bottom: 9px;
    }

    .ocoa-reviews-slider .ocoa-review-card__stars {
      font-size: 12px;
      line-height: 14px;
      letter-spacing: -0.3px;
    }

    .ocoa-reviews-slider .ocoa-review-card__rating-number {
      font-size: 10px;
      line-height: 12px;
    }


    /* Card paragraph */

    .ocoa-reviews-slider .ocoa-review-card__review {
      color: var(--ocoa-rainforest);

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 18px;
    }


    /* Footer */

    .ocoa-reviews-slider .ocoa-review-card__footer {
      gap: 7px;
      margin-top: 18px;
    }


    /* Customer name */

    .ocoa-reviews-slider .ocoa-review-card__name {
      color: var(--ocoa-green);

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: 18px;
    }


    /* Area */

    .ocoa-reviews-slider .ocoa-review-card__area {
      color: var(--ocoa-rainforest);

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 18px;
    }


    /* Verified buyer */

    .ocoa-reviews-slider .ocoa-review-card__verified {
      gap: 3px;

      color: var(--ocoa-green);

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 11.25px;
    }

    .ocoa-reviews-slider .ocoa-review-card__verified-icon {
      width: 11px;
      height: 11px;
      flex-basis: 11px;
    }


    /* Date */

    .ocoa-reviews-slider .ocoa-review-card__date {
      color: var(--ocoa-rainforest);

      font-family: "Archivo SemiExpanded", sans-serif;
      font-size: 10px;
      font-style: normal;
      font-weight: 400;
      line-height: 12px;
    }


    /* Arrows */

    .ocoa-reviews-slider .ocoa-reviews-slider__arrow {
      top: 112px;

      width: 42px;
      height: 42px;

      transform: none;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__arrow:hover {
      transform: scale(1.04);
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__arrow:active {
      transform: scale(0.94);
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__arrow svg {
      width: 19px;
      height: 19px;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__arrow--prev {
      left: 7px;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__arrow--next {
      right: 7px;
    }


    /* Dots */

    .ocoa-reviews-slider .ocoa-reviews-slider__dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;

      margin-top: 14px;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__dot {
      display: block;

      width: 7px;
      height: 7px;

      padding: 0;
      margin: 0;

      border: 0;
      border-radius: 50%;

      background: #D9D9D9;

      cursor: pointer;

      transition:
        background 0.2s ease,
        transform 0.2s ease;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__dot.is-active {
      background: var(--ocoa-yellow);
    }

  }


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

  @media screen and (max-width: 420px) {

    .ocoa-reviews-slider .ocoa-review-card {
      flex-basis: 70vw;
    }

  }


  @media screen and (max-width: 370px) {

    .ocoa-reviews-slider .ocoa-review-card {
      flex-basis: 72vw;
    }

    .ocoa-reviews-slider .ocoa-reviews-slider__heading {
      font-size: 30px;
      line-height: 30px;
    }

  }


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

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

    .ocoa-reviews-slider .ocoa-reviews-slider__viewport {
      scroll-behavior: auto;
    }

  }
/* END_SECTION:ocoa-landing-review-slider */

/* START_SECTION:ocoa-landing-test (INDEX:84) */
.section-shop-the-range {
  margin: 0;
}
.shop-range {
  width: 100%;
  overflow: hidden;
  background: var(--sr-bg);
}
.shop-range *,
.shop-range *::before,
.shop-range *::after {
  box-sizing: border-box;
}
.shop-range .shop-range__inner {
  width: 100%;
  padding: var(--sr-pt-d) var(--sr-px-d) var(--sr-pb-d);
}
.shop-range .shop-range__header {
  display: flex;
  flex-direction: column;
  gap: var(--sr-header-gap);
  margin: 0 auto var(--sr-section-gap-d);
  padding: 0 20px;
}
.shop-range.shop-range--align-left .shop-range__header { align-items: flex-start; text-align: left; }
.shop-range.shop-range--align-center .shop-range__header { align-items: center; text-align: center; }
.shop-range.shop-range--align-right .shop-range__header { align-items: flex-end; text-align: right; }
.shop-range .shop-range__heading {
  margin: 0;
  color: var(--sr-green);
  text-align: inherit;
  font-family: "New Spirit", Georgia, serif;
  font-size: var(--sr-heading-d);
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: capitalize;
}
.shop-range .shop-range__subheading {
  max-width: 680px;
  margin: 0;
  color: var(--sr-rainforest);
  text-align: inherit;
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
.shop-range .shop-range__slider-wrap {
  position: relative;
  width: 100%;
}
.shop-range .shop-range__slider {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--sr-gap-d);
  width: 100%;
  max-width: 1308px;
  margin: 0 auto;
  padding: 0 0 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  list-style: none;
}
.shop-range.shop-range--layout-full .shop-range__slider { max-width: none; }
.shop-range .shop-range__slider::-webkit-scrollbar { display: none; }
.shop-range .shop-range-card {
  display: flex;
  flex: 0 0 var(--sr-card-basis-desktop);
  flex-direction: column;
  width: var(--sr-card-basis-desktop);
  max-width: none;
  min-width: 0;
  scroll-snap-align: start;
  padding: 8px 8px 12px;
  background: var(--sr-card-bg);
  border: 1px solid var(--sr-card-border);
  border-radius: 2px;
  box-shadow: 0 4px 11.4px rgba(164, 164, 164, 0.08);
}
.shop-range .shop-range-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 268px;
  padding: 18px;
  overflow: hidden;
  background: #ffffff;
  text-decoration: none;
}
.shop-range .shop-range-card__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}
@media (hover: hover) {
  .shop-range .shop-range-card:hover .shop-range-card__image {
    transform: scale(1.025);
  }
}
.shop-range .shop-range-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 13px;
  border-radius: 100px;
  background: var(--sr-green);
  color: #F8EDD9;
  text-align: center;
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}
.shop-range .shop-range-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  padding-top: 10px;
}
.shop-range .shop-range-card__promo {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-bottom: 8px;
  padding: 2px 7px;
  background: var(--sr-yellow);
  color: var(--sr-rainforest);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}
.shop-range .shop-range-card__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-bottom: 3px;
}
.shop-range .shop-range-stars {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 75px;
  height: 14px;
  line-height: 0;
  overflow: hidden;
}
.shop-range .shop-range-stars__row {
  display: flex;
  align-items: center;
  width: 75px;
  height: 14px;
  white-space: nowrap;
}
.shop-range .shop-range-stars__row svg {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 14px;
}
.shop-range .shop-range-stars__row--empty {
  color: rgba(44, 82, 54, 0.22);
}
.shop-range .shop-range-stars__row--fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rating-width);
  overflow: hidden;
  color: var(--sr-yellow);
}
.shop-range .shop-range-card__rating-text {
  color: var(--sr-rainforest);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}
.shop-range .shop-range-card__title {
  margin: 0 0 5px;
  color: var(--sr-green);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.shop-range .shop-range-card__title a {
  color: inherit;
  text-decoration: none;
}
.shop-range .shop-range-card__title a:hover {
  text-decoration: underline;
}
.shop-range .shop-range-card__description {
  margin: 0 0 8px;
  color: var(--sr-rainforest);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
.shop-range .shop-range-card__form {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: auto;
  padding: 0;
}
.shop-range .shop-range-card__variants {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
}
.shop-range .shop-range-card__variant {
  flex: 1 1 0;
  min-width: 0;
  padding: 1px 10px;
  border: 1px solid var(--sr-green);
  border-radius: 0;
  background: transparent;
  color: var(--sr-rainforest);
  text-align: inherit;
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  cursor: pointer;
}
.shop-range .shop-range-card__variant:hover:not(:disabled):not(.is-active) {
  background: rgba(241, 196, 0, 0.15);
}
.shop-range .shop-range-card__variant.is-active {
  background: var(--sr-yellow);
  border-color: var(--sr-yellow);
}
.shop-range .shop-range-card__variant.is-sold-out {
  opacity: 0.4;
  text-decoration: line-through;
  cursor: not-allowed;
}
.shop-range .shop-range-card__variant-select-wrap {
  width: 100%;
  margin-bottom: 8px;
}
.shop-range .shop-range-card__variant-select {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid rgba(44, 82, 54, 0.4);
  border-radius: 0;
  background: #fff;
  color: var(--sr-rainforest);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.shop-range .shop-range-card__purchase-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}
.shop-range .shop-range-card__purchase-toggle {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--sr-green);
  border-radius: 42px;
  background: transparent;
}
.shop-range .shop-range-card__purchase-btn {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  padding: 8px 6px;
  border: 0;
  border-radius: 500px;
  background: transparent;
  color: var(--sr-rainforest);
  text-align: center;
  font-family: "New Spirit", Georgia, serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    font-weight 0.15s ease;
}
.shop-range .shop-range-card__purchase-btn.is-active {
  background: var(--sr-green);
  color: #FFFFFF;
  font-weight: 600;
}
.shop-range .shop-range-card__purchase-toggle.is-one-time-only {
  gap: 0;
}
.shop-range .shop-range-card__purchase-toggle.is-one-time-only .shop-range-card__purchase-btn--one {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
}
.shop-range .shop-range-card__purchase-static {
  display: none !important;
}
.shop-range .is-hidden {
  display: none !important;
}
.shop-range .shop-range-card__atc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--sr-yellow);
  border-radius: 0;
  background: var(--sr-yellow);
  color: var(--sr-green);
  text-align: center;
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
}
.shop-range .shop-range-card__atc:hover:not(:disabled) {
  background: var(--sr-yellow);
  border-color: var(--sr-yellow);
  opacity: 0.92;
}
.shop-range .shop-range-card__atc:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.shop-range .shop-range-card__atc-dot {
  opacity: 0.7;
}
.shop-range .shop-range__empty {
  text-align: center;
  color: var(--sr-rainforest);
  font-family: "Archivo SemiExpanded", Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
}
@media screen and (min-width: 750px) and (max-width: 1239px) {
  .shop-range .shop-range__nav { display: none; }
  .shop-range .shop-range__slider { flex-wrap: wrap; gap: var(--sr-gap-t); overflow-x: visible; scroll-snap-type: none; }
  .shop-range .shop-range-card { flex: 0 0 var(--sr-card-basis-tablet); width: var(--sr-card-basis-tablet); max-width: none; }
}
@media screen and (max-width: 749px) {
  .shop-range .shop-range__inner {
    padding: var(--sr-pt-m) 0 var(--sr-pb-m);
  }
  .shop-range .shop-range__header {
    margin-bottom: var(--sr-section-gap-m);
    padding: 0 var(--sr-px-m);
  }
  .shop-range .shop-range__heading {
    font-size: var(--sr-heading-m);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
  }
  .shop-range .shop-range__subheading {
    font-size: 14px;
    line-height: 18px;
  }
  .shop-range .shop-range__slider {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--sr-gap-m);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--sr-px-m) 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--sr-px-m);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .shop-range .shop-range__slider::-webkit-scrollbar {
    display: none;
  }
  .shop-range .shop-range-card {
    flex: 0 0 min(var(--sr-mobile-width), var(--sr-mobile-basis));
    width: min(var(--sr-mobile-width), var(--sr-mobile-basis));
    min-width: min(var(--sr-mobile-width), var(--sr-mobile-basis));
    max-width: min(var(--sr-mobile-width), var(--sr-mobile-basis));
    padding: 7px 7px 10px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .shop-range .shop-range-card__media {
    height: 210px;
    padding: 14px;
  }
  .shop-range .shop-range-card__badge {
    padding: 1px 9px;
    font-size: 10px;
    line-height: 14px;
  }
  .shop-range .shop-range-card__body {
    padding-top: 8px;
  }
  .shop-range .shop-range-card__promo {
    margin-bottom: 6px;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 14px;
  }
  .shop-range .shop-range-card__rating {
    gap: 4px;
    margin-bottom: 2px;
  }
  .shop-range .shop-range-stars {
    font-size: 10px;
    line-height: 10px;
  }
  .shop-range .shop-range-card__rating-text {
    font-size: 14px;
    line-height: 12px;
  }
  .shop-range .shop-range-card__title {
    margin-bottom: 3px;
    font-size: 18px;
    line-height: 18px;
    padding: 5px 0;
  }
  .shop-range .shop-range-card__description {
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 15px;
  }
  .shop-range .shop-range-card__variants {
    gap: 5px;
    margin-bottom: 6px;
  }
  .shop-range .shop-range-card__variant {
    padding: 1px 5px;
    font-size: 11px;
    line-height: 15px;
  }
  .shop-range .shop-range-card__variant-select {
    min-height: 30px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 16px;
  }
  .shop-range .shop-range-card__purchase-wrap {
    margin-bottom: 8px;
  }
  .shop-range .shop-range-card__purchase-toggle {
    padding: 2px;
    gap: 2px;
  }
  .shop-range .shop-range-card__purchase-btn {
    min-height: 30px;
    padding: 6px 4px;
    font-size: 11px;
    line-height: 14px;
  }
  .shop-range .shop-range-card__purchase-static {
    min-height: 30px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 16px;
  }
  .shop-range .shop-range-card__atc {
    min-height: 38px;
    gap: 4px;
    padding: 7px 6px;
    font-size: 13px;
    line-height: 18px;
  }
}
@media screen and (max-width: 360px) {
  .shop-range {
    --sr-mobile-width: 235px !important;
  }
  .shop-range .shop-range-card__media {
    height: 195px;
  }
}
.shop-range .shop-range__nav { pointer-events: none; position: absolute; inset: 50% 0 auto; z-index: 2; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 8px; }
.shop-range .shop-range__arrow { pointer-events: auto; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--sr-green); border-radius: 999px; background: var(--sr-bg); color: var(--sr-green); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.shop-range .shop-range__arrow:disabled { opacity: .35; cursor: default; }
.shop-range .shop-range__cta-wrap { display: flex; margin-top: var(--sr-section-gap-d); }
.shop-range.shop-range--align-left .shop-range__cta-wrap { justify-content: flex-start; }
.shop-range.shop-range--align-center .shop-range__cta-wrap { justify-content: center; }
.shop-range.shop-range--align-right .shop-range__cta-wrap { justify-content: flex-end; }
.shop-range .shop-range__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; font-family: "Archivo SemiExpanded", Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 20px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; }
.shop-range .shop-range__cta--primary { border: 1px solid var(--sr-yellow); background: var(--sr-yellow); color: var(--sr-green); }
.shop-range .shop-range__cta--secondary { border: 1px solid var(--sr-green); background: transparent; color: var(--sr-green); }
.shop-range .shop-range__cta--link { min-height: 0; padding: 4px 0; border: 0; background: transparent; color: var(--sr-green); text-decoration: underline; }
@media screen and (min-width: 1240px) { .shop-range .shop-range__nav--hide-desktop { display: none; } }
@media screen and (min-width: 750px) and (max-width: 1239px) { .shop-range .shop-range__nav { display: none; } }
@media screen and (max-width: 749px) { .shop-range .shop-range__nav--hide-mobile { display: none; } .shop-range .shop-range__cta-wrap { margin-top: var(--sr-section-gap-m); padding: 0 var(--sr-px-m); } }
.shop-range[data-drag="false"] .shop-range__slider { touch-action: pan-y; }
.shop-range button:focus-visible,
.shop-range select:focus-visible,
.shop-range a:focus-visible {
  outline: 2px solid var(--sr-green);
  outline-offset: 2px;
}
/* END_SECTION:ocoa-landing-test */

/* START_SECTION:ocoa-landing-travel-slider (INDEX:85) */
/* =========================================================
     SECTION BASE
  ========================================================= */

  .travel-kit-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .travel-kit-slider * {
    box-sizing: border-box;
  }

  .travel-kit-slider .travel-kit-slider__viewport {
    position: relative;
    width: 100%;
    height: var(--section-height-desktop);
    overflow: hidden;
    background: #111;
  }

  .travel-kit-slider .travel-kit-slider__track {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 650ms cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }

  .travel-kit-slider .travel-kit-slider__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
  }


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

  .travel-kit-slider .travel-kit-slider__media,
  .travel-kit-slider .travel-kit-slider__media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .travel-kit-slider .travel-kit-slider__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .travel-kit-slider .travel-kit-slider__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #000;
    opacity: var(--overlay-opacity);
  }

  .travel-kit-slider .travel-kit-slider__placeholder {
    position: absolute;
    inset: 0;
    background: #ddd;
  }

  .travel-kit-slider .travel-kit-slider__placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


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

  .travel-kit-slider .travel-kit-slider__content-wrapper {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;

    padding-left: var(--desktop-padding-x);
    padding-right: var(--desktop-padding-x);
  }

.travel-kit-slider
.travel-kit-slider__content-wrapper--desktop-top {
  align-items: flex-start;
  padding-top: 48px;
  padding-bottom: 0;
}

  .travel-kit-slider
  .travel-kit-slider__content-wrapper--desktop-center {
    align-items: flex-start;
    padding-top: 48px;
    padding-bottom: 0;
  }

  .travel-kit-slider
  .travel-kit-slider__content-wrapper--desktop-bottom {
    align-items: flex-end;
    padding-bottom: 70px;
  }

  .travel-kit-slider .travel-kit-slider__content {
    width: 100%;
    max-width: var(--content-max-width);
  }

  .travel-kit-slider
  .travel-kit-slider__content--desktop-left {
    margin-right: auto;
    text-align: left;
  }

  .travel-kit-slider
  .travel-kit-slider__content--desktop-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .travel-kit-slider
  .travel-kit-slider__content--desktop-right {
    margin-left: auto;
    text-align: right;
  }


  /* =========================================================
     HEADING
     Reference:
     New Spirit / 52px / 52px / 600 / 1px
  ========================================================= */

  .travel-kit-slider .travel-kit-slider__heading {
    margin: 0;

    color: var(--heading-color);

    font-family: "New Spirit", Georgia, serif;
    font-size: 52px;
    font-style: normal;
    font-weight: 600;
    line-height: 52px;
    letter-spacing: 1px;
    text-transform: capitalize;
  }


  /* =========================================================
     PARAGRAPH
     Reference:
     Archivo SemiExpanded / 18px / 24px
  ========================================================= */

  .travel-kit-slider .travel-kit-slider__text {
    margin-top: 6px;

    color: var(--text-color);

    font-family: "Archivo SemiExpanded", Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  .travel-kit-slider .travel-kit-slider__text p {
    margin: 0;
  }


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

  .travel-kit-slider .travel-kit-slider__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 64px;

    margin-top: 28px;
    padding: 20px 20px 20px 28px;

    background: var(--button-bg);
    color: var(--button-color);

    border: 0;
    text-decoration: none;

    font-family: "Archivo SemiExpanded", Arial, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    cursor: pointer;

    transition:
      transform 250ms ease,
      opacity 250ms ease;
  }

  .travel-kit-slider
  .travel-kit-slider__button:hover {
    transform: translateY(-2px);
  }

  .travel-kit-slider
  .travel-kit-slider__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .travel-kit-slider
  .travel-kit-slider__button-icon svg {
    display: block;
    width: 24px;
    height: 24px;
  }


  /* =========================================================
     PAGINATION
  ========================================================= */

  .travel-kit-slider .travel-kit-slider__pagination {
    position: absolute;
    z-index: 5;

    left: var(--desktop-padding-x);
    bottom: 35px;

    display: flex;
    align-items: center;
    gap: 12px;
  }

  .travel-kit-slider .travel-kit-slider__dot {
    position: relative;

    width: 22px;
    height: 12px;

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
  }

  .travel-kit-slider .travel-kit-slider__dot span {
    position: absolute;
    top: 50%;
    left: 0;

    width: 100%;
    height: 2px;

    background: var(--dot-inactive-color);

    transform: translateY(-50%);

    transition:
      background-color 250ms ease,
      opacity 250ms ease;
  }

  .travel-kit-slider
  .travel-kit-slider__dot.is-active span {
    background: var(--dot-color);
  }


  /* =========================================================
     MOBILE - 390px DESIGN
  ========================================================= */

  @media screen and (max-width: 749px) {

    .travel-kit-slider .travel-kit-slider__viewport {
      height: var(--section-height-mobile);
    }

    .travel-kit-slider .travel-kit-slider__content-wrapper {
      padding-left: var(--mobile-padding-x);
      padding-right: var(--mobile-padding-x);
    }

    .travel-kit-slider
    .travel-kit-slider__content-wrapper--mobile-top,
    .travel-kit-slider
    .travel-kit-slider__content-wrapper--mobile-center,
    .travel-kit-slider
    .travel-kit-slider__content-wrapper--mobile-bottom {
      align-items: flex-start;
      padding-top: 24px;
      padding-bottom: 0;
    }



    .travel-kit-slider
    .travel-kit-slider__content--mobile-left {
      margin-left: 0;
      margin-right: auto;
      text-align: left;
    }

    .travel-kit-slider
    .travel-kit-slider__content--mobile-center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .travel-kit-slider
    .travel-kit-slider__content--mobile-right {
      margin-left: auto;
      margin-right: 0;
      text-align: right;
    }

    .travel-kit-slider .travel-kit-slider__heading {
      font-size: 32px;
      font-style: normal;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 1px;
    }


    .travel-kit-slider .travel-kit-slider__text {
      margin-top: 6px;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px;
    }

    .travel-kit-slider .travel-kit-slider__button {
      min-height: auto;

      margin-top: 16px;
      padding: 12px 14px;

      font-family: "Archivo SemiExpanded", Arial, sans-serif;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 18px;
      letter-spacing: 1.5px;
      text-transform: uppercase;

      gap: 6px;
    }

    .travel-kit-slider
    .travel-kit-slider__button-icon,
    .travel-kit-slider
    .travel-kit-slider__button-icon svg {
      width: 22px;
      height: 22px;
    }

    .travel-kit-slider .travel-kit-slider__pagination {
      left: var(--mobile-padding-x);
      bottom: 28px;

      gap: 10px;
    }

    .travel-kit-slider .travel-kit-slider__dot {
      width: 19px;
    }
  }


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

  @media (prefers-reduced-motion: reduce) {
    .travel-kit-slider .travel-kit-slider__track,
    .travel-kit-slider .travel-kit-slider__button,
    .travel-kit-slider .travel-kit-slider__dot span {
      transition: none;
    }
  }

  .travel-kit-slider a:focus-visible,
  .travel-kit-slider button:focus-visible {
    outline: 2px solid #008758;
    outline-offset: 2px;
  }





  @media screen and (min-width: 750px) {
  .travel-kit-slider
  .travel-kit-slider__viewport:focus-visible {
    outline: 2px solid #008758;
    outline-offset: -2px;
    }
  }
/* END_SECTION:ocoa-landing-travel-slider */

/* START_SECTION:ocoa-landing-ulta-stores (INDEX:86) */
.ocoa-split {
    width: 100%;
    box-sizing: border-box;
    background: var(--ocoa-section-bg, rgb(var(--color-background)));
    padding: var(--ocoa-padding-top-desktop) var(--ocoa-padding-horizontal-desktop) var(--ocoa-padding-bottom-desktop);
  }

  .ocoa-split__inner {
    width: 100%;
    max-width: var(--ocoa-section-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, var(--ocoa-content-column)) minmax(0, var(--ocoa-image-column));
    gap: var(--ocoa-gap-desktop);
  }

  .ocoa-split--full .ocoa-split__inner { max-width: none; }

  .ocoa-split__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: var(--ocoa-vertical-align);
    align-items: var(--ocoa-horizontal-align);
    text-align: var(--ocoa-text-align);
    box-sizing: border-box;
    background: var(--ocoa-content-bg, rgb(var(--color-background)));
    padding: var(--ocoa-content-padding-v-desktop) var(--ocoa-content-padding-h-desktop);
  }

  .ocoa-split--height-custom .ocoa-split__content,
  .ocoa-split--height-custom .ocoa-split__media { height: var(--ocoa-desktop-height); }

  .ocoa-split__content-inner {
    width: 100%;
    max-width: var(--ocoa-content-max-width);
    display: flex;
    flex-direction: column;
    align-items: inherit;
  }

  .ocoa-split__eyebrow {
    width: 100%;
    margin: 0;
    color: var(--ocoa-eyebrow-color, rgb(var(--color-foreground)));
    font-family: var(--ocoa-eyebrow-font);
    font-size: var(--ocoa-eyebrow-size);
    font-style: normal;
    font-weight: var(--ocoa-eyebrow-weight);
    line-height: 18px;
    letter-spacing: 0;
    text-align: inherit;
  }

  .ocoa-split__heading {
    width: 100%;
    max-width: var(--ocoa-heading-max-width);
    margin: var(--ocoa-heading-spacing-desktop) 0;
    color: var(--ocoa-heading-color, rgb(var(--color-foreground)));
    font-family: var(--ocoa-heading-font);
    font-size: var(--ocoa-heading-size);
    font-style: normal;
    font-weight: var(--ocoa-heading-weight);
    line-height: 52px;
    letter-spacing: 1px;
    text-align: inherit;
    text-transform: none;
  }

  .ocoa-split--heading-uppercase .ocoa-split__heading { text-transform: uppercase; }
  .ocoa-split--heading-lowercase .ocoa-split__heading { text-transform: lowercase; }
  .ocoa-split--heading-capitalize .ocoa-split__heading { text-transform: capitalize; }

  .ocoa-split__description {
    width: 100%;
    max-width: var(--ocoa-description-max-width);
    margin: var(--ocoa-description-spacing-desktop) 0 0;
    color: var(--ocoa-description-color, rgb(var(--color-foreground)));
    font-family: var(--ocoa-description-font);
    font-size: var(--ocoa-description-size);
    font-style: normal;
    font-weight: var(--ocoa-description-weight);
    line-height: 24px;
    letter-spacing: 0;
    text-align: inherit;
  }

  .ocoa-split__button {
    margin-top: var(--ocoa-button-spacing-desktop);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px 32px;
    background: var(--ocoa-button-bg, rgb(var(--color-button)));
    color: var(--ocoa-button-color, rgb(var(--color-button-text)));
    border: var(--ocoa-button-border-width) solid var(--ocoa-button-border, rgb(var(--color-button)));
    border-radius: var(--ocoa-button-radius);
    text-decoration: none;
    font-family: var(--ocoa-button-font);
    font-size: var(--ocoa-button-size);
    font-style: normal;
    font-weight: var(--ocoa-button-weight);
    line-height: 24px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }

  .ocoa-split--button-outline .ocoa-split__button {
    background: transparent;
    color: var(--ocoa-button-bg, rgb(var(--color-button)));
    border-color: var(--ocoa-button-bg, rgb(var(--color-button)));
    border-width: max(1px, var(--ocoa-button-border-width));
  }

  .ocoa-split--button-link .ocoa-split__button {
    background: transparent;
    color: var(--ocoa-button-color, rgb(var(--color-button-text)));
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .ocoa-split__button:hover {
    background: var(--ocoa-button-hover-bg, rgb(var(--color-foreground)));
    color: var(--ocoa-button-hover-color, rgb(var(--color-background)));
  }

  .ocoa-split--button-link .ocoa-split__button:hover {
    background: transparent;
    color: var(--ocoa-button-hover-color, rgb(var(--color-foreground)));
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .ocoa-split__button-icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }

  .ocoa-split__button-icon svg { width: 100%; height: 100%; display: block; }

  .ocoa-split__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--ocoa-image-bg);
  }

  .ocoa-split__picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ocoa-split__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--ocoa-image-fit);
    object-position: var(--ocoa-desktop-image-position);
  }

  .ocoa-split--height-adapt .ocoa-split__image { aspect-ratio: var(--ocoa-desktop-image-ratio); }

  .ocoa-split__placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ocoa-split__placeholder svg { width: 100%; height: 100%; }



  /* Desktop image side */
@media screen and (min-width: 750px) {

  /* Content left - Image right */
  .ocoa-split--desktop-image-right .ocoa-split__inner {
    grid-template-columns:
      minmax(0, var(--ocoa-content-column))
      minmax(0, var(--ocoa-image-column));
  }

  .ocoa-split--desktop-image-right .ocoa-split__content {
    grid-column: 1;
    grid-row: 1;
  }

  .ocoa-split--desktop-image-right .ocoa-split__media {
    grid-column: 2;
    grid-row: 1;
  }


  /* Image left - Content right */
  .ocoa-split--desktop-image-left .ocoa-split__inner {
    grid-template-columns:
      minmax(0, var(--ocoa-image-column))
      minmax(0, var(--ocoa-content-column));
  }

  .ocoa-split--desktop-image-left .ocoa-split__media {
    grid-column: 1;
    grid-row: 1;
  }

  .ocoa-split--desktop-image-left .ocoa-split__content {
    grid-column: 2;
    grid-row: 1;
  }

}



  @media screen and (max-width: 749px) {
    .ocoa-split {
      padding: var(--ocoa-padding-top-mobile) var(--ocoa-padding-horizontal-mobile) var(--ocoa-padding-bottom-mobile);
    }

    .ocoa-split__inner {
      display: flex;
      flex-direction: column;
      gap: var(--ocoa-gap-mobile);
    }

    .ocoa-split--mobile-image_first .ocoa-split__inner { flex-direction: column-reverse; }

    .ocoa-split__content {
      width: 100%;
      height: auto;
      min-height: 376px;
      justify-content: center;
      padding: var(--ocoa-content-padding-v-mobile) var(--ocoa-content-padding-h-mobile);
    }

    .ocoa-split--mobile-align-left .ocoa-split__content { align-items: flex-start; text-align: left; }
    .ocoa-split--mobile-align-center .ocoa-split__content { align-items: center; text-align: center; }
    .ocoa-split--mobile-align-right .ocoa-split__content { align-items: flex-end; text-align: right; }

    .ocoa-split__content-inner { max-width: var(--ocoa-mobile-content-max-width); }

    .ocoa-split__eyebrow {
      font-size: var(--ocoa-eyebrow-size-mobile);
      line-height: 16px;
    }

    .ocoa-split__heading {
      max-width: var(--ocoa-heading-max-width-mobile);
      margin: var(--ocoa-heading-spacing-mobile) 0;
      font-size: var(--ocoa-heading-size-mobile);
      line-height: 32px;
      letter-spacing: .5px;
    }

    .ocoa-split__description {
      max-width: var(--ocoa-description-max-width-mobile);
      margin-top: var(--ocoa-description-spacing-mobile);
      font-size: var(--ocoa-description-size-mobile);
      line-height: 22px;
    }

    .ocoa-split__button {
      width: 328px;
      max-width: 100%;
      margin-top: var(--ocoa-button-spacing-mobile);
      padding: 16px;
      font-size: var(--ocoa-button-size-mobile);
      line-height: 18px;
      letter-spacing: 1.2px;
    }

    .ocoa-split--mobile-button-full .ocoa-split__button { width: 100%; }
    .ocoa-split--button-link .ocoa-split__button { width: fit-content; padding: 0; }

    .ocoa-split__media {
      width: 100%;
      height: var(--ocoa-mobile-image-height);
    }

    .ocoa-split__image {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      object-fit: var(--ocoa-image-fit);
      object-position: var(--ocoa-mobile-image-position);
    }

    .ocoa-split__placeholder { min-height: var(--ocoa-mobile-image-height); }
  }

  .ocoa-split a:focus-visible,
  .ocoa-split button:focus-visible {
    outline: 2px solid #008758;
    outline-offset: 2px;
  }
/* END_SECTION:ocoa-landing-ulta-stores */

/* START_SECTION:ocoa-promo-pdp-landing (INDEX:103) */
/* =========================================================
     BASE / DESKTOP
     1200PX SE UPAR SAME EXISTING DESIGN
  ========================================================= */

  .pph {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding:
      var(--pph-padding-top-desktop)
      var(--pph-padding-x-desktop)
      var(--pph-padding-bottom-desktop);
    background: rgb(var(--color-background));
    background: var(--gradient-background);
    color: rgb(var(--color-foreground));
  }

  .pph * {
    box-sizing: border-box;
  }

  .pph .pph__hero {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-inline: auto;
    background: #e9e9e9;
  }

  .pph.pph--layout-content_width .pph__hero {
    max-width: var(--pph-section-max-width);
  }


  /* =========================================================
     DESKTOP HEIGHT MODES
  ========================================================= */

  @media screen and (min-width: 941px) {

    .pph.pph--desktop-custom .pph__hero {
      height: var(--pph-desktop-height);
    }

    .pph.pph--desktop-fullscreen .pph__hero {
      height: 100vh;
      height: 100svh;
    }

    .pph.pph--desktop-adapt .pph__hero {
      height: auto;
      aspect-ratio: var(--pph-desktop-ratio);
    }

  }


  /* =========================================================
     MOBILE HEIGHT MODES
  ========================================================= */

  @media screen and (max-width: 940px) {

    .pph.pph--mobile-custom .pph__hero {
      height: var(--pph-mobile-height);
    }

    .pph.pph--mobile-fullscreen .pph__hero {
      height: 100vh;
      height: 100svh;
    }

    .pph.pph--mobile-adapt .pph__hero {
      height: auto;
      aspect-ratio: var(--pph-mobile-ratio);
    }

  }


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

  .pph .pph__media,
  .pph .pph__media picture {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
  }

  .pph .pph__hero-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
      var(--pph-desktop-image-x)
      var(--pph-desktop-image-y);
  }

  .pph .pph__placeholder {
    width: 100%;
    height: 100%;
  }

  .pph .pph__placeholder-svg {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }


  /* =========================================================
     OVERLAY
  ========================================================= */

  .pph .pph__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
      linear-gradient(
        90deg,
        color-mix(
          in srgb,
          var(--pph-overlay-color)
          calc(var(--pph-overlay-opacity) * 100%),
          transparent
        ) 0%,

        color-mix(
          in srgb,
          var(--pph-overlay-color)
          calc(var(--pph-overlay-opacity) * 75%),
          transparent
        ) 26%,

        transparent 67%
      );
  }


  @supports not (background: color-mix(in srgb, #000 50%, transparent)) {

    

    .pph .pph__overlay {
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.70) -10.44%,
        rgba(0, 0, 0, 0) 60%
      );
      opacity: 1;
    }

  }


  /* =========================================================
     MAIN CANVAS
  ========================================================= */

  .pph .pph__canvas {
    position: absolute;
    inset: 0;

    z-index: 2;

    width: min(100%, var(--pph-max-width));
    height: 100%;

    margin-inline: auto;

    pointer-events: none;
  }


  /* =========================================================
     HERO COPY
  ========================================================= */

  .pph .pph__copy {
    position: absolute;

    top: var(--pph-desktop-top);
    left: var(--pph-desktop-left);

    width: min(
      var(--pph-heading-width),
      calc(
        100% -
        var(--pph-desktop-left) -
        30px
      )
    );

    pointer-events: auto;
    text-align: var(--pph-text-align);
  }


  .pph .pph__heading {
    margin: 0;
    padding: 0;
    max-width: var(--pph-heading-width);
    color: var(--pph-heading-color);
    font-family: "New Spirit";
    font-size: var(--pph-heading-size-desktop);
    font-style: normal;
    font-weight: 600;
    line-height: 64px;  
    white-space: pre-line;
    text-wrap: balance;
    text-transform: capitalize;
  }


  /* =========================================================
     HERO BUTTON
  ========================================================= */

  .pph .pph__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: var(--pph-button-top-spacing);
    padding:
      var(--pph-button-padding-v)
      var(--pph-button-padding-h);
    min-height: 46px;
    background: var(--pph-button-bg);
    color: var(--pph-button-color);
    text-decoration: none;
    border: 0;
    border-radius: var(--pph-button-radius);
    font-family: "Archivo SemiExpanded", Arial, sans-serif;
    font-size: var(--pph-button-font-size);
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 1.5px;
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      transform 0.2s ease;    
  }


  .pph .pph__button:hover {
    background: var(--pph-button-hover-bg);

    color: var(--pph-button-hover-color);
  }

  .pph .pph__button--theme_primary {
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
  }

  .pph .pph__button--theme_primary:hover {
    background: rgba(var(--color-button), 0.88);
    color: rgb(var(--color-button-text));
  }

  .pph .pph__button--theme_secondary {
    background: transparent;
    color: rgb(var(--color-foreground));
    border: 1px solid rgba(var(--color-foreground), 0.75);
  }

  .pph .pph__button--theme_secondary:hover {
    background: rgba(var(--color-foreground), 0.08);
    color: rgb(var(--color-foreground));
  }


  .pph .pph__button-arrow {
    display: inline-flex;

    font-size: 0.9em;

    line-height: 1;

    transform: translateY(-1px);
  }


  /* =========================================================
     PRODUCT AREA
  ========================================================= */

  .pph .pph__product-area {
    position: absolute;

    left: var(--pph-card-left);
    bottom: var(--pph-card-bottom);

    width: min(
      var(--pph-card-width),
      calc(100% - 40px)
    );

    pointer-events: auto;
  }


  .pph .pph__product-slider {
    position: relative;

    width: 100%;
  }


  .pph .pph__slides {
    position: relative;

    width: 100%;
  }


  /* =========================================================
     PRODUCT CARD
  ========================================================= */

  .pph .pph__product-card {
    width: 100%;
    min-height: 132px;
    display: none;
    align-items: stretch;
    padding: 16px;
    background: var(--pph-card-bg);
    color: var(--pph-card-text);
    border-radius: var(--pph-card-radius);
    box-shadow:
      0 2px 8px
      rgba(0, 0, 0, 0.05);
    font-family:
      "Archivo SemiExpanded",
      Arial,
      sans-serif;
  }


  .pph .pph__product-card.is-active {
    display: flex;
    animation:
      pphFadeIn
      0.28s ease;
  }


  @keyframes pphFadeIn {

    from {
      opacity: 0;

      transform: translateY(3px);
    }

    to {
      opacity: 1;

      transform: translateY(0);
    }

  }


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

  .pph .pph__product-image-wrap {
    flex: 0 0 116px;

    width: 116px;

    display: flex;

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

    background: var(--pph-card-image-bg);

    border-radius:
      calc(var(--pph-card-radius) - 2px);

    overflow: hidden;

    text-decoration: none;
  }


  .pph .pph__product-image {
    width: 100%;
    height: 100%;

    max-height: 114px;

    display: block;

    object-fit: contain;

    padding: 6px;
  }


  .pph .pph__product-placeholder {
    width: 100%;
    height: 100%;

    min-height: 110px;
  }


  .pph .pph__product-placeholder-svg {
    width: 100%;
    height: 100%;
  }


  /* =========================================================
     PRODUCT INFO
  ========================================================= */

  .pph .pph__product-info {
    flex: 1 1 auto;

    min-width: 0;

    display: flex;

    justify-content: space-between;

    padding: 10px 0 9px var(--pph-card-content-gap-desktop);
  }


  .pph .pph__product-main {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
  }


  /* =========================================================
     PRODUCT TITLE DESKTOP
  ========================================================= */

  .pph .pph__product-title {
    display: block;

    max-width: 220px;

    color: var(--pph-card-accent);

    text-decoration: none;

    font-family:
      "Archivo SemiExpanded",
      Arial,
      sans-serif;

    font-size: 18px;
    font-style: normal;
    font-weight: 600;

    line-height: 24px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
  }


  /* =========================================================
     PRODUCT SUBTITLE
  ========================================================= */

  .pph .pph__product-subtitle {
    margin-top: 6px;
    color: var(--pph-card-text);
    font-family: 'Archivo SemiExpanded';
    
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }


  /* =========================================================
     SHOP NOW
  ========================================================= */

  .pph .pph__product-link {
    display: inline-block;
    margin-top: auto;
    padding-top: 16px;
    color: var(--pph-card-accent);
    
    font-family: 'Archivo SemiExpanded';

    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
  }


  /* =========================================================
     PRICE
  ========================================================= */

  .pph .pph__product-price {
    flex: 0 0 auto;

    margin-left: 18px;

    color: var(--pph-card-text);

    font-family:
      "Archivo SemiExpanded",
      Arial,
      sans-serif;

    font-size: 18px;

    font-style: normal;

    font-weight: 600;

    line-height: 24px;

    white-space: nowrap;
  }


  /* =========================================================
     INDICATORS
  ========================================================= */

  .pph .pph__indicators {
    position: absolute;

    right: 16px;
    bottom: 15px;

    display: flex;

    align-items: center;

    gap: 4px;
  }


  .pph .pph__indicator {
    appearance: none;

    width: 23px;
    height: 14px;

    display: flex;

    align-items: center;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;

    cursor: pointer;
  }


  .pph .pph__indicator span {
    display: block;

    width: 100%;
    height: 2px;

    background: var(--pph-dot-default);

    transition:
      background-color 0.2s ease,
      opacity 0.2s ease;
  }


  .pph .pph__indicator.is-active span {
    background: var(--pph-dot-active);
  }

  .pph .pph__arrows {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 4;
    align-items: center;
    gap: 6px;
    display: var(--pph-arrows-desktop-display);
  }

  .pph .pph__arrow {
    appearance: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: 999px;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    cursor: pointer;
  }

  .pph .pph__arrow svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .pph .pph__arrow:disabled {
    opacity: 0.35;
    cursor: default;
  }


  /* =========================================================
     750PX - 1200PX
     ONLY RESPONSIVE FIX
     
     IMPORTANT:
     1201PX AND ABOVE IS NOT CHANGED
  ========================================================= */

  @media screen and (min-width: 940px) and (max-width: 1200px) {

    /*
      At smaller desktop widths the hero becomes shorter
      because the image is adaptive.

      The card was staying 55px from bottom, therefore it
      moved upward and started touching/overlapping the
      main SHOP NOW button.

      We keep it much closer to the bottom here.
    */

    .pph .pph__product-area {
      bottom: max(0px, calc(var(--pph-card-bottom) - 39px));
    }


    /*
      Heading becomes slightly responsive only below 1200.
      1201+ keeps original customizer desktop font.
    */

    .pph .pph__heading {
      font-size: clamp(
        48px,
        5vw,
        var(--pph-heading-size-desktop)
      );
    }


    .pph .pph__button {
      margin-top: max(0px, calc(var(--pph-button-top-spacing) - 10px));
    }


    /*
      Slightly reduce card height so there is more
      vertical breathing space.
    */

    .pph .pph__product-card {
      min-height: 110px;
    }


    .pph .pph__product-image-wrap {
      flex: 0 0 105px;

      width: 105px;
    }


    .pph .pph__product-image {
      max-height: 104px;
    }


    .pph .pph__product-info {
      padding:
        8px 0
        8px max(0px, calc(var(--pph-card-content-gap-desktop) - 4px));
    }

  }


  /* =========================================================
     750PX - 1000PX
     EXTRA SMALL DESKTOP TUNING
  ========================================================= */

  @media screen and (min-width: 941px) and (max-width: 1000px) {

    .pph .pph__copy {
      left: max(0px, calc(var(--pph-desktop-left) - 40px));

      width: min(
        420px,
        calc(100% - 80px)
      );
    }


    .pph .pph__heading {
      max-width: 420px;

      font-size: max(32px, calc(var(--pph-heading-size-desktop) - 16px));

      line-height: 0.95;
    }


    .pph .pph__product-area {
      left: max(0px, calc(var(--pph-card-left) - 40px));

      bottom: max(0px, calc(var(--pph-card-bottom) - 43px));

      width: min(
        480px,
        calc(100% - 80px)
      );
    }


    .pph .pph__product-title {
      max-width: 180px;
    }


    .pph .pph__product-price {
      margin-left: 10px;

      font-size: 16px;
    }

  }


  /* =========================================================
     MOBILE
     390PX DESIGN
  ========================================================= */

  


  @media screen and (max-width: 749px) {

  .pph {
    padding:
      var(--pph-padding-top-mobile)
      var(--pph-padding-x-mobile)
      var(--pph-padding-bottom-mobile);
  }

  .pph .pph__hero-image {
    object-position:
      var(--pph-mobile-image-x)
      var(--pph-mobile-image-y);
  }

  .pph .pph__overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.70) -10.44%,
      rgba(0, 0, 0, 0) 60%
    );
    opacity: 1;
  }

  .pph .pph__canvas {
    width: 100%;
  }

  .pph .pph__copy {
    top: var(--pph-mobile-top);
    left: var(--pph-mobile-left);
    width: calc(100% - var(--pph-mobile-left) - 20px);
  }

  .pph .pph__heading {
    max-width: var(--pph-mobile-heading-width);
    color: var(--pph-heading-color);
    font-family: "New Spirit";
    font-size: var(--pph-heading-size-mobile);
    font-style: normal;
    font-weight: 600;
    line-height: 44px;
    text-transform: capitalize;
    white-space: pre-line;
    text-wrap: initial;
  }

  .pph .pph__button {
    display: flex;
    width: fit-content;
    margin-top: var(--pph-mobile-button-top-spacing);
    padding:
      var(--pph-mobile-button-padding-v)
      var(--pph-mobile-button-padding-h);
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 0;
    font-family: "Archivo SemiExpanded", Arial, sans-serif;
    font-size: var(--pph-mobile-button-font-size);
    line-height: 18px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .pph.pph--align-center .pph__button {
    margin-left: auto;
    margin-right: auto;
  }

  .pph.pph--align-right .pph__button {
    margin-left: auto;
    margin-right: 0;
  }

  .pph .pph__button-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
  }

  .pph .pph__button-arrow svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  .pph .pph__product-area {
    left: var(--pph-mobile-card-side);
    right: var(--pph-mobile-card-side);
    bottom: var(--pph-mobile-card-bottom);
    width: auto;
  }

  .pph .pph__product-card {
    width: 100%;
    min-height: 110px;
    padding: 16px;
    align-items: stretch;
    border-radius: var(--pph-mobile-card-radius);
  }

  .pph .pph__product-image-wrap {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    min-width: 76px;
    border-radius: var(--pph-mobile-image-radius);
  }

  .pph .pph__product-image {
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 5px;
    object-fit: contain;
  }

  .pph .pph__product-info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 var(--pph-card-content-gap-mobile);
  }

  .pph .pph__product-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .pph .pph__product-title {
    display: block;
    max-width: 145px;
    color: var(--pph-mobile-card-accent);
    font-family: 'Archivo SemiExpanded';
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
  }

  .pph .pph__product-subtitle {
    margin-top: 2px;
    color: var(--pph-card-text);
    font-family: 'Archivo SemiExpanded';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: none;
  }

  .pph .pph__product-link {
    display: inline-block;
    margin-top: 11px;
    padding-top: 0px;
    color: var(--pph-mobile-card-accent);
    font-family: "Archivo SemiExpanded", Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-transform: uppercase;
  }

  .pph .pph__product-price {
    flex: 0 0 auto;
    margin-left: 8px;
    color: var(--pph-mobile-price-color);
    font-family: "Archivo SemiExpanded", Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.076px;
    white-space: nowrap;
  }

  .pph .pph__indicators {
    right: 12px;
    bottom: 15px;
    gap: 3px;
  }

  .pph .pph__indicator {
    width: 18px;
    height: 10px;
  }

  .pph .pph__arrows {
    display: var(--pph-arrows-mobile-display);
  }
}


  /* =========================================================
     390PX / SMALL MOBILE
  ========================================================= */

  @media screen and (max-width: 420px) {

    .pph .pph__copy {
      left: var(--pph-mobile-left);

      width: calc(100% - (var(--pph-mobile-left) * 2));
    }


    .pph .pph__heading {
      width: 100%;

      max-width: min(350px, calc(var(--pph-mobile-heading-width) + 30px));

      font-size: var(--pph-heading-size-mobile);

      line-height: 44px;
    }


    .pph .pph__product-area {
      left: var(--pph-mobile-card-side);

      right: var(--pph-mobile-card-side);

      width: auto;
    }


    .pph .pph__product-title {
      max-width: 135px;
    }

  }


  /* =========================================================
     VERY SMALL MOBILE
     
     Typography stays the SAME as requested.
     Sirf layout shrink hoga.
  ========================================================= */

  @media screen and (max-width: 360px) {

    .pph .pph__product-area {
      left: max(0px, calc(var(--pph-mobile-card-side) - 6px));

      right: max(0px, calc(var(--pph-mobile-card-side) - 6px));
    }


    .pph .pph__product-card {
      padding:
        7px
        8px
        7px
        7px;
    }


    .pph .pph__product-image-wrap {
      flex: 0 0 82px;

      width: 82px;

      min-width: 82px;
    }


    .pph .pph__product-info {
      padding-left: max(0px, calc(var(--pph-card-content-gap-mobile) - 6px));
    }


    /*
      FONT SIZE CHANGE NAHI KIYA
      Mobile exact 18px hi rahega
    */

    .pph .pph__product-title {
      
    }


    /*
      PRICE EXACT 16PX HI RAHEGI
    */

    .pph .pph__product-price {
      margin-left: 5px;
    }

  }
/* END_SECTION:ocoa-promo-pdp-landing */

/* START_SECTION:problems-section (INDEX:113) */
/* ===== Common container (1312px) ===== */
  .problems-section .container {
    width: 100%;
     max-width: 1352px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* ===== Problems Section ===== */
  .problems-section {
    background: #ffffff;
    width: 100%;
    padding: 80px 0;
  }

  .problems-section__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Heading area */
  .problems-section__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
  }

  .problems-section__title {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: 1px;
    color: #008758;
    text-transform: capitalize;
  }

  .problems-section__subtitle {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #2c5236;
  }
  .problems-section__subtitle p{
    margin: 0 0 24px 0;
  }
  /* Body grid */
  .problems-section__body {
    display: flex;
    align-items: stretch;
    gap: 32px;
    width: 100%;
  }

  /* LEFT */
  .problems-section__left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width:100%;
    max-width: 683px;
    flex-shrink: 0;
  }

  .problems-section__pills {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .problems-section__pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 66px;
    padding: 24px 32px;
    border-radius: 500px;
    background: #F8EDD9 !important;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    font-family: inherit;
    text-align: left;
    box-sizing: border-box;
  }

  .problems-section__pill:hover {
    background: #f3e3c4;
  }

  .problems-section__pill.is-active {
    background: #ffffff !important;
    box-shadow: 0px 8px 2px rgba(0, 0, 0, 0.1), 0px 4px 12px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: 76px;
    padding: 24px 32px;
  }

  .problems-section__pill-text {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #2c5236;
    text-transform: uppercase;
    flex: 1;
    text-align: left;
  }

  .problems-section__pill-arrow {
    width: 30px;
    height: 10px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
        display: none !important;
  }

  .problems-section__pill.is-active .problems-section__pill-arrow {
    transform: translateX(4px);
  }

  /* Buttons */
  .problems-section__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
  }

  .problems-section__btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 71px;
    padding: 12px 0;
    background: #f1c400;
    color: #008758;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
  }

  .problems-section__btn-primary:hover {
    opacity: 0.9;
  }

  .problems-section__btn-primary svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .problems-section__btn-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 25px;
    background: rgba(243, 120, 48, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 65.7px;
    backdrop-filter: blur(1.06px);
    -webkit-backdrop-filter: blur(1.06px);
    color: #f37830;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .problems-section__btn-badge:hover {
    opacity: 0.85;
  }

  .problems-section__badge-image {
    display: inline-flex;
    align-items: center;
    width: 64px;
    height: 31px;
    flex-shrink: 0;
  }

  .problems-section__badge-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .problems-section__badge-text {
    white-space: nowrap;
  }
  .problems-section-span {
    display:block;
  }

  /* RIGHT */
  .problems-section__right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
  }

  .problems-section__media {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #f8edd9;
    display: flex;
    flex-direction: column;
  }

  .problems-section__image {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    display: block;
    transition: opacity 0.4s ease;
  }

  .problems-section__image.is-fading {
    opacity: 0;
  }

  .problems-section__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2c5236;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .problems-section__caption-text {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    color: #ffffff;
    text-align: center;
    margin: 0;
    max-width: 465px;
    transition: opacity 0.3s ease;
  }

  .problems-section__caption-text.is-fading {
    opacity: 0;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1280px) {

    .problems-section__title {
      font-size: 42px;
      line-height: 46px;
      white-space: normal;
    }

    .problems-section__left {
      width: 50%;
    }

    .problems-section__pill-text {
      font-size: 17px;
      line-height: 22px;
    }
  }

  @media (max-width: 1023px) {
    .problems-section {
      padding: 60px 0;
    }

    .problems-section__inner {
      gap: 28px;
    }

    .problems-section__head {
      padding: 0;
    }

    .problems-section__title {
      font-size: 34px;
      line-height: 38px;
      letter-spacing: 0.5px;
    }

    .problems-section__subtitle {
      font-size: 16px;
      line-height: 22px;
    }

    .problems-section__subtitle br {
      display: none;
    }

    .problems-section__body {
      gap: 24px;
    }

    .problems-section__left {
      width: 50%;
      gap: 20px;
    }

    .problems-section__pills {
      gap: 16px;
    }

    .problems-section__pill {
      height: auto;
      min-height: 56px;
      padding: 16px 24px;
    }

    .problems-section__pill.is-active {
      min-height: 64px;
    }

    .problems-section__pill-text {
      font-size: 14px;
      line-height: 18px;
    }

    .problems-section__btn-primary {
      height: 60px;
      font-size: 16px;
    }

    .problems-section__btn-badge {
      font-size: 16px;
      padding: 10px 18px;
    }

    .problems-section__caption-text {
      font-size: 18px;
    }
  }

  @media (max-width: 767px) {
    .problems-section {
    padding: 40px 0;
    }
    .problems-section__image {
    width: 100%;
    height: 75%;
    min-height: 75%;
    }
    .problems-section .container{
    padding: 0 16px;
    }

    .problems-section__inner {
      gap: 24px;
    }

    .problems-section__title {
    font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 32px; /* 100% */
letter-spacing: 1px;
    }

    .problems-section__subtitle {
   font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px;
    }

    .problems-section__body {
      flex-direction: column;
      gap: 24px;
    }

    .problems-section__left {
      width: 100%;
    }

    .problems-section__right {
      width: 100%;
    }

    .problems-section__media {
      min-height: 400px;
    }


    .problems-section__caption {
      padding: 16px;
    }

    .problems-section__caption-text {
     font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 130%;
    }

    .problems-section__pills {
      gap: 20px;
    }

    .problems-section__pill {
      min-height: 100%;
      padding: 16px;
    }

    .problems-section__pill-text {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .problems-section__pill-arrow {
      display: none;
    }
/* 
    .problems-section__pill-arrow svg {
      width: 20px;
    } */

      .problems-section__btn-primary {
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 16px; /* 100% */
      letter-spacing: -0.5px;
      text-transform: uppercase;
      height: 71px;
      }
  }
/* END_SECTION:problems-section */

/* START_SECTION:reviews-slider (INDEX:116) */
/* ===== Common container ===== */
  .reviews-section .container {
    width: 100%;
    max-width: 1352px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* ===== Reviews Section ===== */
  .reviews-section {
    background: #ffffff;
    width: 100%;
    padding: 80px 0;
    overflow: hidden;
  }

  .reviews-section__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-sizing: border-box;
  }

  /* HEAD */
  .reviews-section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    width: 100%;
  }

  .reviews-section__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .reviews-section__stars {
    display: inline-flex;
    align-items: center;
  }

  .reviews-section__star {
    width: 30px;
    height: 30px;
    display: inline-flex;
  }

  .reviews-section__star svg {
    width: 100%;
    height: 100%;
  }

  .reviews-section__rating-text {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 1px;
    color: #2c5236;
    text-transform: capitalize;
  }

  .reviews-section__title {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: 1px;
    color: #008758;
    text-transform: capitalize;
    text-align: center;
    margin: 0;
  }

  /* SLIDER */
  .reviews-section__slider-wrap {
    position: relative;
    width: 100%;
  }

  .reviews-section__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0;
    align-items: flex-start;
  }

  .reviews-section__track::-webkit-scrollbar {
    display: none;
  }

  /* ARROWS */
  .reviews-section__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background: #f1c400 !important;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .reviews-section__arrow:hover {
    opacity: 0.9;
    transform: translateY(-50%) scale(1.05);
  }

  .reviews-section__arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .reviews-section__arrow:disabled:hover {
    transform: translateY(-50%) scale(1);
  }

  .reviews-section__arrow svg {
    width: 20px;
    height: 20px;
  }

  .reviews-section__arrow--prev {
    left: -25px;
  }

  .reviews-section__arrow--next {
    right: -25px;
  }

  /* ===== ✅ DOTS (mobile only) ===== */
  .reviews-section__dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .reviews-section__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: #d9d2c4 !important;
    cursor: pointer;
    transition: background 0.25s ease;
  }

  .reviews-section__dot.is-active {
    background: #f1c400 !important;
  }

  /* ===== REVIEW CARD — desktop matches Figma 400×auto, body min-height 200 ===== */
  .review-card {
    flex: 0 0 400px;
    max-width: 400px;
    width: 100%;
    background: #f8edd9;
    border-radius: 12px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    scroll-snap-align: start;
    box-sizing: border-box;
    overflow: hidden;
    justify-content: space-between;
  }

  .review-card__image {
    width: 100%;
    height: 265px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .review-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .review-card__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    flex: 1;
  }

  .review-card__rating {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .review-card__stars {
    display: inline-flex;
    align-items: center;
  }

  .review-card__star {
    width: 20px;
    height: 20px;
    display: inline-flex;
  }

  .review-card__star svg {
    width: 100%;
    height: 100%;
  }

  .review-card__rating-num {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: #2c5236;
    text-transform: capitalize;
  }

  /* ✅ Text wrap — holds the text + read-more button, min-height per Figma */
  .review-card__text-wrap {
    position: relative;
    min-height: 200px;
    width: 100%;
  }

  .review-card__text {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #2c5236;
    margin: 0;
    /* Clamp to 8 lines (8 × 24px = 192px) when collapsed */
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .review-card__text.is-expanded {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  /* ✅ "... Read More" — inline-style button matching text */
  .review-card__read-more {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #2c5236;
    cursor: pointer;
    text-decoration: none;
  }

  .review-card__read-more:hover {
    text-decoration: underline;
  }

  /* ✅ "Read Less" — block-level, appears below expanded text */
  .review-card__read-less {
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #2c5236;
    cursor: pointer;
    text-decoration: none;
  }

  .review-card__read-less:hover {
    text-decoration: underline;
  }

  /* Hidden when text doesn't overflow or when expanded */
  .review-card__read-more[hidden] {
    display: none;
  }

  .review-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }

  .review-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }

  .review-card__author {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #008758;
  }

  .review-card__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #008758;
  }

  .review-card__location,
  .review-card__date {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #2c5236;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1280px) {
    .reviews-section__title {
      font-size: 42px;
      line-height: 46px;
    }

    .reviews-section__arrow--prev {
      left: -10px;
    }

    .reviews-section__arrow--next {
      right: -10px;
    }
  }

  @media (max-width: 1023px) {
    .reviews-section {
      padding: 60px 0;
    }

    .reviews-section__inner {
      gap: 28px;
    }

    .reviews-section__title {
      font-size: 32px;
      line-height: 36px;
      letter-spacing: 0.5px;
    }

    .reviews-section__star {
      width: 24px;
      height: 24px;
    }

    .reviews-section__rating-text {
      font-size: 14px;
      letter-spacing: 0.5px;
    }

    .review-card {
      flex: 0 0 340px;
      width: 340px;
      padding: 24px 20px;
      gap: 20px;
    }

    .review-card__image {
      height: 220px;
    }

    .review-card__text-wrap {
      min-height: 0;
    }

    .reviews-section__arrow {
      width: 44px;
      height: 44px;
    }

    .reviews-section__arrow--prev {
      left: 0;
    }

    .reviews-section__arrow--next {
      right: 0;
    }
  }

  /* ===== MOBILE — matches Figma 6216:1064 ===== */
  @media (max-width: 767px) {
    .reviews-section {
      padding: 40px 0;
    }

    .reviews-section__inner {
      padding: 0;
      gap: 24px;
    }

    .reviews-section .container {
      padding: 0 16px;
    }

    /* Heading per Figma: 32px / 32px line-height */
    .reviews-section__title {
      font-size: 32px;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 1px;
      text-transform: capitalize;
      padding: 0 20px;
      margin: 0 auto;
    }

    /* Stars: 20px on mobile per Figma */
    .reviews-section__star {
      width: 20px;
      height: 20px;
    }

    /* Rating text 14px / 18px per Figma */
    .reviews-section__rating-text {
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      letter-spacing: 0;
    }

    /* Track — single card visible, scroll-snap each one */
    .reviews-section__track {
      gap: 16px;
      padding: 4px 0;
    }

    /* Card — 343px per Figma, 16px padding */
    .review-card {
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
      padding: 16px;
      gap: 24px;
    }

    .review-card__image {
      height: 265px;
    }

    .review-card__body {
      gap: 20px;
    }

    .review-card__text {
      font-size: 18px;
      line-height: 24px;
    }

    .review-card__author {
      font-size: 18px;
      line-height: 24px;
    }

    /* ✅ MOBILE ARROWS — overlay the visible card center per Figma (40×40, slightly outside) */
    .reviews-section__arrow {
      width: 40px;
      height: 40px;
      top: 50%;
    }

    .reviews-section__arrow svg {
      width: 18px;
      height: 18px;
    }

    .reviews-section__arrow--prev {
      left: -5px;
    }

    .reviews-section__arrow--next {
      right: -5px;
    }

    /* ✅ SHOW DOTS ON MOBILE */
    .reviews-section__dots {
      display: flex;
      margin-top: 0;
    }
  }
/* END_SECTION:reviews-slider */

/* START_SECTION:sabotage-section (INDEX:119) */
/* ===== Common container ===== */
  .sabotage-section .container {
    width: 100%;
    max-width: 1352px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* ===== Sabotage Section ===== */
  .sabotage-section {
    background: #f8edd9;
    width: 100%;
  }

  .sabotage-section__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 80px 0;
    box-sizing: border-box;
  }

  /* LEFT — Gallery */
  .sabotage-section__gallery {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    align-self: stretch;
  }

  .sabotage-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 560px;
  }

  .sabotage-section__cell {
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .sabotage-section__cell img,
  .sabotage-section__cell-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
  }

  .sabotage-section__cell-placeholder {
    background: #e8d9b9;
  }

  /* RIGHT — Content */
  .sabotage-section__content {
    width: 700px;
    max-width: 700px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .sabotage-section__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .sabotage-section__title {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: 1px;
    color: #008758;
    text-transform: capitalize;
    margin: 0;
  }

  .sabotage-section__subtitle {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #2c5236;
    margin: 0;
  }

  /* List */
  .sabotage-section__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .sabotage-section__item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #2c5236;
  }

  .sabotage-section__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .sabotage-section__icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sabotage-section__icon img,
  .sabotage-section__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .sabotage-section__item-text {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #2c5236;
    text-transform: uppercase;
    margin: 0;
  }

  /* Buttons */
  .sabotage-section__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
  }

  .sabotage-section__btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 71px;
    padding: 12px 0;
    background: #f1c400;
    color: #008758;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
  }

  .sabotage-section__btn-primary:hover {
    opacity: 0.9;
  }

  .sabotage-section__btn-primary svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .sabotage-section__btn-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 25px;
    background: rgba(243, 120, 48, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 65.7px;
    backdrop-filter: blur(1.06px);
    -webkit-backdrop-filter: blur(1.06px);
    color: #f37830;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .sabotage-section__btn-badge:hover {
    opacity: 0.85;
  }

  .sabotage-section__badge-image {
    display: inline-flex;
    align-items: center;
    width: 64px;
    height: 31px;
    flex-shrink: 0;
  }

  .sabotage-section__badge-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .sabotage-section__badge-text {
    white-space: nowrap;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1280px) {
    .sabotage-section__inner {
      padding: 70px 0;
      gap: 28px;
    }

    .sabotage-section__content {
      width: 50%;
      max-width: 50%;
    }

    .sabotage-section__title {
      font-size: 42px;
      line-height: 46px;
    }

    .sabotage-section__item-text {
      font-size: 18px;
      line-height: 26px;
    }

    .sabotage-section__grid {
      min-height: 500px;
    }
  }

  @media (max-width: 1023px) {
    .sabotage-section__inner {
      padding: 60px 0;
      gap: 24px;
      align-items: stretch;
    }

    .sabotage-section__content {
      width: 50%;
      gap: 20px;
    }

    .sabotage-section__title {
      font-size: 32px;
      line-height: 36px;
      letter-spacing: 0.5px;
    }

    .sabotage-section__subtitle {
      font-size: 16px;
      line-height: 22px;
    }

    .sabotage-section__icon {
      width: 40px;
      height: 40px;
    }

    .sabotage-section__item {
      gap: 14px;
      padding-bottom: 14px;
    }

    .sabotage-section__item-text {
      font-size: 16px;
      line-height: 22px;
    }

    .sabotage-section__grid {
      min-height: 440px;
    }

    .sabotage-section__btn-primary {
      height: 60px;
      font-size: 18px;
    }

    .sabotage-section__btn-badge {
      font-size: 18px;
      padding: 10px 18px;
    }
  }

  /* ===== MOBILE — matches Figma 6217:44 exactly ===== */
  @media (max-width: 767px) {
    .sabotage-section .container {
      padding: 0 16px;
    }

    .sabotage-section__inner {
      flex-direction: column;
      align-items: center;
      padding: 40px 0;
      gap: 24px;
    }

    /* ✅ CONTENT FIRST, IMAGES BELOW — per Figma mobile order */
    .sabotage-section__content {
      width: 100%;
      max-width: 100%;
      gap: 32px;
      order: 1;
      align-items: center;
    }

    .sabotage-section__gallery {
      width: 100%;
      flex: none;
      order: 2;
    }

    /* ✅ Heading & subtitle CENTER on mobile per Figma */
    .sabotage-section__head {
      gap: 16px;
      text-align: center;
      align-items: center;
    }

    .sabotage-section__title {
      font-size: 32px;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 1px;
      text-align: center;
    }

    .sabotage-section__subtitle {
      font-size: 18px;
      line-height: 24px;
      text-align: center;
    }

    /* ✅ List — 16px gap, 8px icon-text gap, 36px icons per Figma */
    .sabotage-section__list {
      gap: 16px;
      width: 100%;
    }

    .sabotage-section__item {
      gap: 8px;
      padding-bottom: 16px;
    }

    .sabotage-section__icon {
      width: 36px;
      height: 36px;
    }

    /* ✅ Item text 20px / 28px uppercase per Figma */
    .sabotage-section__item-text {
      font-size: 20px;
      line-height: 28px;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    /* ✅ Primary button 60px tall, 20px font per Figma */
    .sabotage-section__btn-primary {
      height: 60px;
      padding: 20px 0;
      font-size: 20px;
      line-height: 20px;
      letter-spacing: -1.5px;
    }

    /* ✅ Badge full-width, 16px font with 1.5px letter-spacing per Figma */
    .sabotage-section__btn-badge {
      width: 100%;
      font-size: 16px;
      font-weight: 600;
      line-height: 16px;
      letter-spacing: 1.5px;
      padding: 13px 25px;
      gap: 4px;
    }

    .sabotage-section__badge-image {
      width: 37px;
      height: 16px;
    }

    /* ✅ Image grid 343px wide square-ish, 12px gap per Figma */
    .sabotage-section__grid {
      gap: 12px;
      min-height: 0;
      height: 421px;
    }

    .sabotage-section__cell {
      aspect-ratio: auto;
      height: 100%;
    }
    .sabotage-section__btn-primary svg{
      display: none;
    }
  }
/* END_SECTION:sabotage-section */

/* START_SECTION:social-feed (INDEX:123) */
/* ===== Social Feed ===== */
  .social-feed {
    background: #ffffff;
    width: 100%;
    padding: 80px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  /* Header — DESKTOP: title left, handle right */
  .social-feed__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 64px;
    box-sizing: border-box;
    gap: 24px;
  }

  .social-feed__title {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: 1px;
    color: #008758;
    text-transform: capitalize;
    margin: 0;
    white-space: nowrap;
  }

  .social-feed__handle {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    color: #008758;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
  }

  a.social-feed__handle:hover {
    opacity: 0.8;
  }

  /* Cards Row — full-bleed draggable scroller */
  .social-feed__row {
    display: flex;
    gap: 12px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 12px;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    scroll-behavior: smooth;
  }

  .social-feed__row::-webkit-scrollbar {
    display: none;
  }

  .social-feed__row.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  /* Cards */
  .social-card {
    position: relative;
    flex: 0 0 300px;
    max-width: 300px;
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    scroll-snap-align: start;
    background: #f8edd9;
    -webkit-user-drag: none;
    user-drag: none;
  }

  .social-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
  }

  .social-card:hover img {
    transform: scale(1.05);
  }

  .social-feed__row.is-dragging .social-card:hover img {
    transform: none;
  }

  .social-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: background 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
  }

  .social-card:hover .social-card__overlay {
    background: rgba(0, 0, 0, 0.3);
    opacity: 1;
  }

  .social-feed__row.is-dragging .social-card:hover .social-card__overlay {
    opacity: 0;
    background: transparent;
  }

  .social-card__overlay svg {
    width: 32px;
    height: 32px;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1280px) {
    .social-feed__header {
      padding: 0 40px;
    }

    .social-feed__title {
      font-size: 42px;
      line-height: 46px;
    }

    .social-feed__handle {
      font-size: 22px;
      line-height: 28px;
    }

    .social-card {
      flex: 0 0 260px;
      width: 260px;
      height: 260px;
    }
  }

  @media (max-width: 1023px) {
    .social-feed {
      padding: 60px 0;
      gap: 28px;
    }

    .social-feed__header {
      padding: 0 24px;
    }

    .social-feed__title {
      font-size: 36px;
      line-height: 40px;
      letter-spacing: 0.5px;
      white-space: normal;
    }

    .social-feed__handle {
      font-size: 20px;
      line-height: 24px;
    }

    .social-feed__row {
      padding: 0 24px;
      gap: 12px;
    }

    .social-card {
      flex: 0 0 240px;
      width: 240px;
      height: 240px;
    }
  }

  /* ===== MOBILE — matches Figma 6224:2 exactly ===== */
  @media (max-width: 767px) {
    .social-feed {
      padding: 40px 0;
      gap: 32px;
    }

    /* ✅ Header CENTERED & STACKED — heading on top, handle below */
    .social-feed__header {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      gap: 12px;
    }

    /* ✅ Heading 32px / 32px CENTER per Figma Mobile/Headings/H1 */
    .social-feed__title {
      font-size: 32px;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 1px;
      text-align: center;
      white-space: normal;
      max-width: 343px;
    }

    /* ✅ Handle 20px / 20px CENTER per Figma Mobile/Headings/H4 */
    .social-feed__handle {
      font-size: 20px;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: 0;
      text-align: center;
    }

    /* ✅ Cards row 12px gap, 16px side padding per Figma */
    .social-feed__row {
      padding: 0 16px;
      gap: 12px;
    }

    /* ✅ Cards ~245×246 — shows ~2 cards at once (343 viewport - 16*2 - 12 = 299 / 2 ≈ 145) */
    /* Per Figma: each card is 245×246, both visible side-by-side. To fit on a 375 viewport,
       use a percentage approach so cards fill available width minus the gap. */
    .social-card {
 flex: 0 0 245px;
        width: 100%;
        max-width: 245px;
        height: 246px;
        aspect-ratio: 245 / 246;
        border-radius: 8px;
    }

    .social-card__overlay svg {
      width: 28px;
      height: 28px;
    }
  }
/* END_SECTION:social-feed */

/* START_SECTION:story-section (INDEX:145) */
/* ===== Common container (1312px) ===== */
  .story-section .container {
    width: 100%;
    max-width: 1352px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* ===== Story Section ===== */
  .story-section {
    background: #f8edd9;
    width: 100%;
  }

  .story-section__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    padding: 80px 0;
  }

  /* Left content */
  .story-section__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 576px;
    flex-shrink: 0;
  }

  .story-section__title {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: 1px;
    color: #008758;
    text-transform: capitalize;
    margin: 0;
    max-width: 557px;
    width:100%;
  }

  .story-section__description {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #2c5236;
    width: 100%;
  }

  .story-section__description p {
    margin:  0 0 10px 0;
    line-height: 24px;
  }
   .story-section__description  ul {
    margin: 0 0 0 14px;
}
   .story-section__description li{
    list-style: disc;
   }
   .story-section__description li strong{
    font-weight:700;
   }
   .story-section__description li{
       margin: 15px 0;
   }

  .story-section__description p:empty,
  .story-section__description p:has(> br:only-child) {
    height: 24px;
  }

  /* Buttons */
  .story-section__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
  }

  .story-section__btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 71px;
    padding: 12px 0;
    background: #f1c400;
    color: #008758;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
  }

  .story-section__btn-primary:hover {
    opacity: 0.9;
  }

  .story-section__btn-primary svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .story-section__btn-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 25px;
    background: rgba(243, 120, 48, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 65.7px;
    backdrop-filter: blur(1.06px);
    -webkit-backdrop-filter: blur(1.06px);
    color: #f37830;
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .story-section__btn-badge:hover {
    opacity: 0.85;
  }

  .story-section__badge-image {
    display: inline-flex;
    align-items: center;
    width: 64px;
    height: 31px;
    flex-shrink: 0;
  }

  .story-section__badge-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .story-section__badge-text {
    white-space: nowrap;
  }
.mb_show{
  display:none;
}
  /* Right image */
  .story-section__image-wrap {
    flex: 1 1 0;
    /* height: 555px; */
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    max-width:696px;
    width:100%;
  }

  .story-section__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* border-radius: 8px; */
    display: block;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1280px) {
    .story-section__inner {
      gap: 60px;
      padding: 70px 0;
    }

    .story-section__content {
      width: 480px;
    }

    .story-section__title {
      font-size: 44px;
      line-height: 48px;
    }

    .story-section__image-wrap {
      height: 520px;
    }
  }

  @media (max-width: 1023px) {
    .story-section__inner {
      gap: 40px;
      padding: 60px 0;
      align-items: stretch;
    }

    .story-section__content {
      width: 50%;
      max-width: 50%;
      gap: 20px;
    }

    .story-section__title {
      font-size: 36px;
      line-height: 40px;
      letter-spacing: 0.5px;
      white-space: normal;
    }

    .story-section__description {
      font-size: 16px;
      line-height: 22px;
    }

    .story-section__description p {
      line-height: 22px;
    }

    .story-section__image-wrap {
      height: auto;
      min-height: 460px;
      flex: 1 1 50%;
    }

    .story-section__btn-primary {
      height: 64px;
      font-size: 18px;
    }

    .story-section__btn-badge {
      font-size: 18px;
      padding: 12px 20px;
    }
  }

  @media (max-width: 991px) {
    .story-section .container {
      padding: 0 16px;
    }
.desktop_show{
  display:none;
}
.mb_show{
  display:block;
}
    .story-section__inner {
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
      padding: 40px 0;
    }

    .story-section__content {
      width: 100%;
      max-width: 100%;
      gap: 20px;
      order: 1;
    }

    .story-section__image-wrap {
      width: 100%;
      height: 100%;
      min-height: 100%;
      order: 2;
    }

    .story-section__title {
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 100% */
    letter-spacing: 1px;
            padding: 0 37px 0 0;
    }

      .story-section__description {
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      }

    .story-section__btn-primary {
      height: 71px;
      font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 100% */
letter-spacing: 1.5px;
    }
  }
/* END_SECTION:story-section */

/* START_SECTION:wash-day-steps (INDEX:153) */
/* ===== Common container ===== */
  .steps-section .container {
    width: 100%;
    max-width: 1352px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* ===== Steps Section ===== */
  .steps-section {
    background: #ffffff;
    width: 100%;
    padding: 80px 0;
  }

  .steps-section__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
  }

  /* HEAD */
  .steps-section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .steps-section__title {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 52px;
    line-height: 52px;
    letter-spacing: 1px;
    color: #008758;
    text-transform: capitalize;
    text-align: center;
    margin: 0;
  }

  /* GRID */
  .steps-section__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    width: 100%;
  }

  /* CARD */
  .step-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
    min-width: 0;
    position: relative;
  }

  .step-card__media {
    position: relative;
    width: 100%;
    height: 416px;
    border-radius: 12px;
    overflow: visible;
  }

  .step-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    object-position: top;
    box-shadow: 0px 3.899px 23.394px 0px rgba(217, 217, 217, 0.5);
  }

  .step-card__image--placeholder {
    background: #f8edd9;
  }

  /* ===== Number badge — DESKTOP: top-left, 50×50 ===== */
  .step-card__badge {
    position: absolute;
    top: -25px;
    left: -25px;
    width: 50px;
    height: 50px;
    background: #f1c400;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden;
  }

  .step-card__badge-num {
    font-family: 'New Spirit', serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    color: #008758;
    text-transform: capitalize;
  }

  /* Text — Forest Green per Figma */
  .step-card__text {
    font-family: 'Archivo SemiExpanded', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #2b5134;
    text-align: center;
    margin: 0;
    width: 100%;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1280px) {
    .steps-section__title {
      font-size: 42px;
      line-height: 46px;
    }

    .step-card__media {
      height: 360px;
    }
  }

  @media (max-width: 1023px) {
    .steps-section {
      padding: 60px 0;
    }

    .steps-section__inner {
      gap: 28px;
    }

    .steps-section__title {
      font-size: 32px;
      line-height: 36px;
      letter-spacing: 0.5px;
    }

    .steps-section__grid {
      gap: 24px;
    }

    .step-card {
      gap: 20px;
    }

    .step-card__media {
      height: 300px;
    }

    .step-card__text {
      font-size: 16px;
      line-height: 22px;
    }
  }

  /* ===== MOBILE — matches Figma 6221:9 exactly ===== */
  @media (max-width: 767px) {
    .steps-section {
      padding: 40px 0;
    }

    .steps-section .container {
      padding: 0 16px;
    }

    /* ✅ 48px gap between heading & grid + between cards per Figma */
    .steps-section__inner {
      gap: 48px;
    }

    /* ✅ Heading 32px / 32px line-height per Figma */
    .steps-section__title {
      font-size: 32px;
      font-weight: 600;
      line-height: 32px;
      letter-spacing: 1px;
    }

    /* ✅ Single column, 48px gap between cards per Figma */
    .steps-section__grid {
      grid-template-columns: 1fr;
      gap: 48px;
      padding: 0;
    }

    .step-card {
      gap: 24px;
    }

    /* ✅ Card image 320px tall per Figma */
    .step-card__media {
      height: 320px;
      max-height: none;
      min-height: 0;
    }

    /* ✅ BADGE — TOP CENTER 40×40 per Figma (mobile shifts to center top) */
    .step-card__badge {
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 40px;
    }

    .step-card__badge-num {
      font-size: 24px;
      line-height: 30px;
    }

    /* ✅ Body text 18px / 24px per Figma (was 14px) */
    .step-card__text {
      font-size: 18px;
      line-height: 24px;
    }
  }
/* END_SECTION:wash-day-steps */