.image-order-grid{display:flex;flex-direction:column;gap:.75rem}.image-order-grid__hint{font-size:.875rem;color:var(--color-muted-foreground);margin:0}.image-order-grid__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem}@media(min-width:768px){.image-order-grid__items{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}.image-order-grid--empty{display:none}.image-order-item{position:relative;aspect-ratio:1;border-radius:.5rem;border:2px solid var(--color-border);overflow:hidden;background:var(--color-muted);transition:border-color .15s ease,box-shadow .15s ease;cursor:default}.image-order-item.is-hero{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.image-order-item.is-dragging{border-color:var(--color-accent);opacity:.85}.image-order-item__img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}.image-order-item__fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-muted-foreground)}.image-order-item__handle{position:absolute;top:.25rem;left:.25rem;width:28px;height:28px;border-radius:.5rem;background:#0009;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:grab;opacity:0;transition:opacity .15s ease;touch-action:none;z-index:2}.image-order-item__handle:active{cursor:grabbing}.image-order-item__hero-badge{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;border-radius:9999px;background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2}.image-order-item__remove{position:absolute;bottom:.25rem;right:.25rem;width:24px;height:24px;border-radius:9999px;background:#0009;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s ease,background .15s ease;z-index:2}.image-order-item__remove:hover{background:var(--color-error)}.image-order-item__remove:disabled{cursor:not-allowed;opacity:.5}.image-order-item:hover .image-order-item__handle,.image-order-item:hover .image-order-item__remove,.image-order-item:focus-within .image-order-item__handle,.image-order-item:focus-within .image-order-item__remove{opacity:1}@media(hover:none){.image-order-item .image-order-item__handle,.image-order-item .image-order-item__remove{opacity:1}}