.sx-comparison-open { min-height:44px; margin:12px 4px 0; padding:10px 16px; border:1px solid var(--color-zinc-300); border-radius:var(--radius-lg); background:var(--color-white); color:var(--color-zinc-950); font:inherit; font-weight:600; cursor:pointer; }
.sx-comparison-open:focus-visible { outline:3px solid var(--color-primary-600); outline-offset:3px; }
.sx-comparison-open[hidden] { display:none !important; }
.sx-unit-picker-compare { width:100%; margin:12px 0 0; }
.sx-comparison-dialog a.sx-comparison-choose { display:block; margin:8px 16px; padding:10px; min-height:44px; text-align:center; border:1px solid var(--color-primary-600); border-radius:var(--radius-lg); background:var(--color-primary-50); font-weight:600; text-decoration:none; }
.sx-comparison-differences { margin:12px 0; font-size:.8rem; }
.sx-comparison-differences summary { cursor:pointer; min-height:44px; padding:12px 0; font-weight:600; }
.sx-comparison-differences table { width:100%; table-layout:fixed; border-collapse:collapse; }
.sx-comparison-differences :is(th, td) { padding:10px 8px; text-align:left; vertical-align:top; border-bottom:1px solid var(--color-zinc-200); overflow-wrap:anywhere; }
.sx-comparison-dialog {
    --sx-comparison-padding:24px;
    box-sizing:border-box; width:min(1360px, calc(100vw - 32px)); max-width:none;
    max-height:calc(100dvh - 32px); margin:auto; padding:24px; overflow:auto;
    border:1px solid var(--color-zinc-300); border-radius:var(--radius-2xl);
    background:var(--color-zinc-50); color:var(--color-zinc-950); font:inherit;
    overscroll-behavior:contain; scroll-padding-top:88px;
}
.sx-comparison-dialog::backdrop { background:color-mix(in srgb, var(--color-black) 50%, transparent); backdrop-filter:blur(4px); }
.sx-comparison-dialog *, .sx-comparison-dialog *::before, .sx-comparison-dialog *::after { box-sizing:border-box; }
.sx-comparison-dialog [hidden] { display:none !important; }
.sx-comparison-navigation { position:sticky; top:calc(-1 * var(--sx-comparison-padding)); z-index:2; margin-top:calc(-1 * var(--sx-comparison-padding)); padding:var(--sx-comparison-padding) 0 8px; background:inherit; }
.sx-comparison-header { display:flex; justify-content:space-between; align-items:start; gap:24px; }
.sx-comparison-header > div:first-child { min-width:0; }
.sx-comparison-window-actions { display:flex; flex-shrink:0; gap:8px; }
.sx-comparison-window-actions button { white-space:nowrap; }
.sx-comparison-layout, .sx-comparison-dialog .sx-comparison-detail-hint { display:none; }
.sx-comparison-eyebrow { display:block; color:var(--color-primary-700); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
.sx-comparison-dialog h2 { font-size:1.5rem; font-weight:700; margin:0 0 6px; }
.sx-comparison-dialog h3 { font-size:.95rem; font-weight:700; margin:0; overflow-wrap:anywhere; }
.sx-comparison-dialog h4 { font-size:.9rem; font-weight:700; margin:16px 0 4px; }
.sx-comparison-dialog p { font-size:.85rem; line-height:1.5; margin:4px 0 12px; }
.sx-comparison-header p { max-width:760px; color:var(--color-zinc-600); }
.sx-comparison-dialog button, .sx-comparison-dialog select {
    position:static; inset:auto; transform:none; min-height:44px; max-width:100%;
    border:1px solid var(--color-zinc-300); border-radius:var(--radius-lg); padding:8px 12px;
    background:var(--color-white); color:var(--color-zinc-950); font:inherit; font-size:.8rem;
}
.sx-comparison-dialog button { cursor:pointer; font-weight:600; }
.sx-comparison-dialog button:hover { border-color:var(--color-primary-600); }
.sx-comparison-dialog button:disabled, .sx-comparison-dialog select:disabled { opacity:.5; cursor:default; }
.sx-comparison-dialog :focus-visible { outline:3px solid var(--color-primary-600); outline-offset:3px; }
.sx-comparison-dialog a { display:inline-block; color:var(--color-primary-700); text-decoration:underline; margin-top:12px; }
.sx-comparison-selections { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin:12px 0; }
.sx-comparison-dialog label { display:grid; min-width:0; gap:5px; font-size:.75rem; font-weight:600; }
.sx-comparison-selections select { width:100%; text-overflow:ellipsis; }
.sx-comparison-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.sx-comparison-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0; }
.sx-comparison-navigation .sx-comparison-actions { margin:8px 0 0; gap:6px; }
.sx-comparison-navigation :is(#sx-comparison-zoom-in, #sx-comparison-zoom-out) { min-width:44px; font-size:1.1rem; padding:8px; }
.sx-comparison-more { margin:12px 0; }
.sx-comparison-more summary { min-height:44px; padding:12px 0; cursor:pointer; font-size:.8rem; font-weight:600; }
.sx-comparison-view-label { min-width:130px !important; }
.sx-comparison-modes { display:flex; gap:4px; }
.sx-comparison-modes [aria-pressed="true"], .sx-comparison-layout [aria-pressed="true"], #sx-comparison-play[aria-pressed="true"], #sx-comparison-framing[aria-pressed="true"] { border-color:var(--color-primary-600); color:var(--color-primary-700); background:var(--color-primary-50); }
#sx-comparison-pose { margin-left:auto; align-self:center; white-space:nowrap; font-size:.9rem; font-weight:700; font-variant-numeric:tabular-nums; }
.sx-comparison-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.sx-comparison-grid article { min-width:0; overflow:hidden; border:1px solid var(--color-zinc-200); border-radius:var(--radius-xl); background:var(--color-white); }
.sx-comparison-unit-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; column-gap:12px; padding:14px 16px 0; min-height:44px; }
.sx-comparison-dialog .sx-comparison-price { font-size:1.1rem; font-weight:700; margin:0; }
.sx-comparison-dialog .sx-comparison-grade { color:var(--color-zinc-600); margin:2px 16px 10px; }
.sx-comparison-surface { position:relative; height:clamp(220px, 39dvh, 470px); overflow:hidden; background:var(--color-white); border-block:1px solid var(--color-zinc-100); }
.sx-comparison-canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.sx-comparison-canvas:active { cursor:grabbing; }
.sx-comparison-canvas:focus-visible { outline-offset:-3px; }
.sx-comparison-dialog[data-interaction="pan"] .sx-comparison-canvas { cursor:move; }
.sx-comparison-surface.is-loading .sx-comparison-canvas { opacity:.35; }
.sx-comparison-surface .sx-comparison-message { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; margin:0; text-align:center; pointer-events:none; }
.sx-comparison-message { padding:16px; color:var(--color-zinc-600); }
.sx-comparison-reticle { position:absolute; width:22px; height:22px; transform:translate(-50%,-50%); border:1px solid var(--color-white); border-radius:50%; box-shadow:0 0 0 1px var(--color-primary-700); pointer-events:none; }
.sx-comparison-reticle::before, .sx-comparison-reticle::after { content:''; position:absolute; background:var(--color-primary-700); }
.sx-comparison-reticle::before { width:1px; height:30px; left:9px; top:-5px; }
.sx-comparison-reticle::after { width:30px; height:1px; left:-5px; top:9px; }
.sx-comparison-dialog .sx-comparison-quality { color:var(--color-zinc-500); font-size:.72rem; padding:8px 16px; margin:0; min-height:32px; }
.sx-comparison-facts { padding:0 16px 12px; font-size:.8rem; }
.sx-comparison-facts summary { min-height:44px; display:list-item; padding:10px 0; font-weight:600; cursor:pointer; }
.sx-comparison-dialog dl { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:.8rem; margin:12px 0; }
.sx-comparison-dialog dt { color:var(--color-zinc-600); }
.sx-comparison-dialog dd { margin:0; }
.sx-comparison-dialog ul { margin:4px 0; padding-left:20px; list-style:disc; font-size:.8rem; }
.sx-comparison-box-contents { white-space:pre-wrap; overflow-wrap:anywhere; }
.sx-comparison-adjustments { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin:12px 0; }
.sx-comparison-adjustment { display:flex; align-items:center; gap:8px; }
.sx-comparison-adjustment button { width:44px; flex-shrink:0; padding:8px; font-size:1.1rem; }
.sx-comparison-adjustment label { flex:1; }
.sx-comparison-adjustment input { width:100%; min-width:0; min-height:44px; accent-color:var(--color-primary-600); }
.sx-comparison-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:8px; border-top:1px solid var(--color-zinc-200); }
.sx-comparison-footer button { flex-shrink:0; }
.sx-comparison-dialog .sx-comparison-status { color:var(--color-zinc-700); font-weight:600; margin:0 0 4px; }
.sx-comparison-dialog .sx-comparison-note { color:var(--color-zinc-500); font-size:.72rem; margin:0; }
.sx-comparison-dialog.is-expanded { width:100%; height:100dvh; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; }
.sx-comparison-dialog.is-expanded .sx-comparison-content { width:100%; height:100dvh; padding:var(--sx-comparison-padding) max(var(--sx-comparison-padding), env(safe-area-inset-right)) max(var(--sx-comparison-padding), env(safe-area-inset-bottom)) max(var(--sx-comparison-padding), env(safe-area-inset-left)); overflow:auto; overscroll-behavior:contain; background:inherit; color:inherit; }
.sx-comparison-dialog.is-expanded .sx-comparison-surface { height:clamp(240px, 58dvh, 900px); }
.sx-comparison-dialog.is-expanded .sx-comparison-header :is(.sx-comparison-eyebrow, p) { display:none; }
@media (max-width:700px) {
    .sx-comparison-dialog { --sx-comparison-padding:12px; width:calc(100vw - 12px); max-height:calc(100dvh - 12px); padding:12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    .sx-comparison-header { gap:8px; }
    .sx-comparison-header h2 { font-size:1.15rem; }
    .sx-comparison-header p { display:none; }
    .sx-comparison-window-actions { gap:4px; }
    .sx-comparison-window-actions button { padding:8px; font-size:.72rem; }
    .sx-comparison-layout { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:6px; margin-top:8px; }
    .sx-comparison-layout button { padding:8px 4px; }
    .sx-comparison-dialog .sx-comparison-detail-hint { display:block; margin:6px 0 0; color:var(--color-zinc-600); font-size:.72rem; }
    .sx-comparison-eyebrow { font-size:.6rem; }
    .sx-comparison-selections, .sx-comparison-grid { gap:8px; }
    .sx-comparison-selections select { font-size:.72rem; padding:8px 4px; }
    .sx-comparison-toolbar { gap:6px; }
    .sx-comparison-actions button { padding:8px; font-size:.72rem; }
    .sx-comparison-view-label { min-width:100px !important; }
    .sx-comparison-unit-heading { display:block; padding:8px 8px 0; min-height:48px; }
    .sx-comparison-dialog h3 { font-size:.7rem; min-height:24px; }
    .sx-comparison-dialog .sx-comparison-price { font-size:.95rem; }
    .sx-comparison-dialog .sx-comparison-grade { font-size:.7rem; margin:2px 8px 8px; min-height:22px; }
    .sx-comparison-surface, .sx-comparison-dialog.is-expanded .sx-comparison-surface { height:clamp(140px, 42vw, 260px); }
    .sx-comparison-dialog:not([data-layout="both"]) .sx-comparison-grid,
    .sx-comparison-dialog:not([data-layout="both"]) .sx-comparison-selections { grid-template-columns:minmax(0,1fr); }
    .sx-comparison-dialog:not([data-layout="both"]) .sx-comparison-selections select { font-size:.85rem; padding:8px; }
    .sx-comparison-dialog:not([data-layout="both"]) .sx-comparison-unit-heading { display:flex; min-height:36px; }
    .sx-comparison-dialog:not([data-layout="both"]) h3 { font-size:.85rem; min-height:0; }
    .sx-comparison-dialog:not([data-layout="both"]) .sx-comparison-grade { font-size:.8rem; min-height:0; }
    .sx-comparison-dialog:not([data-layout="both"]) .sx-comparison-surface { height:clamp(200px, 80vw, 42dvh); }
    .sx-comparison-dialog.is-expanded:not([data-layout="both"]) .sx-comparison-surface { height:clamp(240px, 55dvh, 700px); }
    .sx-comparison-dialog .sx-comparison-quality { padding:6px 8px; font-size:.65rem; min-height:38px; }
    .sx-comparison-facts { padding:0 8px 8px; font-size:.72rem; }
    .sx-comparison-dialog dl { grid-template-columns:1fr; gap:4px; }
    .sx-comparison-dialog dd { margin-bottom:8px; }
    .sx-comparison-adjustments { grid-template-columns:1fr; gap:8px; }
    .sx-comparison-footer { align-items:start; gap:8px; }
    .sx-comparison-footer button { font-size:.7rem; padding:8px; }
}
@media (max-width:360px) {
    .sx-comparison-action-detail { display:none; }
    .sx-comparison-navigation .sx-comparison-actions { gap:4px; }
    .sx-comparison-navigation .sx-comparison-actions button { padding-inline:6px; }
}
@media (max-height:500px) and (orientation:landscape) {
    .sx-comparison-dialog { --sx-comparison-padding:12px; padding:12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    .sx-comparison-header :is(.sx-comparison-eyebrow, p) { display:none; }
    .sx-comparison-header h2 { font-size:1.15rem; }
    .sx-comparison-surface, .sx-comparison-dialog.is-expanded .sx-comparison-surface { height:clamp(140px, 48dvh, 220px); }
}
.dark .sx-comparison-dialog { background:var(--color-zinc-900); color:var(--color-zinc-50); }
.dark .sx-comparison-grid article, .dark .sx-comparison-dialog button, .dark .sx-comparison-dialog select { background:var(--color-zinc-800); color:var(--color-zinc-50); border-color:var(--color-zinc-600); }
.dark .sx-comparison-dialog :is(dt, .sx-comparison-status, .sx-comparison-grade, .sx-comparison-header p) { color:var(--color-zinc-300); }
.dark .sx-comparison-dialog a { color:var(--color-primary-300); }