/** Shopify CDN: Minification failed

Line 100:0 Unexpected "}"

**/
.tgd-before-after-home {
  width: 100%;

  overflow: hidden;

  background: #ffffff;
}

.tgd-before-after-home__inner {
  width: 100%;

  box-sizing: border-box;

  padding: 36px 32px;
}

.tgd-before-after-home__header {
  width: 100%;

  margin-bottom: 30px;

  text-align: center;
}

.tgd-before-after-home__title {
  margin: 0;

  color: #2b00f9;

  font-family: "Vaud Display", sans-serif;
  font-size: clamp(58px, 4.6vw, 96px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.075em;

  text-align: center;
}

.tgd-before-after-home__footer {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  margin-top: 18px;

  text-align: center;
}

.tgd-before-after-home__subtitle {
  margin: 0;

  color: #111111;

  font-family: "Vaud Display", sans-serif;
  font-size: clamp(19px, 1.35vw, 27px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.tgd-before-after-home__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 14px;

  padding: 7px 18px 6px;

  border: 1.5px solid #111111;
  border-radius: 3px;

  color: #111111;
  background: transparent;

  font-family: "Vaud Display", sans-serif;
  font-size: clamp(18px, 1.3vw, 26px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;

  text-decoration: none;

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

.tgd-before-after-home__button:hover {
  color: #ffffff;
  background: #111111;
}
}
/* COMPARISON
   -------------------------------- */

.tgd-before-after-home__compare {
  position: relative;

  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: var(--tgd-before-after-desktop-ratio, 16 / 9);

  overflow: hidden;

  background: #2b00f9;

  border-radius: 6px;

  cursor: ew-resize;

  user-select: none;
  -webkit-user-select: none;
}
/* COMPARISON
   -------------------------------- */

.tgd-before-after-home__compare {
  position: relative;

  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: var(--tgd-before-after-desktop-ratio, 16 / 9);

  overflow: hidden;

  background: #2b00f9;

  border-radius: 6px;

  cursor: ew-resize;

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

/* IMAGE LAYERS
   -------------------------------- */

.tgd-before-after-home__layer {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;
}

.tgd-before-after-home__layer picture {
  display: block;

  width: 100%;
  height: 100%;
}

.tgd-before-after-home__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  pointer-events: none;
}

.tgd-before-after-home__layer--before {
  z-index: 1;
}

.tgd-before-after-home__layer--after {
  z-index: 2;

  clip-path:
    inset(
      0
      calc(100% - var(--tgd-before-after-position))
      0
      0
    );
}


/* DIVIDER
   -------------------------------- */

.tgd-before-after-home__divider {
  position: absolute;

  top: 0;
  bottom: 0;
  left: var(--tgd-before-after-position);

  z-index: 3;

  width: 2px;

  background: rgba(255, 255, 255, 0.95);

  transform: translateX(-50%);

  pointer-events: none;
}


/* HANDLE
   -------------------------------- */

.tgd-before-after-home__handle {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 54px;
  height: 54px;

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

  border-radius: 50%;

  background: #2b00f9;

  border: 2px solid #ffffff;

  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.18);

  transform:
    translate(-50%, -50%);
}

.tgd-before-after-home__handle-left,
.tgd-before-after-home__handle-right {
  position: relative;

  width: 11px;
  height: 11px;
}

.tgd-before-after-home__handle-left::before,
.tgd-before-after-home__handle-right::before {
  content: "";

  position: absolute;

  top: 50%;

  width: 8px;
  height: 8px;

  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

.tgd-before-after-home__handle-left::before {
  left: 3px;

  transform:
    translateY(-50%)
    rotate(-135deg);
}

.tgd-before-after-home__handle-right::before {
  right: 3px;

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* INVISIBLE INTERACTIVE RANGE
   -------------------------------- */

.tgd-before-after-home__range {
  position: absolute;

  inset: 0;

  z-index: 4;

  width: 100%;
  height: 100%;

  margin: 0;

  opacity: 0;

  cursor: ew-resize;

  touch-action: pan-y;
}


/* TABLET
   -------------------------------- */

@media screen and (min-width: 750px) and (max-width: 1199px) {
  .tgd-before-after-home__inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}


/* MOBILE
   -------------------------------- */

@media screen and (max-width: 749px) {
  .tgd-before-after-home__inner {
    padding: 24px 16px;
  }

  .tgd-before-after-home__compare {
    aspect-ratio: var(--tgd-before-after-mobile-ratio, 4 / 5);

    border-radius: 5px;
  }

  .tgd-before-after-home__handle {
    width: 46px;
    height: 46px;
  }

  .tgd-before-after-home__handle-left,
  .tgd-before-after-home__handle-right {
    width: 10px;
    height: 10px;
  }
}