<section class="easy-setup-section">
  <style>
    .easy-setup-section {
      width: 100vw;
      margin-left: 50%;
      transform: translateX(-50%);
      background-color: #bb8fc1;
    }
    .easy-setup-section__container {
      max-width: 120rem;
      margin: 0 auto;
      padding: 0 1.5rem;
      padding-top: 36px;
      padding-bottom: 75px;
    }
    @media screen and (min-width: 750px) {
      .easy-setup-section__container {
        padding: 0 5rem;
        padding-top: 48px;
        padding-bottom: 100px;
      }
    }
    .easy-setup {
      color: var(--text-color);
      --title-font-size: 48px;
      --title-color: #ffffff;
      --product-card-title-font-size: 24px;
      --text-color: #432a54;
      --card-background-color: #fef9f3;
      --second-card-background-color: #fbf4fe;
      overflow: hidden;
    }
    .easy-setup__title {
      font-size: calc(var(--title-font-size) * 0.5);
      font-weight: 800;
      line-height: 107%;
      letter-spacing: 0.04em;
      margin-bottom: 1rem;
      color: var(--title-color);
    }
    @media screen and (min-width: 750px) {
      .easy-setup__title {
        font-size: calc(var(--title-font-size) * 0.75);
        text-align: center;
        margin-bottom: 2rem;
      }
    }
    @media screen and (min-width: 750px) {
      .easy-setup__title {
        font-size: var(--title-font-size);
        margin-bottom: 2.5rem;
      }
    }
    .easy-setup__swiper {
      overflow: visible;
    }
    .easy-setup__arrow-wrapper {
      display: flex;
      gap: 1rem;
    }
    @media screen and (min-width: 750px) {
      .easy-setup__arrow-wrapper {
        gap: 1.5rem;
      }
      .easy-setup__arrow-wrapper {
        display: none;
      }
    }
    .easy-setup__arrow {
      color: var(--text-color);
      display: inline-block;
      width: 70px;
      height: 70px;
      margin-bottom: 43px;
    }
    .easy-setup__arrow--left {
      transform: rotate(180deg);
    }
    @media screen and (min-width: 750px) {
      .easy-setup__arrow {
        width: 97px;
        height: 97px;
        margin-bottom: 60px;
      }
    }
    .easy-setup__card {
      border: 1px solid var(--text-color);
      border-radius: 29px;
      background: var(--card-background-color, #fef9f3);
      padding: 20px;
      height: auto;
      width: 100%;
    }
    @media screen and (min-width: 750px) {
      .easy-setup__card {
        padding: 23px 27px;
      }
    }
    .easy-setup__card-title {
      font-weight: 800;
      font-size: var(--product-card-title-font-size, 24px);
      margin-bottom: 5px;
      text-align: center;
    }
    .easy-setup__card-image {
      width: 100%;
      object-fit: cover;
      aspect-ratio: 1/1;
      border: 1px solid var(--text-color);
      border-radius: 26px;
    }
    .easy-setup__card-index {
      border: 1px solid var(--text-color);
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 1rem auto;
      background: var(--second-card-background-color, #f9f9f9);
      font-weight: 500;
      font-size: 28px;
    }
    .easy-setup__cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      width: 277px;
      margin: 0 auto;
      background: var(--second-card-background-color);
      border-radius: 45px;
      font-size: 20px;
      font-weight: 800;
      border: 1px solid var(--text-color);
      color: var(--text-color);
      margin-top: 45px;
      text-decoration: none;
    }
  </style>
  <div class="easy-setup easy-setup-section__container">
    <div class="easy-setup__title">EASY SET UP IN 3 STEPS</div>
    <div class="easy-setup__swiper swiper">
      <div class="easy-setup__arrow-wrapper">
        <svg class="easy-setup__arrow easy-setup__arrow--left" fill="none" viewBox="0 0 97 97" xmlns="http://www.w3.org/2000/svg">
          <circle cx="48.6602" cy="48.75" fill="#fef9f3" r="47.5" stroke="currentColor"></circle>
          <path d="M72.9825 49.8107C73.5683 49.2249 73.5683 48.2751 72.9825 47.6893L63.4366 38.1434C62.8508 37.5576 61.9011 37.5576 61.3153 38.1434C60.7295 38.7292 60.7295 39.6789 61.3153 40.2647L69.8006 48.75L61.3153 57.2353C60.7295 57.8211 60.7295 58.7708 61.3153 59.3566C61.9011 59.9424 62.8508 59.9424 63.4366 59.3566L72.9825 49.8107ZM29.9219 50.25H71.9219V47.25H29.9219V50.25Z" fill="currentColor"></path>
        </svg>
        <svg class="easy-setup__arrow easy-setup__arrow--right" fill="none" viewBox="0 0 97 97" xmlns="http://www.w3.org/2000/svg">
          <circle cx="48.6602" cy="48.75" fill="#fef9f3" r="47.5" stroke="currentColor"></circle>
          <path d="M72.9825 49.8107C73.5683 49.2249 73.5683 48.2751 72.9825 47.6893L63.4366 38.1434C62.8508 37.5576 61.9011 37.5576 61.3153 38.1434C60.7295 38.7292 60.7295 39.6789 61.3153 40.2647L69.8006 48.75L61.3153 57.2353C60.7295 57.8211 60.7295 58.7708 61.3153 59.3566C61.9011 59.9424 62.8508 59.9424 63.4366 59.3566L72.9825 49.8107ZM29.9219 50.25H71.9219V47.25H29.9219V50.25Z" fill="currentColor"></path>
        </svg>
      </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide easy-setup__card">
          <img alt="" class="easy-setup__card-image" src="//section.store/cdn/shop/files/image_6_400x.png?v=1677651130" srcset="//section.store/cdn/shop/files/image_6_400x.png?v=1677651130 400w,//section.store/cdn/shop/files/image_6_600x.png?v=1677651130 800w,//section.store/cdn/shop/files/image_6_800x.png?v=1677651130 1200w,//section.store/cdn/shop/files/image_6_1000x.png?v=1677651130 1600w,//section.store/cdn/shop/files/image_6.png?v=1677651130 2000w"/>
          <div class="easy-setup__card-index">1</div>
          <div class="easy-setup__card-title"><p>Rip open the package</p></div>
        </div>
        <div class="swiper-slide easy-setup__card">
          <img alt="" class="easy-setup__card-image" src="//section.store/cdn/shop/files/image_6_400x.png?v=1677651130" srcset="//section.store/cdn/shop/files/image_6_400x.png?v=1677651130 400w,//section.store/cdn/shop/files/image_6_600x.png?v=1677651130 800w,//section.store/cdn/shop/files/image_6_800x.png?v=1677651130 1200w,//section.store/cdn/shop/files/image_6_1000x.png?v=1677651130 1600w,//section.store/cdn/shop/files/image_6.png?v=1677651130 2000w"/>
          <div class="easy-setup__card-index">2</div>
          <div class="easy-setup__card-title"><p>Put in a cup with tea &amp; stir</p></div>
        </div>
        <div class="swiper-slide easy-setup__card">
          <img alt="" class="easy-setup__card-image" src="//section.store/cdn/shop/files/image_6_400x.png?v=1677651130" srcset="//section.store/cdn/shop/files/image_6_400x.png?v=1677651130 400w,//section.store/cdn/shop/files/image_6_600x.png?v=1677651130 800w,//section.store/cdn/shop/files/image_6_800x.png?v=1677651130 1200w,//section.store/cdn/shop/files/image_6_1000x.png?v=1677651130 1600w,//section.store/cdn/shop/files/image_6.png?v=1677651130 2000w"/>
          <div class="easy-setup__card-index">3</div>
          <div class="easy-setup__card-title"><p>Enjoy the funky stuff</p></div>
        </div>
      </div>
    </div>
    <a class="easy-setup__cta" href="">SHOP NOW</a>
  </div>
  <script>
    (function () {
      const cssId = 'swiper-css';
      let existingLink = document.getElementById(cssId);
      if (!existingLink) {
        let link = document.createElement('link');
        link.href = 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css';
        link.rel = 'stylesheet';
        link.id = cssId;
        let head = document.getElementsByTagName('head')[0];
        head.appendChild(link);
      }
      const jsId = 'swiper-js';
      let existingScript = document.getElementById(jsId);
      if (!existingScript) {
        let script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js';
        script.id = jsId;
        script.defer = true;
        script.onload = function () {
          let event = new Event('swiper:loaded');
          document.dispatchEvent(event);
        };
        let head = document.getElementsByTagName('head')[0];
        head.appendChild(script);
      }
      function loadSwiper() {
        try {
          new Swiper('.easy-setup__swiper', {
            slidesPerView: 1.2,
            spaceBetween: 22,
            navigation: {
              nextEl: '.easy-setup__arrow--right',
              prevEl: '.easy-setup__arrow--left',
            },
            breakpoints: {
              750: {
                slidesPerView: 3,
                spaceBetween: 32,
              },
            },
          });
        } catch (e) {
          console.log('Swiper not loaded');
          console.log(e);
        }
      }
      document.addEventListener('swiper:loaded', loadSwiper);
      if (window.Shopify && Shopify.designMode) {
        document.addEventListener('shopify:section:load', loadSwiper);
      }
    })();
  </script>
</section>
<style>
  .ss-custom-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    width: 277px;
    margin: 0 auto;
    background: var(--second-card-background-color);
    border-radius: 45px;
    font-size: 20px;
    font-weight: 800;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    margin-top: 45px;
    text-decoration: none;
  }
</style><style>.section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-top: 36px;
  padding-bottom: 75px;
}

@media screen and (min-width: 750px) {
  .section-template--16878979842297__16256d98-513b-4da7-9c8b-9bbb7cab843f-padding {
    padding: 0 5rem;
    padding-top: 48px;
    padding-bottom: 100px;
  }
}
<style>
  .best-seller {
    color: var(--text-color);
  }
  .best-seller div {
    box-sizing: border-box;
  }
  .best-seller p {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.07;
  }
  .swiper-arrow-icon-wrapper {
    display: flex;
    gap: 1rem;
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon-wrapper {
      gap: 1.5rem;
    }
  }
  .swiper-arrow-icon {
    color: var(--text-color);
    display: inline-block;
    width: 70px;
    height: 70px;
    position: unset;
    margin-top: unset;
    margin-bottom: 43px;
  }
  .swiper-arrow-icon--left {
    transform: rotate(180deg);
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon {
      width: 97px;
      height: 97px;
      margin-bottom: 60px;
    }
  }
  .best-seller-title {
    font-size: calc(var(--title-font-size) * 0.5);
    font-weight: 800;
    line-height: 107%;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
  }
  @media screen and (min-width: 750px) {
    .best-seller-title {
      font-size: calc(var(--title-font-size) * 0.75);
    }
  }
  @media screen and (min-width: 750px) {
    .best-seller-title {
      font-size: var(--title-font-size);
      margin-bottom: 2rem;
    }
  }
  .best-seller-card {
    border: 1px solid var(--text-color);
    border-radius: 29px;
    background: var(--card-background-color, #fef9f3);
    padding: 20px;
    height: auto;
  }
  @media screen and (min-width: 750px) {
    .best-seller-card {
      padding: 23px 27px;
    }
  }
  .best-seller-card__title {
    font-weight: 800;
    font-size: var(--product-card-title-font-size, 24px);
    margin-bottom: 5px;
  }
  .best-seller-card__desc {
    font-weight: 500;
    font-size: var(--product-card-description-font-size, 20px);
    margin-bottom: 13px;
  }
  .best-seller-card__link {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 800;
    background: var(--link-background-color, #fbf4fe);
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-decoration: none;
    font-size: 20px;
  }
  @media screen and (min-width: 750px) {
    .best-seller-card__link {
      height: 60px;
    }
  }
  .best-seller-card__image {
    width: 100%;
    object-fit: contain;
  }
</style><style>

   .rating-item svg {
    width:16px;
    height:16px;
    border:none;
    margin-right:0px;
    line-height: 1.6;
    fill: var(--text-color);
  }

  .customers-reviews {
    color: var(--text-color);
    text-align: center;
  }
  .customers-reviews div {
    box-sizing: border-box;
  }
  .customers-reviews p {
    margin-top: 0;
    margin-bottom: 0;
  }
  @media screen and (min-width: 750px) {
    .customers-reviews .swiper-arrow-icon-wrapper {
      display: none;
    }
  }
  .swiper-arrow-icon-wrapper {
    display: flex;
    gap: 1rem;
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon-wrapper {
      gap: 1.5rem;
    }
  }
  .swiper-arrow-icon {
    color: var(--text-color);
    display: inline-block;
    width: 70px;
    height: 70px;
    position: unset;
    margin-top: unset;
    margin-bottom: 43px;
  }
  .swiper-arrow-icon--left {
    transform: rotate(180deg);
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon {
      width: 97px;
      height: 97px;
      margin-bottom: 60px;
    }
  }
  .customers-reviews-title {
    font-size: calc(var(--title-font-size) * 0.5);
    font-weight: 800;
    line-height: 107%;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    color: var(--title-color);
  }
  @media screen and (min-width: 750px) {
    .customers-reviews-title {
      font-size: calc(var(--title-font-size) * 0.75);
      margin-bottom: 60px;
      text-align: center;
    }
  }
  @media screen and (min-width: 750px) {
    .customers-reviews-title {
      font-size: var(--title-font-size);
    }
  }
  /* .ss-custom-card will be reused on other sections */
  .ss-custom-card {
    border: 1px solid var(--text-color);
    border-radius: 29px;
    background: var(--card-background-color, #fef9f3);
    padding: 20px;
    height: auto;
    width: 100%;
  }
  @media screen and (min-width: 750px) {
    .ss-custom-card {
      padding: 23px 27px;
    }
  }
  .ss-custom-card__title {
    font-weight: 800;
    font-size: var(--product-card-title-font-size, 24px);
    margin-bottom: 5px;
    text-align: center;
  }
  .ss-custom-card__desc {
    font-weight: 500;
    font-size: var(--product-card-description-font-size, 20px);
    margin-bottom: 13px;
  }
  .ss-custom-card__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 13px;
  }
  .ss-custom-card__author {
    font-size: 24px;
    font-weight: 800;
  }
  .ss-custom-card__link {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 800;
    background: var(--link-background-color, #fbf4fe);
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-decoration: none;
  }
  @media screen and (min-width: 750px) {
    .ss-custom-card__link {
      height: 60px;
    }
  }
  .ss-custom-card__image {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    border: 1px solid var(--text-color);
    border-radius: 26px;
  }
  .ss-custom-card__index {
    border: 1px solid var(--text-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    background: var(--second-card-background-color, #f9f9f9);
    font-weight: 500;
    font-size: 28px;
  }
</style><style>
  .easy-setup {
    color: var(--text-color);
  }
  .easy-setup div {
    box-sizing: border-box;
  }
  .easy-setup p {
    margin-top: 0;
    margin-bottom: 0;
  }
  @media screen and (min-width: 750px) {
    .easy-setup .swiper-arrow-icon-wrapper {
      display: none;
    }
  }
  .swiper-arrow-icon-wrapper {
    display: flex;
    gap: 1rem;
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon-wrapper {
      gap: 1.5rem;
    }
  }
  .swiper-arrow-icon {
    color: var(--text-color);
    display: inline-block;
    width: 70px;
    height: 70px;
    position: unset;
    margin-top: unset;
    margin-bottom: 43px;
  }
  .swiper-arrow-icon--left {
    transform: rotate(180deg);
  }
  @media screen and (min-width: 750px) {
    .swiper-arrow-icon {
      width: 97px;
      height: 97px;
      margin-bottom: 60px;
    }
  }
  .easy-setup-title {
    font-size: calc(var(--title-font-size) * 0.5);
    font-weight: 800;
    line-height: 107%;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    color: var(--title-color);
  }
  @media screen and (min-width: 750px) {
    .easy-setup-title {
      font-size: calc(var(--title-font-size) * 0.75);
      text-align: center;
      margin-bottom: 2rem;
    }
  }
  @media screen and (min-width: 750px) {
    .easy-setup-title {
      font-size: var(--title-font-size);
      margin-bottom: 2.5rem;
    }
  }
  /* .ss-custom-card will be reused on other sections */
  .ss-custom-card {
    border: 1px solid var(--text-color);
    border-radius: 29px;
    background: var(--card-background-color, #fef9f3);
    padding: 20px;
    height: auto;
    width: 100%;
  }
  @media screen and (min-width: 750px) {
    .ss-custom-card {
      padding: 23px 27px;
    }
  }
  .ss-custom-card__title {
    font-weight: 800;
    font-size: var(--product-card-title-font-size, 24px);
    margin-bottom: 5px;
    text-align: center;
  }
  .ss-custom-card__desc {
    font-weight: 500;
    font-size: var(--product-card-description-font-size, 20px);
    margin-bottom: 13px;
  }
  .ss-custom-card__link {
    border: 1px solid var(--text-color);
    color: var(--text-color);
    font-weight: 800;
    background: var(--link-background-color, #fbf4fe);
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
    text-decoration: none;
  }
  @media screen and (min-width: 750px) {
    .ss-custom-card__link {
      height: 60px;
    }
  }
  .ss-custom-card__image {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    border: 1px solid var(--text-color);
    border-radius: 26px;
  }
  .ss-custom-card__index {
    border: 1px solid var(--text-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    background: var(--second-card-background-color, #f9f9f9);
    font-weight: 500;
    font-size: 28px;
  }
</style>