/* WoW Gold Farms — SEO Landing Pages shared styles
   wgf-seo-pages.css v20260612-fresh
   Used by: /item/<slug>/, /item/, /realm/<slug>/deals/, /realm/
*/

/* === Brand token bridge (added 2026-06-12) ===
   This file was authored against --surface / --border-color / --accent-gold,
   which don't exist in _tokens.css, so everything fell back to washed-out
   greys + a dull gold. Map them onto the real site tokens so the SEO pages
   match the rest of the site. */
.wgf-shell-page {
  --surface: var(--wgf-panel-1);
  --border-color: var(--wgf-border);
  --accent-gold: var(--wgf-gold);
}

/* === White-out guard (added 2026-06-12) ===
   The shell paints the page background with a token-driven gradient
   (linear-gradient(..., var(--wgf-bg-2), var(--wgf-bg))). If _tokens.css ever
   fails to load on these routes — e.g. the Flask shell links it after a deploy
   gap, or a CDN miss — those tokens go undefined, the whole gradient becomes
   invalid, and the page falls back to browser-default WHITE with black text.
   Re-assert the same background here (scoped to the SEO routes this sheet
   loads on) with solid dark fallbacks, so the page is always on-brand dark and
   can never regress to white-on-white. Identical look when tokens are present. */
body.wgf-shell-page {
  background:
    radial-gradient(circle at top center, rgba(var(--wgf-gold-rgb), 0.08), transparent 34rem),
    linear-gradient(180deg, var(--wgf-bg-2), var(--wgf-bg, var(--wgf-bg-base)));
  color: var(--wgf-text);
}

/* Breadcrumb */
/* .wgf-seo-breadcrumb moved to wgf-site-shell.css (it's a shell component now, loaded site-wide
   incl. static pages) — single source there. */

/* Hero — bordered gradient card, matching .wgf-page-hero on the rest of the site */
.wgf-seo-hero {
  max-width: 1180px;
  margin: 0 auto 1.25rem;
  padding: clamp(20px, 3.5vw, var(--space-5));
  border: 1px solid var(--wgf-border-strong);
  border-radius: 0;
  background: var(--wgf-bg-hero,
    linear-gradient(135deg, rgba(28, 24, 12, 0.92), rgba(10, 9, 6, 0.96)));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
/* Item page: the hero becomes the tooltip card (another agent owns the card markup).
   Strip the double-frame so the card chrome is the only visible frame. */
.wgf-seo-hero:has(.wgf-item-hero) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.wgf-seo-eyebrow { color: var(--wgf-gold-link); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; opacity: 0.95; margin: 0 0 0.4rem; }
.wgf-seo-h1 { font-family: var(--font-display, 'Cinzel', serif); color: var(--wgf-gold); margin: 0 0 0.6rem; line-height: 1.08; }
/* Beat the global `.wgf-shell-page h1` rule (which forces 34–68px and clips on
   mobile) with a higher-specificity cap sized for a content page. */
.wgf-shell-page h1.wgf-seo-h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.wgf-seo-sub { color: var(--wgf-muted); font-size: 1rem; margin: 0; max-width: 680px; line-height: 1.55; }
/* Visible data-freshness line in the hero (Audit-P1-C) — real snapshot timestamp. */
.wgf-seo-freshness { color: var(--wgf-muted); font-size: 0.85rem; margin: 0.55rem 0 0; opacity: 0.85; }

/* Item hero — transparent layout wrapper; framing comes from the tooltip card chrome. */
.wgf-item-hero { display: flex; align-items: center; gap: clamp(var(--space-3), 2.2vw, var(--space-4)); }
.wgf-item-hero__text { min-width: 0; }
.wgf-item-hero__icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 64px; height: 64px;
  border-radius: 2px;                           /* game item icons: nearly square */
  overflow: hidden;
  border: 2px solid var(--wgf-border-strong);
  background: var(--wgf-panel-2, #211d17) center / cover no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.wgf-item-hero__icon img,
.wgf-item-hero__icon ins,
.wgf-item-hero__icon .icon { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Quality-colored frame, like a Wowhead tooltip icon. */
.wgf-item-hero__icon.q-uncommon  { border-color: var(--q-uncommon); }
.wgf-item-hero__icon.q-rare      { border-color: var(--q-rare); }
.wgf-item-hero__icon.q-epic      { border-color: var(--q-epic); }
.wgf-item-hero__icon.q-legendary { border-color: var(--q-legendary); }
.wgf-item-hero__icon.q-artifact  { border-color: var(--q-artifact); }
@media (max-width: 520px) {
  .wgf-item-hero { align-items: flex-start; gap: 12px; }
  .wgf-item-hero__icon { width: 48px; height: 48px; }
}

/* Layout */
.wgf-seo-layout { max-width: 1180px; margin: 0 auto; padding: 0; }
.wgf-seo-main { width: 100%; }

/* Price panel — canonical tokens; readable labels (was opacity:.6 → near-invisible) */
.wgf-seo-price-panel {
  background: var(--wgf-panel-1);
  border: 1px solid var(--wgf-border-neutral);
  border-radius: 0; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
.wgf-seo-price-row { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; align-items: flex-start; }
.wgf-seo-price-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--wgf-muted); margin-bottom: 0.3rem; }
.wgf-seo-price-val { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 1.3rem; color: var(--wgf-text); }
.wgf-seo-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; }
.wgf-seo-stat {
  padding: 0.6rem 0.8rem;
  background: var(--wgf-panel-2);
  border: 1px solid var(--wgf-border-neutral);
  border-radius: 0;
}
/* direct-child only: the label span. A bare `span` selector also hit the coin
   price's nested .wgf-price/.wgf-price__seg/.wgf-num spans (it out-specifies
   .wgf-price's inline-flex), stacking gold/silver vertically. */
.wgf-seo-stat > span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--wgf-muted); margin-bottom: 0.3rem; }
.wgf-seo-stat strong { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.95rem; color: var(--wgf-text); font-weight: 600; }

/* "Typical price" deal line — sits under the Current/Typical price row, frames the gap as a deal.
   Green when the current price is below typical, muted red when above, neutral when in line. */
.wgf-seo-typical-note {
  margin: -0.45rem 0 1.05rem; font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.82rem; letter-spacing: 0.02em; color: var(--wgf-muted);
}
.wgf-seo-typical-note--deal { color: var(--wgf-up); }
.wgf-seo-typical-note--high { color: var(--wgf-down); }

/* Chart section */
.wgf-seo-chart-section { margin-bottom: 1.5rem; }
.wgf-seo-range-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 0.75rem; }
/* Red-button tab language (mirrors .wgf-tab in wgf-chrome.css) */
.wgf-seo-range-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 13px;
  border: 0; border-radius: 0; cursor: pointer;
  background:
    url(/assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-dim);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: var(--text-ink-outline);
  filter: brightness(0.66) saturate(0.9);
  transition: filter var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.wgf-seo-range-btn:hover { filter: brightness(0.9) saturate(1); color: var(--wgf-gold-bright); }
.wgf-seo-range-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-seo-range-btn.is-active {
  background:
    url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-bright);
  filter: none;
  transform: translateY(1px);
}
/* Carved recessed chart well (owner 2026-07-04: the whole chart was slop) - matches .phc__plot. */
.wgf-seo-chart-wrap { position: relative; width: 100%; height: 320px; box-sizing: border-box; border: 1px solid #3a3a3a; border-radius: 0; padding: 1rem; background: #07070a; box-shadow: inset 0 2px 7px rgba(0,0,0,.85); }
.wgf-seo-chart-wrap canvas { width: 100% !important; height: 100% !important; max-height: 288px; }
.wgf-seo-chart-note { font-size: 0.78rem; color: var(--wgf-muted); margin: 0.5rem 0 0; }

/* Related items (canonical rows live in wgf-item-card.css; this is just the grid) */
.wgf-seo-related-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.wgf-seo-related-fresh { margin: var(--space-1) 0 0; }

/* Tables */
.wgf-seo-table-wrap { overflow-x: auto; margin: 0.75rem 0; border: 1px solid var(--border-color, rgba(255,255,255,0.1)); border-radius: 0; }
.wgf-seo-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.wgf-seo-table th { padding: 0.6rem 0.8rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.1)); background: rgba(255,255,255,0.03); }
.wgf-seo-table td { padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06)); }
.wgf-seo-table tr:last-child td { border-bottom: none; }
.wgf-seo-table tr:hover td { background: rgba(255,255,255,0.03); }
.wgf-seo-table a { color: var(--accent-gold); text-decoration: none; }
.wgf-seo-table a:hover { text-decoration: underline; }
.wgf-seo-table-note { font-size: 0.75rem; opacity: 0.55; margin-top: 0.5rem; }

/* Related-tools links — previously unstyled (rendered as a run-on blob).
   Now a responsive grid of link cards, matching .wgf-guide-link-card. */
.wtd-related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 1.25rem;
}
.wtd-related-links a {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--wgf-border);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.18);
  color: var(--wgf-gold);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wtd-related-links a:hover {
  border-color: var(--wgf-border-strong);
  background: rgba(0, 0, 0, 0.28);
}
.wtd-related-links a span {
  display: block;
  margin-top: 0.25rem;
  color: var(--wgf-muted);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Deal type badges */
.wgf-deal-badge {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 0;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
/* Neutralized 2026-06-21: deal type = quiet warm chip (type is conveyed by the label
   text, not a coloured fill). Green/red stay reserved for market direction; the
   how-good signal lives in the score badge's gold-intensity ramp below. */
.wgf-deal-badge--under_market { background: var(--wgf-panel-2); color: var(--wgf-text);  border: 1px solid var(--wgf-border-neutral); }
.wgf-deal-badge--below_vendor { background: var(--wgf-panel-2); color: var(--wgf-text);  border: 1px solid var(--wgf-border-neutral); }
.wgf-deal-badge--high_spread  { background: var(--wgf-panel-2); color: var(--wgf-muted); border: 1px solid var(--wgf-border-neutral); }
.wgf-deal-badge--other        { background: var(--wgf-panel-1); color: var(--wgf-muted); border: 1px solid var(--wgf-border-neutral-soft); }

@media (max-width: 640px) {
  .wgf-seo-price-row { flex-direction: column; gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Realm Deals v2 — score badges, new deal types, filter bar, mobile
   ═══════════════════════════════════════════════════════════════════════════ */

/* Score badges S / A / B / C */
.wgf-score-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75em; height: 1.75em; border-radius: 0;
  font-weight: 900; font-size: 0.82rem; line-height: 1;
  font-family: var(--font-display, 'Cinzel', serif);
}
/* Grade by gold intensity (warm, monochrome) instead of a green/blue/amber rainbow. */
.wgf-score-badge--S { background: var(--wgf-panel-2); color: var(--wgf-gold-bright);  border: 1px solid var(--wgf-gold-dim); }
.wgf-score-badge--A { background: var(--wgf-panel-2); color: var(--wgf-gold-primary); border: 1px solid var(--wgf-border-neutral); }
.wgf-score-badge--B { background: var(--wgf-panel-2); color: var(--wgf-gold-muted);   border: 1px solid var(--wgf-border-neutral); }
.wgf-score-badge--C { background: var(--wgf-panel-1); color: var(--wgf-muted);        border: 1px solid var(--wgf-border-neutral-soft); }

/* Additional deal type badges — same quiet warm chip as the others. */
.wgf-deal-badge--near_7d_low  { background: var(--wgf-panel-2); color: var(--wgf-text);  border: 1px solid var(--wgf-border-neutral); }
.wgf-deal-badge--speculative  { background: var(--wgf-panel-1); color: var(--wgf-muted); border: 1px solid var(--wgf-border-neutral-soft); }

/* Filter bar */
.rd-filterbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--wgf-border, rgba(255,255,255,0.10));
  border-radius: 0;
}
.rd-filterbar__controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.rd-field { display: flex; flex-direction: column; gap: 0.2rem; }
.rd-field-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.rd-input {
  padding: 0.3rem 0.55rem; border-radius: 0; font-size: 0.82rem;
  background: rgba(0,0,0,0.28); color: var(--wgf-text);
  border: 1px solid var(--wgf-border, rgba(255,255,255,0.12));
}
.rd-input:focus {
  outline: none; border-color: var(--wgf-gold);
}
.rd-input { width: 6rem; }
.rd-count { font-size: 0.8rem; opacity: 0.6; margin: 0; white-space: nowrap; }

/* Reason text — wrap gracefully in narrow cells */
.deal-reason { font-size: 0.78rem; opacity: 0.75; line-height: 1.45; }

/* Table column sizing + visual hierarchy (item + est. profit loud, snapshot quiet) */
.rd-deals-table .col-badge  { width: 3rem; text-align: center; }
.rd-deals-table .col-type   { white-space: nowrap; }
.rd-deals-table .col-price,
.rd-deals-table .col-market,
.rd-deals-table .col-profit { white-space: nowrap; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.85rem; }
.rd-deals-table .col-market { color: var(--wgf-muted); }   /* typical = quieter reference */
.rd-deals-table .col-profit { font-weight: 700; }                  /* est. profit = emphasised */
.rd-deals-table .col-profit .wgf-price { color: var(--wgf-gold-bright); }
.rd-deals-table .col-disc   { white-space: nowrap; }
.rd-deals-table .col-qty    { text-align: right; }
.rd-deals-table .col-updated{ white-space: nowrap; opacity: 0.6; font-size: 0.76rem; color: var(--wgf-muted); }
.rd-deals-table .col-reason { min-width: 180px; }

/* Item cell = primary click target: icon + strong gold name. */
.rd-item { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; min-width: 0; }
.rd-item-icon {
  width: 28px; height: 28px; flex: none; border-radius: 2px;
  border: 1px solid var(--wgf-border-neutral, rgba(255,255,255,0.12));
  background: var(--wgf-panel-2, #211d17); object-fit: cover;
}
.rd-item__name {
  font-family: var(--font-display, 'Cinzel', serif); color: var(--wgf-gold);
  font-weight: 700; font-size: 0.98rem; line-height: 1.15;
}
.rd-item:hover .rd-item__name { color: var(--wgf-gold-bright); text-decoration: underline; }

/* Whole desktop row feels clickable (JS routes a row click to the item page). */
.rd-deals-table tbody tr[data-href] { cursor: pointer; }
.rd-deals-table tbody tr[data-href]:hover td { background: rgba(var(--wgf-gold-rgb), 0.05); }

/* Deal-type chip — smaller + title case (the row already conveys the rest). */
.rd-deals-table .wgf-deal-badge { text-transform: none; font-size: 0.68rem; padding: 0.12rem 0.5rem; letter-spacing: 0.01em; }

/* Compact realm summary strip under the hero */
.rd-statstrip {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.85rem 0 0; padding: 0; list-style: none;
}
.rd-statstrip li {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.4rem 0.8rem; min-width: 92px;
  border: 1px solid var(--wgf-border);
  border-radius: 0; background: rgba(0, 0, 0, 0.22);
}
.rd-statstrip span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wgf-muted); }
.rd-statstrip strong { font-size: 0.95rem; color: var(--wgf-text); font-weight: 700; }

/* Snapshot-freshness line in the hero (no "live"/"verified" wording) */
.rd-snapshot-line { display: flex; align-items: center; gap: 0.4rem; color: var(--wgf-muted); font-size: 0.82rem; margin: 0.55rem 0 0; }
.rd-snapshot-line svg { width: 14px; height: 14px; flex: none; opacity: 0.8; }

/* Score legend chips above the table */
.rd-score-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem;
  margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--wgf-muted);
}
.rd-score-legend .wgf-score-badge { margin-right: 0.15rem; }

/* Reset button in the filter bar */
.rd-reset-btn {
  align-self: flex-end; padding: 0.32rem 0.85rem; border-radius: 0;
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  color: var(--wgf-text); background: var(--wgf-panel-2, #211d17);
  border: 1px solid var(--wgf-border-neutral, rgba(255,255,255,0.14));
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rd-reset-btn:hover { border-color: var(--wgf-gold-dim); color: var(--wgf-gold-bright); }

/* Glossary — realm deals explanation list */
.rd-glossary { margin: 0.5rem 0 1rem; }
.rd-glossary dt {
  font-weight: 700; color: var(--wgf-gold);
  margin-top: 0.75rem; font-size: 0.92rem;
}
.rd-glossary dd { margin: 0.15rem 0 0 1rem; opacity: 0.85; line-height: 1.55; font-size: 0.9rem; }

/* Mobile (≤700px): each row becomes a thumb-friendly deal CARD — no wide table,
   no horizontal scroll. Item + badges on top, a 2-col stat grid, quiet snapshot. */
@media (max-width: 700px) {
  .rd-table-wrap.wgf-seo-table-wrap { overflow: visible; border: 0; border-radius: 0; margin: 0; }
  .rd-deals-table,
  .rd-deals-table tbody { display: block; width: 100%; }
  .rd-deals-table thead { display: none; }

  .rd-deals-table tr[data-deal-row] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.75rem;
    padding: 0.85rem 0.9rem; margin-bottom: var(--space-2);
    border: 1px solid var(--wgf-border);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.2);
  }
  .rd-deals-table tr[data-deal-row]:hover td { background: transparent; }
  .rd-deals-table td { display: block; border: 0 !important; padding: 0; }

  /* Item name = full-width card header */
  .rd-deals-table .col-name { order: 1; flex: 1 1 100%; }
  .rd-deals-table .col-name::before { content: none; }
  .rd-deals-table .rd-item__name { font-size: 1.02rem; }

  /* Badges row: deal type (left) + score (pushed right) */
  .rd-deals-table .col-type  { order: 2; }
  .rd-deals-table .col-badge { order: 3; margin-left: auto; width: auto; text-align: right; }
  .rd-deals-table .col-type::before,
  .rd-deals-table .col-badge::before { content: none; }

  /* Stat grid: price, est. profit, discount, qty — label above value */
  .rd-deals-table .col-price,
  .rd-deals-table .col-profit,
  .rd-deals-table .col-disc,
  .rd-deals-table .col-qty {
    order: 4; flex: 1 1 40%;
    display: flex; flex-direction: column; gap: 1px; text-align: left;
  }
  .rd-deals-table .col-price::before,
  .rd-deals-table .col-profit::before,
  .rd-deals-table .col-disc::before,
  .rd-deals-table .col-qty::before {
    content: attr(data-th);
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--wgf-muted); opacity: 0.85;
  }
  .rd-deals-table .col-profit { font-size: 0.95rem; }

  /* Typical price is hidden on the card (kept on desktop) */
  .rd-deals-table .col-market { display: none; }

  /* Snapshot age = quiet full-width footer */
  .rd-deals-table .col-updated {
    order: 5; flex: 1 1 100%; opacity: 0.6;
    font-size: 0.72rem; color: var(--wgf-muted);
  }
  .rd-deals-table .col-updated::before { content: "Snapshot: "; }

  /* Filter bar stacks full-width */
  .rd-filterbar { flex-direction: column; align-items: stretch; }
  .rd-filterbar__controls { flex-direction: column; }
  .rd-input, .rd-select, .rd-reset-btn { width: 100%; }
}

/* Confidence disclaimer — appears below the filter bar */
.rd-confidence-note {
  font-size: 0.8rem;
  line-height: 1.5;
  opacity: 0.6;
  margin: 0.25rem 0 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Farming guides — hero crest, quick-scan meta strip, herb roster cards,
   route-map figure, inline item chips. Self-hosted game icons in /assets/icons/.
   Warm Stone + Gold; design tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero: profession crest sits beside the eyebrow + title */
.wgf-guide-hero__row { display: flex; align-items: center; gap: var(--space-4); }
.wgf-guide-crest {
  flex: none; width: 72px; height: 72px;
  border-radius: var(--radius-pill, 999px);
  border: 2px solid var(--wgf-gold);
  box-shadow: 0 0 0 4px rgba(var(--wgf-gold-rgb), 0.10), inset 0 0 12px rgba(0, 0, 0, 0.5);
  background: #0c0a07; overflow: hidden;
}
.wgf-guide-crest img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Quick-scan meta strip under the hero copy */
.wgf-guide-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.wgf-guide-meta li {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--wgf-border);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.22);
}
.wgf-guide-meta b { color: var(--wgf-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; }
.wgf-guide-meta span { color: var(--wgf-text); font-weight: 700; font-size: 0.85rem; }


/* Route-map figure — placeholder until the Midnight zone-map art is dropped in */
.wgf-guide-map { margin: 1rem 0 0.5rem; }
.wgf-guide-map figure { margin: 0; }
.wgf-guide-map__frame {
  position: relative;
  border: 1px solid var(--wgf-border-strong);
  border-radius: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 12px, transparent 12px 24px),
    radial-gradient(120% 120% at 30% 20%, rgba(var(--wgf-gold-rgb), 0.06), rgba(0, 0, 0, 0.35));
  aspect-ratio: 1536 / 1024;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.wgf-guide-map__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wgf-guide-map__ph { text-align: center; color: var(--wgf-muted); padding: 1.5rem; }
.wgf-guide-map__ph svg { width: 36px; height: 36px; opacity: 0.5; margin-bottom: 0.5rem; }
.wgf-guide-map__ph b { display: block; color: var(--wgf-text); font-weight: 700; }
.wgf-guide-map figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--wgf-muted); }

@media (max-width: 560px) {
  .wgf-guide-hero__row { gap: 0.9rem; }
  .wgf-guide-crest { width: 56px; height: 56px; }
}

/* Farming Guides hub — guide cards */
.wgf-guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); margin: 1rem 0 0.5rem; }
.wgf-guide-card {
  display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: 1.1rem;
  border: 1px solid var(--wgf-border);
  border-radius: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.20));
  text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease;
}
.wgf-guide-card:hover { border-color: var(--wgf-gold); transform: translateY(-2px); }
.wgf-guide-card__icon {
  width: 64px; height: 64px; flex: none; border-radius: 2px;
  border: 1px solid var(--wgf-border-strong);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); overflow: hidden; background: #0c0a07;
}
.wgf-guide-card__icon img { width: 100%; height: 100%; display: block; }
.wgf-guide-card__title { font-family: var(--font-display, 'Cinzel', serif); color: var(--wgf-gold); font-weight: 700; font-size: 1.08rem; line-height: 1.2; margin: 0; }
.wgf-guide-card__desc { color: var(--wgf-muted); font-size: 0.85rem; line-height: 1.45; margin: 0.35rem 0 0; }
.wgf-guide-card__meta { margin-top: 0.55rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.wgf-guide-card__tag {
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--wgf-muted); border: 1px solid var(--wgf-border);
  border-radius: 0; padding: 0.12rem 0.45rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Realm index (/realm/) — deal directory: compact hero, "find your realm"
   search, region pills, featured row + full scannable directory grid.
   Dark/gold WoW identity; tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Compact hero variant + freshness note */
.wgf-seo-hero--compact { padding: clamp(var(--space-3), 2.4vw, var(--space-4)) clamp(var(--space-3), 3vw, var(--space-5)); margin-bottom: 0.85rem; }
.wgf-seo-hero--compact .wgf-seo-sub { margin-bottom: 0; }
.rd-hero-note {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--wgf-muted); font-size: 0.8rem; margin: 0.5rem 0 0; opacity: 0.85;
}
.rd-hero-note svg { width: 14px; height: 14px; flex: none; opacity: 0.75; }

/* Find your realm — the primary action */
.rd-find-section { margin-bottom: 0.4rem; }
.rd-find { margin: 0; }
.rd-find__label {
  display: block; font-family: var(--font-display, 'Cinzel', serif);
  color: var(--wgf-gold); font-weight: 700; font-size: 1.1rem; margin: 0 0 0.55rem;
}
.rd-find__box { position: relative; display: flex; align-items: center; }
.rd-find__icon {
  position: absolute; left: 14px; width: 18px; height: 18px;
  color: var(--wgf-muted); pointer-events: none;
}
.rd-find__input {
  width: 100%; padding: 0.85rem 1rem 0.85rem 2.7rem;
  font-size: 1rem; color: var(--wgf-text);
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--wgf-border-strong);
  border-radius: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rd-find__input::placeholder { color: var(--wgf-muted); }
.rd-find__input:focus {
  outline: none; border-color: var(--wgf-gold);
  box-shadow: 0 0 0 3px rgba(var(--wgf-gold-rgb), 0.14);
}

/* Region filter buttons — red-button tab language (mirrors .wgf-tab in wgf-chrome.css) */
.rd-region-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.85rem 0 0; }
.rd-region-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 13px;
  border: 0; border-radius: 0; cursor: pointer;
  background:
    url(/assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-dim);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: var(--text-ink-outline);
  filter: brightness(0.66) saturate(0.9);
  transition: filter var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.rd-region-btn:hover { filter: brightness(0.9) saturate(1); color: var(--wgf-gold-bright); }
.rd-region-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rd-region-btn.is-active {
  background:
    url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-bright);
  filter: none;
  transform: translateY(1px);
}

/* Small caption under a section heading */
.rd-section-caption { color: var(--wgf-muted); font-size: 0.88rem; margin: 0.15rem 0 0.7rem; }

/* Shared region pill — de-pilled; plain gold small-caps label per owner container law */
.rd-region-pill {
  flex: none;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--wgf-muted);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

/* Featured realms — larger, warmer cards */
.rd-featured-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
  gap: 12px; margin: 0.3rem 0 0;
}
.rd-feat-card {
  display: flex; flex-direction: column; gap: 0.28rem; padding: 1rem 1.1rem;
  border: 1px solid var(--wgf-border-strong);
  border-radius: 0;
  background: linear-gradient(160deg, rgba(var(--wgf-gold-rgb), 0.07), rgba(0, 0, 0, 0.22));
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.rd-feat-card:hover {
  border-color: var(--wgf-gold); transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
}
.rd-feat-card__name {
  font-family: var(--font-display, 'Cinzel', serif); color: var(--wgf-gold);
  font-weight: 700; font-size: 1.15rem; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-feat-card__sub { color: var(--wgf-muted); font-size: 0.8rem; }
.rd-feat-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; }
.rd-feat-card__cta { font-size: 0.82rem; font-weight: 700; color: var(--wgf-gold-link); }

/* Full directory — compact cards (whole card clickable) */
.rd-dir-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--space-2); margin: 0.3rem 0 0;
}
.rd-dir-card {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--wgf-border);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.rd-dir-card:hover {
  border-color: var(--wgf-gold); background: rgba(var(--wgf-gold-rgb), 0.06);
  transform: translateY(-1px);
}
.rd-dir-card__name {
  min-width: 0;
  font-family: var(--font-display, 'Cinzel', serif); color: var(--wgf-gold);
  font-weight: 700; font-size: 0.95rem; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-no-results { color: var(--wgf-muted); font-size: 0.9rem; padding: 0.85rem 0 0; }

@media (max-width: 560px) {
  .rd-featured-grid { grid-template-columns: 1fr 1fr; }
  .rd-dir-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .rd-featured-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Item price page — realm selector, reworked stat panel, cross-realm compare.
   Dark/gold identity; tokens only. (Shared snapshot/region helpers reused from
   the realm-deals + realm-index blocks above: .rd-snapshot-line, .rd-region-*,
   .rd-section-caption, .rd-region-pill.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Realm selector bar — kit plate (near-black + thin metal border, no pill rounding) */
.wgf-item-realmbar {
  max-width: 1180px;
  margin: 0 auto 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--wgf-metal-soft, rgba(255,255,255,0.18));
  border-radius: 0;
  background: var(--wgf-plate, #1a1611);
}
.wgf-item-realmbar--commodity { display: block; }
.wgf-item-realmbar .wgf-rsel__label {
  color: var(--wgf-muted);
}
.wgf-item-realmbar .wgf-rsel__name {
  color: var(--wgf-gold);
}
.wgf-rsel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.wgf-rsel__label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--wgf-muted); font-weight: 800; flex: 0 0 100%; }
.wgf-rsel__current { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.wgf-rsel__name { font-family: var(--font-display, 'Cinzel', serif); color: var(--wgf-gold); font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.wgf-rsel__src { font-size: 0.78rem; color: var(--wgf-muted); }
.wgf-rsel__commodity-note { color: var(--wgf-muted); font-size: 0.9rem; line-height: 1.55; margin: 0.4rem 0 0; max-width: 60ch; }
.wgf-rsel__box { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 200px; margin-left: auto; }
/* Picker row: the region pills and the realm search sit TOGETHER (the search is the way
   into the realm list, so it lives next to the realm filters, not off on its own). */
.wgf-rsel__picker { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 0.7rem; }
.wgf-rsel__picker .rd-region-filter { margin: 0; }
.wgf-rsel__picker .wgf-rsel__box { margin-left: 0; max-width: 340px; }
/* Prices Across Realms merged INTO the realm bar (2026-07-02): one container. */
.wgf-xrealm--merged { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--wgf-border-neutral-soft); }
.wgf-xrealm--merged .wgf-xrealm__h { margin: 0 0 .6rem; font-size: var(--text-md); }
.wgf-xshowall {
  display: block; width: 100%; margin-top: .5rem; padding: .55rem .8rem;
  background: var(--wgf-panel-2); border: 1px solid var(--wgf-border-neutral);
  border-radius: 0; color: var(--wgf-gold-link);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.wgf-xshowall:hover { border-color: var(--wgf-gold-dim); color: var(--wgf-gold-bright); }
.wgf-xshowall:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-rsel__box > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--wgf-muted); pointer-events: none; }
.wgf-rsel__input { width: 100%; padding: 0.6rem 0.8rem 0.6rem 2.3rem; font-size: 0.92rem; color: var(--wgf-text); background: rgba(0,0,0,0.3); border: 1px solid var(--wgf-border-strong); border-radius: 0; }
.wgf-rsel__input::placeholder { color: var(--wgf-muted); }
.wgf-rsel__input:focus { outline: none; border-color: var(--wgf-gold); box-shadow: 0 0 0 3px rgba(var(--wgf-gold-rgb), 0.14); }
.wgf-rsel__list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 280px; overflow-y: auto; background: #1c1813; border: 1px solid var(--wgf-border-strong); border-radius: 0; box-shadow: 0 12px 34px rgba(0,0,0,0.5); padding: var(--space-1); }
.wgf-rsel__opt { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.5rem 0.7rem; background: transparent; border: 0; border-radius: 0; color: var(--wgf-text); font-size: 0.9rem; cursor: pointer; text-align: left; }
.wgf-rsel__opt:hover { background: rgba(var(--wgf-gold-rgb), 0.12); }
.wgf-rsel__optprice { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.82rem; color: var(--wgf-gold-link); }

/* Reworked stat panel — primary + secondary grids of stat cards */
.wgf-item-statgrid { display: grid; gap: 0.6rem; }
.wgf-item-statgrid--primary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wgf-item-statgrid--secondary { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 0.6rem; }
.wgf-istat { padding: 0.7rem 0.9rem; background: var(--wgf-plate, #1a1611); border: 1px solid var(--wgf-metal-soft, rgba(255,255,255,0.18)); border-radius: 0; }
.wgf-istat > span { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wgf-muted); margin-bottom: 0.28rem; }
.wgf-istat > strong { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 1.05rem; color: var(--wgf-text); font-weight: 700; }
.wgf-istat .wgf-seo-price-val { font-size: 1.15rem; }
.wgf-istat--diff > strong { font-family: var(--font-display, 'Cinzel', serif); }
.wgf-istat--diff > small { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--wgf-muted); }
.wgf-istat--diff.is-deal { border-color: rgba(120,200,120,0.4); }
.wgf-istat--diff.is-deal > strong { color: var(--wgf-up, #79c879); }
.wgf-istat--diff.is-high { border-color: rgba(210,120,110,0.4); }
.wgf-istat--diff.is-high > strong { color: var(--wgf-down, #d8786e); }

/* Cross-realm comparison */
.wgf-xrealm__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-2); margin: 0.3rem 0 1rem; }
.wgf-xsum-card { display: flex; flex-direction: column; gap: 0.18rem; text-align: left; padding: 0.7rem 0.9rem; cursor: pointer; border: 1px solid var(--wgf-metal-soft, rgba(255,255,255,0.18)); border-radius: 0; background: var(--wgf-plate, #1a1611); transition: border-color 0.15s ease, transform 0.15s ease; }
.wgf-xsum-card:hover { border-color: var(--wgf-gold); transform: translateY(-2px); }
.wgf-xsum-card__label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wgf-muted); font-weight: 800; }
.wgf-xsum-card__realm { font-family: var(--font-display, 'Cinzel', serif); color: var(--wgf-gold); font-weight: 700; font-size: 1.05rem; }
.wgf-xsum-card__val { font-size: 0.82rem; color: var(--wgf-gold-link); }

/* Cross-realm filter buttons — red-button tab language (mirrors .wgf-tab in wgf-chrome.css) */
.wgf-xrealm__filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.wgf-xfilter {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 13px;
  border: 0; border-radius: 0; cursor: pointer;
  background:
    url(/assets/ui/128-redbutton-left-cap.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-dim);
  font-family: var(--font-game);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: var(--text-ink-outline);
  filter: brightness(0.66) saturate(0.9);
  transition: filter var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.wgf-xfilter:hover { filter: brightness(0.9) saturate(1); color: var(--wgf-gold-bright); }
.wgf-xfilter:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wgf-xfilter.is-active {
  background:
    url(/assets/ui/128-redbutton-left-cap-pressed.png) left center / auto 100% no-repeat border-box,
    url(/assets/ui/128-redbutton-right-cap-pressed.png) right center / auto 100% no-repeat border-box,
    url(/assets/ui/_128-redbutton-center-pressed.png) left center / auto 100% repeat-x content-box;
  background-color: transparent;
  color: var(--wgf-gold-bright);
  filter: none;
  transform: translateY(1px);
}
.wgf-xrealm__loading, .wgf-xrealm__empty { color: var(--wgf-muted); font-size: 0.9rem; padding: 0.8rem 0; }

.wgf-xrealm-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.wgf-xrealm-table th { padding: 0.55rem 0.7rem; text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wgf-muted); border-bottom: 1px solid var(--wgf-border-neutral, rgba(255,255,255,0.1)); }
.wgf-xrealm-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--wgf-border-neutral-soft, rgba(255,255,255,0.06)); }
.wgf-xrealm-table tbody tr:hover td { background: rgba(var(--wgf-gold-rgb), 0.05); }
.wgf-xrealm-table tr.is-selected td { background: rgba(var(--wgf-gold-rgb), 0.1); }
.wgf-xname { font-family: var(--font-display, 'Cinzel', serif); color: var(--wgf-gold); font-weight: 700; }
.wgf-xprice { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-weight: 700; color: var(--wgf-gold-bright); }
.wgf-xprice .wgf-price { font-size: inherit; color: inherit; }
.wgf-xsum-card__val .wgf-price { font-size: inherit; }
.wgf-xsnap { color: var(--wgf-muted); font-size: 0.8rem; }
.wgf-xdiff { font-weight: 700; font-size: 0.84rem; }
.wgf-xdiff.is-deal { color: var(--wgf-up, #79c879); }
.wgf-xdiff.is-high { color: var(--wgf-down, #d8786e); }
.wgf-xselect { padding: 0.28rem 0.7rem; border-radius: 0; font-size: 0.76rem; font-weight: 700; cursor: pointer; color: var(--wgf-gold); background: transparent; border: 1px solid var(--wgf-border); white-space: nowrap; }
.wgf-xselect:hover { border-color: var(--wgf-gold); background: rgba(var(--wgf-gold-rgb), 0.08); }
.wgf-xsel-tag { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wgf-gold-bright); }

/* Mobile: cross-realm table becomes cards; selector + grids stack */
@media (max-width: 700px) {
  .wgf-xrealm-table, .wgf-xrealm-table tbody { display: block; }
  .wgf-xrealm-table thead { display: none; }
  .wgf-xrealm-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; padding: 0.8rem 0.9rem; margin-bottom: var(--space-2); border: 1px solid var(--wgf-border); border-radius: 0; background: rgba(0,0,0,0.2); }
  .wgf-xrealm-table tbody tr:hover td, .wgf-xrealm-table tr.is-selected td { background: transparent; }
  .wgf-xrealm-table tr.is-selected { border-color: var(--wgf-gold); }
  .wgf-xrealm-table td { display: block; border: 0; padding: 0; }
  .wgf-xrealm-table .wgf-xname { flex: 1 1 100%; font-size: 1rem; }
  .wgf-xrealm-table td[data-th="Region"] { order: 2; }
  .wgf-xrealm-table .wgf-xact { order: 3; flex: 1 0 calc(50% - 0.7rem); display: flex; justify-content: flex-end; align-items: center; }
  .wgf-xrealm-table td[data-th="Current"],
  .wgf-xrealm-table td[data-th="vs typical"],
  .wgf-xrealm-table td[data-th="Qty"],
  .wgf-xrealm-table td[data-th="Snapshot"] { order: 4; flex: 1 1 calc(50% - 0.7rem); display: flex; flex-direction: column; gap: 1px; }
  .wgf-xrealm-table td[data-th="Current"]::before,
  .wgf-xrealm-table td[data-th="vs typical"]::before,
  .wgf-xrealm-table td[data-th="Qty"]::before,
  .wgf-xrealm-table td[data-th="Snapshot"]::before { content: attr(data-th); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wgf-muted); opacity: 0.85; }
  .wgf-rsel__box { margin-left: 0; flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Guides hub (/farming/) — Start Here cards, category directory grid, CTAs.
   Reuses .wgf-guide-card(s) + .rd-find* + .rd-section-caption from above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Guide card CTA + pill variants (cards already styled above) */
.wgf-guide-card { position: relative; }
.wgf-guide-card__cta { display: inline-block; margin-top: 0.55rem; font-size: 0.82rem; font-weight: 700; color: var(--wgf-gold-link); }
.wgf-guide-card:hover .wgf-guide-card__cta { color: var(--wgf-gold-bright); }
.wgf-guide-card__tag--cat { color: var(--wgf-gold); border-color: var(--wgf-border-strong); }
.wgf-guide-card__tag--price {
  color: var(--wgf-on-gold); background: var(--wgf-gold-primary);
  border-color: var(--wgf-gold-primary); font-weight: 800;
}

/* Browse-by-category directory grid */
.wgf-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-2); margin: 0.4rem 0 0;
}
.wgf-cat-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.85rem 1rem; min-height: 52px;
  border: 1px solid var(--wgf-border);
  border-radius: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.18));
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.wgf-cat-tile__name {
  font-family: var(--font-display, 'Cinzel', serif); color: var(--wgf-gold);
  font-weight: 700; font-size: 0.95rem; line-height: 1.15;
}
.wgf-cat-tile__arrow { color: var(--wgf-gold-link); font-weight: 700; opacity: 0.8; transition: transform 0.15s ease; }
a.wgf-cat-tile:hover { border-color: var(--wgf-gold); background: rgba(var(--wgf-gold-rgb), 0.06); transform: translateY(-1px); }
a.wgf-cat-tile:hover .wgf-cat-tile__arrow { transform: translateX(2px); }

/* Muted future categories — intentional, not broken; no link/arrow behaviour */
.wgf-cat-tile--muted {
  opacity: 0.45; cursor: default;
  background: rgba(255, 255, 255, 0.015);
  border-style: dashed;
}
.wgf-cat-tile--muted .wgf-cat-tile__name { color: var(--wgf-muted); }

/* Creature-family icon inside a tile — left of the text block */
.wgf-cat-tile__icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 2px;
  object-fit: cover;
  background: #080706;
}
/* Wraps name + sub so they stack vertically inside the flex row */
.wgf-cat-tile__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

/* Creature-family detail page — icon beside the spec chip */
.wgf-cf-icon-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.wgf-cf-detail-icon { width: 56px; height: 56px; border-radius: 2px; object-fit: cover; background: #080706; flex: 0 0 auto; }

/* Example-creatures tag list */
.wgf-cf-examples { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.wgf-cf-example {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 0;
  border: 1px solid var(--wgf-border);
  font-size: 0.85rem;
  color: var(--wgf-text);
  background: rgba(255,255,255,0.03);
}

.wgf-guidehub-note { margin-top: 1.5rem; opacity: 0.6; }

@media (max-width: 560px) {
  .wgf-cat-grid { grid-template-columns: 1fr 1fr; }
  .wgf-cat-tile__icon { width: 28px; height: 28px; }
}

/* ── Item Details (datamined facts panel) + Data Changes (build-diff log) ──────── */
.wgf-ifacts__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}
.wgf-ifacts__row {
  padding: 0.6rem 0.8rem;
  background: var(--wgf-plate, #1a1611);
  border: 1px solid var(--wgf-metal-soft, rgba(255,255,255,0.18));
  border-radius: 0;
}
.wgf-ifacts__row dt {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wgf-muted);
  margin-bottom: 0.25rem;
}
.wgf-ifacts__row dd {
  margin: 0;
  font-weight: 700;
  color: var(--wgf-text);
}
.wgf-ifacts__note,
.wgf-ichg__intro {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--wgf-muted);
}

.wgf-ichg__list { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.wgf-ichg__list li { margin-bottom: 0.4rem; line-height: 1.5; }
.wgf-ichg__old { color: var(--wgf-down, #d98c8c); text-decoration: line-through; }
.wgf-ichg__new { color: var(--wgf-up, #8cd9a0); font-weight: 700; }
.wgf-ichg__build { color: var(--wgf-muted); font-size: 0.85em; }
/* Coin-kit prices in the change log keep the old/new red/green on their numbers (the
   .wgf-price wrapper otherwise forces its own colour); the coin glyphs stay gold/silver/
   copper since their art is a background-image, independent of `color`. */
.wgf-ichg__old .wgf-price { color: inherit; }
.wgf-ichg__new .wgf-price { color: inherit; }

.wgf-ieff__list { margin: 0.4rem 0 0; padding: 0; list-style: none; }
.wgf-ieff__list li { margin-bottom: 0.4rem; line-height: 1.5; }
.wgf-ieff__trigger { color: var(--wgf-up, #8cd9a0); font-weight: 700; margin-right: 0.35rem; }
.wgf-ieff__spell { color: var(--wgf-text); }
.wgf-ieff__dur { color: var(--wgf-muted); font-size: 0.92em; }
.wgf-ieff__desc { margin: 0.2rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--wgf-muted); white-space: pre-line; }
.wgf-ieff__note { margin-top: 0.8rem; font-size: 0.85rem; color: var(--wgf-muted); }

.wgf-idrop__list { margin: 0.4rem 0 0; padding: 0; list-style: none; }
.wgf-idrop__list li { margin-bottom: 0.4rem; line-height: 1.5; }
.wgf-idrop__boss { color: var(--wgf-text); font-weight: 700; }
.wgf-idrop__sep { color: var(--wgf-muted); margin: 0 0.35rem; }
.wgf-idrop__instance { color: var(--wgf-gold-link, #f5c451); }
.wgf-idrop__note { margin-top: 0.8rem; font-size: 0.85rem; color: var(--wgf-muted); }

.wgf-iquest__list { margin: 0.4rem 0 0; padding: 0; list-style: none; }
.wgf-iquest__list li { margin-bottom: 0.4rem; line-height: 1.5; }
.wgf-iquest__rel { color: var(--wgf-gold-link, #f5c451); font-weight: 700; margin-right: 0.35rem; }
.wgf-iquest__name { color: var(--wgf-text); }
.wgf-iquest__note { margin-top: 0.8rem; font-size: 0.85rem; color: var(--wgf-muted); }

.wgf-irec__group { margin-top: 0.6rem; }
.wgf-irec__label { margin: 0 0 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wgf-up, #8cd9a0); }
.wgf-irec__list { margin: 0; padding-left: 1.1rem; }
.wgf-irec__list li { margin-bottom: 0.3rem; line-height: 1.5; }
.wgf-irec__spell { color: var(--wgf-text); }
.wgf-irec__note { margin-top: 0.8rem; font-size: 0.85rem; color: var(--wgf-muted); }

/* ── Two-column layout: main content + item-details sidebar ──────────────────── */
.wgf-seo-layout { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.wgf-seo-aside { min-width: 0; }
@media (min-width: 980px) {
  .wgf-seo-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .wgf-seo-aside { position: sticky; top: 1rem; }
  /* Pages with no sidebar (talent tree + talents hub) must NOT reserve the empty 300px column,
     or the content sits left-of-center with dead space on the right. Force a single column. */
  .wgf-seo-layout--full { grid-template-columns: minmax(0, 1fr); }
}

/* ── Quick Facts panel ───────────────────────────────────────────────────────── */
/* Item Details "stat sheet" (redesign 2026-07-02): the dense label/value table read
   flat and plain, so it now wears a light in-game readout skin — a single gold heading
   accent (gold stays reserved for emphasis, per the site doctrine), mono stat labels
   matching the rest of the site (.wtr-stat / phc legend), and faint zebra rows so the
   facts scan like a game info panel instead of an undifferentiated list. Structure and
   data are unchanged. */
.wgf-qfacts__h {
  font-size: 1.1rem;
  display: flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.5rem; margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--wgf-border-neutral, #2c2619);
}
.wgf-qfacts__h::before {
  content: ""; flex: 0 0 auto;
  width: 3px; height: 0.95em; border-radius: 1px;
  background: var(--wgf-gold-primary);
}
/* Dense fact table (redesign P3, 2026-07-01): label left / value right on hairline
   rows — replaces the old one-boxed-card-per-fact stack that gave "Icon file ID" the
   same visual weight as the price-relevant facts. */
.wgf-qfacts__grid { margin: 0; display: grid; grid-template-columns: 1fr; }
.wgf-qfacts__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--wgf-border-neutral-soft, #241f17);
}
/* Faint zebra so consecutive facts don't blur together (in-game readout feel). */
.wgf-qfacts__grid .wgf-qfacts__row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.018);
}
.wgf-qfacts__grid .wgf-qfacts__row:last-child { border-bottom: 0; }
.wgf-qfacts__row dt {
  font-family: var(--font-mono);
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--wgf-muted); flex: 0 0 auto;
}
.wgf-qfacts__row dd {
  margin: 0; font-weight: 600; color: var(--wgf-text);
  font-size: 0.9rem; text-align: right; min-width: 0; overflow-wrap: anywhere;
}
/* vendor sell renders through the canonical coin kit — keep the coin glyphs inline */
.wgf-qfacts__coins { display: inline-flex; align-items: center; gap: 0.15rem; }
/* Technical details — dev-facing trivia (icon file ID, source build), collapsed by
   default (<details>) so it never competes with the user-relevant facts. */
.wgf-qfacts__tech { margin-top: var(--space-3); }
.wgf-qfacts__tech-h {
  margin: 0 0 0.2rem; font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--wgf-muted); font-weight: 700;
  cursor: pointer;
}
.wgf-qfacts__tech-h::marker { color: var(--wgf-muted); }
.wgf-qfacts__tech .wgf-qfacts__row dd { font-weight: 500; font-size: 0.82rem; color: var(--wgf-muted); }
.wgf-qfacts__note { margin-top: 0.8rem; font-size: 0.82rem; color: var(--wgf-muted); }

/* ── "Featured in Guides" (guide_mentions.py — the wiki backweb on item pages) ── */
.wgf-guide-mentions { list-style: none; margin: 0; padding: 0; }
.wgf-guide-mentions li { padding: var(--space-2) 2px; border-bottom: 1px solid var(--wgf-border-neutral); }
.wgf-guide-mentions li:last-child { border-bottom: 0; }
.wgf-guide-mentions a { font-weight: 600; }
.wgf-guide-mentions .wgf-muted-note { color: var(--wgf-muted); font-size: .85rem; margin-left: .5rem; }