.system-preview{appearance:none;border:0;background:transparent;padding:0;display:inline-flex;align-items:baseline;gap:8px;color:var(--ink);font:inherit;text-align:left;cursor:zoom-in}
.system-preview small{font-size:.73rem;line-height:1.35;color:#777986;font-weight:400}
.system-cell{display:flex;align-items:center;gap:14px;min-width:230px}
.system-thumb{width:76px;height:76px;flex:0 0 76px;display:block;object-fit:contain;background:#f3f3f5;border:1px solid #e3e3e8;border-radius:10px}
.system-cell .system-preview{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 7px}
.system-cell .system-preview strong,.system-cell .system-preview small{grid-column:1}
.system-cell .system-preview>span{grid-column:2;grid-row:1/3}
.system-preview strong{border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.system-preview>span{font-size:.64rem;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:#7375ab;opacity:0;transform:translateX(-3px);transition:.2s}
.system-preview:hover strong,.system-preview:focus-visible strong{color:#5d5f9b;border-color:#a9aae0}
.system-preview:hover>span,.system-preview:focus-visible>span{opacity:1;transform:none}
.system-preview:focus-visible{outline:2px solid #7779b4;outline-offset:5px;border-radius:1px}
.preview-help{margin:10px 0 0;color:#74747c;font-size:.72rem}
.product-rollover{position:fixed;z-index:30;width:min(300px,calc(100vw - 28px));padding:10px;background:#fff;border:1px solid #d5d5dc;box-shadow:0 18px 50px rgba(16,16,19,.22);opacity:0;transform:translateY(7px) scale(.985);pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.product-rollover.visible{opacity:1;transform:none}
.product-rollover img{width:100%;height:250px;display:block;object-fit:contain;background:#f4f4f6}
.product-rollover div{display:flex;justify-content:space-between;align-items:end;gap:12px;padding:11px 5px 3px}
.product-rollover div span{color:#77777e;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em}
.product-rollover div strong{font-size:.82rem;text-align:right}
@media(max-width:620px){.product-rollover{top:auto!important;bottom:14px!important;left:14px!important;width:calc(100vw - 28px)}.product-rollover img{height:205px}.system-preview>span{opacity:1;transform:none}}