.op-compare-tool-host { position: relative; overflow: hidden; }
.op-compare-ink,
.op-compare-hit { position: absolute; z-index: 12; }
.op-compare-ink { pointer-events: none; transition: none; animation: none; }
.op-compare-hit { cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.op-compare-hit.is-selecting { cursor: crosshair; }
.op-compare-tool-host img { -webkit-user-drag: none; user-select: none; }
.op-compare-menu { position: fixed; z-index: 1500; min-width: 168px; padding: 6px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(17,24,39,.97); box-shadow: 0 18px 44px rgba(0,0,0,.36); color: #fff; }
.op-compare-menu > button { display: block; width: 100%; min-height: 38px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.op-compare-menu > button:hover,
.op-compare-menu > button:focus-visible { background: rgba(255,255,255,.12); outline: none; }
.op-compare-colors { display: flex; gap: 7px; padding: 7px 6px 9px; }
.op-compare-color { width: 24px; height: 24px; padding: 0; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; background: var(--marker); cursor: pointer; }
.op-compare-sizes { display: flex; gap: 6px; padding: 0 6px 8px; }
.op-compare-size { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: transparent; cursor: pointer; }
.op-compare-size span { display: block; border-radius: 50%; background: #fff; }
.op-compare-size.is-active { background: rgba(255,255,255,.2); border-color: #fff; }
.op-compare-color.is-active { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .op-compare-menu { min-width: 188px; }
  .op-compare-menu > button { min-height: 44px; }
  .op-compare-color { width: 28px; height: 28px; }
}