.comparison-widget {
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.comparison-widget :is(h2,h3,p) { margin: 0; }

.comparison-widget .comparison-action {
  justify-self: start;
  max-inline-size: 100%;
  min-block-size: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.comparison-photos {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  --comparison-ratio: 4/3;
}

.comparison-photos--square { --comparison-ratio: 1; }
.comparison-photos--portrait { --comparison-ratio: 3/4; }
.comparison-photos--wide { --comparison-ratio: 16/9; }

.comparison-widget .comparison-photos figure {
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bp-link,var(--card,#efeeeb));
}

.comparison-widget .comparison-photos img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: var(--comparison-ratio);
  object-fit: cover;
  border-radius: 0;
}

.comparison-widget .comparison-photos--contain img {
  object-fit: contain;
  background: var(--bp-link,var(--card,#efeeeb));
}

.comparison-photos figcaption {
  padding: 6px 9px;
  font-size: .8rem;
  overflow-wrap: anywhere;
}

[data-comparison-ready] .comparison-photos {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  cursor: ew-resize;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

[data-comparison-ready] .comparison-photos[data-comparison-dragging] { cursor: grabbing; }

[data-comparison-ready].comparison-widget .comparison-photos figure {
  grid-area: 1 / 1;
  border-radius: 0;
  background: transparent;
}

[data-comparison-ready] .comparison-photos figcaption {
  position: absolute;
  z-index: 3;
  inset-block-start: 8px;
  max-inline-size: calc(50% - 12px);
  padding: 4px 8px;
  border-radius: 6px;
  background: #222724;
  color: #fff;
}

[data-comparison-ready] .comparison-before figcaption { inset-inline-start: 8px; }
[data-comparison-ready] .comparison-after figcaption { inset-inline-end: 8px; }
[data-comparison-ready] .comparison-before img {
  position: relative;
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--comparison-position,50%)) 0 0);
}

[data-comparison-ready] .comparison-photos::after {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  left: var(--comparison-position,50%);
  width: 2px;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 0 0 1px #222724;
  pointer-events: none;
  content: "";
}

[data-comparison-ready] .comparison-photos::before {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: clamp(18px,var(--comparison-position,50%),calc(100% - 18px));
  width: 34px;
  height: 34px;
  transform: translate(-50%,-50%);
  border: 1px solid #222724;
  border-radius: 50%;
  background:
    linear-gradient(135deg,transparent 45%,#222724 46% 61%,transparent 62%) 9px 12px / 6px 5px no-repeat,
    linear-gradient(45deg,transparent 38%,#222724 39% 54%,transparent 55%) 9px 17px / 6px 5px no-repeat,
    linear-gradient(45deg,transparent 45%,#222724 46% 61%,transparent 62%) 19px 12px / 6px 5px no-repeat,
    linear-gradient(135deg,transparent 38%,#222724 39% 54%,transparent 55%) 19px 17px / 6px 5px no-repeat,
    #fff;
  pointer-events: none;
  content: "";
}

.comparison-control:not([hidden]) {
  display: grid;
  font-size: .8rem;
  font-weight: 600;
}

.comparison-control input[type="range"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  accent-color: var(--bp-primary,var(--primary,#36574d));
  cursor: grab;
}

.comparison-control input[type="range"]:hover { background: var(--bp-link,var(--card,#efeeeb)); }
.comparison-control input[type="range"]:active { cursor: grabbing; }
.comparison-control input[type="range"]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.comparison-layout--stack .comparison-photos {grid-template-columns:minmax(0,1fr)}
.comparison-layout--edge .comparison-photos {gap:0;border-radius:10px;overflow:hidden}
.comparison-widget.comparison-layout--edge .comparison-photos :is(figure,.comparison-thumb) {border-radius:0}
.comparison-layout--result .comparison-photos {grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center}
.comparison-widget.comparison-layout--framed .comparison-photos :is(figure,.comparison-thumb) {
  padding:clamp(6px,2.5%,14px);
  background:var(--bp-link,var(--card,#efeeeb));
  border:1px solid var(--bp-line,var(--border,#d6d5d0));
}
[data-comparison-ready].comparison-layout--quiet .comparison-photos::before {width:12px;height:20px;background:white;border-radius:4px}
[data-comparison-ready].comparison-layout--vertical .comparison-photos {cursor:ns-resize}
[data-comparison-ready].comparison-layout--vertical .comparison-before img {
  clip-path:inset(0 0 calc(100% - var(--comparison-position,50%)) 0);
}
[data-comparison-ready].comparison-layout--vertical .comparison-photos::after {
  inset:var(--comparison-position,50%) 0 auto;
  width:auto;height:2px;transform:translateY(-50%);
}
[data-comparison-ready].comparison-layout--vertical .comparison-photos::before {
  top:clamp(18px,var(--comparison-position,50%),calc(100% - 18px));
  left:50%;transform:translate(-50%,-50%) rotate(90deg);
}
[data-comparison-ready].comparison-layout--vertical .comparison-after figcaption {inset-block: auto 8px;inset-inline:8px auto}
.be-comparison-swatches {grid-template-columns:repeat(auto-fill,minmax(min(100%,112px),1fr))}
.be-comparison-swatches label > span {height:100%;align-content:space-between}
.be-comparison-swatches .comparison-widget {display:grid;place-items:center;width:100%;height:76px;background:var(--be-background);border-radius:5px}
.be-comparison-swatches .comparison-photos {width:min(100%,110px)}
.be-comparison-swatches .comparison-layout--stack .comparison-photos {width:42px;gap:3px}
.be-comparison-swatches :not(.comparison-layout--edge) > .comparison-photos {gap:4px}
.be-comparison-swatches .comparison-thumb {display:block;min-width:0;overflow:hidden;border-radius:4px}
.be-comparison-swatches [data-comparison-ready] .comparison-thumb {grid-area:1/1;border-radius:0}
.be-comparison-swatches [data-comparison-ready] .comparison-photos::before {display:none}
.be-comparison-swatches .comparison-layout--quiet .comparison-photos::after {width:1px;box-shadow:none}
.be-comparison-swatches .comparison-widget .comparison-photos {border-radius:5px}
.be-comparison-swatches .comparison-widget {overflow:hidden}
.be-comparison-swatches .comparison-photos {width:min(100%,98px)}
.be-comparison-swatches [data-comparison-ready] .comparison-photos--portrait {width:min(100%,57px)}
.be-comparison-swatches .comparison-layout--stack .comparison-photos--portrait {width:26px}
.be-comparison-controls {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px;margin-block-start:12px}
.be-comparison-appearance [data-comparison-live-sample] .be-preview-page {min-height:0;max-width:360px;margin-inline:auto;padding:10px}
.be-comparison-appearance [data-comparison-live-sample] .be-preview-blocks {margin:0}
@media(max-width:420px) {
  .be-comparison-swatches {grid-template-columns:repeat(2,minmax(0,1fr))}
}