/* Comparison widget v31 — overlap reveal slider. */
.compare-wrap{min-width:0}
.compare{
  --split:50%;
  --handle-size:52px;
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:1.52;
  border-radius:var(--radius, 6px);
  overflow:hidden;
  isolation:isolate;
  background:#b69a8b;
  cursor:ew-resize;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.compare > img,
.compare-before,
.compare-before img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.compare > img,
.compare-before img{
  object-fit:cover;
  object-position:center;
  max-width:none;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.compare-after{z-index:0}
.compare-before{
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  clip-path: inset(0 calc(100% - var(--split)) 0 0 round 0);
  will-change: clip-path;
}
.compare-before img{width:100%;height:100%}
.compare-line{
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  left:var(--split);
  transform:translateX(-50%);
  width:2px;
  background:rgba(255,255,255,.98);
  box-shadow:0 0 8px rgba(55,34,23,.18);
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.compare-line > .compare-handle{
  position:relative;
  width:var(--handle-size);
  height:var(--handle-size);
  flex:0 0 var(--handle-size);
  box-sizing:border-box;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#7a5c43;
  background:#fff;
  border:2px solid #ccb9ab;
  box-shadow:0 3px 12px rgba(41,26,17,.12),0 0 0 2px rgba(255,255,255,.92);
  transition:box-shadow .2s, background .2s, transform .2s;
}
.compare.is-dragging .compare-handle{box-shadow:0 8px 22px rgba(41,26,17,.18),0 0 0 2px rgba(255,255,255,.95);transform:scale(1.02)}
.compare-handle svg{width:28px;height:18px;max-width:none;display:block}
.compare-line > .compare-hint{
  position:absolute;
  left:50%;
  top:calc(50% + var(--handle-size)/2 + 14px);
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100vw - 48px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 16px;
  border:1px solid rgba(204,185,171,.8);
  border-radius:100px;
  background:#fff;
  color:#7a5c43;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  font:700 11px/1 var(--sans);
  letter-spacing:.16em;
  white-space:nowrap;
  transition:opacity .2s,visibility .2s;
}
.compare-hint svg{display:none}
.compare.is-interacted .compare-hint{opacity:0;visibility:hidden}
.compare:focus-within .compare-handle{outline:3px solid #b08e74;outline-offset:3px}
.compare-label{
  position:absolute;
  z-index:3;
  bottom:16px;
  padding:8px 13px;
  font-size:10px;
  border-radius:7px;
  background:rgba(255,253,251,.94);
  border:1px solid rgba(156,122,91,.12);
  pointer-events:none;
}
.compare-label-left{left:16px}
.compare-label-right{right:16px}
.compare-input,
.compare-input:focus-visible{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  z-index:4;
  appearance:none;
  -webkit-appearance:none;
  opacity:0;
  outline:0;
  border:0;
  background:transparent;
  pointer-events:none;
}
.compare-input::-webkit-slider-runnable-track{height:100%;background:transparent;border:0}
.compare-input::-moz-range-track{height:100%;background:transparent;border:0}
.compare-input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:1px;height:1px;border:0;background:transparent;box-shadow:none}
.compare-input::-moz-range-thumb{width:1px;height:1px;border:0;background:transparent;box-shadow:none}
@media(max-width:700px){
  .compare{--handle-size:44px;aspect-ratio:1.12}
  .compare-handle svg{width:24px;height:16px}
  .compare-line > .compare-hint{top:calc(50% + var(--handle-size)/2 + 10px);font-size:10px;padding:8px 12px}
  .compare-label{font-size:10px;bottom:10px;padding:6px 9px}
  .compare-label-left{left:10px}
  .compare-label-right{right:10px}
}
@media(prefers-reduced-motion:reduce){.compare-handle,.compare-hint{transition:none}}