/**
 * GM Shop — consumable → dyes rows only (scoped; does not affect other shop items).
 */
body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-shop-row--dye {
  align-items: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-shop-row--dye .l2-gm-shop-icon-img {
  width: 36px;
  height: 36px;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-shop-row--dye .l2-gm-shop-row-main {
  gap: 3px;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: #e8dcc8;
  word-break: break-word;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.35rem;
  font-size: 11px;
  line-height: 1.35;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-stats__sep {
  color: #7a7268;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-chip {
  white-space: nowrap;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-chip--pos .l2-gm-dye-chip__sign,
body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-chip--pos .l2-gm-dye-chip__val {
  font-weight: 700;
  color: #9fd49f;
  font-variant-numeric: tabular-nums;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-chip--neg .l2-gm-dye-chip__sign,
body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-chip--neg .l2-gm-dye-chip__val {
  font-weight: 700;
  color: #c97a7a;
  font-variant-numeric: tabular-nums;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-meta {
  font-size: 10px;
  line-height: 1.3;
  color: #9d9386;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-meta__sep {
  color: #7a7268;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-meta__tier {
  color: #b8ad9c;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-dye-effect-hint {
  margin-top: 1px;
  font-size: 9px;
  line-height: 1.35;
  color: #8a8278;
  word-break: break-word;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-shop-row--dye .l2-gm-shop-row-foot {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-width: 5.5rem;
  margin-top: 0;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-shop-row--dye .l2-gm-shop-price {
  text-align: right;
  white-space: nowrap;
}

body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-shop-row--dye .l2-gm-shop-buy {
  min-width: 4.5rem;
  padding: 4px 10px;
  font-size: 11px;
}

@media (max-width: 430px) {
  body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-shop-row--dye {
    flex-wrap: wrap;
  }

  body.l2-app-l2-chrome.l2-page-gm-shop .l2-gm-shop-row--dye .l2-gm-shop-row-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-left: 46px;
    box-sizing: border-box;
  }
}


/* Dye tier controls belong only to Consumables -> Dyes.
 * The shared tablist CSS sets display:flex, so explicitly honor the hidden attribute. */
body.l2-app-l2-chrome.l2-page-gm-shop .l2-drops-shop-tablist--dye-tier[hidden] {
  display: none !important;
}

/* Make weak/strong tiers visually distinct without changing the shared shop tabs. */
body.l2-app-l2-chrome.l2-page-gm-shop #drops-shop-mount
  .l2-drops-shop-tablist--dye-tier
  .l2-drops-shop-tab[data-dyetier='weak'] {
  color: #7fc7d9 !important;
}

body.l2-app-l2-chrome.l2-page-gm-shop #drops-shop-mount
  .l2-drops-shop-tablist--dye-tier
  .l2-drops-shop-tab[data-dyetier='strong'] {
  color: #d6a6e8 !important;
}

body.l2-app-l2-chrome.l2-page-gm-shop #drops-shop-mount
  .l2-drops-shop-tablist--dye-tier
  .l2-drops-shop-tab[data-dyetier='weak'][aria-selected='true'] {
  color: #a8e7f4 !important;
}

body.l2-app-l2-chrome.l2-page-gm-shop #drops-shop-mount
  .l2-drops-shop-tablist--dye-tier
  .l2-drops-shop-tab[data-dyetier='strong'][aria-selected='true'] {
  color: #efc2ff !important;
}