/* wah-ingame.css - the retail in-game Auction House frame, 1:1 (2026-10-12).

   One home for the in-game look of every AH surface on this site: the browse window
   (templates/_ah_window.html, #ahApp.wah-ig) and the item window (templates/item.html,
   .wah-ig.wah-item). Loaded LAST in shell.html, so it sits on top of thewowdb's live skin
   (ah/base.css, wgf-chrome.css ...) without editing it. Everything is scoped to .wah-ig.

   Geometry is Blizzard's own (Blizzard_AuctionHouseUI FrameXML, retail 12.x):
     AuctionHouseFrame 800x538 (PortraitFrameTemplate) - SearchBar 618x40 at TOPRIGHT -12,-29 -
     CategoriesList 168x438 under it at x 4 - item list rows 20 tall, headers 19 tall -
     browse columns Price 146 | Name (fill) | iLvl 55 | Available 83 | star 29 -
     MoneyFrameBorder 158x19 at BOTTOMLEFT 5,6 - Buy/Sell/Auctions tabs at BOTTOMLEFT 20,-28.
   One client unit = var(--u) CSS px (1.4 on desktop).

   Textures: every image is a client texture. /assets/ui/* = thewowdb's extracted kit (metal
   frame, red buttons, nav buttons, row stripes, coins); /static/img/ingame/* = cropped by
   tools/build_ingame_ui.py from the client atlases (AH backgrounds, row highlight, tabs,
   filter dropdown, search box, inset frame, column headers, money frame, scrollbar). */

.wah-ig {
  --u: 1.4px;
  --ig-gold: #ffd100;          /* NORMAL_FONT_COLOR */
  --ig-white: #ffffff;         /* HIGHLIGHT_FONT_COLOR */
  --ig-grey: #808080;          /* DISABLED_FONT_COLOR */
  --ig-shadow: 1px 1px 0 #000;
  --ig-friz: 'FrizQuadrata', 'Cinzel', 'Palatino Linotype', serif;
  --ig-num: 'ArialNarrowWoW', 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
  --ig-cat-w: calc(168 * var(--u));
  --ig-img: url(/static/img/ingame/);
}

/* ======================================================================================
   1. The frame: metal edges from wgf-chrome's .wgf-window, the portrait corner, rock body.
   ====================================================================================== */
.wgf-tool-panel--ah:has(> #ahApp.wah-ig) { padding: 0; background: none; border: 0; box-shadow: none; }

#ahApp.wah-ig,
.wah-ig.wah-item {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(800 * var(--u));
  margin: 18px auto calc(40 * var(--u));
  border: 0;
  border-radius: 0;
  /* PortraitFrameTemplate body: UI-Background-Rock under the frame's dark wash */
  background:
    linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
    url(/assets/ui/blizzard/background-rock.png) left top / 256px 256px repeat,
    #1a1714;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .75);
  color: var(--ig-white);
  font-family: var(--ig-friz);
}
/* the portrait corner replaces the plain top-left metal corner */
#ahApp.wah-ig::before,
.wah-ig.wah-item::before {
  z-index: 3;
  background:
    url(/assets/ui/ui-frame-portraitmetal-cornertopleft-2x.png) left -21px top -26px / 120px 120px no-repeat,
    url(/assets/ui/ui-frame-metal-cornertopright-2x.png)        right -9px top -26px / 120px 120px no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomleft-2x.png)      left -19px bottom -7px / 51.2px 51.2px no-repeat,
    url(/assets/ui/ui-frame-metal-cornerbottomright-2x.png)     right -9px bottom -7px / 51.2px 51.2px no-repeat,
    url("/assets/ui/!ui-frame-metal-edgeleft-2x.png")           left -19px top 0 / 120px 25.6px repeat-y,
    url("/assets/ui/!ui-frame-metal-edgeright-2x.png")          right -9px top 0 / 120px 25.6px repeat-y;
  background-clip: border-box, border-box, border-box, border-box, padding-box, padding-box;
  background-origin: border-box;
  border-style: solid;
  border-color: transparent;
  border-width: 30px 0 30px 0;
}
#ahApp.wah-ig::after, .wah-ig.wah-item::after { z-index: 3; }

/* The round portrait, under the metal ring. The ring is the ::before corner texture drawn at a
   FIXED 120px (0.8 of its 150px atlas) at left -21px / top -26px; its hole is centred at atlas
   (78,80) with an inner radius of 48, i.e. (41.4px, 38px) r 38.4px in the frame. So the portrait
   uses the same fixed pixels (not --u), an 80px circle tucked just under the ring's inner edge.
   Scaling it with --u is what pushed the goblin past the ring at desktop sizes (2026-10-12). */
.wah-ig-portrait {
  position: absolute;
  z-index: 2;
  left: 1.4px;
  top: -2px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}
/* zoomed + nudged so the achievement icon's own green border never shows inside the ring */
.wah-ig-portrait img { display: block; width: 100%; height: 100%; transform: scale(1.6) translateX(-5%); }

/* Close button: UIPanelCloseButton (RedButton-Exit), TOPRIGHT of the frame. */
.wah-ig-close {
  position: absolute;
  z-index: 4;
  top: calc(1 * var(--u));
  right: calc(1 * var(--u));
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  background: url(/assets/ui/128-redbutton-exit.png) center / contain no-repeat;
}
.wah-ig-close:hover { background-image: url(/assets/ui/128-redbutton-exit-highlight.png), url(/assets/ui/128-redbutton-exit.png); background-size: contain; }
.wah-ig-close:active { background-image: url(/assets/ui/128-redbutton-exit-pressed.png); }
.wah-ig-close:focus-visible { outline: 2px solid var(--ig-gold); outline-offset: 1px; border-radius: 4px; }

/* Title: GameFontNormal gold, centred on the top rail. */
#ahApp.wah-ig > .wgf-window__title,
.wah-ig.wah-item > .wgf-window__title {
  z-index: 4;
  height: calc(23 * var(--u));
  min-height: 0;
  padding: 0;
  border-inline-width: calc(60 * var(--u)) calc(30 * var(--u));
  font-family: var(--ig-friz);
  font-size: calc(12 * var(--u));
  font-weight: 400;
  font-variant: normal;
  letter-spacing: 0;
  color: var(--ig-gold);
  text-shadow: var(--ig-shadow);
  text-transform: none;
}

/* ======================================================================================
   2. Browse window layout (desktop): fixed 538-unit frame, lists scroll inside it.
   ====================================================================================== */
#ahApp.wah-ig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: calc(23 * var(--u)) calc(50 * var(--u)) minmax(0, 1fr) calc(27 * var(--u));
  height: calc(538 * var(--u));
  padding: 0 calc(4 * var(--u)) 0 calc(4 * var(--u));
}
#ahApp.wah-ig > .ah-toolbar,
#ahApp.wah-ig > .ah-layout,
#ahApp.wah-ig > .ah-statusbar { position: relative; z-index: 1; }

/* --- search bar row ---------------------------------------------------------------- */
#ahApp.wah-ig .ah-toolbar {
  display: grid;
  grid-template-columns: calc(108 * var(--u)) minmax(0, 1fr) auto auto auto calc(132 * var(--u));
  gap: calc(10 * var(--u));
  align-items: center;
  margin: 0;
  padding: calc(6 * var(--u)) calc(8 * var(--u)) 0 calc(60 * var(--u));
  background: none;
  border: 0;
}
#ahApp.wah-ig .ah-realm-wrap { gap: 0; }
#ahApp.wah-ig #ahRegionDisplay { display: none; }

/* WowStyle1FilterDropdownTemplate (common-dropdown-b-button) for every secondary control:
   realm, sort, Market Share, Export. Background sits 4 units outside the button. */
#ahApp.wah-ig .ah-control,
#ahApp.wah-ig .ah-filter-button,
.wah-ig .wah-ig-dd {
  box-sizing: border-box;
  height: calc(18 * var(--u));
  margin: calc(4 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(10 * var(--u));
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  border-radius: 0;
  border-image: url(/static/img/ingame/common-dropdown-b-button.png) 4 12 fill / calc(4 * var(--u)) calc(12 * var(--u)) / calc(4 * var(--u));
  background: url(/static/img/ingame/common-dropdown-icon-next.png) right calc(4 * var(--u)) center / calc(13 * var(--u)) auto no-repeat;
  box-shadow: none;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(11 * var(--u));
  font-weight: 400;
  line-height: calc(18 * var(--u));
  letter-spacing: 0;
  text-transform: none;
  font-variant: normal;
  text-shadow: var(--ig-shadow);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#ahApp.wah-ig .ah-filter-button::first-letter { color: inherit; }
#ahApp.wah-ig .ah-filter-button .wgf-ah-icon16 { display: none; }
#ahApp.wah-ig .ah-control:hover,
#ahApp.wah-ig .ah-filter-button:hover,
.wah-ig .wah-ig-dd:hover { border-image-source: url(/static/img/ingame/common-dropdown-b-button-hover.png); color: var(--ig-white); }
#ahApp.wah-ig .ah-control:active,
#ahApp.wah-ig .ah-filter-button:active,
.wah-ig .wah-ig-dd:active { border-image-source: url(/static/img/ingame/common-dropdown-b-button-pressed.png); }
#ahApp.wah-ig .ah-sort-select option { background: #111; color: #fff; font-family: var(--ig-friz); }
#ahApp.wah-ig .wah-realm-btn { width: 100%; min-width: 0; }
#ahApp.wah-ig .wah-house { padding: 0 calc(10 * var(--u)); margin-right: calc(2 * var(--u)); opacity: .75; background-image: none; }
#ahApp.wah-ig .wah-house.is-on { opacity: 1; box-shadow: none; color: var(--ig-white); border-image-source: url(/static/img/ingame/common-dropdown-b-button-pressed.png); }

/* SearchBoxTemplate: common-search-border 3-slice + magnifying glass. */
#ahApp.wah-ig .ah-searchbox {
  position: relative;
  box-sizing: border-box;
  height: calc(22 * var(--u));
  padding: 0 calc(20 * var(--u)) 0 calc(20 * var(--u));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    url(/static/img/ingame/common-search-magnifyingglass.png) left calc(5 * var(--u)) center / calc(12 * var(--u)) auto no-repeat,
    url(/static/img/ingame/common-search-border-left.png) left center / auto 100% no-repeat,
    url(/static/img/ingame/common-search-border-right.png) right center / auto 100% no-repeat,
    url(/static/img/ingame/common-search-border-middle.png) center / calc(100% - 14 * var(--u)) 100% no-repeat;
}
#ahApp.wah-ig .ah-searchbox > span[aria-hidden] { display: none; }
#ahApp.wah-ig .ah-searchbox input {
  font-family: var(--ig-friz);
  font-size: calc(11 * var(--u));
  color: var(--ig-white);
  background: transparent;
}
#ahApp.wah-ig .ah-searchbox input::placeholder { color: var(--ig-grey); opacity: 1; }
#ahApp.wah-ig .ah-searchbox:focus-within { outline: 1px solid rgba(255, 209, 0, .55); outline-offset: -3px; }

/* UIPanelButtonTemplate, red: 128-RedButton left / center / right, 22 units tall. */
#ahApp.wah-ig .ah-search-button,
.wah-ig .wah-ig-redbtn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(22 * var(--u));
  min-width: calc(80 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    url(/assets/ui/128-redbutton-left.png) left center / auto 100% no-repeat,
    url(/assets/ui/128-redbutton-right.png) right center / auto 100% no-repeat,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(12 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant: normal;
  text-shadow: var(--ig-shadow);
  text-decoration: none;
  cursor: pointer;
}
#ahApp.wah-ig .ah-search-button:hover,
.wah-ig .wah-ig-redbtn:hover { color: var(--ig-white); filter: brightness(1.12); text-decoration: none; }
#ahApp.wah-ig .ah-search-button:active,
.wah-ig .wah-ig-redbtn:active {
  background-image: url(/assets/ui/128-redbutton-left-pressed.png), url(/assets/ui/128-redbutton-right-pressed.png), url(/assets/ui/_128-redbutton-center-pressed.png);
}
#ahApp.wah-ig :is(button, a, select, input):focus-visible,
.wah-ig :is(button, a, select):focus-visible { outline: 2px solid var(--ig-gold); outline-offset: 1px; }

/* --- body: categories | results ------------------------------------------------------ */
#ahApp.wah-ig .ah-layout {
  display: grid;
  grid-template-columns: var(--ig-cat-w) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  background: none;
  border: 0;
}

/* InsetFrameTemplate: the client's nine-slice inset over UI-Background-Marble */
.wah-ig .wah-ig-inset,
#ahApp.wah-ig .ah-sidebar,
#ahApp.wah-ig .ah-table-shell {
  box-sizing: border-box;
  border: calc(6 * var(--u)) solid transparent;
  border-image: url(/static/img/ingame/insetframe-9slice.png) 8 / calc(6 * var(--u)) round;
  border-radius: 0;
  box-shadow: none;
}

/* CategoriesList: auctionhouse-background-categories, MinimalScrollBar in its right lane */
#ahApp.wah-ig .ah-sidebar {
  position: relative;
  top: auto;
  max-height: none;
  height: 100%;
  margin: 0;
  padding: calc(1 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u)) calc(1 * var(--u));
  overflow-y: auto;
  background:
    url(/static/img/ingame/auctionhouse-background-categories.png) left top / calc(138 * var(--u)) 100% no-repeat,
    url(/assets/ui/blizzard/background-marble.png) left top / 256px repeat,
    #0b0a09;
  border-right-width: calc(6 * var(--u));
}
#ahApp.wah-ig .ah-sidebar-head { display: none; }
#ahApp.wah-ig .ah-category-tree { display: block; padding: 0; margin: 0; }
#ahApp.wah-ig .ah-cat-children { margin: 0; padding: 0; border: 0; background: none; }

/* AuctionCategoryButtonTemplate: 132x21. Top level = auctionhouse-nav-button, sub levels
   = auctionhouse-nav-button-secondary, third level = plain text + the tertiary filter line. */
#ahApp.wah-ig .ah-cat-row {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: calc(132 * var(--u));
  height: calc(21 * var(--u));
  min-height: 0;
  margin: 0 0 calc(4 * var(--u)) calc(2 * var(--u));
  padding: 0 calc(4 * var(--u)) 0 calc(6 * var(--u)) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: url(/assets/ui/auctionhouse-nav-button.png) calc(-2 * var(--u)) 0 / calc(100% * 136 / 132) calc(32 * var(--u)) no-repeat;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(10 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-align: left;
  text-shadow: var(--ig-shadow);
  text-transform: none;
  cursor: pointer;
}
#ahApp.wah-ig .ah-cat-row .ah-cat-caret { display: none; }
#ahApp.wah-ig .ah-cat-row .ah-cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ahApp.wah-ig .ah-cat-row[data-depth="1"] {
  width: calc(122 * var(--u));
  margin-left: calc(12 * var(--u));
  padding-left: calc(6 * var(--u)) !important;
  background-image: url(/assets/ui/auctionhouse-nav-button-secondary.png);
  background-size: calc(100% * 133 / 122) calc(32 * var(--u));
  color: var(--ig-white);
}
#ahApp.wah-ig .ah-cat-row[data-depth="2"],
#ahApp.wah-ig .ah-cat-row[data-depth="3"] {
  width: calc(112 * var(--u));
  margin-left: calc(22 * var(--u));
  margin-bottom: 0;
  padding-left: calc(10 * var(--u)) !important;
  background: url(/static/img/ingame/auctionhouse-nav-button-tertiary-filterline.png) 0 calc(2 * var(--u)) / calc(5 * var(--u)) calc(11 * var(--u)) no-repeat;
  color: var(--ig-white);
}
#ahApp.wah-ig .ah-cat-row:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/assets/ui/auctionhouse-nav-button-highlight.png) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}
#ahApp.wah-ig .ah-cat-row[data-depth="2"]:hover::after,
#ahApp.wah-ig .ah-cat-row[data-depth="3"]:hover::after { background: rgba(255, 255, 255, .08); mix-blend-mode: normal; }
#ahApp.wah-ig .ah-cat-row:hover { color: var(--ig-white); }
#ahApp.wah-ig .ah-cat-row.active,
#ahApp.wah-ig .ah-cat-row[aria-current],
#ahApp.wah-ig .ah-cat-row.is-active { color: var(--ig-white); }
#ahApp.wah-ig .ah-cat-row.active::before,
#ahApp.wah-ig .ah-cat-row.is-active::before,
#ahApp.wah-ig .ah-cat-row:has(+ .ah-cat-children:not([hidden]))::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/assets/ui/auctionhouse-nav-button-select.png) center / 100% 100% no-repeat;
  pointer-events: none;
}
#ahApp.wah-ig .ah-cat-row:has(+ .ah-cat-children:not([hidden])) { color: var(--ig-white); }
#ahApp.wah-ig .ah-cat-row[data-depth="1"]:is(.active, :has(+ .ah-cat-children:not([hidden])))::before { background-image: url(/assets/ui/auctionhouse-nav-button-secondary-select.png); }
#ahApp.wah-ig .ah-cat-row[data-depth="2"].active::before,
#ahApp.wah-ig .ah-cat-row[data-depth="3"].active::before { background: none; }
#ahApp.wah-ig .ah-cat-row[data-depth="2"].active,
#ahApp.wah-ig .ah-cat-row[data-depth="3"].active { color: var(--ig-gold); }
#ahApp.wah-ig .ah-cat-row--all-items { margin-top: calc(4 * var(--u)); }
#ahApp.wah-ig .ah-cat-row.token { color: #00ccff; }
#ahApp.wah-ig .ah-cat-row.utility { color: #1eff00; }
#ahApp.wah-ig .ah-loading { color: var(--ig-gold); font-size: calc(10 * var(--u)); padding: calc(6 * var(--u)); }

/* --- results (AuctionHouseItemListTemplate) ------------------------------------------ */
#ahApp.wah-ig .ah-main { min-height: 0; margin: 0 0 0 calc(4 * var(--u)); background: none; border: 0; }
#ahApp.wah-ig .ah-browse-view { height: 100%; }
#ahApp.wah-ig .ah-table-shell {
  height: 100%;
  max-height: none;
  overflow-y: auto;
  padding: 0;
  background:
    url(/static/img/ingame/auctionhouse-background-index.png) 0 calc(19 * var(--u)) / 100% calc(100% - 19 * var(--u)) no-repeat,
    #0c0b0a;
}
#ahApp.wah-ig .ah-state-bar {
  padding: calc(3 * var(--u)) calc(6 * var(--u));
  background: rgba(0, 0, 0, .45);
  border: 0;
  font-family: var(--ig-friz);
}
#ahApp.wah-ig .ah-state-realm { color: var(--ig-gold); font-size: calc(10 * var(--u)); font-weight: 400; letter-spacing: 0; }
#ahApp.wah-ig .ah-state-chip {
  border: 0; border-radius: 0; background: rgba(255, 255, 255, .06);
  color: var(--ig-white); font-size: calc(10 * var(--u)); font-family: var(--ig-friz);
}
#ahApp.wah-ig .ah-results-context {
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u));
  background: none;
  border: 0;
}
#ahApp.wah-ig .ah-results-context h2 {
  margin: 0;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(12 * var(--u));
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: var(--ig-shadow);
}
#ahApp.wah-ig .ah-results-context .ah-results-meta { color: #b9b9b9; font-size: calc(9.5 * var(--u)); font-family: var(--ig-friz); }

#ahApp.wah-ig .ah-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: none;
  font-family: var(--ig-friz);
}
/* column headers: ColumnDisplayButtonShortTemplate (WhoFrame-ColumnTabs), 19 units, 2 overlap */
#ahApp.wah-ig .ah-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: calc(19 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: 0;
  background:
    url(/static/img/ingame/whoframe-columntab-left.png) left top / calc(5 * var(--u)) 100% no-repeat,
    url(/static/img/ingame/whoframe-columntab-right.png) right top / calc(4 * var(--u)) 100% no-repeat,
    url(/static/img/ingame/whoframe-columntab-middle.png) left top / 100% 100% no-repeat,
    #0c0b0a;
  background-clip: border-box;
  color: var(--ig-white);
  font-family: var(--ig-friz);
  font-size: calc(10 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-variant: normal;
  text-align: left;
  text-shadow: var(--ig-shadow);
  white-space: nowrap;
  box-shadow: none;
}
#ahApp.wah-ig .ah-table thead th.ah-sortable { cursor: pointer; }
#ahApp.wah-ig .ah-table thead th.ah-sortable:hover {
  background-image:
    url(/static/img/ingame/ui-character-tab-highlight.png),
    url(/static/img/ingame/whoframe-columntab-left.png),
    url(/static/img/ingame/whoframe-columntab-right.png),
    url(/static/img/ingame/whoframe-columntab-middle.png);
  background-size: 100% 100%, calc(5 * var(--u)) 100%, calc(4 * var(--u)) 100%, 100% 100%;
  background-position: center, left top, right top, left top;
  background-repeat: no-repeat;
  background-blend-mode: screen, normal, normal, normal;
}
/* sort arrow: auctionhouse-ui-sortarrow (points down = descending; flipped for ascending) */
#ahApp.wah-ig .ah-table .sort-arrow {
  display: inline-block;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  margin-left: calc(3 * var(--u));
  vertical-align: middle;
  font-size: 0;
  color: transparent;
}
#ahApp.wah-ig .ah-table th.is-sorted .sort-arrow { background: url(/static/img/ingame/auctionhouse-ui-sortarrow.png) center / contain no-repeat; }
#ahApp.wah-ig .ah-table th.is-asc .sort-arrow { transform: scaleY(-1); }
#ahApp.wah-ig .ah-table th.col-price { width: calc(118 * var(--u)); }
#ahApp.wah-ig .ah-table th.col-type { width: calc(55 * var(--u)); }
#ahApp.wah-ig .ah-table th.col-qty { width: calc(83 * var(--u)); }
#ahApp.wah-ig .ah-table th.col-market { width: calc(110 * var(--u)); }
#ahApp.wah-ig .ah-table th.col-fav { width: calc(29 * var(--u)); }
#ahApp.wah-ig .ah-table th.col-price,
#ahApp.wah-ig .ah-table th.col-market { text-align: right; }

/* rows: 20 units, auctionhouse-rowstripe-1 / -2, row-highlight on hover (ADD) */
#ahApp.wah-ig .ah-table tbody tr {
  height: calc(20 * var(--u));
  background: url(/assets/ui/auctionhouse-rowstripe-1.png) 0 0 / 100% 100%;
  border: 0;
  cursor: pointer;
}
#ahApp.wah-ig .ah-table tbody tr:nth-child(even) { background-image: url(/assets/ui/auctionhouse-rowstripe-2.png); }
#ahApp.wah-ig .ah-table tbody tr:hover,
#ahApp.wah-ig .ah-table tbody tr:focus-within {
  background-image: url(/static/img/ingame/auctionhouse-ui-row-highlight.png), url(/assets/ui/auctionhouse-rowstripe-1.png);
  background-size: 100% 100%;
  background-blend-mode: screen;
}
#ahApp.wah-ig .ah-table tbody tr.selected,
#ahApp.wah-ig .ah-table tbody tr.is-selected { background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(/static/img/ingame/auctionhouse-ui-row-select.png); background-size: 100% 100%; }
#ahApp.wah-ig .ah-table td {
  height: calc(20 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: 0;
  background: none;
  color: var(--ig-white);
  font-size: calc(12 * var(--u));
  line-height: 1;
  text-shadow: var(--ig-shadow);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ahApp.wah-ig .ah-table td.price-cell,
#ahApp.wah-ig .ah-table td.market-cell { text-align: right; font-family: var(--ig-num); font-size: calc(13 * var(--u)); }
#ahApp.wah-ig .ah-table td.col-type,
#ahApp.wah-ig .ah-table td.qty-cell { font-family: var(--ig-num); font-size: calc(13 * var(--u)); }
#ahApp.wah-ig .ah-table td.market-cell { color: #c8c8c8; }
/* the client's Available column is the bare quantity; the listing count lives on the item page */
#ahApp.wah-ig .ah-table .ah-subtext { display: none; }
#ahApp.wah-ig .ah-item-cell { display: flex; align-items: center; min-width: 0; }
#ahApp.wah-ig .ah-item-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--ig-friz);
  font-size: calc(12 * var(--u));
  font-weight: 400;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ahApp.wah-ig .ah-item-link:hover { text-decoration: none; }
/* AuctionHouseTableCellItemDisplayTemplate icon: 14x14 inside auctionhouse-itemicon-small-border */
#ahApp.wah-ig .ah-item-link .wgf-ah-fpicon,
#ahApp.wah-ig .ah-item-link img {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  margin: 0 calc(7 * var(--u)) 0 calc(1 * var(--u));
  padding: calc(1 * var(--u));
  border: 0;
  border-radius: 0;
  background: url(/static/img/ingame/auctionhouse-itemicon-small-border.png) center / 100% 100% no-repeat;
  box-shadow: none;
  flex: 0 0 auto;
}

/* coins: the client's auctionhouse-icon-coin-* textures in place of the SVG sprite */
.wah-ig .wgf-coin {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  margin-left: calc(2 * var(--u));
  vertical-align: -0.1em;
  background: center / contain no-repeat;
  fill: none;
}
.wah-ig .wgf-coin use { display: none; }
.wah-ig .wgf-coin--g, .wah-ig .wgf-coin--gold { background-image: url(/assets/ui/auctionhouse-icon-coin-gold.png); }
.wah-ig .wgf-coin--s, .wah-ig .wgf-coin--silver { background-image: url(/assets/ui/auctionhouse-icon-coin-silver.png); }
.wah-ig .wgf-coin--c, .wah-ig .wgf-coin--copper { background-image: url(/assets/ui/auctionhouse-icon-coin-copper.png); }
.wah-ig .wgf-price { font-family: var(--ig-num); color: var(--ig-white); font-weight: 400; }
.wah-ig .wgf-price__seg { margin-left: calc(4 * var(--u)); }
.wah-ig .wgf-price__seg:first-child { margin-left: 0; }

/* item quality colours (ITEM_QUALITY_COLORS) */
.wah-ig :is(.q-poor, .q0) { color: #9d9d9d; }
.wah-ig :is(.q-common, .q1) { color: #ffffff; }
.wah-ig :is(.q-uncommon, .q2) { color: #1eff00; }
.wah-ig :is(.q-rare, .q3) { color: #0070dd; }
.wah-ig :is(.q-epic, .q4) { color: #a335ee; }
.wah-ig :is(.q-legendary, .q5) { color: #ff8000; }
.wah-ig :is(.q-artifact, .q6, .q-heirloom, .q7) { color: #e6cc80; }

/* MinimalScrollBar: thin track + thumb (WebKit/Blink; Firefox gets the thin native bar) */
.wah-ig .ah-sidebar, .wah-ig .ah-table-shell { scrollbar-width: thin; scrollbar-color: #6d6151 #000; }
.wah-ig ::-webkit-scrollbar { width: calc(8 * var(--u)); }
.wah-ig ::-webkit-scrollbar-track { background: url(/static/img/ingame/minimal-scrollbar-track-middle.png) center / 100% 100% repeat-y; }
.wah-ig ::-webkit-scrollbar-thumb { background: url(/static/img/ingame/minimal-scrollbar-thumb-middle.png) center / 100% 100%; border-radius: 4px; }

/* --- bottom: MoneyFrameInset + ThinGoldEdge money frame, then the status line ---------- */
#ahApp.wah-ig .ah-statusbar {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 0;
  border: 0;
  background: none;
  color: #b9b9b9;
  font-family: var(--ig-friz);
  font-size: calc(9.5 * var(--u));
}
#ahApp.wah-ig .ah-statusbar > #ahFreshness {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 calc(158 * var(--u));
  height: calc(19 * var(--u));
  margin: 0 0 0 calc(1 * var(--u));
  padding: 0 calc(8 * var(--u));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    url(/static/img/ingame/moneyframe-left.png) left center / auto 100% no-repeat,
    url(/static/img/ingame/moneyframe-right.png) right center / auto 100% no-repeat,
    url(/static/img/ingame/moneyframe-middle.png) center / 100% 100% no-repeat;
}
#ahApp.wah-ig .ah-statusbar > #ahFreshness[hidden] { display: inline-flex !important; }
#ahApp.wah-ig .wgf-snapshot__seal { display: none; }
#ahApp.wah-ig #ahFreshness .wgf-snapshot__body,
#ahApp.wah-ig #ahFreshness .wgf-snapshot__meta { display: inline-flex; flex-direction: row; flex-wrap: nowrap; gap: calc(4 * var(--u)); align-items: baseline; white-space: nowrap; margin: 0; padding: 0; line-height: 1; }
#ahApp.wah-ig #ahFreshness .wgf-snapshot__label,
#ahApp.wah-ig #ahFreshness .wgf-snapshot__rel { display: inline; margin: 0; padding: 0; line-height: 1; }
#ahApp.wah-ig .wgf-snapshot__label { color: var(--ig-gold); font-family: var(--ig-friz); font-size: calc(9.5 * var(--u)); letter-spacing: 0; text-transform: none; }
#ahApp.wah-ig .wgf-snapshot__meta, #ahApp.wah-ig .wgf-snapshot__rel { color: var(--ig-white); font-family: var(--ig-num); font-size: calc(11 * var(--u)); }
#ahApp.wah-ig #ahStatus { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ahApp.wah-ig #ahResultCount { color: var(--ig-gold); }

/* --- tabs under the frame: PanelTabButtonTemplate ------------------------------------ */
.wah-ig-tabs {
  position: absolute;
  z-index: 0;
  left: calc(20 * var(--u));
  top: calc(100% - 8 * var(--u));
  display: flex;
  align-items: flex-start;
}
.wah-ig-tab {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(80 * var(--u));
  height: calc(36 * var(--u));
  margin-right: calc(-6 * var(--u));
  padding: calc(6 * var(--u)) calc(18 * var(--u)) 0;
  background:
    url(/static/img/ingame/uiframe-tab-left.png) left top / auto 100% no-repeat,
    url(/static/img/ingame/uiframe-tab-right.png) right top / auto 100% no-repeat,
    url(/static/img/ingame/_uiframe-tab-center.png) left top / 100% 100% no-repeat;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(10 * var(--u));
  text-decoration: none;
  text-shadow: var(--ig-shadow);
  white-space: nowrap;
}
.wah-ig-tab:hover { color: var(--ig-white); text-decoration: none; }
.wah-ig-tab[aria-current] {
  z-index: 1;
  height: calc(42 * var(--u));
  margin-top: calc(-6 * var(--u));
  padding-top: calc(10 * var(--u));
  background-image:
    url(/static/img/ingame/uiframe-activetab-left.png),
    url(/static/img/ingame/uiframe-activetab-right.png),
    url(/static/img/ingame/_uiframe-activetab-center.png);
  color: var(--ig-white);
}
.wah-ig-tab:focus-visible { outline: 2px solid var(--ig-gold); outline-offset: -4px; }

/* ======================================================================================
   3. Item window (templates/item.html): the ItemBuyFrame / CommoditiesBuyFrame look.
   ====================================================================================== */
.wah-ig.wah-item { padding: calc(23 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u)); }
.wah-ig.wah-item > .wgf-window__title { position: absolute; top: 0; left: 0; right: 0; }
.wah-ig.wah-item > * { position: relative; z-index: 1; }
.wah-ig.wah-item > .wah-ig-portrait { position: absolute; z-index: 2; }
.wah-ig.wah-item > .wah-ig-close { position: absolute; z-index: 4; }
.wah-ig.wah-item > .wah-ig-tabs { position: absolute; z-index: 0; }
.wah-ig .wah-ig-back { margin: calc(6 * var(--u)) 0 calc(4 * var(--u)) calc(56 * var(--u)); }

/* item header: auctionhouse-background-buy-noncommodities-header + item header frame */
.wah-ig .wah-item-head {
  gap: calc(10 * var(--u));
  margin: calc(4 * var(--u)) 0;
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border: calc(6 * var(--u)) solid transparent;
  border-image: url(/static/img/ingame/insetframe-9slice.png) 8 / calc(6 * var(--u)) round;
  background: url(/static/img/ingame/auctionhouse-background-buy-noncommodities-header.png) center / 100% 100% no-repeat, #0c0b0a;
}
.wah-ig .wah-icon { width: calc(37 * var(--u)); height: calc(37 * var(--u)); border-width: 2px; }
.wah-ig .wah-iname { font-family: var(--ig-friz); font-size: calc(16 * var(--u)); text-shadow: var(--ig-shadow); }
.wah-ig .wah-isub { color: #b9b9b9; font-family: var(--ig-friz); font-size: calc(10 * var(--u)); }

.wah-ig .wah-stats { padding: 0; gap: calc(6 * var(--u)); }
.wah-ig .wah-stat {
  border: calc(6 * var(--u)) solid transparent;
  border-image: url(/static/img/ingame/insetframe-9slice.png) 8 / calc(6 * var(--u)) round;
  box-shadow: none;
  background: url(/static/img/ingame/auctionhouse-background-buy-commodities.png) center / cover no-repeat, #0c0b0a;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
}
.wah-ig .wah-stat.wah-alliance, .wah-ig .wah-stat.wah-horde { box-shadow: none; }
.wah-ig .wah-stat h3,
.wah-ig .wah-chart h3 { font-family: var(--ig-friz); color: var(--ig-gold); font-size: calc(12 * var(--u)); text-shadow: var(--ig-shadow); }
.wah-ig .wah-stat dt { color: var(--ig-gold); font-family: var(--ig-friz); font-size: calc(10 * var(--u)); }
.wah-ig .wah-stat dd { color: var(--ig-white); font-family: var(--ig-num); font-size: calc(12 * var(--u)); text-shadow: var(--ig-shadow); }
.wah-ig .wah-stat dd a { color: var(--ig-gold); }
.wah-ig .wah-chart {
  margin: calc(6 * var(--u)) 0;
  border: calc(6 * var(--u)) solid transparent;
  border-image: url(/static/img/ingame/insetframe-9slice.png) 8 / calc(6 * var(--u)) round;
  box-shadow: none;
  background: url(/static/img/ingame/auctionhouse-background-index.png) center / 100% 100% no-repeat, #0c0b0a;
}
.wah-ig .wah-tab {
  box-sizing: border-box;
  height: calc(18 * var(--u));
  margin: 0 calc(1 * var(--u));
  padding: 0 calc(10 * var(--u));
  border: 0;
  border-radius: 0;
  background: url(/assets/ui/auctionhouse-nav-button-secondary.png) left top / 100% calc(100% * 64 / 42) no-repeat;
  color: var(--ig-gold);
  font-family: var(--ig-friz);
  font-size: calc(10 * var(--u));
  text-shadow: var(--ig-shadow);
  cursor: pointer;
}
.wah-ig .wah-tab:hover { color: var(--ig-white); }
.wah-ig .wah-tab.on { color: var(--ig-white); background: url(/assets/ui/auctionhouse-nav-button-secondary-select.png) left top / 100% 100% no-repeat, url(/assets/ui/auctionhouse-nav-button-secondary.png) left top / 100% calc(100% * 64 / 42) no-repeat; }
.wah-ig .wah-legend { color: #b9b9b9; font-family: var(--ig-friz); }

/* realm list: the same item-list table as the browse window */
.wah-ig .ah-table.wah-realms {
  width: 100%;
  margin: calc(6 * var(--u)) 0;
  border: calc(6 * var(--u)) solid transparent;
  border-image: url(/static/img/ingame/insetframe-9slice.png) 8 / calc(6 * var(--u)) round;
  border-collapse: separate;
  border-spacing: 0;
  background: #0c0b0a;
  font-family: var(--ig-friz);
}
.wah-ig .wah-realms thead th {
  height: calc(19 * var(--u));
  padding: 0 calc(8 * var(--u));
  background:
    url(/static/img/ingame/whoframe-columntab-left.png) left top / calc(5 * var(--u)) 100% no-repeat,
    url(/static/img/ingame/whoframe-columntab-right.png) right top / calc(4 * var(--u)) 100% no-repeat,
    url(/static/img/ingame/whoframe-columntab-middle.png) left top / 100% 100% no-repeat;
  color: var(--ig-white); font-weight: 400; font-variant: normal; text-transform: none; letter-spacing: 0; font-size: calc(10 * var(--u)); text-align: left; text-shadow: var(--ig-shadow); border: 0;
}
.wah-ig .wah-realms { table-layout: fixed; }
.wah-ig .wah-realms thead th:nth-child(2) { width: 22%; text-align: right; }
.wah-ig .wah-realms thead th:nth-child(3) { width: 12%; text-align: right; }
.wah-ig .wah-realms thead th:nth-child(4) { width: 14%; text-align: right; }
.wah-ig .wah-realms tbody tr { height: calc(20 * var(--u)); background: url(/assets/ui/auctionhouse-rowstripe-1.png) 0 0 / 100% 100%; }
.wah-ig .wah-realms tbody tr:nth-child(even) { background-image: url(/assets/ui/auctionhouse-rowstripe-2.png); }
.wah-ig .wah-realms tbody tr:hover { background-image: url(/static/img/ingame/auctionhouse-ui-row-highlight.png); }
.wah-ig .wah-realms tbody tr.selected { background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(/static/img/ingame/auctionhouse-ui-row-select.png); }
.wah-ig .wah-realms td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 calc(8 * var(--u)); border: 0; color: var(--ig-white); font-size: calc(11 * var(--u)); text-shadow: var(--ig-shadow); }
.wah-ig .wah-realms td a { color: var(--ig-white); text-decoration: none; }
.wah-ig .wah-realms td a:hover { color: var(--ig-gold); }
.wah-ig .wah-realms .price-cell, .wah-ig .wah-realms .qty-cell { text-align: right; font-family: var(--ig-num); font-size: calc(12 * var(--u)); }
.wah-ig .wah-summary { color: #d8d0bf; font-family: var(--ig-friz); font-size: calc(10 * var(--u)); margin: calc(6 * var(--u)) 0 0; }

/* ======================================================================================
   4. Small screens: the frame keeps its art but the content flows (no fixed height).
   ====================================================================================== */
@media (max-width: 1180px) {
  .wah-ig { --u: 1.25px; }
}
@media (max-width: 900px) {
  .wah-ig { --u: 1.2px; }
  #ahApp.wah-ig { height: auto; grid-template-rows: auto auto auto auto; padding-bottom: calc(6 * var(--u)); }
  #ahApp.wah-ig .ah-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 46px calc(6 * var(--u)) calc(4 * var(--u));
    gap: calc(4 * var(--u)) calc(6 * var(--u));
  }
  #ahApp.wah-ig .ah-realm-wrap,
  #ahApp.wah-ig .ah-searchbox { grid-column: 1 / -1; }
  #ahApp.wah-ig .ah-search-button { width: 100%; }
  #ahApp.wah-ig .ah-filter-button, #ahApp.wah-ig .ah-control { width: calc(100% - 8 * var(--u)); font-size: calc(10 * var(--u)); padding-left: calc(8 * var(--u)); }
  #ahApp.wah-ig .ah-layout { grid-template-columns: minmax(0, 1fr); }
  #ahApp.wah-ig .ah-sidebar { max-height: calc(220 * var(--u)); height: auto; }
  #ahApp.wah-ig .ah-cat-row { width: calc(100% - 4 * var(--u)); }
  #ahApp.wah-ig .ah-cat-row[data-depth="1"] { width: calc(100% - 14 * var(--u)); }
  #ahApp.wah-ig .ah-cat-row[data-depth="2"], #ahApp.wah-ig .ah-cat-row[data-depth="3"] { width: calc(100% - 24 * var(--u)); }
  #ahApp.wah-ig .ah-main { margin: calc(4 * var(--u)) 0 0; }
  #ahApp.wah-ig .ah-table-shell { height: auto; max-height: 70vh; }
  #ahApp.wah-ig .ah-table th.col-price { width: calc(110 * var(--u)); }
  #ahApp.wah-ig .ah-table th.col-market, #ahApp.wah-ig .ah-table td.market-cell { display: none; }
  #ahApp.wah-ig .ah-statusbar { flex-wrap: wrap; height: auto; padding: calc(4 * var(--u)) 0; }
}
@media (max-width: 560px) {
  #ahApp.wah-ig .ah-table th.col-type, #ahApp.wah-ig .ah-table td.col-type { display: none; }
  #ahApp.wah-ig .ah-table th.col-qty { width: calc(64 * var(--u)); }
  #ahApp.wah-ig .ah-table td { font-size: calc(11 * var(--u)); }
  #ahApp.wah-ig .ah-table .ah-subtext { display: none; }
  .wah-ig-tab { min-width: 0; padding-inline: calc(12 * var(--u)); }
}

/* --- Filters dropdown (AuctionHouse FilterButton menu): black panel, gold headings, ---------
   Level Range boxes, rarity checkboxes in ITEM_QUALITY_COLORS. static/js/wah-filters.js. */
.wah-ig .wah-filters { position: relative; }
#ahApp.wah-ig > .ah-toolbar { z-index: 5; }   /* the open menu must paint over .ah-layout */
.wah-ig .wah-filters .ah-filter-button { width: 100%; }
.wah-ig #wahFiltersButton.is-active { color: var(--ig-white); }
.wah-ig #wahFiltersButton.is-active::after {
  content: ""; position: absolute; right: calc(-14 * var(--u)); top: 50%; width: calc(12 * var(--u)); height: calc(12 * var(--u));
  transform: translateY(-50%); background: url(/static/img/ingame/auctionhouse-ui-filter-redx.png) center / contain no-repeat;
}
.wah-ig .wah-filters-menu {
  position: absolute; z-index: 40; top: calc(100% + 2 * var(--u)); left: calc(4 * var(--u));
  box-sizing: border-box; width: calc(190 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u));
  background: rgba(0, 0, 0, .92); border: 1px solid #8c7752; border-radius: calc(6 * var(--u));
  box-shadow: inset 0 0 0 1px #2b2213, 0 4px 14px rgba(0, 0, 0, .8);
  font-family: var(--ig-friz); font-size: calc(12 * var(--u)); text-shadow: var(--ig-shadow);
}
.wah-ig .wah-filters-menu[hidden] { display: none; }
.wah-ig .wah-filters-head { color: var(--ig-gold); margin: calc(8 * var(--u)) 0 calc(4 * var(--u)); }
.wah-ig .wah-filters-head:first-child { margin-top: 0; }
.wah-ig .wah-filters-range { display: flex; align-items: center; gap: calc(3 * var(--u)); color: var(--ig-white); }
.wah-ig .wah-filters-range input {
  box-sizing: border-box; width: calc(40 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(4 * var(--u));
  border: 1px solid #6b5a3a; border-radius: calc(5 * var(--u)); background: #000; color: var(--ig-white);
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #1e170c;
  font: calc(12 * var(--u)) var(--ig-num); text-align: center; outline: none;
}
.wah-ig .wah-filters-range input:focus { border-color: var(--ig-gold); }
.wah-ig .wah-check { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(3 * var(--u)) 0; cursor: pointer; }
.wah-ig .wah-check input {
  -webkit-appearance: none; appearance: none; margin: 0; flex: 0 0 auto;
  width: calc(14 * var(--u)); height: calc(14 * var(--u)); border: 1px solid #77684a; border-radius: calc(2 * var(--u));
  background: #0d0c0a; box-shadow: inset 0 0 3px #000; cursor: pointer; position: relative;
}
.wah-ig .wah-check input:checked::after {
  content: "\2714"; position: absolute; left: 50%; top: 50%; transform: translate(-45%, -58%);
  color: var(--ig-gold); font-size: calc(15 * var(--u)); line-height: 1; text-shadow: 1px 1px 0 #000;
}
.wah-ig .wah-check:hover span { filter: brightness(1.25); }
.wah-ig .wah-q0 span { color: #9d9d9d; }
.wah-ig .wah-q1 span { color: #ffffff; }
.wah-ig .wah-q2 span { color: #1eff00; }
.wah-ig .wah-q3 span { color: #0070dd; }
.wah-ig .wah-q4 span { color: #a335ee; }
.wah-ig .wah-q5 span { color: #ff8000; }
.wah-ig .wah-filters-reset {
  display: block; margin: calc(8 * var(--u)) 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ig-gold); font: inherit; font-size: calc(11 * var(--u)); text-shadow: var(--ig-shadow);
}
.wah-ig .wah-filters-reset:hover { color: var(--ig-white); }