/* =====================================================================
   cover.v1.css — "The Cover" dark magazine skin for Cast's Garage.
   Shared override layer. Link LAST in <head> (after wired.v3.css) so it
   wins the cascade over the wired white skin, the desk blocks, and the
   inline <style> bg-base on every page. Remove this one <link> from a
   page to revert it to the wired look.
   Palette: near-black paper, Forza-orange accent, pop-out dark cards.
   Fonts: Anton (section heads + masthead) added here; Fraunces / Inter /
   Oswald already loaded site-wide.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root{
  /* dark magazine tokens */
  --cv-bg:#0c0d10; --cv-bg2:#111318; --cv-panel:#171a21; --cv-panel2:#1e222b;
  --cv-line:#2a2e38; --cv-line2:#3a404c;
  --cv-text:#e7e4dd; --cv-head:#ffffff; --cv-muted:#9aa0ab;
  --cv-accent:#ff6a1a; --cv-accent2:#ffb100;
  /* re-point the wired tokens so wired's own var()-based rules go dark/orange */
  --wr-paper:#0c0d10; --wr-paper2:#111318; --wr-line:#2a2e38;
  --wr-body:#c9ccd3; --wr-muted:#9aa0ab;
  --wr-accent:#ff6a1a; --wr-accent2:#ff8a1a; --wr-red:#ff6a1a;
}

/* ---------- Base ---------- */
/* `html body` (0,0,2) beats each page's inline `#bg-base` body{background:#fff!important} (0,0,1) */
html,body,html body,body.home,body.wr-home,body.deskpage,body.items-page{background:var(--cv-bg) !important;}
body{color:var(--cv-text) !important;}
body::before,body::after{display:none !important;}
::selection{background:var(--cv-accent);color:#0c0d10;}
main a{color:inherit;}
/* body copy across articles/guides reads light on the dark paper */
main p,main li,main dd,main dt,main blockquote,
.j-article p,.j-article li,.j-body p,.feature-body p,.rev-body p,
.sg-wrap p,.sg-list li,.hub-lead p,.about-list li{color:var(--cv-text) !important;}
main h1,main h2,main h3,main h4,main h5{color:var(--cv-head) !important;}

/* faint decorative decals so they don't glare on dark */
.hero-decals,.fx-decals,.hero-decals *,.d-wrench,.d-tire,.d-gear{
  opacity:.05 !important;filter:grayscale(1) brightness(2.4) !important;}

/* ---------- Announcement strip + topbar ---------- */
.wr-topbar,.dk-strip,.dk-strip.site{
  background:var(--cv-bg2) !important;color:var(--cv-muted) !important;
  border-bottom:1px solid var(--cv-line) !important;}
.wr-topbar b,.dk-strip b{color:var(--cv-accent2) !important;}

/* ---------- Masthead / header ---------- */
body header,header.wr-mast{
  background:var(--cv-bg) !important;
  border-top:0 !important;
  border-bottom:2px solid var(--cv-accent) !important;
  box-shadow:0 6px 22px rgba(0,0,0,.55) !important;}
.wr-logo .name,header .brandmark,header .brand-name{
  color:var(--cv-head) !important;font-family:'Anton','Fraunces',sans-serif !important;
  letter-spacing:.02em !important;text-transform:uppercase !important;}
.wr-navlinks a,.wr-navlink,header nav.links a,header .drop-toggle{
  color:var(--cv-text) !important;font-weight:600 !important;}
.wr-navlinks a:hover,.wr-navlink:hover,header nav.links a:hover,
header .dropdown:hover .drop-toggle,header .drop-toggle.active{color:var(--cv-accent) !important;}
.wr-actions a,.wr-icon,header .theme-toggle{color:var(--cv-text) !important;stroke:currentColor;}
header .theme-toggle{border-color:var(--cv-line) !important;}
header .nav-search input,.wr-actions input{
  background:var(--cv-bg2) !important;color:var(--cv-text) !important;border-color:var(--cv-line) !important;}

/* ---------- Rubrics / kickers / pills / tags -> orange ---------- */
.eyebrow,.dk-kicker,.ls-kicker,.rubric,.k.kicker,.dk-story .k,.dk-secnote .k,
.mag-seclabel .k,.sec-label,.rub{
  color:var(--cv-accent) !important;background:none !important;border:0 !important;padding:0 !important;
  text-transform:uppercase !important;letter-spacing:.14em !important;font-weight:800 !important;}
.mag-pill,.nlw-pill,.j-tag,.rc-tag,.bl-tag,.art-tag,.rv-chip,.fh-chip{
  background:transparent !important;border:1px solid var(--cv-accent) !important;
  color:var(--cv-accent) !important;border-radius:999px !important;}
.rubric.red,.rubric.green{color:var(--cv-accent) !important;}

/* ---------- Section headings -> Anton, orange rules ---------- */
.sec-head h2,.mag-seclabel,.nlw-seclabel,.dk-seclabel h2,.mag-sechead .mag-seclabel,
.hub-lead .sec-label,.wr-cardsec h2,.hws-list h2,.wn-sec h2,.sh-cardsec h2{
  font-family:'Anton','Fraunces',serif !important;font-weight:400 !important;
  text-transform:uppercase !important;letter-spacing:.015em !important;color:var(--cv-head) !important;}
.mag-more,.sec-head .more,.mag-read,.nlw-sub,.dk-seclabel a,.mag-sechead .mag-more{
  color:var(--cv-accent2) !important;text-transform:uppercase;letter-spacing:.1em;font-weight:700;}
.nlw-sub{background:var(--cv-panel) !important;border:1px solid var(--cv-line) !important;}
.nlw-sub:hover{background:var(--cv-accent) !important;color:#0c0d10 !important;}
.mag-rule,.nlw-rule,.sec-head .ln,hr{border-color:var(--cv-line) !important;background:var(--cv-line) !important;}
.dk-seclabel{border-bottom:2px solid var(--cv-accent) !important;}

/* =====================================================================
   POP-OUT CARDS — dark panels that lift on hover, site-wide
   ===================================================================== */
.card,.wr-card,.mag-card,.nlw-card,.rev-card,.hws-card,.pg-card,.mcard,
.tile,.brandtile,.hub-card,.dk-secnote,.feat-banner,.sg-callout,.hero-figure,
.vg-modal-card,.feature-frame,.gtile,.hero-request{
  background:var(--cv-panel) !important;
  border:1px solid var(--cv-line) !important;
  border-radius:14px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 26px rgba(0,0,0,.45) !important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease !important;
  color:var(--cv-text) !important;}
.card:hover,.wr-card:hover,.mag-card:hover,.nlw-card:hover,
.rev-card:hover,.hws-card:hover,.pg-card:hover,.mcard:hover,.tile:hover,
.brandtile:hover,.hub-card:hover,.feat-banner:hover,.hero-figure:hover,.gtile:hover{
  transform:translateY(-5px) !important;
  border-color:var(--cv-accent) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,106,26,.35) !important;}
/* card titles / copy / meta */
.mag-title,.mag-title a,.nlw-title,.nlw-title a,.sg-card h3,.rev-card h3,.hws-card h3,
.card h3,.wr-card h3,.pg-card h3,.hub-card h3,.tile h3,.mcard h3,.feat-banner .fb-title{
  color:var(--cv-head) !important;}
.mag-title a:hover,.nlw-title a:hover{color:var(--cv-accent) !important;}
.mag-desc,.nlw-desc,.sg-card p,.rev-card p,.hws-card p,.card p,.hub-card p,.mcard p,
.feat-banner .fb-meta{color:var(--cv-muted) !important;}
.mag-date,.nlw-date,.date,.rev-dateline{color:var(--cv-muted) !important;}
.mag-foot,.nlw-foot{border-top-color:var(--cv-line) !important;}
/* card imagery -> boxed dark */
.mag-thumb,.nlw-avatar,.thumb,.no-thumb,.pg-card figure,.card .th,.mcard .th,.hero-figure{
  background:#000 !important;border-color:var(--cv-line) !important;}
.mag-thumb img,.nlw-avatar img,.card img,.tile img,.pg-card img,.mcard img,
.thumb img,.hero-figure img{border-radius:8px !important;}

/* ---------- Buttons ---------- */
.btn,.btn-primary,.btn-accent,.btn-p,.dk-btn,.btn-o,.btn-b,.btn-ink,.btn-whatnot,
.rc-cta,.coverfeature .cta,.sg-callout a.btn{
  border-radius:7px !important;font-family:'Inter',sans-serif !important;box-shadow:none !important;}
.btn-primary,.btn-accent,.btn-p,.dk-btn.accent,.btn-whatnot{
  background:var(--cv-accent) !important;color:#0c0d10 !important;
  border:1px solid var(--cv-accent) !important;font-weight:700 !important;}
.btn-primary:hover,.btn-accent:hover,.dk-btn.accent:hover,.btn-whatnot:hover{
  background:var(--cv-accent2) !important;border-color:var(--cv-accent2) !important;
  color:#0c0d10 !important;transform:translateY(-1px) !important;}
.btn-ghost,.dk-btn.ghost,.btn-b{
  background:transparent !important;color:var(--cv-text) !important;
  border:1px solid var(--cv-line2) !important;}
.btn-ghost:hover,.dk-btn.ghost:hover,.btn-b:hover{
  background:var(--cv-accent) !important;color:#0c0d10 !important;border-color:var(--cv-accent) !important;}
.dk-btn.news,.btn-ink{background:var(--cv-panel) !important;color:var(--cv-text) !important;border:1px solid var(--cv-line2) !important;}

/* ---------- Chips / brand tags / filters ---------- */
.dk-tags a,.wr-brands .tags a,.tags a,.chip,.stk-btn,.gc-series,.fh-chip{
  background:var(--cv-panel) !important;border:1px solid var(--cv-line) !important;
  color:var(--cv-text) !important;border-radius:8px !important;
  font-family:'Oswald','Inter',sans-serif !important;}
.dk-tags a:hover,.wr-brands .tags a:hover,.tags a:hover,.chip:hover,.stk-btn:hover{
  background:var(--cv-accent) !important;color:#0c0d10 !important;border-color:var(--cv-accent) !important;}
.stk-btn.active,.chip.active,.j-chip.active{background:var(--cv-accent) !important;color:#0c0d10 !important;border-color:var(--cv-accent) !important;}

/* ---------- Numbered "case" / river lists ---------- */
.wr-river .row,.dk-story{border-color:var(--cv-line) !important;color:var(--cv-text) !important;}
.wr-river .row:hover,.dk-story:hover{background:var(--cv-panel) !important;border-radius:10px !important;}
.wr-river .no,.dk-story .no,.crow .no{color:var(--cv-muted) !important;}
.wr-river h3,.dk-story h3{color:var(--cv-head) !important;}
.wr-river p,.dk-story p{color:var(--cv-muted) !important;}
.wr-river .thumb,.dk-story .thumb{background:#000 !important;border:1px solid var(--cv-line) !important;}

/* ---------- Home lead / hero (index) ---------- */
.wr-lead,.dk-lead,.dk-sec,.dk-rail{background:var(--cv-bg) !important;border-color:var(--cv-line) !important;}
.wr-hero .hero-copy h1,.wr-hero .hero-copy h1 a,.dk-lead h1{color:var(--cv-head) !important;}
.wr-hero .dek,.wr-hero .byline,.dk-lead .dek{color:var(--cv-muted) !important;}
.wr-rail .rail-contact{background:var(--cv-panel) !important;border:1px solid var(--cv-line) !important;border-radius:14px !important;}
.wr-rail .rc-head,.wr-rail .railhead{color:var(--cv-head) !important;}
.wr-rail .item{border-color:var(--cv-line) !important;}
.wr-rail .item h3{color:var(--cv-text) !important;}
.wr-rail .item:hover h3{color:var(--cv-accent) !important;}
.wr-rail .rc-links a{color:var(--cv-accent2) !important;}

/* ---------- Subpage hero banners ---------- */
.hero,.hero.page-hero,.nlw-hero,.hub-lead,.t-hero,.shop-hero-wrap{
  background:var(--cv-bg2) !important;background-image:none !important;color:var(--cv-text) !important;}
.hero.page-hero{border-bottom:2px solid var(--cv-accent) !important;}
.hero.page-hero::before,.hero.page-hero::after{display:none !important;}
.page-hero h1,.nlw-hero h1,.hub-lead h1,.hero-copy h1{color:var(--cv-head) !important;}
.page-hero p,.nlw-hero p,.hub-lead p{color:var(--cv-muted) !important;}
.page-hero .breadcrumb,.page-hero .breadcrumb a{color:var(--cv-muted) !important;text-shadow:none !important;}
.ph-art .art-img{opacity:.95;}
.ph-art::after{background:linear-gradient(180deg,rgba(12,13,16,.15),rgba(12,13,16,.85)) !important;}

/* ---------- Newsletter / subscribe bands ---------- */
.dk-subbar,.j-sub,.nlw-subscribe,.wr-news{
  background:linear-gradient(135deg,#17120c,#0c0d10) !important;color:#f0ede6 !important;
  border-top:1px solid var(--cv-line) !important;border-radius:0 !important;}
.dk-subbar h2,.j-sub h2,.nlw-subscribe h2,.wr-news h2{color:#fff !important;}
.dk-subbar p,.j-sub p,.nlw-subscribe p,.wr-news p{color:var(--cv-muted) !important;}
.nlw-subscribe .eyebrow,.wr-news .k{color:var(--cv-accent) !important;}

/* ---------- Forms / inputs ---------- */
input,textarea,select{
  background:var(--cv-bg2) !important;color:var(--cv-text) !important;
  border:1px solid var(--cv-line) !important;border-radius:6px !important;}
input::placeholder,textarea::placeholder{color:var(--cv-muted) !important;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cv-accent) !important;box-shadow:0 0 0 3px rgba(255,106,26,.25) !important;}
button[type=submit],.nlw-subform button,.dk-subbar button,.j-sub button{
  background:var(--cv-accent) !important;color:#0c0d10 !important;border:0 !important;border-radius:6px !important;}
button[type=submit]:hover,.nlw-subform button:hover{background:var(--cv-accent2) !important;}
label,.fld{color:var(--cv-muted) !important;}

/* ---------- Tables (guides / HW reference / values) ---------- */
.sg-table,.vg-table,.hw25-tablewrap table,table{color:var(--cv-text) !important;border-color:var(--cv-line) !important;}
.sg-table th,.vg-table th,.hw25-tablewrap th,table th{
  background:var(--cv-panel2) !important;color:var(--cv-head) !important;border-color:var(--cv-line) !important;}
.sg-table td,.vg-table td,.hw25-tablewrap td,table td{border-color:var(--cv-line) !important;}
.sg-table tr:hover td,.vg-table tr:hover td,table tbody tr:hover td{background:rgba(255,255,255,.05) !important;}
.hw25-tablewrap,.vg-table-wrap,.sg-wrap{border-color:var(--cv-line) !important;}
/* wired sets `main table{background:#fff}` + white even-rows, and the hw25 wrap/zebra
   are light — the white showed through the (transparent) cells, hiding light text.
   Force every table + row transparent, then re-apply a faint dark zebra stripe. */
main table,.sg-table,.hw25,.vg-table{background:transparent !important;}
.hw25-tablewrap{background:var(--cv-panel) !important;}
main table tbody tr,main table tbody tr td,
main table tbody tr:nth-child(even),main table tbody tr:nth-child(even) td,
table.hw25 tbody tr:nth-child(even){background:transparent !important;}
.sg-table tbody tr:nth-child(even) td,
table.hw25 tbody tr:nth-child(even) td,
main table tbody tr:nth-child(even) td{background:rgba(255,255,255,.04) !important;}
/* HW mainline reference tables (hw-2025/2026): cell text + the search controls were
   dark ink / white-bg for a light table -> invisible on dark. Recolor for the skin. */
table.hw25 tbody td{color:var(--cv-text) !important;border-bottom-color:var(--cv-line) !important;}
table.hw25 .c-toy{color:var(--cv-text) !important;}
table.hw25 .c-model{color:var(--cv-head) !important;}
table.hw25 .c-series{color:var(--cv-accent) !important;}
table.hw25 .c-snum{color:var(--cv-muted) !important;}
.hw25-controls input,.hw25-controls select{background:var(--cv-bg) !important;color:var(--cv-text) !important;border-color:var(--cv-line) !important;}

/* ---------- Article bodies (newsletter + guides) ---------- */
.j-article,.j-body,.feature-body,.rev-body,.sg-wrap,.tldr{color:var(--cv-text) !important;}
.j-article h4,.feature-body h4,.rev-body h4,.j-body h4{color:var(--cv-head) !important;}
.j-artfig img,.feature-img img{border-color:var(--cv-line) !important;background:var(--cv-panel) !important;}
.j-protip,.tldr,.sg-warn,.sg-result{background:var(--cv-panel2) !important;border:1px solid var(--cv-line) !important;color:var(--cv-text) !important;}
.j-signoff{color:var(--cv-head) !important;}
.j-article a,.j-body a,.j-more,.readmore,.feature-body a,main a.mag-read{color:var(--cv-accent) !important;}
.j-article ul li::before,.j-body ul li::before,.j-article ul li::marker{background:var(--cv-accent) !important;color:var(--cv-accent) !important;}
.j-back{color:var(--cv-accent) !important;}

/* ---------- Seller Hub setup guides (sg-*) ---------- */
/* the sg-card SECTIONS were meant to be open (inline: transparent, hairline top rule)
   like the guide article pages, but cover.v2's generic card rule boxed them into
   heavy panels. Restore the open editorial section: transparent, dark hairline
   divider, no border/radius/shadow/hover. (sg-callout / sg-warn stay boxed.) */
.sg-card{background:transparent !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;border-top:1px solid var(--cv-line) !important;}
.sg-wrap > .sg-card:first-child{border-top:0 !important;}
.sg-card:hover{transform:none !important;box-shadow:none !important;border-color:var(--cv-line) !important;}
/* cover already darkens the sg-card / sg-callout / sg-warn / sg-result panels and
   the table; these inline components still hard-code dark text, bold labels and
   dark-amber callouts for a light theme -> dark-on-dark. Fix the remaining text so
   the setup pages read correctly on the dark skin. sg-* is unique to these pages,
   so plain class selectors are safe (cover loads last, so specificity ties win). */
.sg-card h2,.sg-warn h2{color:var(--cv-head) !important;}
.sg-steps li,.sg-check li,.sg-warn p{color:var(--cv-text) !important;}
.sg-list b,.sg-check b,.sg-steps b{color:var(--cv-accent) !important;}
.sg-callout h3{color:var(--cv-accent2) !important;}
.sg-callout p,.sg-callout li{color:var(--cv-text) !important;}
/* shipping calculator inputs + result readouts */
.sg-calc label{color:var(--cv-muted) !important;}
.sg-calc input{background:var(--cv-bg) !important;color:var(--cv-text) !important;border:1px solid var(--cv-line) !important;}
.sg-result .rk{color:var(--cv-accent) !important;}
.sg-result .rv,.sg-result .rd,.sg-table .c-box{color:var(--cv-head) !important;}
.sg-result .rn{color:var(--cv-text) !important;}
/* size-chart tables: even-row zebra stripe was light cream (#f3efe6) -> light text
   vanished on it; recolor to a faint dark tint and darken the row dividers. */
.sg-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.03) !important;}
.sg-table tbody td{border-top-color:var(--cv-line) !important;}

/* ---------- Reviews specifics ---------- */
.rev-card .who,.rev-card .av{color:var(--cv-text) !important;}
.rc-verified{color:var(--cv-accent2) !important;}
.rev-pull,.rev-lead{color:var(--cv-head) !important;}

/* ---------- Footer ---------- */
footer,.wr-foot{background:var(--cv-bg2) !important;color:var(--cv-muted) !important;border-top:2px solid var(--cv-accent) !important;}
footer a{color:var(--cv-muted) !important;}
footer a:hover{color:var(--cv-accent) !important;}
footer .brandmark,footer .foot-brand p{color:var(--cv-text) !important;}
footer .foot-col h4{color:var(--cv-text) !important;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;}
footer .foot-bottom{border-top-color:var(--cv-line) !important;color:var(--cv-muted) !important;}

/* ---------- Section dividers ---------- */
.block + .block,.dk-sec,.dk-rail,.mag-sec,.nlw-sec,.wr-riversec{border-top-color:var(--cv-line) !important;}

/* =====================================================================
   REVIEW-PASS FIXES (after full-site screenshot audit)
   ===================================================================== */
/* also flip the GLOBAL red accent token to orange for any stragglers */
:root{--accent:#ff6a1a; --accent2:#ff8a1a;}

/* 1) Hero titles that use .ph-copy were rendering dark-on-dark (gradient/ink
      text-fill). Force the paint color, not just `color`. */
.page-hero h1,.ph-copy h1,.hero-copy h1,.hero .ph-copy h1,.hero h1{
  color:var(--cv-head) !important;
  -webkit-text-fill-color:var(--cv-head) !important;
  background:none !important;background-image:none !important;
  text-shadow:0 2px 20px rgba(0,0,0,.45) !important;}

/* 2) Content-section bands were painting white behind the dark cards.
      Make the content sections transparent so the dark page shows through.
      (Dark bands like .dk-subbar / .nlw-subscribe / .wr-news keep their own bg.) */
body main,.block,.mag-sec,.wr-riversec,.wr-cardsec,.hub-cardsec,.hub-riversec,
.sh-cardsec,.sh-riversec,.wn-sec,.hws-list,.fx-sec,.feature-article,.feature-body,
.sections,.sg-wrap,.hub-rail,.wr-lead{background-color:transparent !important;background-image:none !important;}

/* 3) Reviews: dark-on-dark text used var(--wr-ink). Colour the specific text
      nodes only — do NOT put -webkit-text-fill-color on the containers, that
      blanks their descendant text. */
.rev-rating .num,.rev-nums .n{color:var(--cv-head) !important;}
.rev-rating .st{color:#e6b34f !important;}
.rev-pull .fq,.rev-pull .who,.rev-lead h1,.rev-lead .dek{color:var(--cv-head) !important;}
.rev-pull .fq{color:var(--cv-text) !important;}

/* 4) Seller-hub "What you'll need" callout was a white box */
.sh-need{background:var(--cv-panel) !important;border:1px solid var(--cv-line) !important;border-top:2px solid var(--cv-accent) !important;}
.sh-need li,.sh-need p,.sh-need .sh-check{color:var(--cv-text) !important;}
.sh-need .sh-need-h{color:var(--cv-accent) !important;}

/* 5) Values page owner-gate card was a cream box */
.vg-lock{background:var(--cv-panel) !important;border:1px solid var(--cv-line) !important;color:var(--cv-text) !important;border-radius:14px !important;box-shadow:0 12px 26px rgba(0,0,0,.45) !important;}
.vg-lock h1,.vg-lock h2,.vg-lock h3{color:var(--cv-head) !important;-webkit-text-fill-color:var(--cv-head) !important;}
.vg-lock p{color:var(--cv-muted) !important;}

/* 6) Primary buttons still red via more-specific !important rules */
.hero-actions .btn-primary,.hero-actions a.btn,.t-feature .btn-primary,.feature .btn-primary,
.feature .article-cta .btn-primary,.hero .btn-primary,.article-cta .btn-primary,
.fh-cta .btn-primary,.page-hero .btn-primary,.ph-copy .btn-primary,
.page-hero .fh-cta .btn-primary,.hero .fh-cta .btn-primary{
  background:var(--cv-accent) !important;color:#0c0d10 !important;border:1px solid var(--cv-accent) !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
/* the glassy hero "Whatnot" secondary button -> orange outline ghost */
.page-hero .fh-cta .btn-whatnot,.hero .fh-cta .btn-whatnot,.fh-cta .btn-whatnot{
  background:transparent !important;color:var(--cv-text) !important;border:1px solid var(--cv-line2) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.page-hero .fh-cta .btn-whatnot:hover,.fh-cta .btn-whatnot:hover{background:var(--cv-accent) !important;color:#0c0d10 !important;border-color:var(--cv-accent) !important;}

/* 7) styles.v135 sets `html body.comic-fx{background:#fff!important}` (specificity
      0,1,2). Match that specificity so the page paints dark; otherwise the
      transparent content sections reveal a white page. */
html body.comic-fx,body.comic-fx,.comic-fx{background:var(--cv-bg) !important;background-image:none !important;}

/* =====================================================================
   HOME PAGE HARDENING — the index carries a heavy inline "desk-home" sheet
   with a light palette. Scope everything to body.home so these beat it.
   ===================================================================== */
html body.home,body.home,body.home main{background:var(--cv-bg) !important;background-image:none !important;}
body.home .wr-news,body.home #contact{background:linear-gradient(135deg,#17120c,#0c0d10) !important;}
body.home .mag-card,body.home .wr-hero .hero-figure,body.home .rail-contact,body.home .wr-rail .rc,body.home .dk-secnote{
  background:var(--cv-panel) !important;border:1px solid var(--cv-line) !important;}
body.home .mag-thumb,body.home .wr-river .thumb,body.home .mag-card img{background:#000 !important;border-color:var(--cv-line) !important;}
/* crisp light text across the home */
body.home .wr-hero .hero-copy h1,body.home .wr-hero .hero-copy h1 a,
body.home .mag-title,body.home .mag-title a,body.home .wr-river h3,
body.home .rail-contact .rc-head,body.home .wr-rail .railhead,body.home .wr-rail .item h3,
body.home .wr-news h2,body.home .brandmark{color:#fff !important;-webkit-text-fill-color:#fff !important;}
body.home .wr-hero .dek,body.home .mag-desc,body.home .wr-river p,body.home .wr-news p,
body.home .mag-date,body.home .wr-hero .byline{color:var(--cv-muted) !important;}
body.home .wr-rail .item h3{opacity:1 !important;}
/* section labels -> match the bold Anton headers used on the subpages */
body.home .mag-seclabel,body.home .nlw-seclabel,body.home .wr-brands .lbl{
  font-family:'Anton','Fraunces',serif !important;font-weight:400 !important;
  font-size:1.5rem !important;line-height:1.1 !important;letter-spacing:.01em !important;
  text-transform:uppercase !important;color:#fff !important;-webkit-text-fill-color:#fff !important;}
body.home .wr-brands .lbl{font-size:1.15rem !important;}
body.home .mag-more,body.home .mag-read,body.home .wr-rail .item .rubric,body.home .rubric{color:var(--cv-accent) !important;}

/* =====================================================================
   Inventory grid (diecast-inventory) — car cards, toolbar, lightbox
   ===================================================================== */
.card.clickable,.ls-card,.admin-lock-card{
  background:var(--cv-panel) !important;border:1px solid var(--cv-line) !important;
  border-radius:14px !important;color:var(--cv-text) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 12px 26px rgba(0,0,0,.45) !important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease !important;}
.card.clickable:hover,.ls-card:hover{
  transform:translateY(-5px) !important;border-color:var(--cv-accent) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,106,26,.35) !important;}
.card-head,.card-info,.card-body{background:transparent !important;}
.card-cap,.card-cap-name,.card-info,.card-price{color:var(--cv-head) !important;}
.card-cap-brand{color:var(--cv-muted) !important;}
.card-price{color:var(--cv-accent2) !important;}
.card-foot,.card-go{color:var(--cv-accent2) !important;border-color:var(--cv-line) !important;}
.tile-pill,.tile-pills .tile-pill{background:transparent !important;border:1px solid var(--cv-accent) !important;color:var(--cv-accent) !important;}
/* toolbar (the white sticky panel wrapping the filter row + search) */
.gc-tools,.grid-controls,main .grid-controls,body .grid-controls{background:var(--cv-bg2) !important;border:1px solid var(--cv-line) !important;box-shadow:0 6px 20px rgba(0,0,0,.4) !important;}
.grid-controls .gc-sort option,.gc-sort option,.gc-series option{background:#171a21 !important;color:var(--cv-text) !important;}
.gc-count{color:var(--cv-muted) !important;}
.gc-search input,.gc-searchwrap input,.gc-series,.gc-sort{background:var(--cv-bg2) !important;color:var(--cv-text) !important;border-color:var(--cv-line) !important;}

/* filter chips (.stk-btn) — styles.v135 paints them white via `.gc-filters .stk-btn`
   (0,2,0) and `main .grid-controls .stk-btn.active` (0,3,1). Match/beat those. */
.gc-filters .stk-btn,main .grid-controls .stk-btn{
  background:var(--cv-panel) !important;color:var(--cv-text) !important;
  border:1px solid var(--cv-line) !important;box-shadow:none !important;}
.gc-filters .stk-btn:hover,main .grid-controls .stk-btn:hover{
  background:var(--cv-accent) !important;color:#0c0d10 !important;border-color:var(--cv-accent) !important;}
.gc-filters .stk-btn.active,main .grid-controls .stk-btn.active,main .grid-controls .stk-btn.active:hover{
  background:var(--cv-accent) !important;color:#0c0d10 !important;border-color:var(--cv-accent) !important;box-shadow:none !important;}
.stk-btn[data-mode="sthunt"].active{background:#e0a41d !important;color:#0c0d10 !important;border-color:#e0a41d !important;}

/* The WIRED skin whitens the inventory toolbar with `body.deskpage .grid-controls`
   (0,2,1) and `body.deskpage .grid-controls .gc-search` (0,3,0) — higher than any
   plain rule. Match that specificity (cover loads after wired, so ties go to us). */
body.deskpage .grid-controls{
  background:#111318 !important;border:1px solid var(--cv-line) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.4) !important;color:var(--cv-text) !important;}
body.deskpage .grid-controls .gc-filters{border-bottom:1px solid var(--cv-line) !important;}
body.deskpage .grid-controls .gc-search,
body.deskpage .grid-controls .gc-series,
body.deskpage .grid-controls .gc-sort{
  background:#0c0d10 !important;color:var(--cv-text) !important;border:1px solid var(--cv-line) !important;}
body.deskpage .grid-controls .gc-search::placeholder{color:var(--cv-muted) !important;}
body.deskpage .grid-controls .gc-searchwrap svg{color:var(--cv-accent) !important;}
body.deskpage .grid-controls .gc-count{color:var(--cv-muted) !important;}
body.deskpage .stk-btn{
  background:var(--cv-panel) !important;color:var(--cv-text) !important;
  border:1px solid var(--cv-line) !important;box-shadow:none !important;}
body.deskpage .stk-btn:hover{background:var(--cv-accent) !important;color:#0c0d10 !important;border-color:var(--cv-accent) !important;}
body.deskpage .stk-btn.active{background:var(--cv-accent) !important;color:#0c0d10 !important;border-color:var(--cv-accent) !important;}
body.deskpage .stk-btn[data-mode="sthunt"].active{background:#e0a41d !important;color:#0c0d10 !important;border-color:#e0a41d !important;}

/* Hobby Hub guide/list pages opted into body.deskpage (2026-08-27) so they get the
   clean editorial hero + serif hairline headings like the inventory page. The WIRED
   deskpage rule `body.deskpage .feature-body.article h2` (0,3,2) sets color:--wr-ink
   (near-black) — invisible on this dark skin, and higher specificity than `main h2`.
   Match that specificity here (cover loads after wired, ties go to us) to whiten the
   guide-article headings and tint their hairline rule to the dark-skin line color. */
body.deskpage .guide-doc h2,
body.deskpage .feature-body.article h2{
  color:var(--cv-head) !important;
  border-bottom-color:var(--cv-line) !important;
}
/* styles.v136 forces `.feature-body.article h3` / `.guide-doc h3` to dark ink
   (0,2,1)!important — invisible on dark. Whiten all guide-article h3s (tier card
   titles, sub-heads) so `main h3` no longer loses the cascade. */
body.deskpage .guide-doc h3,
body.deskpage .feature-body.article h3{color:var(--cv-head) !important;}
body.deskpage .guide-doc .tldr strong,
body.deskpage .feature-body.article .tldr strong{color:var(--cv-accent2) !important;}
/* the "Quick version" callout body was inheriting the dim --wr-body prose color via
   `.feature-body.article p` (0,2,1) -> too low-contrast on the dark tldr panel. Beat
   that specificity so the callout text is as legible as the surrounding prose. */
.feature-body.article .tldr,.feature-body.article .tldr p,
.guide-doc .tldr,.guide-doc .tldr p{color:var(--cv-text) !important;}

/* Namespaced guide components (gl/hwc/kh/m2 + series) are hard-coded #fff in each
   page's inline <style> -> glaring white blocks on the dark skin, with labels the
   `main h4` rule whitens into invisibility. Recolor tier cards, "at a glance" tells,
   box-top field lists, count pills and example callouts to dark panels with accent
   labels + light body, matching the hub cards. The two-class `body.deskpage` prefix
   ties each inline rule's specificity and wins on order (cover loads last). */
body.deskpage .gl-tell,body.deskpage .hwc-tell,body.deskpage .kh-tell,body.deskpage .m2-tell,
body.deskpage .gl-tier,body.deskpage .hwc-tier,body.deskpage .kh-tier,body.deskpage .m2-tier,
body.deskpage .gl-fields,body.deskpage .hwc-fields,body.deskpage .kh-fields,body.deskpage .m2-fields,
body.deskpage .hws-card{
  background:var(--cv-panel) !important;border:1px solid var(--cv-line) !important;box-shadow:none !important;}
/* card body text -> light; small "tell" labels -> accent */
body.deskpage .gl-tell p,body.deskpage .hwc-tell p,body.deskpage .kh-tell p,body.deskpage .m2-tell p,
body.deskpage .gl-tier p,body.deskpage .hwc-tier p,body.deskpage .kh-tier p,body.deskpage .m2-tier p,
body.deskpage .hws-card p{color:var(--cv-text) !important;}
body.deskpage .gl-tell h4,body.deskpage .hwc-tell h4,
body.deskpage .kh-tell h4,body.deskpage .m2-tell h4{color:var(--cv-accent) !important;}
/* box-top field lists: dividers, key labels (accent), values (light) */
body.deskpage .gl-fields li,body.deskpage .hwc-fields li,body.deskpage .kh-fields li,body.deskpage .m2-fields li{border-top-color:var(--cv-line) !important;}
body.deskpage .gl-fields .k,body.deskpage .hwc-fields .k,body.deskpage .kh-fields .k,body.deskpage .m2-fields .k{color:var(--cv-accent) !important;}
body.deskpage .gl-fields .v,body.deskpage .hwc-fields .v,body.deskpage .kh-fields .v,body.deskpage .m2-fields .v{color:var(--cv-text) !important;}
/* tier count pills were light chips (invisible) -> dark chip, light text */
body.deskpage .gl-tier .gl-count,body.deskpage .hwc-tier .hwc-count,
body.deskpage .kh-tier .kh-count,body.deskpage .m2-tier .m2-count{
  background:var(--cv-panel2) !important;color:var(--cv-text) !important;border:1px solid var(--cv-line) !important;}
/* example callouts keep their accent left-border over a dark panel */
body.deskpage .gl-example,body.deskpage .hwc-example,body.deskpage .kh-example,body.deskpage .m2-example{
  background:var(--cv-panel2) !important;}

/* Series page (hws): the sub-list bold labels were dark red (#a8291f), near-invisible
   on the dark card; the tier badges used light/dark-on-light chips. Brighten both. */
body.deskpage .hws-sub li strong{color:var(--cv-accent) !important;}
body.deskpage .hws-badge.prem{background:rgba(192,57,47,.22) !important;color:#ff8a7a !important;}
body.deskpage .hws-badge.main{background:var(--cv-panel2) !important;color:var(--cv-text) !important;}
body.deskpage .hws-badge.mid{background:rgba(224,164,29,.20) !important;color:#ffcf4d !important;}
body.deskpage .guide-doc .about-list li::marker,
body.deskpage .feature-body.article .about-list li::marker{color:var(--cv-accent) !important;}

/* card caption is an absolute overlay on the photo with opacity:.55 and no scrim
   -> unreadable on light card art. Add a dark gradient scrim + full opacity. */
.card .thumb .card-cap,.card-cap{
  opacity:1 !important;border-top:0 !important;
  background:linear-gradient(to top,rgba(6,7,9,.96) 0%,rgba(6,7,9,.86) 52%,rgba(6,7,9,0) 100%) !important;}
.card-cap-name{color:#fff !important;text-shadow:0 1px 3px rgba(0,0,0,.7) !important;}
.card-cap-brand{color:rgba(255,255,255,.86) !important;text-shadow:0 1px 3px rgba(0,0,0,.7) !important;}

/* status tags on the card thumb — guarantee legible solid pills (high specificity
   so they beat the many conflicting tag rules in styles.v135). */
.card .thumb .th-tag,body.deskpage .th-tag{
  background:#b7842a !important;color:#fff !important;border:1px solid rgba(255,255,255,.4) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.45) !important;}
.card .thumb .chase-tag,body.deskpage .chase-tag{background:#e8c21c !important;color:#2a2205 !important;}
.card .thumb .na-tag,body.deskpage .na-tag{background:#5a6472 !important;color:#fff !important;text-shadow:0 1px 1px rgba(0,0,0,.4) !important;}
.card .thumb .req-tag,body.deskpage .req-tag{color:#fff !important;text-shadow:0 1px 1px rgba(0,0,0,.4) !important;}
.card .thumb .sth-tag,body.deskpage .sth-tag{background:#b7842a !important;color:#fff !important;}

/* lightbox modal */
.lb-inner{background:var(--cv-panel) !important;border:1px solid var(--cv-line) !important;color:var(--cv-text) !important;box-shadow:0 30px 80px rgba(0,0,0,.7) !important;}
.lb-img{background:#000 !important;}
.lb-head,.lb-summary,.lb-desc,.lb-info,.lb-sub{color:var(--cv-text) !important;}
.lb-inner .lb-head h1,.lb-inner .lb-head h2,.lb-inner .lb-head h3,.lb-info .lb-head h3{
  color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;}
.lb-series,.lb-badge,.lb-badges span{color:var(--cv-accent) !important;border-color:var(--cv-accent) !important;}
/* category badge ("Matchbox" etc.) used a per-series colour that came out
   dark-on-dark. Beat `.lb .lb-badges .lb-badge.cat-tag` (0,4,0) with 0,4,1. */
.lb-inner .lb-badges .lb-badge.cat-tag,.lb-info .lb-badges .lb-badge.cat-tag,
.lb-inner .lb-badges .lb-badge{
  background:var(--cv-panel2) !important;color:var(--cv-accent) !important;
  border:1px solid var(--cv-line) !important;-webkit-text-fill-color:var(--cv-accent) !important;text-shadow:none !important;}
/* close + prev/next controls a bit more visible */
.lb-inner .lb-close,.lb-inner .lb-nav,.lb-close,.lb-nav{
  color:#fff !important;background:rgba(20,24,31,.72) !important;border:1px solid var(--cv-line2) !important;}
.lb-inner .lb-close:hover,.lb-inner .lb-nav:hover{color:#0c0d10 !important;background:var(--cv-accent) !important;border-color:var(--cv-accent) !important;}
.lb-spec,.lb-specs{background:var(--cv-panel2) !important;border-color:var(--cv-line) !important;color:var(--cv-text) !important;}
/* spec VALUE (bold) was near-black on the dark tile -> unreadable. Scope to
   .lb-inner so it outranks the styles/wired `.lb-spec b` rules. */
.lb-inner .lb-spec b,.lb-specs .lb-spec b,.lb-info .lb-spec b,.lb-inner .lb-spec strong{
  color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;}
.lb-inner .lb-spec span,.lb-specs .lb-spec span{color:var(--cv-accent) !important;opacity:1 !important;}
.lb-inner .lb-sub,.lb-info .lb-sub{background:var(--cv-panel2) !important;color:var(--cv-text) !important;border:1px solid var(--cv-line) !important;}
.lb-close,.lb-nav{color:var(--cv-text) !important;background:rgba(0,0,0,.4) !important;border:1px solid var(--cv-line) !important;}
.lb-close:hover,.lb-nav:hover{color:var(--cv-accent) !important;border-color:var(--cv-accent) !important;}
.lb-buy,.lb-request,.lb-req-cta{background:var(--cv-accent) !important;color:#0c0d10 !important;border-radius:7px !important;}

/* mobile menu (JS-built) */
.mobile-menu{background:var(--cv-bg) !important;border-bottom:2px solid var(--cv-accent) !important;box-shadow:0 12px 30px rgba(0,0,0,.6) !important;}
.mobile-menu a{color:var(--cv-text) !important;border-color:var(--cv-line) !important;}
.mobile-menu a:hover{color:var(--cv-accent) !important;}
.nav-toggle,.nav-toggle span{color:var(--cv-text) !important;background:currentColor;}
.nav-toggle{background:transparent !important;}
