.variants-panel{position:absolute;bottom:92px;left:20px;right:20px;z-index:16;padding:18px;background:#fffffff7;backdrop-filter:blur(12px);border:1px solid #dce0d3;border-radius:15px;box-shadow:0 8px 40px #26301924;max-height:55%;display:flex;flex-direction:column}
.variants-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.variants-heading h2{font-size:14px;font-weight:550;margin:0;overflow-wrap:anywhere}
.variants-heading small{font-size:10px;color:#7e8773;display:block;margin-top:3px}
.variants-status{font-size:11px;line-height:1.5;color:#77816b;margin:0 0 10px}
.variants-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:10px;min-height:0;overflow:auto;padding:3px}
.variant{display:flex;flex-direction:column;gap:6px;min-width:0;background:#f8f9f5;border:1px solid #dde2d5;padding:6px;border-radius:5px;text-align:left;font-size:10px;line-height:1.4}
.variant:hover{border-color:#a6b78b;background:#f0f5e7}.variant[aria-pressed=true]{border-color:#8ea463;background:#edf4dc}.variant:disabled{opacity:.65}
.variant img{width:100%;height:83px;object-fit:contain;background:white}
.variant-caption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-height:28px}
.variant-state{color:#778369;font-size:9px}.variants-more{grid-column:1/-1;padding:10px;font-size:11px;border:1px solid #dde2d5;border-radius:5px}
.variants-filter{flex-shrink:0;width:100%;border:1px solid #dce0d3;border-radius:6px;padding:9px;font-size:11px;margin-bottom:10px;background:#fafbf7}
.item-swap{font-size:11px;padding:7px;border-radius:5px}.item-swap:hover{background:#e6ebde}
.selection-toolbar>span{max-width:100px}
@media(max-width:760px){.variants-panel{position:fixed;bottom:12px;left:12px;right:12px;max-height:48dvh;z-index:40;padding:14px}.variants-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.variant img{height:72px}}
@media print{.variants-panel{display:none!important}}