.npcPanelOverlay.merchantOpen.open{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px}
.merchantMain.cwPanel{width:min(700px,calc(100vw - 285px));max-height:calc(100dvh - 16px);flex:none}
.merchantMain>.cwPanelBody{overflow:hidden;padding:9px;min-height:0}
.merchantMain>.cwPanelFoot{display:none}
.merchantShop{display:flex;flex-direction:column;min-height:0;height:min(450px,calc(100dvh - 100px));gap:8px}
.merchantShop .npcMerchantTabs{align-self:flex-end;flex:none;width:172px}
.merchantShop .npcMerchantTabs .cwBtn{min-height:38px}
.merchantCatalog{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px;flex:1;min-height:0}
.merchantCategories{display:flex;flex-direction:column;gap:6px;padding-right:8px;border-right:1px solid var(--cw-brass-dim)}
.merchantCategory{width:100%;min-height:38px;padding:7px 9px;text-align:left;color:var(--cw-parchment);font:700 11px/1.2 Inter,system-ui,sans-serif;border:1px solid var(--cw-brass-dim);border-radius:6px;background:linear-gradient(#403220,#211b13);cursor:pointer}
.merchantCategory[aria-pressed=true]{color:#ffe493;border-color:#d1ad47;background:linear-gradient(#685124,#332911);box-shadow:inset 0 0 12px #bb8a2940}
.merchantInventory{display:flex;flex-direction:column;min-width:0;min-height:0}
.merchantInventoryTitle{margin:0 0 7px;font:800 10px/1.3 Inter,system-ui,sans-serif;color:var(--cw-brass);letter-spacing:.08em}
.merchantItemGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:auto;align-content:start;padding:1px 3px 4px 1px;min-height:0;scrollbar-width:thin}
.merchantItemCard{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-width:0;min-height:132px;padding:8px 5px 7px;border:1px solid #937035;border-radius:8px;color:#f1e4c7;background:radial-gradient(ellipse at 50% 28%,#75502866,transparent 75%),linear-gradient(140deg,#3c2b1b,#251b13);box-shadow:inset 0 0 0 2px #221a10,0 2px 5px #0005;cursor:pointer;text-align:center}
.merchantItemCard:hover,.merchantItemCard[aria-pressed=true]{border-color:#f3cd60;background:radial-gradient(ellipse at 50% 28%,#a37a3266,transparent 85%),#3e3019}
.merchantItemCard[aria-pressed=true]{box-shadow:inset 0 0 0 2px #b89040,0 0 9px #c89c2733}
.merchantItemIcon{display:block;width:100%;height:58px;object-fit:contain;filter:drop-shadow(0 4px 4px #0008);flex:none}
.merchantItemName{font:700 10.5px/1.2 Inter,system-ui,sans-serif;overflow-wrap:anywhere}
.merchantPrice{color:#f0cc61;font:800 10px/1.2 Inter,system-ui,sans-serif;margin-top:auto}
.merchantUnavailable{color:#d5b59a;font:600 10px/1.4 Inter,system-ui,sans-serif}
.merchantInfo.cwPanel{width:226px;flex:none;max-height:calc(100dvh - 16px);align-self:center}
.merchantInfoBody{gap:7px;overflow:auto}
.merchantInfo .merchantItemIcon{height:96px}
.merchantInfoName{font:800 16px/1.2 Inter,system-ui,sans-serif;margin:0;color:var(--cw-parchment)}
.merchantItemType{color:var(--cw-brass);font:700 10px/1.4 Inter,system-ui,sans-serif}
.merchantStat{margin:0;padding:6px 0;border-bottom:1px solid #aa884425;font:500 11px/1.35 Inter,system-ui,sans-serif;color:var(--cw-parchment)}
.merchantInfo .npcTradeBtn{width:100%;min-height:38px;margin-top:6px}
.merchantInfoActions{display:flex;flex-direction:column;gap:4px;flex:none}
.merchantInfoActions[hidden]{display:none}
.merchantInventoryTitle,.merchantItemType{color:#d7bc72}
.merchantItemGrid>.cwEmpty{grid-column:1/-1}
.merchantCategory:focus-visible,.merchantItemCard:focus-visible{outline:2px solid #ffe493;outline-offset:2px}
.merchantConfirmOverlay{position:fixed;inset:0;z-index:2;display:grid;place-items:center;background:#050704d9;padding:12px}
.merchantConfirmOverlay[hidden]{display:none}
.merchantConfirm{width:min(380px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
.merchantConfirm>.cwPanelBody{text-align:center;font:500 13px/1.5 Inter,system-ui,sans-serif;color:var(--cw-parchment)}
.merchantConfirm .cwPanelFoot{display:flex;gap:10px}
.merchantConfirm .cwBtn{flex:1;min-height:44px}
@media(max-height:520px){
  .merchantInfo .merchantItemIcon{height:64px}
  .merchantInfoBody{gap:6px}
  .merchantInfo .merchantStat{padding:4px 0;font-size:11px}
  .merchantInfoName{font-size:16px}
  .merchantInfo .npcTradeBtn{margin-top:0}
}
@media(max-width:1000px){
  .merchantMain.cwPanel{width:calc(100vw - 245px)}
  .merchantInfo.cwPanel{width:210px}
  .merchantCatalog{grid-template-columns:98px minmax(0,1fr);gap:7px}
  .merchantCategories{padding-right:8px}
  .merchantCategory{font-size:10px;padding:6px 7px}
  .merchantItemGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .npcPanelOverlay.merchantOpen.open{padding:6px;gap:6px}
  .merchantMain.cwPanel{width:calc(100vw - 190px);max-height:calc(100dvh - 12px)}
  .merchantMain>.cwPanelBody{padding:6px}
  .merchantInfo.cwPanel{width:172px;max-height:calc(100dvh - 12px)}
  .merchantInfo .cwPanelBody{padding:9px}
  .merchantInfo .merchantItemIcon{height:58px}
  .merchantInfoName{font-size:14px}
  .merchantStat{font-size:11px;padding:4px 0}
  .merchantShop{height:calc(100dvh - 82px);gap:6px}
  .merchantShop .npcMerchantTabs{width:138px}
  .merchantCatalog{grid-template-columns:74px minmax(0,1fr);gap:5px}
  .merchantCategory{font-size:10px;padding:5px}
  .merchantItemGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .merchantItemCard{min-height:120px;padding:7px 4px}
  .merchantItemIcon{height:50px}
  .merchantItemName{font-size:10px}
}
/* Portrait stacks the separate info window below the shop to keep cards readable. */
@media(max-width:540px) and (orientation:portrait){
  .npcPanelOverlay.merchantOpen.open{flex-direction:column}
  .merchantMain.cwPanel,.merchantInfo.cwPanel{width:100%;max-height:none}
  .merchantMain.cwPanel{flex:1;min-height:0}
  .merchantShop{height:100%;min-height:0}
  .merchantMain>.cwPanelBody{flex:1}
  .merchantInfo.cwPanel{max-height:34dvh}
  .merchantInfoBody{display:block}
  .merchantInfo .merchantItemIcon{float:left;width:64px;margin:0 10px 6px 0}
  .merchantInfo .merchantStat{font-size:10px}
  .merchantInfoName{font-size:14px}
  .merchantItemGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* P05: SELL-modus = eigen BAG-grid in verkoopmodus */
.merchantSellMode{display:flex;flex-direction:column;flex:1;min-height:0;gap:6px}
.merchantSellMode[hidden]{display:none}
.merchantCatalog[hidden]{display:none}
.merchantInfo[hidden]{display:none}
.sellModeConfirmOverlay[hidden]{display:none}
.sellModeHead{display:flex;align-items:center;gap:6px}
.sellModeHead .merchantInventoryTitle{flex:1;min-width:0}
.sellModeScroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin}
.sellModeGrid{flex:none;overflow:visible}
.sellModeCard{cursor:pointer}
.sellModeCard.sellModePicked{border-color:#f3cd60;background:radial-gradient(ellipse at 50% 28%,#a37a3266,transparent 85%),#3e3019;box-shadow:inset 0 0 0 2px #b89040}
.sellModeCard.sellModeDisabled{opacity:.5;cursor:default;filter:grayscale(.8)}
.sellModeFoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sellModeStatus{flex:1 1 100%;margin:0;min-height:1.2em;font:600 11px/1.3 Inter,system-ui,sans-serif;color:#e8d9b0}
.sellModeStatus-error{color:#ffb59a}.sellModeStatus-ok{color:#b6e39a}
.sellModeTotal{flex:1;margin:0;font:700 12px/1.2 Inter,system-ui,sans-serif}
.sellModeSell{min-height:38px}
.merchantMaterialSell{flex:none;display:flex;flex-direction:column;gap:4px}
.merchantMaterialSell[hidden]{display:none}
.merchantMaterialSell .merchantInventoryTitle{margin:0}
.materialSellRow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.materialSellInfo{display:flex;flex-direction:column;flex:1 1 110px;min-width:0;font:700 11px/1.2 Inter,system-ui,sans-serif;color:var(--cw-parchment)}
.materialSellSub{display:flex;gap:6px;flex-wrap:wrap;font-weight:500;font-size:10px}
.sellModeStepper{display:flex;align-items:center;gap:4px}
.sellStepCount{min-width:24px;text-align:center;font:700 12px/1.2 Inter,system-ui,sans-serif;color:var(--cw-parchment)}
.materialSellRow .cwBtn{min-width:44px;min-height:44px}