/* ------------------------------------------------------------------------
   World of Warcraft (Batch 169) — loaded on /wow, /wow/<version>, the WoW
   service pages and WoW checkout. Builds on app.css / store.css / landing.css
   tokens, the same shapes as valorant.css. Prefix: .wow-*  ·  Art: BoostPirate's
   own version marks (static/img/art/wow-<version>-mark.webp), no Blizzard assets.
   Each version carries its accent in --wowc (set inline from wow.VERSIONS).
   ------------------------------------------------------------------------ */
:root { --wow: #e3b341; --wow-rgb: 227,179,65; --wow-ink: #120d08; }

/* ---------------------------------------------------------------- hero */
.lp-hero.g-wow { background:
    radial-gradient(60% 90% at 14% 10%, rgba(var(--wow-rgb),.16), transparent 60%),
    radial-gradient(40% 60% at 88% 85%, rgba(var(--accent-rgb),.14), transparent 60%),
    linear-gradient(180deg, #110d0b, var(--bg)); }
.lp-hero.g-wow .lp-hero-art { background-position: 60% 35%; background-size: cover; opacity: .55; filter: saturate(.95); }
.lp-hero.g-wow .lp-eyebrow { color: var(--wow); }
.lp-hero.g-wow h1 { font-size: 46px; }
.lp-hero.g-wow h1 em { color: var(--wow); }
@media (max-width: 720px) { .lp-hero.g-wow h1 { font-size: 34px; } }

/* ---------------------------------------------------------------- marks
   (.wow-mark / .wow-dot base rules live in app.css — the marks also appear on order pages, job cards,
   the booster application and the admin roster, where this sheet isn't loaded) */
.wow-mark.float { position: absolute; left: 14px; bottom: 14px; }

/* ---------------------------------------------------------------- hub: version doors */
.wow-vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 30px; }
.wow-vgrid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wow-vcard { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--wowc) 28%, var(--border)); color: var(--text); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.wow-vcard:hover { transform: translateY(-3px); text-decoration: none; border-color: color-mix(in srgb, var(--wowc) 65%, transparent);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--wowc) 60%, transparent); }
.wow-vcard .media { position: relative; aspect-ratio: 16 / 7; background-size: cover; background-position: center; }
.wow-vcard.is-compact .media { aspect-ratio: 16 / 5; }
.wow-vcard .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55)); }
.wow-vcard .media .pop { position: absolute; right: 12px; top: 12px; z-index: 1; padding: 5px 9px; border-radius: 8px; font: 800 10.5px/1 var(--font);
  letter-spacing: .1em; text-transform: uppercase; background: var(--wowc); color: #120d08; }
.wow-vcard .media .wow-mark { z-index: 1; }
.wow-vcard .body { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wow-vcard .kick { font: 800 10.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--wowc); }
.wow-vcard h3 { margin: 0; font: 700 19px/1.2 var(--font-display); }
.wow-vcard .desc { margin: 0; color: var(--text-muted); font-size: 13.5px; flex: 1; }
.wow-vcard .foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--text-faint); }
.wow-vcard .foot .price { margin-left: auto; font: 800 16px/1 var(--font-display); color: var(--text); }
.wow-vcard .foot .price small { font: 600 11px/1 var(--font); color: var(--text-faint); margin-right: 4px; }
.wow-vcard .foot .go { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--wowc); color: #120d08; }
@media (max-width: 920px) { .wow-vgrid, .wow-vgrid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wow-vgrid, .wow-vgrid.compact { grid-template-columns: 1fr; } }

/* version sections on the hub */
.wow-vsec { margin-top: 34px; padding-top: 6px; }
.wow-vsec-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-bottom: 14px; }
.wow-vsec-head h3 { margin: 0; font: 700 21px/1.2 var(--font-display); }
.wow-vsec-head h3 a { color: var(--text); }
.wow-vsec-head h3 small { font: 600 12px/1 var(--font); color: var(--wowc); margin-left: 8px; letter-spacing: .04em; text-transform: uppercase; }
.wow-vsec-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 13.5px; }
@media (max-width: 720px) { .wow-vsec-head { grid-template-columns: auto 1fr; } .wow-vsec-head .sk-more { grid-column: 1 / -1; } }
.wow-samples { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wow-samples li a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 11px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted); }
.wow-samples li a b { color: var(--text); font-family: var(--mono); }
.wow-samples li a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--wowc, var(--wow)) 60%, var(--border)); }
.wow-samples li.note { font-size: 11.5px; color: var(--text-faint); }

/* facts strip on a version page */
.wow-facts { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; margin-bottom: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--wowc) 14%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--wowc) 30%, var(--border)); }
.wow-facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
.wow-facts li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text-muted); }
.wow-facts li svg { color: var(--wowc); flex: none; margin-top: 3px; }
@media (max-width: 820px) { .wow-facts ul { grid-template-columns: 1fr; } }

/* modes */
.wow-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wow-mode { position: relative; padding: 22px 22px 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--border); }
.wow-mode .ico { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; margin-bottom: 14px; background: rgba(var(--wow-rgb),.12); color: var(--wow); }
.wow-mode h3 { font: 600 18px/1.2 var(--font-display); margin: 0 0 8px; }
.wow-mode p { margin: 0; color: var(--text-muted); font-size: 14px; }
.wow-mode .tag { position: absolute; right: 16px; top: 16px; font: 800 10.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 8px; background: rgba(var(--wow-rgb),.12); color: var(--wow); }
@media (max-width: 820px) { .wow-modes { grid-template-columns: 1fr; } }

/* requirements table */
.wow-reqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wow-req { padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.wow-req a { color: var(--text); }
.wow-req span { color: var(--text-muted); }
@media (max-width: 720px) { .wow-reqs { grid-template-columns: 1fr; } }

/* launch alert (mirrors .val-notify) */
.wow-notify { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 26px; border-radius: 22px; align-items: center;
  background: linear-gradient(135deg, rgba(var(--wow-rgb),.16), var(--panel)); border: 1px solid rgba(var(--wow-rgb),.35); }
.wow-notify h2 { margin: 6px 0 8px; font: 700 26px/1.15 var(--font-display); }
.wow-notify p { margin: 0; color: var(--text-muted); font-size: 14px; }
.wow-notify .row { display: flex; gap: 8px; }
.wow-notify .row input { flex: 1; }
.wow-notify .fine { margin-top: 8px; font-size: 12px; color: var(--text-faint); }
.wow-notify .ok { display: inline-flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(76,175,125,.12); color: #8fe3b4; font-weight: 600; }
.wow-notify .hp { position: absolute; left: -9999px; }
@media (max-width: 820px) { .wow-notify { grid-template-columns: 1fr; } }

/* sidebar accent dots */
.sk-side a .wow-dot { opacity: .9; }

/* ---------------------------------------------------------------- order builder */
.wow-visual .ck-ring { position: relative; }
.wow-visual .ck-ring b { color: #fff; }
.wow-visual .ck-ring .wow-mark + b { position: absolute; inset: auto; bottom: -6px; right: -6px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 99px;
  display: grid; place-items: center; font: 800 13px/1 var(--mono); background: var(--wowc, var(--wow)); color: #120d08; box-shadow: 0 6px 14px -6px rgba(0,0,0,.7); }
.wow-visual .ck-gain { color: var(--wowc, var(--wow)); }
.wow-pick-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-faint); }
.wow-pick-note a { color: var(--text-muted); }
.wow-opts .form-row + .form-row { margin-top: 10px; }
.wow-dungeons { margin-top: 12px; }
.wow-dungeons .lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.wow-dungeons .lbl small { color: var(--text-faint); font-weight: 500; margin-left: 6px; }
.wow-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wow-chip { padding: 7px 11px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
  font: 600 12.5px/1 var(--font); cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; }
.wow-chip:hover { border-color: color-mix(in srgb, var(--wowc, var(--wow)) 55%, var(--border)); color: var(--text); }
.wow-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--wowc, var(--wow)) 18%, var(--bg)); border-color: var(--wowc, var(--wow)); color: var(--text); }
.wow-req-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--wowc, var(--wow)) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--wowc, var(--wow)) 30%, var(--border)); font-size: 13px; }
.wow-req-line svg { color: var(--wowc, var(--wow)); flex: none; margin-top: 2px; }
.wow-req-line b { display: block; margin-bottom: 2px; }
.wow-req-line span { color: var(--text-muted); }
.wow-version-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 99px; background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--wowc, var(--wow)) 35%, var(--border)); font: 700 12.5px/1 var(--font); color: var(--text); }