/** Shopify CDN: Minification failed

Line 9:0 Unexpected "{"
Line 9:1 Expected identifier but found "%"
Line 9:13 Unexpected "="
Line 11:25 Expected identifier but found "%"

**/
{% comment %}========================
File: /assets/before-after.css  (polished two-column + overlay; replace or append)
========================{% endcomment %}
/* Base */
.before-after { position: relative; overflow: hidden; }
.before-after__viewport { width: 100%; }
.before-after__stage { position: relative; width: 100%; height: auto; user-select: none; touch-action: none; }
.before-after__figure { margin: 0; position: absolute !important; inset: 0 !important; }
.before-after__figure.before { z-index: 1; }
.before-after__figure.after  { z-index: 2; overflow: hidden; clip-path: inset(0 calc(100% - var(--clip, 50%)) 0 0) !important; }
.before-after__img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.before-after__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: .9rem; background: #f3f3f3; color: #666; }

/* Handle */
.before-after__handle { position: absolute; top: 0; bottom: 0; left: calc(var(--clip, 50%) - 1rem); width: 2.75rem; cursor: ew-resize; z-index: 3; display: grid; place-items: center; }
.before-after__grip {
  width: 2.75rem; height: 2.75rem; border-radius: 999px; background: #fff;
  border: 1px solid rgb(0 0 0 / .2); box-shadow: 0 2px 6px rgb(0 0 0 / .15);
  display: grid; place-items: center;
}
.before-after__grip::before,
.before-after__grip::after {
  content: ""; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.before-after__grip::before { border-right: 8px solid #333; margin-right: 6px; }
.before-after__grip::after  { border-left: 8px solid #333; margin-left: 6px; }
.before-after__percent { position: absolute; top: .5rem; transform: translateX(-50%); font-size: .875rem; padding: .125rem .375rem; background: rgb(255 255 255 / .85); border-radius: .25rem; }
.before-after__range { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .before-after__handle, .before-after__figure.after { transition: none !important; }
}

/* Aspect ratios (stage owns height) */
.before-after[data-height-mode="auto"] .before-after__stage { height: auto; aspect-ratio: auto; }
.before-after[data-height-mode="ratio_16_9"] .before-after__stage { aspect-ratio: 16 / 9; }
.before-after[data-height-mode="ratio_4_3"]  .before-after__stage { aspect-ratio: 4 / 3; }
.before-after[data-height-mode="ratio_square"] .before-after__stage { aspect-ratio: 1 / 1; }

/* Layout: slider + content */
.before-after__layout { display: grid; gap: 2rem; align-items: center; }
.before-after__layout--left,
.before-after__layout--right { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .before-after__layout--left.one-third,
  .before-after__layout--right.one-third { grid-template-columns: 1fr 2fr; }
  .before-after__layout--left.one-half,
  .before-after__layout--right.one-half  { grid-template-columns: 1fr 1fr; }
}
.before-after__layout--left .before-after__content { order: 0; }
.before-after__layout--left .before-after__viewport { order: 1; }
.before-after__layout--right .before-after__viewport { order: 0; }
.before-after__layout--right .before-after__content { order: 1; }

/* Overlay variant */
.before-after__layout--overlay { position: relative; }
.before-after__layout--overlay .before-after__content[data-overlay] {
  position: absolute; inset: auto auto 1.5rem 1.5rem; z-index: 4;
  max-width: min(560px, 90%); background: rgb(255 255 255 / .9);
  backdrop-filter: blur(6px); border-radius: .75rem; padding: 1rem 1.25rem;
}

/* Content styles */
.before-after__content {}
.before-after__kicker { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .25rem; opacity: .8; }
.before-after__heading { margin: 0 0 .5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1.2; }
.before-after__text p { margin: 0 0 .75rem; }
.before-after__button {
  display: inline-block; margin-top: .5rem; padding: .75rem 1.25rem; border-radius: .375rem;
  background: #111; color: #fff; text-decoration: none; border: 1px solid #111;
}
.before-after__button--secondary { background: transparent; color: #111; }

/* Optional cursor icon if you upload one
.before-after__stage { cursor: url({{ 'cursor-ew.svg' | asset_url }}) 16 16, ew-resize; } */

/* Lazy-height shim fallback (disabled when aspect-ratio supported) */
.before-after__stage.has-shim::before {
  content: "";
  display: block;
  padding-top: var(--ratio-pct, 56.25%);
}
@supports (aspect-ratio: 1 / 1) {
  .before-after__stage.has-shim::before { content: none; }
}