.kba{--kba-columns:2;--kba-gap:20px;--kba-height:420px;--kba-radius:14px;--kba-handle-color:#fff;--kba-label-bg:#142328d9;--kba-label-color:#fff;--kba-line:3px;--kba-handle-size:46px;--kba-fit:cover;--kba-focus:#167e91;width:100%;min-width:0;box-sizing:border-box}
.kba *{box-sizing:border-box}.kba-viewport{overflow:hidden}.kba-track{display:flex;gap:var(--kba-gap);direction:ltr;transition:transform .35s ease}.kba-slide{flex:0 0 100%;min-width:0}.kba[data-layout=carousel] .kba-slide{flex-basis:calc((100% - (var(--kba-columns) - 1)*var(--kba-gap))/var(--kba-columns))}.kba[data-layout=gallery] .kba-track{display:block}.kba [hidden]{display:none!important}
.kba-stage{position:relative;height:var(--kba-height);overflow:hidden;border-radius:var(--kba-radius);isolation:isolate;touch-action:pan-y;user-select:none;background:#e8edef;direction:ltr;cursor:ew-resize}.kba-stage[data-axis=vertical]{touch-action:pan-x;cursor:ns-resize}.kba-image{position:absolute;inset:0;pointer-events:none}.kba .kba-image img{display:block;width:100%;height:100%;max-width:none;object-fit:var(--kba-fit);object-position:center;border-radius:0}.kba-before{clip-path:inset(0 calc(100% - var(--kba-position)) 0 0);z-index:1}.kba-stage[data-axis=vertical] .kba-before{clip-path:inset(0 0 calc(100% - var(--kba-position)) 0)}
.kba-placeholder{height:100%;display:grid;place-items:center;padding:24px;text-align:center;background:linear-gradient(135deg,#d4e7e9,#e4dbcd);color:#25404a;font:500 15px/1.5 system-ui}.kba-before .kba-placeholder{background:linear-gradient(135deg,#bac8cf,#829da9)}
.kba-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--kba-position);width:var(--kba-line);background:var(--kba-handle-color);transform:translateX(-50%);pointer-events:none;box-shadow:0 0 3px #0005}.kba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--kba-handle-size);height:var(--kba-handle-size);display:grid;place-items:center;border:2px solid var(--kba-handle-color);border-radius:50%;background:#11242b9c;color:var(--kba-handle-color);font:26px/1 system-ui;pointer-events:auto;cursor:ew-resize;box-shadow:0 3px 15px #0003}.kba-stage[data-axis=vertical] .kba-divider{top:var(--kba-position);left:0;right:0;bottom:auto;width:100%;height:var(--kba-line);transform:translateY(-50%)}.kba-stage[data-axis=vertical] .kba-handle{cursor:ns-resize}
.kba-label{position:absolute;z-index:2;top:18px;padding:7px 13px;background:var(--kba-label-bg);color:var(--kba-label-color);border-radius:5px;font:600 13px/1.4 system-ui;max-width:42%;overflow-wrap:anywhere;pointer-events:none}.kba-label-before{left:18px}.kba-label-after{right:18px}.kba-stage[data-axis=vertical] .kba-label-after{top:auto;bottom:18px}.kba-caption{margin:12px 0 0;color:inherit;font-size:15px;line-height:1.5}.kba-navigation{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}.kba button{font:inherit;cursor:pointer}.kba-navigation button{min-width:44px;min-height:44px;border:1px solid #d5dfe1;border-radius:8px;background:#fff;color:#183b44;padding:8px 12px}.kba-navigation button:hover{background:#eff5f6}.kba-navigation button:disabled{opacity:.35;cursor:default}.kba-thumbnails{display:flex;gap:10px;padding:8px 3px;overflow-x:auto;margin-top:12px}.kba-thumbnails button{flex:0 0 78px;height:60px;overflow:hidden;padding:3px;border:2px solid transparent;background:transparent;border-radius:8px}.kba-thumbnails button[aria-current=true]{border-color:var(--kba-focus)}.kba-thumbnails img{width:100%;height:100%;object-fit:cover;border-radius:4px}.kba-empty{padding:40px;border:1px dashed #aabcc1;text-align:center;color:#37525a}
@media(max-width:1024px){.kba{--kba-height:340px;--kba-columns:2}}@media(max-width:767px){.kba{--kba-height:280px;--kba-columns:1}.kba-label{font-size:11px;top:12px;padding:6px 9px}.kba-label-before{left:12px}.kba-label-after{right:12px}}
.kba .kba-image img{transition:filter var(--kba-effects-duration,250ms),opacity var(--kba-effects-duration,250ms)}
.kba .kba-stage[data-height-mode=auto]{height:auto}
.kba .kba-stage[data-height-mode=auto][data-height-source=before] .kba-before,.kba .kba-stage[data-height-mode=auto][data-height-source=after] .kba-after{position:relative;inset:auto}
.kba .kba-stage[data-height-mode=auto][data-height-source=before] .kba-before img,.kba .kba-stage[data-height-mode=auto][data-height-source=after] .kba-after img{height:auto;width:100%}
.kba-stage[data-height-mode=auto] .kba-placeholder{min-height:180px}
.kba-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:#0005;opacity:0;transition:opacity var(--kba-effects-duration,250ms),background-color var(--kba-effects-duration,250ms)}
.kba-stage[data-overlay=always] .kba-overlay,.kba-stage[data-overlay=hide-hover] .kba-overlay,.kba-stage[data-overlay=show-hover]:is(:hover,:focus-within) .kba-overlay{opacity:1}
.kba-stage[data-overlay=hide-hover]:is(:hover,:focus-within) .kba-overlay{opacity:0}
.kba .kba-divider{z-index:4;background:none;box-shadow:none}
.kba-divider:before{content:"";position:absolute;inset:0;border-left:var(--kba-line) var(--kba-line-style,solid) var(--kba-line-color,var(--kba-handle-color));pointer-events:none}
.kba-stage[data-axis=vertical] .kba-divider:before{border-left:0;border-top:var(--kba-line) var(--kba-line-style,solid) var(--kba-line-color,var(--kba-handle-color))}
.kba .kba-handle{border-width:var(--kba-handle-border-width,2px);border-color:var(--kba-handle-border,var(--kba-handle-color));background:var(--kba-handle-bg,#11242b9c);color:var(--kba-icon-color,var(--kba-handle-color));font-size:var(--kba-icon-size,26px);transition:color var(--kba-effects-duration,250ms),background-color var(--kba-effects-duration,250ms),border-color var(--kba-effects-duration,250ms)}
.kba-handle[data-shape=square]{border-radius:0}.kba-handle[data-shape=rounded]{border-radius:10px}.kba .kba-handle[data-shape=none]{border:0;background:transparent;box-shadow:none}
.kba-handle-icon{display:flex;align-items:center;justify-content:center;line-height:1;pointer-events:none}.kba-handle-icon svg{width:1em;height:1em;fill:currentColor}.kba-handle-icon i{font-size:inherit}
.kba .kba-label{z-index:3;top:var(--kba-label-inset,18px)}.kba .kba-label-before{left:var(--kba-label-inset,18px)}.kba .kba-label-after{right:var(--kba-label-inset,18px)}.kba .kba-stage[data-axis=vertical] .kba-label-after{top:auto;bottom:var(--kba-label-inset,18px)}
.kba .kba-stage .kba-label:not([data-position=auto]){top:auto;right:auto;bottom:auto;left:auto;transform:none}
.kba .kba-stage .kba-label[data-position^=top-]{top:var(--kba-label-inset,18px)}
.kba .kba-stage .kba-label[data-position^=bottom-]{bottom:var(--kba-label-inset,18px)}
.kba .kba-stage .kba-label[data-position$=-left]{left:var(--kba-label-inset,18px)}
.kba .kba-stage .kba-label[data-position$=-right]{right:var(--kba-label-inset,18px)}
.kba .kba-stage .kba-label[data-position$=-center]{left:50%;transform:translateX(-50%)}
.kba .kba-stage .kba-label[data-position^=center-]{top:50%;transform:translateY(-50%)}
.kba .kba-stage .kba-label[data-position=center]{top:50%;left:50%;transform:translate(-50%,-50%)}
@media(max-width:767px){.kba{--kba-label-inset:12px}}
@media(prefers-reduced-motion:reduce){.kba-track,.kba .kba-image img,.kba-overlay,.kba .kba-handle{transition:none}}
/* Suppress plugin and theme focus rings on all comparison-widget controls. */
.kba:focus,.kba:focus-visible,.kba :focus,.kba :focus-visible{outline:none!important;outline-offset:0!important;box-shadow:none!important}