/* Sticky scroll fix */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e {
    overflow: inherit !important;
  }

   /* GENERAL */

   .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-container h1 {
    margin-bottom: .5rem;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e p {
    margin-top: 1em;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e ul,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e ol {
    margin-left: 0;
    padding-left: 40px;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .label {
    font-size: 1.5rem !important;
    margin: 0 0 1.5rem !important;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .info {
    /* Needed for ".option a" text-overflow */
    width: 100%;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-option-values,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-option-values > div {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
      margin: 0 0 8px;
      padding: 0;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-option-value {
    position: relative;
    /* ↓ Needed for ".option a" text-overflow */
    overflow: hidden;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-option-value a {
    padding: 6px 12px;
    transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 32px !important;
    cursor: pointer;
    position: relative;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* ↓ required for text-overflow to work */
    overflow: hidden;
    max-width: 100%;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-option-value a:hover {
    /* ↓ Expand text if text-overflow */
    white-space: normal;
    text-overflow: initial;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-option-value.unavailable {
    opacity: .5;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-option-value.unavailable a::before {
    content: "";
    background: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M24 0L0 24' stroke='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: -1px;
    border-radius: 32px;
    overflow: hidden;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .button-primary {
    width: 100%;
    margin-top: 32px;
    margin-bottom: 18px;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .button-primary:disabled {
    cursor: not-allowed;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .unstack-fixed .button-primary {
    margin-top: 18px;
    margin-bottom: 18px;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e label {
    margin: 12px 0;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e picture,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e img {
    width: 100%;
    object-fit: cover;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .tag {
    background-color: #000;
    color: #FFF;
    padding: 6px 12px;
    border-radius: 100px;
    display: inline-flex;
    font-size: 14px;
    line-height: 1;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .quantity {
    display: none;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.showQuantity .quantity {
    display: inline-flex;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-price-container {
    display: flex
  }
  
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-sale-price {
    color: red !important;
    font-size: 90%;
  }
  
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-list-price {
    padding-left: 1rem;
    font-size: 90%;
  }

   /* Box content fix */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.dark-bg label {
    color: #FFF !important;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-container {
    display: grid;
    /* ↓ Grid children's min width is auto by default, so the content sizes */
    /* the columns intrinsically. Using minmax() here to change the grid */
    /* children's min-width to contain them within 1fr */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .unstack-media.swiper-slide.swiper-slide-visible {
    display: block !important;
  }
  
  @media only screen and (min-width: 768px) {
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.full .product-container,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .product-container,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .product-container,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .product-container {
      display: flex;
      flex-direction: row;
      gap: 64px;
      margin: 0 calc( -100vw / 2 + 100% / 2 - 10px );
      max-width: 100vw;
      width: 100vw;
    }
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.list .product-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.full .product-container .images:not(.overlay .images),
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .product-container .images:not(.overlay .images),
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .product-container .images:not(.overlay .images),
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .product-container .images:not(.overlay .images) {
      position: relative;
      max-width: 50vw;
      width: 50vw;
      flex-grow: 0;
    }
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.full .swiperPrimary,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .swiperPrimary,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .swiperPrimary,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .swiperPrimary {
      position: relative;
      max-width: 50vw;
      width: 50vw;
      margin: 0;
    }
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.full .swiperSecondary {
      position: absolute;
      bottom: 32px;
      height: auto !important;
      width: calc(50vw - 16px);
      z-index: 2;
      order: 2;
    }
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.full  .swiperSecondary .swiper-wrapper {
      max-width: 256px !important;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.full .info,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .info,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.list .info,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .info,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .info {
      align-self: flex-start;
      position: sticky !important;
      margin-top: 128px;
      top: 128px;
    }
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.full .info,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .info,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .info,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .info {
      width: 60rem;
      max-width: 60rem;
      flex-shrink: 0;
    }

    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .swiperSecondary,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .swiper-button-prev,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .swiper-button-next,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.list .swiperSecondary,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.list .swiper-button-prev,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.list .swiper-button-next,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .swiperSecondary,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .swiper-button-prev,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .swiper-button-next,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .swiperSecondary,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .swiper-button-prev,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .swiper-button-next {
      display: none;
    }

    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .product-container .images:not(.overlay .images),
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .product-container .images:not(.overlay .images),
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .product-container .images:not(.overlay .images) {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 16px;
      position: relative;
      max-width: 50vw;
      width: 50vw;
      height: fit-content !important;
    }

    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .product-container .images:not(.overlay .images) {
      display: grid;
      grid-template-columns: 1fr 1fr
    }

    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .product-container .unstack-media,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .product-container .unstack-media,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .product-container .unstack-media {
      width: calc( 50% - 8px ) !important;
      flex-grow: 1;
      margin-right: 0px !important;
    }

    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .product-container .unstack-media {
      width: 100%;
    }

    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .product-container .unstack-media:nth-of-type(3n + 1) {
      grid-column-start: 1;
      grid-column-end: 3;
    }

    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .product-container .swiper-slide:nth-child(2):not(.overlay .swiper-slide) {
      margin-top: 25%;
    }

    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .product-container .swiper-slide:nth-child(odd):not(:first-of-type):not(.overlay .swiper-slide) {
      margin-top: -25%;
    }

    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.list .product-container .images:not(.overlay .images) {
      display: flex;
      flex-direction: column;
      gap: 16px;
      height: fit-content !important;
    }
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.list .swiper-slide {
      height: auto;
    }

    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.full .gallery-container,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .gallery-container,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .gallery-container,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .gallery-container,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.list .gallery-container{
      grid-template-columns: none !important;
      width: initial;
    }
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.full .product-container>div,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.collage .product-container>div,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.grid .product-container>div,
    .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.offset .product-container>div{
      position: relative;
      max-width: calc(50vw - 64px);
      width: calc(50vw - 64px);
      margin: 0;
    }
  }


      @media only screen and (max-width: 767px) {
      .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-container{
        display: flex;
        flex-flow: row wrap;
      }
      .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.full .info {
        padding: 3rem;
        box-sizing: border-box;
      }
      .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .button-primary:disabled{
        pointer-events: none;
      }
    }



   /* FEATURE: BANNER */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner {
    margin-bottom: var(--product-banner-mb, 2rem);
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner .box-content {
    display: flex;
    column-gap: 1rem;
    align-items: center;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner.left .box-content {
    justify-content: flex-start;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner.right .box-content {
    justify-content: flex-end;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner.center .box-content {
    justify-content: center;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner.spread .box-content {
    justify-content: space-between;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner .ql-blank {
    /* ↓ make sure placeholder doesn't collapse when text hasn't been entered yet */
    min-width: 13ch;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner .rich-text p:last-of-type {
    /* ↓ Prevent margin inheritance */
    margin-bottom: 0 !important;
  }


  /* Banner actions */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner .actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* ↓ using !important as spacing is handled by column-gap */
    margin: 0 !important;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner .actions .add-actions {
    display: contents;
    margin: 0;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner .actions a {
    margin: 0;
    padding: 5px 15px;
    min-width: max-content !important;
    line-height: 21px !important;
    font-size: 14px !important;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner .actions a.button:first-of-type {
    margin-right: 1rem;
    margin-left: 1rem;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner .actions a.button {
    margin-top: 0;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner .actions .buttons-container {
    display: flex;
    margin-right: 1rem;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner .actions .text-action-container {
    flex: inherit;
    margin-top: 0;
  }


  /* Layout prop options for Banner */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner.left .section-box > .box-content {
    justify-content: flex-start;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner.right .section-box > .box-content {
    justify-content: flex-end;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner.center .section-box > .box-content {
    justify-content: center;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner.spread .section-box > .box-content {
    justify-content: space-between;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-banner.spread .actions {
    justify-content: flex-end;
  }


  /* ADD-ONS */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-faqs,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callouts {
    margin-top: 2rem;
  }


  /* ADD-ON: FAQ */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-faqs {
    padding-left: 0;
    list-style: none;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-faq + .product-faq {
    border-top: 1px solid #e0e3ea;
    padding-top: 2rem;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-faq:not(:last-of-type) {
    padding-bottom: 1.5rem;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .faq-question {
    display: flex;
    cursor: pointer;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .faq-question + .faq-question {
    border-bottom: 1px solid #e0e3ea;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .faq-question:first-child,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .ql-editor {
    /* ↓ make sure it doesn't collapse when empty and shows placeholder */
    flex-grow: 1;
  }


  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .faq-answer {
    margin: 0;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.15s ease-in-out, opacity 0.15s;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .is-open .faq-answer,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e.editing .faq-answer {
    opacity: 1;
    max-height: initial;
    pointer-events: auto;
  }


  /* FAQ toggle styles */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .faq-question > .toggle {
    /* ↓ reset button styles */
    border: 0;
    background: 0;
    padding:0;
    margin: 0;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    position: relative;
  }

  /* ↓ @TODO replace with SVG */
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .toggle::before,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .toggle::after {
    content: "";
    position: absolute;
    background-color: #4a90e2;
    transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .toggle:before {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .toggle:after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-faq.is-open .toggle:before {
    transform: rotate(90deg);
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-faq.is-open .toggle:after {
    transform: rotate(180deg);
  }


  /* ADD-ON CALLOUTS */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callouts {
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap, 2rem);
  }


  /* Columns */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .c1 .product-callout {
    flex-basis: 100%;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .c2 .product-callout {
    /* Remove gap from flex-basis, because it behaves like old school boxmodel */
    flex-basis: calc(50% - var(--gap) / 2);
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout {
    display: flex;
    gap: 2rem;
  }


  /* Gap */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap0 {--gap: 0rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap1 {--gap: 1rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap2 {--gap: 2rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap3 {--gap: 3rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap4 {--gap: 4rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap5 {--gap: 5rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap6 {--gap: 6rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap7 {--gap: 7rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap8 {--gap: 8rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap9 {--gap: 9rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap10 {--gap: 10rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap11 {--gap: 11rem;}
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .gap12 {--gap: 12rem;}


  /* Vertical alignment */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .is-top-aligned .product-callout {
    align-items: flex-start;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .is-center-aligned .product-callout {
    align-items: center;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__body {
    flex: 1;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__body > * {
    word-break: break-all;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__body .rich-text *:first-child,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__body .ql-editor *:first-child {
    margin-top: 0 !important;
  }
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__body .rich-text *:last-child,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__body .ql-editor *:last-child {
    margin-bottom: 0 !important;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__body .button {
    /* ↓ Remove sriracha min-width to prevent overflow */
    min-width: auto;
  }


  /* Callouts icon sizing */

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__figure {
    /* ↓ Using CSS custom props so CSS can be simplified with NoMl support */
    /* for passing in a custom prop in a style attribute */
    --icon-xs: 24px;
    --icon-s: 32px;
    --icon-m: 48px;
    --icon-l: 64px;
    --icon-xl: 80px;
    --product-callout-icon-size: var(--icon-m);
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__figure,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__figure picture,
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .product-callout__figure img {
    height: auto;
    width: var(--product-callout-icon-size);
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .xs-icons .product-callout__figure {
    --product-callout-icon-size: var(--icon-xs);
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .s-icons .product-callout__figure {
    --product-callout-icon-size: var(--icon-s);
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .m-icons .product-callout__figure {
    --product-callout-icon-size: var(--icon-m);
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .l-icons .product-callout__figure {
    --product-callout-icon-size: var(--icon-l);
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .xl-icons .product-callout__figure {
    --product-callout-icon-size: var(--icon-xl);
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .quantity-selector {
    display: flex;
    align-items: stretch;
  }
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .quantity-selector-decrement {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;  }
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .quantity-selector-increment {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .quantity-selector > .button {
    align-items: center;
    display: flex;
    background: transparent;
    border: 1px solid silver !important;
    box-shadow: none !important;
    color: #000;
    font-size: 112.5%;
    padding: 1rem 1.4rem;
    line-height: 100%;
    
    &:hover {
      background: rgba(0, 0, 0, 0.05) !important;
    }
    &:active {
      background: rgba(0, 0, 0, 0.1) !important;
    }
    &:first-of-type {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }
    &:last-of-type {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .quantity-selector-value {
    align-items: center;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    padding: 0;
    min-width: 4rem;
    display: flex;
    justify-content: center;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .purchase-options {
    display: none;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .purchase-options > div > span {
    display: flex;
    align-items: baseline;
  }


  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .bundle-components-container ul {
    padding: 0;
    list-style-type: none;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .bundle-components-container .bundle-wrapper {
    padding: 32px 0 0;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .bundle-components-container p.component-label {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 4px;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .bundle-components-container p.component-label .min-amount {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .bundle-component-container {
    display: flex;
    gap: 12px;
  }
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .bundle-component-container .component-option {
    width: 80px;
  }  
  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .bundle-component-container .component-option img {
    border-radius: 4px;
    object-position: center;
    cursor: pointer;
    width: 80px;
    height: 80px;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .bundle-component-container .component-option.selected img {
    border: 1px solid white;
    outline: 3px solid black;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .component-option {
    color: #000;
    font-size: 10px;
  }

  .component-2359c984-f772-4d79-8ae3-de5b8a335b0e .component-option-price {
    font-size: 10px !important;
    font-weight: 600 !important;
  }
.component-9e3d8faf-9610-4f3b-9ed8-8bd61639f8cd .callouts {
  margin: 0 calc( -100vw / 2 + 100% / 2 );
  max-width: 100vw;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.component-9e3d8faf-9610-4f3b-9ed8-8bd61639f8cd .callout-container {
  flex: 1 1 0;
  margin-top: 0 !important;
}

.component-9e3d8faf-9610-4f3b-9ed8-8bd61639f8cd h2 {
  margin: 0;
}

.component-9e3d8faf-9610-4f3b-9ed8-8bd61639f8cd .callout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  padding: 3rem;
  min-height: 100vw;
}

.component-9e3d8faf-9610-4f3b-9ed8-8bd61639f8cd .callout-container .rich-text {
  width: 40rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

@media only screen and (min-width: 768px) {
  .component-9e3d8faf-9610-4f3b-9ed8-8bd61639f8cd .callouts {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: calc(100vw - 8px);
    width: calc(100vw - 8px);
  }
  .component-9e3d8faf-9610-4f3b-9ed8-8bd61639f8cd .callout {
    min-height: 32rem;
  }
}

.component-9e3d8faf-9610-4f3b-9ed8-8bd61639f8cd.center .callout {
  align-items: center;
}
.component-a54f1f46-fc91-414a-8e23-409c37671beb p:last-child {
  margin-bottom: 0;
}

.component-a54f1f46-fc91-414a-8e23-409c37671beb figure img {
  width: 100%;
}

.component-a54f1f46-fc91-414a-8e23-409c37671beb * + .actions {
  margin-top: 2.5rem;
}
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .callouts {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( 100%, 1fr ) );
  grid-gap: 3rem;
  gap: 3rem;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .callout {
  padding-bottom: 3rem;
  background-color: #FFF;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow:  0px 2rem 4rem -1rem rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .callout:hover:not(.sortable-drag) {
  box-shadow:  0px 1rem 2rem -1rem rgba(0, 0, 0, 0.25);
  transform: rotate3d(1, 0, 0, 0deg) translateX(0);
  transition: all .5s ease-out !important;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .callout:hover {
  box-shadow:  0px 1rem 2rem -1rem rgba(0, 0, 0, 0.25);
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .callout .unstack-media,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .callout .unstack-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .rich-text {
  padding: 3rem;
  padding-bottom: 0;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .actions {
  padding: 0 2rem;
  margin-top: auto;
  width: 100%;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .callout .button {
  min-width: Min(calc(100% - 2rem), 200px);
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .responsive-media {
  height: auto !important;
  width: 100% !important;
  position: initial !important;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.left .callout .actions .text-action-container,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.left .callout .button {
  margin-left: 0rem;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.left .callout > *:not(.unstack-media),
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.left [data-placeholder]:before{
  padding-left: 3rem;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.center {
  text-align: center;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.center .callouts .callout .unstack-media,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.center .callouts .callout .actions {
  margin-left: auto;
  margin-right: auto;
}

/*Cards 3d*/

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.cards3d .callouts {
  perspective: 1000px;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.cards3d .callouts.perspective-none {
  perspective: none !important;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.cards3d .callout {
  transform: rotate3d(1, 0, 0, 0deg) translateX(0);
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.cards3d .callout:hover {
  transform: rotate3d(1, 0, 0, 0deg) translateX(0);
}

@media only screen and (min-width: 768px) {
  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.cards3d .callout {
    transform: rotate3d(1, 0, 0, 5deg) translateX(0);
  }
}

/*None*/

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.none .callout {
  background-color: transparent;
  border-radius: 0;
  box-shadow:  none;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.none .callout .actions {
  padding: 0;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.none p {
  margin-bottom: 1rem !important;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.left.none .callout > *:not(.unstack-media),
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.left.none [data-placeholder]:before{
  padding-left: 0rem;
}

/*Crop*/

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.portrait .callout .unstack-media:after,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.square .callout .unstack-media:after,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.landscape .callout .unstack-media:after {
  content: "";
  display: block;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.portrait .callout .unstack-media:after {
  padding-bottom: 133%;
}
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.square .callout .unstack-media:after {
  padding-bottom: 100%;
}
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.landscape .callout .unstack-media:after {
  padding-bottom: 75%;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.portrait .callout .unstack-media,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.square .callout .unstack-media,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.landscape .callout .unstack-media {
  position: relative;
  width: 100%;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.portrait .callout .unstack-media img,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.square .callout .unstack-media img,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.landscape .callout .unstack-media img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.portrait .callout .unstack-media .responsive-media,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.landscape .callout .unstack-media .responsive-media,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.square .callout .unstack-media .responsive-media {
  padding-bottom: 0 !important;
}

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.crop_none .responsive-media {
  height: 0 !important;
  position: relative !important;
}

/*Columns*/

.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.c2 .callouts,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.c3 .callouts,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.c4 .callouts,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.c5 .callouts,
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1.c6 .callouts {
  grid-template-columns: 1fr 1fr;
}

@media only screen and (min-width: 767px) {
  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.c2 .callouts {
    grid-template-columns: 1fr 1fr;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.c3 .callouts {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.c4 .callouts {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.c5 .callouts {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.c6 .callouts {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

/*Gap*/

/* ↓ mobile first default, normalize gap setting */
.component-51031b5a-63e4-4a4d-8bfa-662196064ef1 .callouts {
    gap: 2rem;
}

/* ↓ On desktop, set gap customization  */
@media (min-width: 767px) {
  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap0 .callouts {
    grid-gap: 0rem;
    gap: 0rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap1 .callouts {
    grid-gap: 1rem;
    gap: 1rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap2 .callouts {
    grid-gap: 2rem;
    gap: 2rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap3 .callouts {
    grid-gap: 3rem;
    gap: 3rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap4 .callouts {
    grid-gap: 4rem;
    gap: 4rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap5 .callouts {
    grid-gap: 5rem;
    gap: 5rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap6 .callouts {
    grid-gap: 6rem;
    gap: 6rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap7 .callouts {
    grid-gap: 7rem;
    gap: 7rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap8 .callouts {
    grid-gap: 8rem;
    gap: 8rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap9 .callouts {
    grid-gap: 9rem;
    gap: 9rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap10 .callouts {
    grid-gap: 10rem;
    gap: 10rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap11 .callouts {
    grid-gap: 11rem;
    gap: 11rem;
  }

  .component-51031b5a-63e4-4a4d-8bfa-662196064ef1.gap12 .callouts {
    grid-gap: 12rem;
    gap: 12rem;
  }
}