/* ============================================================================
   TV Rex theme (concept A). Everything scoped under body.theme-tvrex so it can
   only affect TV Rex. Fun-but-tidy: navy header, teal dino hero band, orange
   accent buttons/badges, clean product grid. Layers on top of prism.css.
   ============================================================================ */
body.theme-tvrex{--ink:#16283a;--navy:#123049;--navy-d:#0d2337;--teal:#1a8f83;--teal-d:#15776d;--cream:#f6f4ee;--line:#e6e4dc;--page-bg:#f6f4ee}
/* subtle texture on the cream: a faint navy dot grid + a whisper of diagonal weave */
body.theme-tvrex{
  background-color:var(--cream);
  background-image:
    radial-gradient(rgba(18,48,73,.045) 1.4px, transparent 1.5px),
    repeating-linear-gradient(135deg, rgba(18,48,73,.015) 0 1px, transparent 1px 11px);
  background-size:22px 22px, auto;
}

/* ---- header ---- */
.theme-tvrex .site-head{background:var(--navy);border-bottom:0}
.theme-tvrex .site-head .wrap{height:74px;gap:20px}
.theme-tvrex .brand{display:flex;align-items:center;gap:12px;color:#fff}
.theme-tvrex .tvr-logo{height:60px;width:auto}
.theme-tvrex .tvr-word{display:flex;flex-direction:column;line-height:1}
.theme-tvrex .tvr-word b{font-size:26px;font-weight:900;letter-spacing:.5px;color:#fff}
.theme-tvrex .tvr-word span{font-size:12px;color:#bcd6e6;font-weight:600;margin-top:3px}
.theme-tvrex .tvr-search{flex:1;max-width:520px;display:flex;background:#fff;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.15)}
.theme-tvrex .tvr-search input{flex:1;min-width:0;border:0;padding:11px 16px;font-size:15px;outline:0;background:transparent;color:var(--ink)}
.theme-tvrex .tvr-search button{border:0;background:var(--accent);color:#fff;font-weight:800;padding:0 20px;cursor:pointer}
.theme-tvrex .tvr-nav{display:flex;gap:22px;align-items:center}
.theme-tvrex .tvr-nav a{color:#eaf2f8;font-weight:700;font-size:15px}
.theme-tvrex .tvr-nav a:hover{color:#fff;text-decoration:none}
.theme-tvrex .tvr-nav a.on{color:#fff;background:var(--teal);padding:6px 14px;border-radius:20px}

/* ---- hero band ---- */
.theme-tvrex .tvr-hero{
  color:#fff;position:relative;overflow:hidden;
  background-color:var(--teal);
  /* prehistoric scene (dinos round a campfire watching a modern TV) + a left scrim so the
     white heading stays readable over the calmer left of the scene */
  background-image:
    linear-gradient(90deg, rgba(9,30,42,.72) 0%, rgba(9,30,42,.44) 34%, rgba(9,30,42,.06) 56%, transparent 72%),
    url('/assets/img/tvrex-hero.webp');
  background-size:auto, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.theme-tvrex .tvr-hero .wrap{min-height:222px}
.theme-tvrex .tvr-hero .dino{display:none}       /* the scene has its own dinos - mascot lives in the header */
.theme-tvrex .tvr-hero-txt{max-width:50%}
.theme-tvrex .tvr-hero-txt h1{text-shadow:0 2px 10px rgba(0,0,0,.4)}
.theme-tvrex .tvr-hero-txt p{text-shadow:0 1px 6px rgba(0,0,0,.45)}
.theme-tvrex .tvr-hero .wrap{display:flex;align-items:center;gap:24px;padding:22px 20px;min-height:270px}
.theme-tvrex .tvr-hero .dino{height:150px;width:auto;flex:0 0 auto;margin-bottom:-22px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2))}
.theme-tvrex .tvr-hero-txt h1{font-size:34px;font-weight:900;margin:0;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.theme-tvrex .tvr-hero-txt p{margin:6px 0 14px;font-size:17px;color:#e4f5f2}
.theme-tvrex .tvr-cta{display:inline-block;background:var(--accent);color:#fff!important;font-weight:800;padding:11px 26px;border-radius:26px;box-shadow:0 4px 0 var(--accent-d)}
.theme-tvrex .tvr-cta:hover{background:var(--accent-d);text-decoration:none;box-shadow:0 2px 0 var(--accent-d);transform:translateY(2px)}

/* ---- section headings ---- */
.theme-tvrex .band{padding:26px 0}
.theme-tvrex .band>.wrap>h2,.theme-tvrex .band h2{font-size:22px;color:var(--navy);font-weight:800;margin:.2em 0 .7em}
.theme-tvrex .rail-head{margin-bottom:.7em}
.theme-tvrex .rail-head h2{margin:0}
.theme-tvrex .rail-sub{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:.35em}
.theme-tvrex .rail-blurb{margin:0}
.theme-tvrex .tvr-tagline{font-size:13px;font-weight:800;color:#fff;align-self:center;line-height:1.25}
.theme-tvrex .rail-blurb{margin:.25em 0 0;color:var(--muted);font-size:13px}
.theme-tvrex .rail-more{flex:none;font-weight:800;font-size:14px;color:var(--teal-d);white-space:nowrap;background:var(--cream);border:1px solid var(--line);padding:8px 16px;border-radius:22px}
.theme-tvrex .rail-more:hover{background:var(--teal);color:#fff;border-color:var(--teal);text-decoration:none}
.theme-tvrex .rail+.rail{border-top:1px solid var(--line)}

/* ---- type tiles ---- */
.theme-tvrex .tiles{gap:12px}
.theme-tvrex .tile{background:#fff;border:2px solid var(--line);border-radius:14px;font-weight:800;color:var(--navy);box-shadow:0 2px 0 var(--line)}
.theme-tvrex .tile:hover{border-color:var(--teal);color:var(--teal-d)}

/* ---- product cards ---- */
.theme-tvrex .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.theme-tvrex .card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 14px rgba(18,48,73,.07);transition:border-color .1s,box-shadow .1s;position:relative}
.theme-tvrex .card:hover{border-color:var(--teal);box-shadow:0 6px 20px rgba(18,48,73,.13)}
.theme-tvrex .card img{padding:14px;height:160px;width:100%;object-fit:contain;box-sizing:border-box}
.theme-tvrex .card-b{border-top:1px solid var(--line);padding:12px 14px 14px}
.theme-tvrex .card-b .t{font-size:14px;font-weight:700;color:var(--ink);min-height:2.5em}
.theme-tvrex .card-b .p{font-size:22px;font-weight:900;color:var(--navy)}
.theme-tvrex .cheapest{position:absolute;top:10px;left:10px;background:var(--teal);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:20px;border:2px solid var(--teal-d);box-shadow:0 2px 5px rgba(0,0,0,.15)}
/* discount pill: mirror the CHEAPEST badge - same height, opposite (right) side, tucked inside the card */
.theme-tvrex .off-badge{position:absolute;top:10px;right:10px;left:auto;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:20px;border:2px solid var(--accent-d);box-shadow:0 2px 5px rgba(0,0,0,.15)}
.theme-tvrex .card-b .p .was{font-size:13px;font-weight:600;color:var(--muted);text-decoration:line-through;margin-left:6px}
.theme-tvrex .oos-badge{position:absolute;top:10px;left:10px;background:#8595a4;color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:20px;box-shadow:0 2px 5px rgba(0,0,0,.15);z-index:2}
.theme-tvrex .card-b .p.p-oos{color:var(--muted)}
.theme-tvrex .stores{display:inline-block;background:var(--cream);border:1px solid var(--line);border-radius:8px;font-size:11px;font-weight:700;padding:1px 8px;color:var(--muted)}
.theme-tvrex .rlogos{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:9px}
.theme-tvrex .rlogos img{width:22px;height:22px;border-radius:5px;border:1px solid var(--line);background:#fff;object-fit:contain;padding:1px;box-sizing:border-box}
.theme-tvrex .rlogos .more{font-size:11px;font-weight:700;color:var(--muted)}
.theme-tvrex .view-deal{display:block;text-align:center;background:var(--accent);color:#fff;font-weight:800;font-size:14px;padding:8px;border-radius:10px;margin-top:10px}
.theme-tvrex .card:hover .view-deal{background:var(--accent-d)}

/* ---- product page + buttons + tables inherit base, just recolour the accent already ---- */
.theme-tvrex .btn{border-radius:22px;box-shadow:0 3px 0 var(--accent-d)}

@media(max-width:640px){
  .theme-tvrex .site-head .wrap{flex-wrap:wrap;height:auto;padding:10px 20px;gap:12px}
  .theme-tvrex .tvr-search{order:3;max-width:none;flex-basis:100%}
  /* category nav: one line that scrolls sideways instead of wrapping + getting cut off */
  .theme-tvrex .tvr-nav{order:4;flex-basis:100%;gap:14px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .theme-tvrex .tvr-nav a{white-space:nowrap;font-size:14px;flex:0 0 auto}
  .theme-tvrex .tvr-nav a.on{padding:5px 12px}
  .theme-tvrex .tvr-hero .dino{display:none}
  /* hero copy spans full width on mobile instead of cramming into a narrow left column */
  .theme-tvrex .tvr-hero-txt{max-width:none}
}

/* ============================================================================
   Designed typography + chunky buttons - gives TV Rex a real identity (like
   Game Baron's font/button personality) instead of a recoloured template.
   Baloo 2 (rounded display) on the characterful bits, Nunito for body.
   ============================================================================ */
/* woff2 first (~65% smaller than ttf). Poppins (headings) = optional so a late load can't reflow the
   hero heading = no CLS; Nunito (body) = swap. Both preloaded in the layout head so they arrive early. */
@font-face{font-family:'Poppins';src:url('/assets/fonts/Poppins-ExtraBold.woff2') format('woff2'),url('/assets/fonts/Poppins-ExtraBold.ttf') format('truetype');font-weight:800;font-display:optional}
@font-face{font-family:'Nunito';src:url('/assets/fonts/Nunito.woff2') format('woff2'),url('/assets/fonts/Nunito.ttf') format('truetype');font-weight:300 900;font-display:optional}

body.theme-tvrex{font-family:'Nunito',system-ui,-apple-system,sans-serif}

.theme-tvrex .tvr-word b,
.theme-tvrex .tvr-hero-txt h1,
.theme-tvrex .band h2,
.theme-tvrex .tile,
.theme-tvrex .tvr-cta,
.theme-tvrex .view-deal,
.theme-tvrex .tvr-search button,
.theme-tvrex .tvr-nav a,
.theme-tvrex .card-b .p,
.theme-tvrex .cheapest,
.theme-tvrex .off-badge,
.theme-tvrex .btn{font-family:'Poppins',system-ui,sans-serif;font-weight:800}

/* logo + hero + section headings */
.theme-tvrex .tvr-word b{font-size:29px;letter-spacing:.4px}
.theme-tvrex .tvr-hero-txt h1{font-size:41px;letter-spacing:.3px;line-height:1.05}
.theme-tvrex .band h2{display:inline-block;font-size:27px;letter-spacing:.2px;padding-bottom:3px;border-bottom:4px solid var(--accent);border-radius:2px}
.theme-tvrex .tvr-nav a{font-size:16px}

/* chunky, tactile buttons (offset shadow + press) - the Game Baron trick */
.theme-tvrex .tvr-cta,.theme-tvrex .view-deal,.theme-tvrex .btn{letter-spacing:.4px;border:2px solid rgba(0,0,0,.07);box-shadow:0 4px 0 var(--accent-d)}
.theme-tvrex .card:hover .view-deal{box-shadow:0 2px 0 var(--accent-d)}
.theme-tvrex .tvr-search button{letter-spacing:.3px;font-size:15px}

/* tiles + cards a bit more designed */
.theme-tvrex .tile{font-size:16px;padding:14px 22px;box-shadow:0 3px 0 var(--line)}
.theme-tvrex .tile:hover{box-shadow:0 3px 0 var(--teal)}
.theme-tvrex .card-b .t{font-weight:800}
.theme-tvrex .card-b .p{font-size:25px;color:var(--teal-d)}

/* buyer's guide - TV Rex flourish */
.theme-tvrex .bg-rank{background:var(--accent);box-shadow:0 3px 0 var(--accent-d);font-family:'Poppins',sans-serif}
.theme-tvrex .bg-price{font-family:'Poppins',sans-serif;color:var(--teal-d)}
.theme-tvrex .bg-cta{font-family:'Poppins',sans-serif;letter-spacing:.3px;border:2px solid rgba(0,0,0,.07);box-shadow:0 4px 0 var(--accent-d)}
.theme-tvrex .bg-pick:hover{border-color:var(--accent)}

/* ============================================================================
   "Designed shell" restyle (2026-07-15) - carry the TV Rex identity all the way
   down the page, not just the hero. The Game Baron 'cabinet' move, in TV Rex's
   own navy/teal/orange language: float the page in a bordered shell on a subtle
   patterned navy field, and make cards/tiles/badges chunky + tactile.
   ============================================================================ */
/* prehistoric scene behind everything - fixed cover so the shell floats over it as you scroll.
   A ~50% dark-navy mask (header colour) sits over the scene to darken it and let the shell pop. */
/* Mobile/tablet: solid navy field (a touch darker than the header) - the shell covers the scene on
   narrow screens, so we skip the image entirely. A bg-image inside a min-width media query is NOT
   downloaded below the breakpoint, so phones never fetch the ~78KB scene = real mobile-perf win. */
body.theme-tvrex{
  background-color:var(--navy-d);
  background-image:none;
}
@media(min-width:1024px){
  body.theme-tvrex{
    background-image:
      linear-gradient(rgba(13, 35, 55, .5), rgba(13, 35, 55, .5)),
      url('/assets/img/tvrex-scene.webp');
    background-size:cover;
    background-position:center center;
    background-attachment:fixed;
    background-repeat:no-repeat;
  }
}
/* the floating framed panel - the single biggest lever */
.theme-tvrex .shell{
  max-width:1180px;margin:18px auto;overflow:hidden;
  border:3px solid var(--navy);border-radius:22px;
  box-shadow:0 16px 44px rgba(5,18,30,.45);
  background-color:var(--cream);
}
/* header sits static inside the rounded shell */
.theme-tvrex .site-head{position:static;border-bottom:3px solid var(--navy-d)}

/* chunky, tactile product cards (offset shadow + lift on hover) */
.theme-tvrex .card{
  border:2px solid var(--navy);border-radius:16px;
  box-shadow:0 5px 0 rgba(18,48,73,.18);
  transition:transform .1s, box-shadow .1s, border-color .1s;
}
.theme-tvrex .card:hover{
  border-color:var(--teal);box-shadow:0 5px 0 var(--teal-d);transform:translateY(-2px)
}
/* punchier CHEAPEST badge */
.theme-tvrex .cheapest{
  border:2px solid var(--navy);box-shadow:0 3px 0 rgba(18,48,73,.32);
  font-family:'Poppins',sans-serif;letter-spacing:.03em
}
/* View deal button - a touch chunkier */
.theme-tvrex .view-deal{border:2px solid rgba(18,48,73,.14)}

/* Shop-by-type tiles: filled chunky pills instead of thin white outlines */
.theme-tvrex .tile{
  background:#fff;border:2px solid var(--navy);border-radius:14px;
  box-shadow:0 4px 0 var(--navy);color:var(--navy)
}
.theme-tvrex .tile:hover{
  background:var(--teal);color:#fff;border-color:var(--navy);
  box-shadow:0 4px 0 var(--teal-d);transform:translateY(-1px)
}

/* buyer's-guide pick rows (facet + guide pages) chunky to match */
.theme-tvrex .bg-pick{
  border:2px solid var(--navy);border-radius:16px;
  box-shadow:0 5px 0 rgba(18,48,73,.14)
}
.theme-tvrex .bg-pick:hover{border-color:var(--teal);box-shadow:0 5px 0 var(--teal-d)}

/* tighten the shell on small screens */
@media(max-width:640px){
  .theme-tvrex .shell{margin:10px;border-width:2px;border-radius:16px}
  /* fixed backgrounds are janky on mobile (esp iOS) - scroll + cover instead */
  body.theme-tvrex{background-attachment:scroll;background-size:cover}
}

/* facet content-page blocks - chunky to match the shell restyle */
.theme-tvrex .cheapest-now{border:2px solid var(--navy);border-left-width:5px;box-shadow:0 4px 0 rgba(18,48,73,.1);border-radius:12px}
.theme-tvrex .cheapest-now .cn-price{color:var(--teal-d);font-family:'Poppins',sans-serif}
.theme-tvrex .our-pick{border:2px solid var(--navy);box-shadow:0 5px 0 rgba(18,48,73,.14);border-radius:14px}
.theme-tvrex .our-pick .op-tag{font-family:'Poppins',sans-serif;box-shadow:0 2px 0 var(--accent-d)}
.theme-tvrex .faq h2{display:inline-block;border-bottom:4px solid var(--accent);border-radius:2px;padding-bottom:2px}
.theme-tvrex .faq details{border:2px solid var(--navy)}

/* keep side padding on the combined band+wrap product article (beats .theme-tvrex .band) */
.theme-tvrex .wrap.band{padding-left:20px;padding-right:20px}

/* sort pills - chunky to match */
.theme-tvrex .sort-bar a{border:2px solid var(--navy)}
.theme-tvrex .sort-bar a.on{background:var(--accent);border-color:var(--navy)}

/* article comparison tables - chunky navy to match */
.theme-tvrex .prose .body table{border:2px solid var(--navy);border-radius:12px}
.theme-tvrex .prose .body thead th{background:var(--navy);color:#fff}

/* ---- header logo: combined rex-head + TV REX row sticker logo ---- */
.theme-tvrex .brand{display:flex;align-items:center}
.theme-tvrex .tvr-logo2{height:56px;width:auto;aspect-ratio:400/140;display:block}
@media(max-width:640px){ .theme-tvrex .tvr-logo2{height:40px} }

/* article title: give the H1 the display treatment so it clearly outranks the H2s */
.theme-tvrex .prose>h1{font-family:'Poppins',system-ui,sans-serif;font-weight:800;color:var(--navy);font-size:34px;line-height:1.12;letter-spacing:.2px;margin:0 0 8px}
/* article subheaders: full-width underline, sized BELOW the H1 (were heavier than the title) */
.theme-tvrex .prose .body h2{display:block;font-size:22px;border-bottom-width:3px;padding-bottom:4px;margin-top:1.5em}
/* internal-linking: related-guides block + footer tag chips + tag archive */
.theme-tvrex .related{margin-top:2.5em;border-top:2px solid var(--line);padding-top:1.2em}
.theme-tvrex .related h2{font-size:20px;color:var(--navy);font-weight:800;margin:0 0 .6em}
.theme-tvrex .related ul,.theme-tvrex .tag-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.theme-tvrex .related li,.theme-tvrex .tag-list li{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.theme-tvrex .related a,.theme-tvrex .tag-list a{font-weight:700;color:var(--teal-d)}
.theme-tvrex .rel-x{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:2px}
.theme-tvrex .tag-chips{margin-top:1.6em;display:flex;flex-wrap:wrap;gap:8px}
.theme-tvrex .tag-chips .chip{display:inline-block;background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:5px 13px;font-size:13px;font-weight:700;color:var(--navy)}
.theme-tvrex .tag-chips .chip:hover{background:var(--teal);color:#fff;border-color:var(--teal);text-decoration:none}
.theme-tvrex .tag-archive .tag-list{margin-top:1.2em}
.theme-tvrex .card-noimg{height:160px;margin:14px;background:var(--cream);border:1px dashed var(--line);border-radius:12px;color:#c2ccd6}
.theme-tvrex .bg-save{background:var(--accent);border:2px solid var(--accent-d);color:#fff}

/* --- Mobile-only hamburger drawer --- */
.theme-tvrex .tvr-burger,.theme-tvrex .tvr-scrim,.theme-tvrex .tvr-drawer{display:none}
@media(max-width:720px){
  .theme-tvrex .site-head .wrap{position:relative}
  .theme-tvrex .tvr-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;position:absolute;top:12px;right:14px;width:42px;height:42px;padding:10px;border-radius:10px;background:rgba(255,255,255,.14);cursor:pointer;z-index:30}
  .theme-tvrex .tvr-burger span{display:block;height:2.5px;background:#fff;border-radius:2px}
  .theme-tvrex .tvr-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
  .theme-tvrex .tvr-drawer-toggle:checked ~ .tvr-scrim{opacity:1;pointer-events:auto}
  .theme-tvrex .tvr-drawer{display:block;position:fixed;top:0;right:0;height:100%;width:80%;max-width:320px;background:var(--cream,#fbf7ec);box-shadow:-8px 0 24px rgba(0,0,0,.25);padding:54px 20px 30px;overflow-y:auto;transform:translateX(100%);transition:transform .22s ease;z-index:50}
  .theme-tvrex .tvr-drawer-toggle:checked ~ .tvr-drawer{transform:translateX(0)}
  .theme-tvrex .tvr-drawer-x{position:absolute;top:10px;right:16px;font-size:32px;line-height:1;color:#12202b;cursor:pointer}
  .theme-tvrex .tvr-drawer h4{margin:20px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--teal-d,#0d5a44);opacity:.85}
  .theme-tvrex .tvr-drawer h4:first-of-type{margin-top:0}
  .theme-tvrex .tvr-drawer a{display:block;padding:10px 0;font-weight:700;color:#12202b;border-bottom:1px solid var(--line,#e6e0cf);text-decoration:none}
  .theme-tvrex .tvr-sizes{display:flex;flex-wrap:wrap;gap:8px}
  .theme-tvrex .tvr-drawer .tvr-sizes a{border:1px solid var(--line,#e6e0cf);border-radius:20px;padding:6px 15px;font-weight:800}
}