/** Shopify CDN: Minification failed

Line 151:0 Expected "}" to go with "{"

**/
@charset "UTF-8";
.image-comparison-banner {
  --change-ratio: 0;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner {
  position: relative;
  display: block;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .before-item {
  height: 100%;
  position: relative;
  padding: 2rem;
  background: rgb(var(--color-background));
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .before-item .media {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: rgba(var(--color-foreground), 0.6);
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .before-item .media .placeholder-svg {
  fill: rgb(var(--color-background));
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .after-item {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 2rem;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .after-item .media {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .button {
  position: absolute;
  transform: translate(calc(-50% * var(--translate-x-direction)), -50%);
  z-index: 2;
  cursor: col-resize;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .button .icon {
  width: 0.75rem;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 100%;
  height: 100%;
  background: rgba(var(--color-foreground), 0.15);
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:after {
  content: "";
  position: absolute;
  background: rgb(var(--color-background)); /* 和按钮色一致 */
  pointer-events: none;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--small {
  height: 25rem;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--medium {
  height: 35rem;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--large {
  height: 45rem;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.button--is-dragging .before-heading,
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.button--is-dragging .after-heading {
  animation: fadeOut 300ms cubic-bezier(0, 0, 0.3, 1) forwards;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner[data-vertical] .before-item {
  clip-path: polygon(0 0, 100% 0, 100% var(--change-ratio), 0% var(--change-ratio));
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner[data-vertical] .button {
  width: 3rem;
  left: 50%;
  top: var(--change-ratio);
  cursor: row-resize;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner[data-vertical]:after {
  top: var(--change-ratio);
  transform: translateY(-50%);
  left: 0;
  height: 3px;
  width: 100%;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner[data-vertical].enable-transition .button, .image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner[data-vertical].enable-transition:after {
  transition: top 500ms cubic-bezier(0, 0, 0.3, 1);
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:not([data-vertical]) .before-item {
  clip-path: polygon(0 0, var(--change-ratio) 0, var(--change-ratio) 100%, 0 100%);
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:not([data-vertical]) .button {
  height: 3rem;
  left: var(--change-ratio);
  top: 50%;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:not([data-vertical]):after {
  top: 0;
  left: var(--change-ratio);
  transform: translateX(calc(-50% * var(--translate-x-direction)));
  height: 100%;
  width: 3px;
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:not([data-vertical]).enable-transition .button, .image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:not([data-vertical]).enable-transition:after {
  transition: left 500ms cubic-bezier(0, 0, 0.3, 1);
}
.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.enable-transition .before-item {
  transition: clip-path 500ms cubic-bezier(0, 0, 0.3, 1);
}

@media screen and (max-width: 1600px) {
  .image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--large {
  height: 40rem;
}

@media screen and (max-width: 1430px) {
  .image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--large {
  height: 35rem;
}

}
@media screen and (max-width: 749px) {
  .image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--small {
    height: 15rem;
  }
  .image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--medium {
    height: 20rem;
  }
  .image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--large {
    height: 30rem;
  }
}