/* Merchant frame: 2 x 5 slot grid, quality-bordered icons, stack counts, pager, buyback strip. */
.gr-icon { position: relative; flex: none; display: inline-block; width: 41px; height: 41px; background: #000 center / 41px 41px no-repeat; }
.gr-icon img { position: absolute; left: 2px; top: 2px; width: 37px; height: 37px; display: block; }
.gr-icon::after { content: ""; position: absolute; inset: 0; background: url(../assets/ui/loottab-set-itemborder-white.png) center / 41px 41px no-repeat; pointer-events: none; }
.gr-icon.sm { width: 32px; height: 32px; } .gr-icon.sm img { left: 2px; top: 2px; width: 28px; height: 28px; } .gr-icon.sm::after { background-size: 32px 32px; }
.gr-count { position: absolute; right: 3px; bottom: 1px; z-index: 1; color: #fff; font: 700 12px/1 var(--font-game); text-shadow: var(--ink); }
.gr-count:empty { display: none; }

.q0 .gr-icon::after { background-image: url(../assets/ui/auctionhouse-itemicon-border-gray.png); }
.q1 .gr-icon::after { background-image: url(../assets/ui/loottab-set-itemborder-white.png); }
.q2 .gr-icon::after { background-image: url(../assets/ui/loottab-set-itemborder-green.png); }
.q3 .gr-icon::after { background-image: url(../assets/ui/loottab-set-itemborder-blue.png); }
.q4 .gr-icon::after { background-image: url(../assets/ui/loottab-set-itemborder-purple.png); }
.q5 .gr-icon::after { background-image: url(../assets/ui/loottab-set-itemborder-orange.png); }
.q0 .gr-slot__name { color: var(--q0); } .q1 .gr-slot__name { color: var(--q1); } .q2 .gr-slot__name { color: var(--q2); }
.q3 .gr-slot__name { color: #4aa3ff; } .q4 .gr-slot__name { color: #c06cff; } .q5 .gr-slot__name { color: var(--q5); }

.gr-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.gr-slot {
  display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-width: 0; height: 56px; padding: 5px 6px; border: 1px solid transparent; border-radius: 0; background: rgba(0,0,0,.28); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.gr-slot:hover { border-color: var(--gold-dim); background: rgba(255,209,0,.08); }
.gr-slot:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.gr-slot__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gr-slot__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.1 var(--font-game); }
.gr-slot__price { font: 12px/1 var(--font-game); color: #fff; }
.gr-slot__price .x { color: var(--muted); }
.gr-slot.cant .gr-icon img { filter: grayscale(1) brightness(.55); }
.gr-slot.cant .gr-slot__name { filter: saturate(.3) brightness(.7); }
.gr-slot.cant .gr-slot__price, .gr-slot.cant .gr-slot__price b { color: var(--bad); }
.gr-slot.locked { cursor: default; } .gr-slot.locked .gr-icon img { filter: grayscale(1) brightness(.3); } .gr-slot.locked .gr-slot__name { color: var(--muted); }
.gr-slot.empty { background: rgba(0,0,0,.18); cursor: default; pointer-events: none; opacity: .5; } .gr-slot.empty:hover { border-color: transparent; }

.gr-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 6px; }
.page-label { color: var(--text); font: 13px var(--font-game); min-width: 84px; text-align: center; }
.gr-buyback { display: flex; align-items: center; min-height: 40px; padding: 4px 8px; border: 1px solid #3a3226; background: rgba(0,0,0,.4); font: 13px var(--font-game); }
.lasthired { display: flex; align-items: center; gap: 8px; } .lasthired b { color: var(--gold-bright); }
.muted { color: var(--muted); }

@media (max-width: 480px) {
  .gr-slots { grid-template-columns: 1fr; }
  .gr-slot { height: 52px; }
}