/** Shopify CDN: Minification failed

Line 349:0 Unexpected "@media"

**/
.section__wrapper {
  background: var(--color-beige-400);
  border-radius: var(--radius-l);
  padding: 28px 20px;
}

.section__content-image-with-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
}

.section__content-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.image-comparison__wrapper {
  position: relative;
  width: 100%;
  background: var(--color-white-300);
}

.image-comparison__wrapper img,
.image-comparison__wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.image-comparison--media {
  display: block;
  position: relative;
  overflow: hidden;
}

.section__content-image .image-comparison {
  width: 100%;
  min-width: unset;
  flex: 1;
}

.section__content-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: center;
  max-width: 100%;
  width: 100%;
}

.image-comparison-section__text-block {
  --text-margin-top: 1.6rem;
}

.image-comparison-section__text-block .rich-text__heading {
  color: rgb(var(--color-heading, var(--color-foreground)));
}

.image-comparison-section__text-block + .image-comparison-section__text-block {
  margin-block-start: 2rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid
    rgba(var(--color-border), var(--color-border-alpha, 1));
}

.image-comparison-section--has-sidebar {
  --header-padding-bottom: 2.4rem;
  --header-padding-bottom-mobile: 1.6rem;
}

.image-comparison {
  z-index: 0;
  --color-foreground: 34, 34, 34;
  --drag-thickness: 0.2rem;
  --button-size: 5rem;
  --button-icon-size: 2.4rem;
  --heading-offset-x: 1.6rem;
  --heading-offset-y: 1.6rem;
}

.image-comparison--small {
  --hero-height: 32rem;
}

.image-comparison--medium {
  --hero-height: 40rem;
}

.image-comparison--large {
  --hero-height: 50rem;
}

.image-comparison[is-visible] {
  --percent: 50%;
}

.image-comparison__animation-trigger {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1rem;
  pointer-events: none;
}

.image-comparison--media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--color-white-300);
}

.image-comparison__before .placeholder-svg {
  background-color: var(--color-black);
}

.image-comparison__after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-comparison__button {
  display: flex;
  cursor: pointer;
  position: absolute;
  color: inherit;
  border: none;
  padding: 0;
  transition: none;
  z-index: 2;
  z-index: 2;
}
.image-comparison__button::after {
  content: "";
  background: white;
  width: 1px;
  height: 100%;
}

.image-comparison__button-icons {
  position: absolute;
  background-color: var(--color-white-100);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 50%;
  padding: 0px 4px;
  top: 50%;
  left: 50%;
  max-width: var(--button-size);
  height: var(--button-size);
  transform: translate(-50%, -50%);
}

.image-comparison__button span {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-comparison__button span:before {
  content: "";
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-comparison__button svg {
  width: 14px;
  height: 14px;
}

.image-comparison__product {
  margin-top: 1.6rem;
}

.image-comparison__product-title {
  padding: 0 !important;
}

.image-comparison__product .f-price > * {
  margin: 0;
}

.image-comparison__wrapper {
  height: var(--hero-height);
}

.image-comparison__wrapper img,
.image-comparison__wrapper svg {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
}

.image-comparison__heading {
  position: absolute;
  inset-block: auto var(--heading-offset-y);
  inset-inline: var(--heading-offset-x) auto;
  z-index: 1;
  margin: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
  text-transform: inherit;
  color: var(--color-white-100);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

.image-comparison__after .image-comparison__heading {
  inset-inline: auto var(--heading-offset-x);
}

.image-comparison__heading-style--badge .image-comparison__heading {
  border-radius: var(--badges-radius);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white-200);
}

.image-comparison__heading-style--plain .image-comparison__heading {
  background: none;
}

.image-comparison[data-direction="horizontal"] .image-comparison__after {
  clip-path: inset(0px 0px 0px var(--percent, 50%));
}

.image-comparison[data-direction="horizontal"] .image-comparison__button {
  top: 0;
  inset-inline-start: var(--percent, 50%);
  margin-inline-start: -1.4rem;
  height: 100%;
  width: 2.8rem;
  cursor: col-resize;
}

.image-comparison[data-direction="horizontal"]
  .image-comparison__button:before {
  top: 0;
  left: 50%;
  height: 100%;
  width: var(--drag-thickness);
  margin-left: calc(var(--drag-thickness) / -2);
}

.image-comparison[data-direction="vertical"]
  .image-comparison__before
  .image-comparison__heading {
  inset-block: var(--heading-offset-y) auto;
}

.image-comparison[data-direction="vertical"] .image-comparison__after {
  clip-path: inset(var(--percent, 50%) 0px 0px 0px);
}

.image-comparison[data-direction="vertical"]
  .image-comparison__after
  .image-comparison__heading {
  inset-inline: var(--heading-offset-x) auto;
}

.image-comparison[data-direction="vertical"] .image-comparison__button {
  left: 0;
  top: var(--percent, 50%);
  width: 100%;
  height: 2.8rem;
  margin-top: -1.4rem;
  cursor: row-resize;
}

.image-comparison[data-direction="vertical"] .image-comparison__button:before {
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--drag-thickness);
  margin-top: calc(var(--drag-thickness) / -2);
}

.image-comparison[data-direction="vertical"] .image-comparison__button span {
  transform: rotate(90deg) translate(-50%, 50%);
}

.image-comparison.is-animating .image-comparison__after {
  transition-property: clip-path;
  transition-duration: 1s;
  transition-timing-function: ease;
}

.image-comparison.is-animating .image-comparison__button {
  transition-property: top, left, right;
  transition-duration: 1s;
  transition-timing-function: ease;
}

.image-comparison.is-dragging .image-comparison__heading {
  opacity: 0;
}

.image-comparison {
  overflow: hidden;
}

.image-comparison,
.image-comparison__wrapper {
  overflow: hidden;
}

.image-comparison__button-icons {
  width: 50px;
  height: 50px;
  padding: 0px 6px;
}jk

@media (prefers-reduced-motion: no-preference) {
  .image-comparison:not([is-visible]) {
    --percent: 95%;
  }
}

@media (min-width: 1348px) {
}

@media (min-width: 990px) {
  .section__wrapper {
    padding: 80px;
  }
  .image-comparison-section--has-sidebar
    :not(.page-width--full)
    .section__wrapper {
    padding-inline: 5rem;
  }
  .section__content-text {
    max-width: 524px;
  }
  .section__content-image-with-text {
    gap: 64px;
  }

  .section__content-text {
    max-width: 480px;
  }

  .section__content-image-with-text {
    flex-direction: row;
    gap: 48px;
    align-items: center;
  }
  .section__wrapper {
    padding: 60px 48px;
  }

  .section__content-image {
    flex: 1;
    min-width: 0;
  }

  .section__content-image .image-comparison {
    min-width: unset;
    flex: 1;
  }

  .section__content-text {
    max-width: 420px;
    flex: 0 0 auto;
    min-width: 0;
  }
  .image-comparison--image-mobile {
    display: none !important;
  }

  .image-comparison--small {
    --hero-height: 42rem;
  }

  .image-comparison--medium {
    --hero-height: 56rem;
  }

  .image-comparison--large {
    --hero-height: 72rem;
  }

  .image-comparison__button span {
    width: 20px;
    height: 20px;
  }

  .image-comparison__button svg {
    width: 18px;
    height: 18px;
  }

  .section__wrapper {
    padding: 40px 32px;
  }

  .section__content-image-with-text {
    gap: 48px;
  }

  .section__content-text {
    gap: 20px;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .image-comparison:not([is-visible]) {
    --percent: 97.8%;
  }
}

@media (max-width: 768px) {
  .image-comparison {
    --drag-thickness: 0.3rem;
    --button-size: 4rem;
    --button-icon-size: 1.92rem;
  }

  .image-comparison--small {
    --hero-height: 25rem;
  }

  .image-comparison--medium {
    --hero-height: 32rem;
  }

  .image-comparison--large {
    --hero-height: 40rem;
  }

  .image-comparison__heading {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
  }
  .image-comparison__wrapper.has-mobile-image .image-comparison--image-desktop {
    display: none;
  }
  .image-comparison-section__text-block
    + .image-comparison-section__text-block {
    margin-block-start: 1.6rem;
    padding-block-start: 1.6rem;
  }

  .image-comparison__wrapper {
    max-height: 280px;
    padding-top: calc(100% / var(--aspect-ratio-mobile, 1.778));
  }
  .section__wrapper {
    padding: 20px 16px;
  }

  .section__content-image-with-text {
    gap: 24px;
  }

  .image-comparison__button-icons {
    width: 36px;
    height: 36px;
    padding: 0px 3px;
  }

  .image-comparison__button svg {
    width: 12px;
    height: 12px;
  }

  .image-comparison__heading {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
  }
}