/* acc_manage.css — the Accessories key's panel rows on the checkout (Luis, 2026-10-06):
   icon, name, fixed price and the stock count. Script: acc_manage.js. The
   Manage page has its own styles (acc_items.css). */

/* ── The panel ───────────────────────────────────────────────────────────── */
.acc-quick .acc-mega { min-width: 400px; }

.acc-quick .acc-mega-list a.aq-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; }
.aq-ico { width: 22px; height: 22px; border-radius: 6px; flex: none; object-fit: cover; }
.aq-ico.is-blank { position: relative; display: inline-block; background: rgba(107, 55, 68, 0.08); }
.aq-ico.is-blank::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: rgba(107, 55, 68, 0.32); }
.aq-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aq-pr { flex: none; font-size: 11.5px; font-weight: 600; color: var(--co-muted, #64748b); }
.aq-qty, .aqm-row-qty {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 1;
  background: rgba(29, 29, 31, 0.07); color: #3a3a3e;
}
.aq-qty.is-low, .aqm-row-qty.is-low { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.aq-qty.is-out, .aqm-row-qty.is-out { background: rgba(192, 43, 34, 0.12); color: #b3141d; }
.aq-empty { padding: 6px 10px; font-size: 12.5px; color: var(--co-muted, #64748b); }