/*
Theme Name: Cineverse
Theme URI: 
Author: Cinesist
Author URI: 
Description: This is the Official Theme created and managed by Cinesist and the team! We have migrated multiple themes into one Framework to use FSE!
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: foxiz
Text Domain: cineverse
Tags: custom-background, custom-menu, featured-images, theme-options, custom-colors, translation-ready, threaded-comments.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap');

/*
-----------------
>>> TABLE OF CONTENTS:
0 - System Tokens (Reset, @property, Root Variables)
1 - Framework & Core Resets (Admin Visibility, Selection Glow)
2 - Typography (Global Headings, Fluid Scales, Fonts)
3 - Layout (Global Containers, Grid/Flex Patterns)
4 - Navigation (Main Menu, Header, Navigation HUD)
5 - Elements (Buttons, Pills, UI Components)
6 - Post Entry
7 - Post Modules
8 - Blocks
9 - Single
10 - Archives
11 - Pages
12 - Footer
13 - Responsive
14 - Print
15 - Forms
16 - UI/UX
17 - Snarkive Core
18 - Social & Recruitment
19 - bbPress - Not Implemented
20 - WooCommerce - Not Implemented
21 - Mailpoet
22 - Wordpress Hacks
23 - Admin
24 - Gallery Patterns
-----------------
*/

/*
/*
-----------------
0 - System Tokens (Reset, @property, Root Variables)
-----------------
*/

/* ====================
   BASE HTML & BODY RESETS
   ==================== */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--cs-bg);
  color: var(--cs-text-primary);
  font-family: var(--font-sans), var(--cs-font-emoji), sans-serif;
  font-size: var(--cs-font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display), sans-serif;
  color: var(--cs-text-primary);
  font-weight: var(--cs-heading-weight);
  margin-top: 0;
  margin-bottom: 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--cs-font-size-h1); line-height: var(--line-height-h1); letter-spacing: var(--cs-tracking-h1); }
h2 { font-size: var(--cs-font-size-h2); line-height: var(--line-height-h2); letter-spacing: var(--cs-tracking-h2); }
h3 { font-size: var(--cs-font-size-h3); line-height: var(--line-height-h3); letter-spacing: var(--cs-tracking-h3); }
h4 { font-size: var(--cs-font-size-h4); line-height: var(--line-height-h4); letter-spacing: var(--cs-tracking-h4); }
h5 { font-size: var(--cs-font-size-h5); line-height: var(--line-height-h5); letter-spacing: var(--cs-tracking-h5); }
h6 { 
  font-size: var(--cs-font-size-h6); 
  line-height: var(--line-height-h6); 
  letter-spacing: var(--cs-tracking-h6); 
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--flex-snarkive);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* ====================
   Fonts & Icons Import
   ==================== */
@font-face {
  font-family: "Noto Color Emoji";
  src: url("assets/fonts/Noto Color Emoji/NotoColorEmoji-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ====================
   Tailwind v4 Native Properties (@property)
   ==================== */
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-to { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-gradient-via { syntax: "<color>"; inherits: false; initial-value: #0000; }
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }

/* ====================
   GLOBAL ROOT VARIABLES
   ==================== */
:root {
  /* Extended UI Palette (OKLCH) */
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-red-950: oklch(25.8% 0.092 26.042);
  --color-orange-50: oklch(98% 0.016 73.684);
  --color-orange-100: oklch(95.4% 0.038 75.164);
  --color-orange-200: oklch(90.1% 0.076 70.697);
  --color-orange-300: oklch(83.7% 0.128 66.29);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-700: oklch(55.3% 0.195 38.402);
  --color-orange-800: oklch(47% 0.157 37.304);
  --color-orange-900: oklch(40.8% 0.123 38.172);
  --color-orange-950: oklch(26.6% 0.079 36.259);
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);
  --color-yellow-50: oklch(98.7% 0.026 102.212);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-yellow-700: oklch(55.4% 0.135 66.442);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
  --color-lime-50: oklch(98.6% 0.031 120.757);
  --color-lime-100: oklch(96.7% 0.067 122.328);
  --color-lime-200: oklch(93.8% 0.127 124.321);
  --color-lime-300: oklch(89.7% 0.196 126.665);
  --color-lime-400: oklch(84.1% 0.238 128.85);
  --color-lime-500: oklch(76.8% 0.233 130.85);
  --color-lime-600: oklch(64.8% 0.2 131.684);
  --color-lime-700: oklch(53.2% 0.157 131.589);
  --color-lime-800: oklch(45.3% 0.124 130.933);
  --color-lime-900: oklch(40.5% 0.101 131.063);
  --color-lime-950: oklch(27.4% 0.072 132.109);
  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-green-900: oklch(39.3% 0.095 152.535);
  --color-green-950: oklch(26.6% 0.065 152.934);
  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-300: oklch(84.5% 0.143 164.978);
  --color-emerald-400: oklch(76.5% 0.177 163.223);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-emerald-700: oklch(50.8% 0.118 165.612);
  --color-emerald-800: oklch(43.2% 0.095 166.913);
  --color-emerald-900: oklch(37.8% 0.077 168.94);
  --color-emerald-950: oklch(26.2% 0.051 172.552);
  --color-teal-50: oklch(98.4% 0.014 180.72);
  --color-teal-100: oklch(95.3% 0.051 180.801);
  --color-teal-200: oklch(91% 0.096 180.426);
  --color-teal-300: oklch(85.5% 0.138 181.071);
  --color-teal-400: oklch(77.7% 0.152 181.912);
  --color-teal-500: oklch(70.4% 0.14 182.503);
  --color-teal-600: oklch(60% 0.118 184.704);
  --color-teal-700: oklch(51.1% 0.096 186.391);
  --color-teal-800: oklch(43.7% 0.078 188.216);
  --color-teal-900: oklch(38.6% 0.063 188.416);
  --color-teal-950: oklch(27.7% 0.046 192.524);
  --color-cyan-50: oklch(98.4% 0.019 200.873);
  --color-cyan-100: oklch(95.6% 0.045 203.388);
  --color-cyan-200: oklch(91.7% 0.08 205.041);
  --color-cyan-300: oklch(86.5% 0.127 207.078);
  --color-cyan-400: oklch(78.9% 0.154 211.53);
  --color-cyan-500: oklch(71.5% 0.143 215.221);
  --color-cyan-600: oklch(60.9% 0.126 221.723);
  --color-cyan-700: oklch(52% 0.105 223.128);
  --color-cyan-800: oklch(45% 0.085 224.283);
  --color-cyan-900: oklch(39.8% 0.07 227.392);
  --color-cyan-950: oklch(30.2% 0.056 229.695);
  --color-sky-50: oklch(97.7% 0.013 236.62);
  --color-sky-100: oklch(95.1% 0.026 236.824);
  --color-sky-200: oklch(90.1% 0.058 230.902);
  --color-sky-300: oklch(82.8% 0.111 230.318);
  --color-sky-400: oklch(74.6% 0.16 232.661);
  --color-sky-500: oklch(68.5% 0.169 237.323);
  --color-sky-600: oklch(58.8% 0.158 241.966);
  --color-sky-700: oklch(50% 0.134 242.749);
  --color-sky-800: oklch(44.3% 0.11 240.79);
  --color-sky-900: oklch(39.1% 0.09 240.876);
  --color-sky-950: oklch(29.3% 0.066 243.157);
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-blue-950: oklch(28.2% 0.091 267.935);
  --color-indigo-50: oklch(96.2% 0.018 272.314);
  --color-indigo-100: oklch(93% 0.034 272.788);
  --color-indigo-200: oklch(87% 0.065 274.039);
  --color-indigo-300: oklch(78.5% 0.115 274.713);
  --color-indigo-400: oklch(67.3% 0.182 276.935);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-indigo-600: oklch(51.1% 0.262 276.966);
  --color-indigo-700: oklch(45.7% 0.24 277.023);
  --color-indigo-800: oklch(39.8% 0.195 277.366);
  --color-indigo-900: oklch(35.9% 0.144 278.697);
  --color-indigo-950: oklch(25.7% 0.09 281.288);
  --color-violet-50: oklch(96.9% 0.016 293.756);
  --color-violet-100: oklch(94.3% 0.029 294.588);
  --color-violet-200: oklch(89.4% 0.057 293.283);
  --color-violet-300: oklch(81.1% 0.111 293.571);
  --color-violet-400: oklch(70.2% 0.183 293.541);
  --color-violet-500: oklch(60.6% 0.25 292.717);
  --color-violet-600: oklch(54.1% 0.281 293.009);
  --color-violet-700: oklch(49.1% 0.27 292.581);
  --color-violet-800: oklch(43.2% 0.232 292.759);
  --color-violet-900: oklch(38% 0.189 293.745);
  --color-violet-950: oklch(28.3% 0.141 291.089);
  --color-purple-50: oklch(97.7% 0.014 308.299);
  --color-purple-100: oklch(94.6% 0.033 307.174);
  --color-purple-200: oklch(90.2% 0.063 306.703);
  --color-purple-300: oklch(82.7% 0.119 306.383);
  --color-purple-400: oklch(71.4% 0.203 305.504);
  --color-purple-500: oklch(62.7% 0.265 303.9);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-purple-700: oklch(49.6% 0.265 301.924);
  --color-purple-800: oklch(43.8% 0.218 303.724);
  --color-purple-900: oklch(38.1% 0.176 304.987);
  --color-purple-950: oklch(29.1% 0.149 302.717);
  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
  --color-fuchsia-400: oklch(74% 0.238 322.16);
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
  --color-pink-50: oklch(97.1% 0.014 343.198);
  --color-pink-100: oklch(94.8% 0.028 342.258);
  --color-pink-200: oklch(89.9% 0.061 343.231);
  --color-pink-300: oklch(82.3% 0.12 346.018);
  --color-pink-400: oklch(71.8% 0.202 349.761);
  --color-pink-500: oklch(65.6% 0.241 354.308);
  --color-pink-600: oklch(59.2% 0.249 0.584);
  --color-pink-700: oklch(52.5% 0.223 3.958);
  --color-pink-800: oklch(45.9% 0.187 3.815);
  --color-pink-900: oklch(40.8% 0.153 2.432);
  --color-pink-950: oklch(28.4% 0.109 3.907);
  --color-rose-50: oklch(96.9% 0.015 12.422);
  --color-rose-100: oklch(94.1% 0.03 12.58);
  --color-rose-200: oklch(89.2% 0.058 10.001);
  --color-rose-300: oklch(81% 0.117 11.638);
  --color-rose-400: oklch(71.2% 0.194 13.428);
  --color-rose-500: oklch(64.5% 0.246 16.439);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-rose-700: oklch(51.4% 0.222 16.935);
  --color-rose-800: oklch(45.5% 0.188 13.697);
  --color-rose-900: oklch(41% 0.159 10.272);
  --color-rose-950: oklch(27.1% 0.105 12.094);
  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-600: oklch(44.6% 0.043 257.281);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-800: oklch(27.9% 0.041 260.031);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-slate-950: oklch(12.9% 0.042 264.695);
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-950: oklch(13% 0.028 261.692);
  --color-zinc-50: oklch(98.5% 0 0);
  --color-zinc-100: oklch(96.7% 0.001 286.375);
  --color-zinc-200: oklch(92% 0.004 286.32);
  --color-zinc-300: oklch(87.1% 0.006 286.286);
  --color-zinc-400: oklch(70.5% 0.015 286.067);
  --color-zinc-500: oklch(55.2% 0.016 285.938);
  --color-zinc-600: oklch(44.2% 0.017 285.786);
  --color-zinc-700: oklch(37% 0.013 285.805);
  --color-zinc-800: oklch(27.4% 0.006 286.033);
  --color-zinc-900: oklch(21% 0.006 285.885);
  --color-zinc-950: oklch(14.1% 0.005 285.823);
  --color-neutral-50: oklch(98.5% 0 0);
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);
  --color-stone-50: oklch(98.5% 0.001 106.423);
  --color-stone-100: oklch(97% 0.001 106.424);
  --color-stone-200: oklch(92.3% 0.003 48.717);
  --color-stone-300: oklch(86.9% 0.005 56.366);
  --color-stone-400: oklch(70.9% 0.01 56.259);
  --color-stone-500: oklch(55.3% 0.013 58.071);
  --color-stone-600: oklch(44.4% 0.011 73.639);
  --color-stone-700: oklch(37.4% 0.01 67.558);
  --color-stone-800: oklch(26.8% 0.007 34.298);
  --color-stone-900: oklch(21.6% 0.006 56.043);
  --color-stone-950: oklch(14.7% 0.004 49.25);
  --color-mauve-50: oklch(98.5% 0 0);
  --color-mauve-100: oklch(96% 0.003 325.6);
  --color-mauve-200: oklch(92.2% 0.005 325.62);
  --color-mauve-300: oklch(86.5% 0.012 325.68);
  --color-mauve-400: oklch(71.1% 0.019 323.02);
  --color-mauve-500: oklch(54.2% 0.034 322.5);
  --color-mauve-600: oklch(43.5% 0.029 321.78);
  --color-mauve-700: oklch(36.4% 0.029 323.89);
  --color-mauve-800: oklch(26.3% 0.024 320.12);
  --color-mauve-900: oklch(21.2% 0.019 322.12);
  --color-mauve-950: oklch(14.5% 0.008 326);
  --color-olive-50: oklch(98.8% 0.003 106.5);
  --color-olive-100: oklch(96.6% 0.005 106.5);
  --color-olive-200: oklch(93% 0.007 106.5);
  --color-olive-300: oklch(88% 0.011 106.6);
  --color-olive-400: oklch(73.7% 0.021 106.9);
  --color-olive-500: oklch(58% 0.031 107.3);
  --color-olive-600: oklch(46.6% 0.025 107.3);
  --color-olive-700: oklch(39.4% 0.023 107.4);
  --color-olive-800: oklch(28.6% 0.016 107.4);
  --color-olive-900: oklch(22.8% 0.013 107.4);
  --color-olive-950: oklch(15.3% 0.006 107.1);
  --color-mist-50: oklch(98.7% 0.002 197.1);
  --color-mist-100: oklch(96.3% 0.002 197.1);
  --color-mist-200: oklch(92.5% 0.005 214.3);
  --color-mist-300: oklch(87.2% 0.007 219.6);
  --color-mist-400: oklch(72.3% 0.014 214.4);
  --color-mist-500: oklch(56% 0.021 213.5);
  --color-mist-600: oklch(45% 0.017 213.2);
  --color-mist-700: oklch(37.8% 0.015 216);
  --color-mist-800: oklch(27.5% 0.011 216.9);
  --color-mist-900: oklch(21.8% 0.008 223.9);
  --color-mist-950: oklch(14.8% 0.004 228.8);
  --color-taupe-50: oklch(98.6% 0.002 67.8);
  --color-taupe-100: oklch(96% 0.002 17.2);
  --color-taupe-200: oklch(92.2% 0.005 34.3);
  --color-taupe-300: oklch(86.8% 0.007 39.5);
  --color-taupe-400: oklch(71.4% 0.014 41.2);
  --color-taupe-500: oklch(54.7% 0.021 43.1);
  --color-taupe-600: oklch(43.8% 0.017 39.3);
  --color-taupe-700: oklch(36.7% 0.016 35.7);
  --color-taupe-800: oklch(26.8% 0.011 36.5);
  --color-taupe-900: oklch(21.4% 0.009 43.1);
  --color-taupe-950: oklch(14.7% 0.004 49.3);
  --color-black: #000;
  --color-white: #fff;

  /* ====================
     Layouts & Widths
     (ScreenRant/GameRant Inspiration)
     ==================== */
  --cs-width-full: 100%;
  --cs-width-xl: 1520px;
  --cs-width-lg: 1300px;
  --cs-width-md: 1000px;
  --cs-width-sm: 800px;

  --layout-full-width: var(--cs-width-full);
  --layout-page-max-width: var(--cs-width-xl);
  --layout-content-max-width: var(--cs-width-lg);
  --cs-width: var(--cs-width-lg) !important;

  /* ====================
     Dimensions & Spacing
     ==================== */
  --spacing: 0.25rem;
  --container-2xl: 42rem;
  --container-7xl: 1300px;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* ====================
     Layout Tokens
     ==================== */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --leading-tight: 1.25;
  --leading-relaxed: 1.625;

  /* ====================
     Effects & Transitions
     ==================== */
  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-3xl: 64px;
  --aspect-video: 16 / 9;

  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* ====================
     Typography (Fluid) - High-Contrast Editorial Scale
     Base: 16px (html { font-size: 1rem; })
     Ratio: ~1.25 (Major Third) for High Impact
     ==================== */

  /* --- Heading Sizes --- */
  /* H6: Metadata/Labels (Target 14px -> 16px) */
  --cs-font-size-h6: clamp(0.875rem, 0.1vw + 0.85rem, 1rem); 
  /* H5: Minor Subheads (Target 16px -> 20px) */
  --cs-font-size-h5: clamp(1rem, 0.3vw + 0.95rem, 1.25rem); 
  /* H4: Card Titles/Subsections (Target 20px -> 24px) */
  --cs-font-size-h4: clamp(1.05rem, 0.5vw + 1.1rem, 1.25rem); 
  /* H3: Section Headers (Target 24px -> 32px) */
  --cs-font-size-h3: clamp(1.3rem, 1vw + 1.2rem, 1.75rem); 
  /* H2: Major Anchors (Target 32px -> 48px) */
  --cs-font-size-h2: clamp(1.75rem, 2vw + 1.5rem, 2.5rem); 
  /* H1: The Headliner (Target 40px -> 64px) */
  --cs-font-size-h1: clamp(2.1rem, 4vw + 2rem, 3.5rem); 

  /* --- Contextual Roles --- */
  --cs-hero-title-size: var(--cs-font-size-h1);
  --cs-post-title-size: var(--cs-font-size-h1);
  --cs-post-subtitle-size: var(--cs-font-size-h2);
  --cs-card-title-size: var(--cs-font-size-h4);

  /* --- Body & UI --- */
  --cs-font-size-xs: 0.75rem;
  --cs-font-size-sm: 0.875rem;
  --cs-font-size-body: 1rem;
  --cs-font-size-caption: 0.9rem;
  --cs-font-size-cta: clamp(1.1rem, 0.2vw + 1rem, 1.125rem);

  /* --- Line Heights (Tighter for Larger Type) --- */
  --line-height-h1: 1.1;
  --line-height-h2: 1.15;
  --line-height-h3: 1.2;
  --line-height-h4: 1.3;
  --line-height-h5: 1.4;
  --line-height-h6: 1.5;
  --line-height-body: 1.625;
  --line-height-caption: 1.5;
  --line-height-cta: 1.2;

  /* --- Tracking (The "Vibe" Layer) --- */
  --cs-tracking-h1: var(--tracking-tighter);
  --cs-tracking-h2: var(--tracking-tight);
  --cs-tracking-h3: var(--tracking-tight);
  --cs-tracking-h4: normal;
  --cs-tracking-h5: var(--tracking-wide);
  --cs-tracking-h6: var(--tracking-wider);
  --cs-tracking-body: normal;

  /* --- Weights --- */
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --cs-heading-weight: var(--font-weight-black);
  --cs-body-weight: 400;

  /* ====================
     Fluid Spacing
     ==================== */
  --cs-spacing-xxs: clamp(0.25rem, 0.5vw, 0.5rem);
  --cs-spacing-xs: clamp(0.5rem, 0.8vw, 1rem);
  --cs-spacing-sm: clamp(1rem, 1.2vw, 1.5rem);
  --cs-spacing-reg: clamp(1rem, 1.2vw, 1rem);
  --cs-spacing-md: clamp(1.5rem, 2vw, 2.5rem);
  --cs-spacing-lg: clamp(2.5rem, 3.5vw, 4rem);
  --cs-spacing-xl: clamp(4rem, 5vw, 6rem);
  --cs-spacing-xxl: clamp(6rem, 8vw, 8rem);
  
  --cs-space-4xs: clamp(0.33rem, calc(-0.03vw + 0.34rem), 0.31rem);
  --cs-space-3xs: clamp(0.41rem, calc(0.04vw + 0.4rem), 0.44rem);
  --cs-space-2xs: clamp(0.51rem, calc(0.16vw + 0.46rem), 0.62rem);
  --cs-space-xs: clamp(0.64rem, calc(0.36vw + 0.53rem), 0.88rem);
  --cs-space-s: clamp(0.8rem, calc(0.67vw + 0.6rem), 1.24rem);
  --cs-space-m: clamp(1rem, calc(1.15vw + 0.66rem), 1.75rem);
  --cs-space-l: clamp(1.25rem, calc(1.87vw + 0.69rem), 2.47rem);
  --cs-space-xl: clamp(1.56rem, calc(2.96vw + 0.68rem), 3.5rem);
  --cs-space-2xl: clamp(1.95rem, calc(4.58vw + 0.59rem), 4.95rem);
  --cs-space-3xl: clamp(2.44rem, calc(6.97vw + 0.37rem), 7rem);
  --cs-space-4xl: clamp(3.05rem, calc(10.47vw + -0.06rem), 9.89rem);

  /* Functional Spacing */
  --cs-header-space: var(--cs-space-s);
  --cs-btn-space: var(--cs-space-xs) var(--cs-space-s);
  --cs-card-space: var(--cs-space-s);
  --cs-footer-space: var(--cs-space-s) var(--cs-space-m);

  /* ====================
     Fluid Layout
     ==================== */
  --cs-columns-1: repeat(1, minmax(0, 1fr));
  --cs-columns-2: repeat(2, minmax(0, 1fr));
  --cs-columns-3: repeat(3, minmax(0, 1fr));
  --cs-columns-4: repeat(4, minmax(0, 1fr));
  --cs-columns-5: repeat(5, minmax(0, 1fr));
  --cs-columns-6: repeat(6, minmax(0, 1fr));
  --cs-columns-7: repeat(7, minmax(0, 1fr));
  --cs-columns-8: repeat(8, minmax(0, 1fr));

  /* ====================
     Radius & Shadows
     ==================== */
  --cs-radius-xs: clamp(0.25rem, calc(0vw + 0.25rem), 0.25rem);
  --cs-radius-s: clamp(0.38rem, calc(-0.19vw + 0.56rem), 0.5rem);
  --cs-radius-m: clamp(0.63rem, calc(-0.19vw + 0.81rem), 0.75rem);
  --cs-radius-l: clamp(1rem, calc(-0.38vw + 1.36rem), 1.25rem);
  --cs-radius-xl: clamp(1.63rem, calc(-0.57vw + 2.17rem), 2rem);
  --cs-radius-full: 999rem;

  --cs-shadow-xs: 0 1px 2px var(--cs-shadow-primary);
  --cs-shadow-s: 0 1.5px 3px var(--cs-shadow-primary);
  --cs-shadow-m: 0 2px 6px var(--cs-shadow-primary);
  --cs-shadow-l: 0 3px 12px var(--cs-shadow-primary);
  --cs-shadow-xl: 0 6px 48px var(--cs-shadow-primary);

  /* ====================
     Foxiz Root Overrides
     ==================== */
  --em-mini: 1em;
  --rem-mini: 0.8rem;

  /* Functional Aliases */
  --color-bg-primary: var(--bg-primary);
  --color-bg-secondary: var(--bg-secondary);
  --color-cs-text-primary: var(--cs-text-primary);
  --color-text-muted: var(--text-muted);
  --color-border-primary: var(--border-primary);
  --color-snarkive: var(--snarkive);
  --color-cinesist-red: #ff0000;
  --color-cinesist-orange: #ff5500;
  --color-cine-gray: #f4f4f5;
  --color-cine-dark: #09090b;
  --color-cine-border: #e4e4e7;
  --font-quicksand: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", sans-serif;
  --font-emoji: "Noto Color Emoji", sans-serif;


  /* ====================
  Color Pallette
==================== */
  /* --- Brand Colors --- */
  --cinefox-black-spy: #1a1b1f;
  --cinefox-white-spy: #e5e5e5;
  --cinesist-dark-grey: #1a1a1a;
  --cinesist-middle-grey: #2a2a2a;
  --cinesist-light-grey: #F2F2F2;
  --cinesist-title-color: #ffffff;
  /* Makes Titles Gleam White */
  --cinesist-text-color: #f0f0f0;
  /* Off-white for general text */
  --cinesist-gold: #e2b304;
  /* Cinesist Gold for accents */
  --cinesist-red: #e50914;
  /* Cinesist Red for accents */
  --cinesist-border-color: rgba(255, 255, 255, 0.2);
  /* Subtle white border */
  --snarkive-purple: #d102d1;
  /* New: Devil Purple for specific elements */
  --snarkive-purple-accent: #792c85;
  /* New: Devil Purple accents */
  --cinefox-orange: #dd7b45;
  /* CineFox Primary Fur Color */
  --cinefox-orange-accent: #d45f35;
  /* CineFox Auxillary Fur Color */
  --cinesist-gaming: #107c10;
  /* Used for all things Gaming Related */
  --cinesist-industry: #708090;
  /* Used for all things Industry Related */
  --cinesist-tv: #0078ae;
  /* Used for all things TV Related */
  --cinesist-info: #00ddff;
  /* Electric Blue */
  --cinesist-sucess: #7dce94;
  /* Lime Green */
  --cinesist-warning: #fff685;
  /*Biohazard Yellow */
  --cinesist-danger: #f0217d;
  /* Comicbook Pink */
  --cinebar-red: #ff0d0d;
  /* Red Rating Bar */
  --cinebar-orange: #ff5612;
  /*orange Rating Bar */
  --cinebar-yellow: #ffa444;
  /* Yellow Rating Bar */
  --cinebar-midgreen: #a0b339;
  /* Mid Green Rating Bar */
  --cinebar-green: #50a735;
  /* Green Rating Bar */
  
  /* 
   * Review Flex Colors - Uses Review as Base Color and then a Catch Color
  */
  --cs-review__rating-h2-gold-flex: var(--review-accent, var(--cinesist-gold));
  --cs-review__rating-snarkive-flex: var(--review-accent, var(--flex-snarkive));
  --cs-duo__snarkive-red-flex: var(--flex-snarkive, var(--cinesist-red));
  

  /* ========================================= */
  /* == Spy Vs Spy Theme (Light/Dark Mode) == */
  /* ========================================= */

  /* Light Mode: White Spy Icon */
  --cinesist-card-logo: url("https://www.cinesist.com/wp-content/uploads/2025/10/Cinesist-Black-and-Purple-Icon-Logomark.png");

  /* ====================
     White Spy Colors For Light Mode
==================== */

  /* --- Cinesist Light Branded Colors --- */
  --gc-color: #d45f35;
  /* Primary Orange Color */
  --body-fcolor: #1a1b1f;
  /* Body Black Spy Flex Color */
  --gc-spy: #e5e5e5;
  /* White Spy Color */
  --gc-gold: #e2b304;
  /* Cinesist Gold Color */
  --gc-red: #e50914;
  /* Cinesist Red Color */
  --gc-snarkive-purple: #d102d1;
  /* Snarkive Purple Color */
  --gc-snarkive-accent: #792c85;
  /* Snarkive Purple Accent Color */
  --bbp-white: #e5e5e5;
  /* Custom variable for bbPress white background */
  --padding-c40: 10px 40px;
  --flex-desc: #000;
  /* Custom variable for form description text color */
  --cs-spy: #e5e5e5;
  /* Custom variable for Cinesist White Spy color */
  --btn-primary: var(--flex-snarkive);
  /* Snarkive Purple to Orange */
  --btn-primary-h: var(--flex-snarkive-rev);
  /* Snarkive Purple Reverse on Hover */

  /* --- Brand: Purple (#d102d1) to Brand: Orange (#d45f35) --- */
  --cs-brand: oklch(0.604 0.277 328.37);
  --cs-brand-50: oklch(0.962 0.034 325.9);
  --cs-brand-100: oklch(0.921 0.072 326.17);
  --cs-brand-200: oklch(0.846 0.148 326.8);
  --cs-brand-300: oklch(0.771 0.233 327.56);
  --cs-brand-400: oklch(0.698 0.32 328.37);
  --cs-brand-500: oklch(0.604 0.277 328.37);
  --cs-brand-600: oklch(0.514 0.236 328.37);
  --cs-brand-700: oklch(0.424 0.194 328.37);
  --cs-brand-800: oklch(0.331 0.152 328.37);
  --cs-brand-900: oklch(0.239 0.11 328.37);
  --cs-brand-950: oklch(0.188 0.087 328.37);


  /* Brand: Purple Opacity Scale */
  --cs-brand-90: oklch(from var(--cs-brand) l c h / 0.9);
  --cs-brand-80: oklch(from var(--cs-brand) l c h / 0.8);
  --cs-brand-70: oklch(from var(--cs-brand) l c h / 0.7);
  --cs-brand-60: oklch(from var(--cs-brand) l c h / 0.6);
  --cs-brand-50: oklch(from var(--cs-brand) l c h / 0.5);
  --cs-brand-40: oklch(from var(--cs-brand) l c h / 0.4);
  --cs-brand-30: oklch(from var(--cs-brand) l c h / 0.3);
  --cs-brand-20: oklch(from var(--cs-brand) l c h / 0.2);
  --cs-brand-10: oklch(from var(--cs-brand) l c h / 0.1);

  /* --- Brand: Orange (#d45f35) to Brand: Purple (#d102d1) --- */
  --cs-brand-2: oklch(0.624 0.158 39.51);
  --cs-brand-2-50: oklch(0.958 0.018 26.18);
  --cs-brand-2-100: oklch(0.926 0.032 27.46);
  --cs-brand-2-200: oklch(0.852 0.066 30.1);
  --cs-brand-2-300: oklch(0.779 0.108 32.98);
  --cs-brand-2-400: oklch(0.706 0.161 37.82);
  --cs-brand-2-500: oklch(0.624 0.158 39.51);
  --cs-brand-2-600: oklch(0.531 0.135 39.32);
  --cs-brand-2-700: oklch(0.433 0.11 39.24);
  --cs-brand-2-800: oklch(0.335 0.085 39.24);
  --cs-brand-2-900: oklch(0.239 0.06 39.29);
  --cs-brand-2-950: oklch(0.18 0.046 38.7);
  
  /* Brand: Orange Opacity Scale */
  --cs-brand-2-90: oklch(from var(--cs-brand-2) l c h / 0.9);
  --cs-brand-2-80: oklch(from var(--cs-brand-2) l c h / 0.8);
  --cs-brand-2-70: oklch(from var(--cs-brand-2) l c h / 0.7);
  --cs-brand-2-60: oklch(from var(--cs-brand-2) l c h / 0.6);
  --cs-brand-2-50: oklch(from var(--cs-brand-2) l c h / 0.5);
  --cs-brand-2-40: oklch(from var(--cs-brand-2) l c h / 0.4);
  --cs-brand-2-30: oklch(from var(--cs-brand-2) l c h / 0.3);
  --cs-brand-2-20: oklch(from var(--cs-brand-2) l c h / 0.2);
  --cs-brand-2-10: oklch(from var(--cs-brand-2) l c h / 0.1);

  /* --- Solid Colors --- */
  /* --- Brand: Purple (#d102d1) --- */
  --cs-purple: oklch(0.604 0.277 328.37);
  --cs-purple-50: oklch(0.962 0.034 325.9);
  --cs-purple-100: oklch(0.921 0.072 326.17);
  --cs-purple-200: oklch(0.846 0.148 326.8);
  --cs-purple-300: oklch(0.771 0.233 327.56);
  --cs-purple-400: oklch(0.698 0.32 328.37);
  --cs-purple-500: oklch(0.604 0.277 328.37);
  --cs-purple-600: oklch(0.514 0.236 328.37);
  --cs-purple-700: oklch(0.424 0.194 328.37);
  --cs-purple-800: oklch(0.331 0.152 328.37);
  --cs-purple-900: oklch(0.239 0.11 328.37);
  --cs-purple-950: oklch(0.188 0.087 328.37);

  
  /* Brand: Purple Opacity Scale */
  --cs-purple-90: oklch(from var(--cs-purple-500) l c h / 0.9);
  --cs-purple-80: oklch(from var(--cs-purple-500) l c h / 0.8);
  --cs-purple-70: oklch(from var(--cs-purple-500) l c h / 0.7);
  --cs-purple-60: oklch(from var(--cs-purple-500) l c h / 0.6);
  --cs-purple-50: oklch(from var(--cs-purple-500) l c h / 0.5);
  --cs-purple-40: oklch(from var(--cs-purple-500) l c h / 0.4);
  --cs-purple-30: oklch(from var(--cs-purple-500) l c h / 0.3);
  --cs-purple-20: oklch(from var(--cs-purple-500) l c h / 0.2);
  --cs-purple-10: oklch(from var(--cs-purple-500) l c h / 0.1);

  /* --- Brand: Orange (#d45f35) --- */
  --cs-orange-base: oklch(0.58 0.16 38.6);
  --cs-orange-100: oklch(0.95 0.04 38.6);
  --cs-orange-200: oklch(0.85 0.08 38.6);
  --cs-orange-300: oklch(0.75 0.12 38.6);
  --cs-orange-400: oklch(0.65 0.15 38.6);
  --cs-orange-500: var(--cs-orange-base);
  --cs-orange-600: oklch(0.50 0.16 38.6);
  --cs-orange-700: oklch(0.40 0.14 38.6);
  --cs-orange-800: oklch(0.30 0.10 38.6);
  --cs-orange-900: oklch(0.15 0.05 38.6);
  
  /* Brand: Orange Opacity Scale */
  --cs-orange-90: oklch(from var(--cs-orange-base) l c h / 0.9);
  --cs-orange-80: oklch(from var(--cs-orange-base) l c h / 0.8);
  --cs-orange-70: oklch(from var(--cs-orange-base) l c h / 0.7);
  --cs-orange-60: oklch(from var(--cs-orange-base) l c h / 0.6);
  --cs-orange-50: oklch(from var(--cs-orange-base) l c h / 0.5);
  --cs-orange-40: oklch(from var(--cs-orange-base) l c h / 0.4);
  --cs-orange-30: oklch(from var(--cs-orange-base) l c h / 0.3);
  --cs-orange-20: oklch(from var(--cs-orange-base) l c h / 0.2);
  --cs-orange-10: oklch(from var(--cs-orange-base) l c h / 0.1);

  /* --- Light Mode Neutral Scale (#F2F2F2 Base) --- */
  --cs-bg: oklch(0.9612 0 0);
  --cs-bg-100: oklch(0.9515 0 0);
  --cs-bg-500: var(--cs-bg);
  --cs-bg-900: oklch(0.5275 0 0);
  
  /* Light Mode BG Opacities */
  --cs-bg-90: oklch(from var(--cs-bg) l c h / 0.9);
  --cs-bg-50: oklch(from var(--cs-bg) l c h / 0.5);
  --cs-bg-10: oklch(from var(--cs-bg) l c h / 0.1);

  /* --- Light Mode Rich Scale (#DBDBDB Base) --- */
  --cs-bg-2: oklch(0.8914 0 0);
  --cs-bg-2-100: oklch(87.2% 0.01 258.338);
  --cs-bg-2-500: var(--cs-bg-2);
  --cs-bg-2-900: oklch(33.588% 0.033 261.424);
  
  /* Light Mode BG Opacities */
  --cs-bg-2-90: oklch(from var(--cs-bg-2) l c h / 0.9);
  --cs-bg-2-50: oklch(from var(--cs-bg-2) l c h / 0.5);
  --cs-bg-2-10: oklch(from var(--cs-bg-2) l c h / 0.1);

  /* --- Component BG (Light #c4c4c4) --- */
  --cs-comp: oklch(89.804% 0.022 258.338);
  --cs-comp-50: oklch(from var(--cs-comp) l c h / 0.5);

  /* --- Component Scales (Light #c4c4c4 / Dark #4c4c4c) --- */
  --cs-comp-light: oklch(0.80 0 0);
  --cs-comp-dark: oklch(0.38 0 0);
  
  --cs-comp-light-50: oklch(from var(--cs-comp-light) l c h / 0.5);
  --cs-comp-dark-50: oklch(from var(--cs-comp-dark) l c h / 0.5);

  /* --- Light Mode Titles (#1a1a1a) --- */
  --cs-title: oklch(0.20 0 0); /* Base #1a1a1a is ~20% lightness */
  --cs-title-100: oklch(0.95 0 0);
  --cs-title-200: oklch(0.85 0 0);
  --cs-title-300: oklch(0.75 0 0);
  --cs-title-400: oklch(0.65 0 0);
  --cs-title-500: var(--cs-title);
  --cs-title-600: oklch(0.18 0 0);
  --cs-title-700: oklch(0.15 0 0);
  --cs-title-800: oklch(0.10 0 0);
  --cs-title-900: oklch(0.05 0 0);

  /* Light Mode Title Opacity Scale */
  --cs-title-90: oklch(from var(--cs-title) l c h / 0.9);
  --cs-title-80: oklch(from var(--cs-title) l c h / 0.8);
  --cs-title-70: oklch(from var(--cs-title) l c h / 0.7);
  --cs-title-60: oklch(from var(--cs-title) l c h / 0.6);
  --cs-title-50: oklch(from var(--cs-title) l c h / 0.5);
  --cs-title-40: oklch(from var(--cs-title) l c h / 0.4);
  --cs-title-30: oklch(from var(--cs-title) l c h / 0.3);
  --cs-title-20: oklch(from var(--cs-title) l c h / 0.2);
  --cs-title-10: oklch(from var(--cs-title) l c h / 0.1);

  /* --- Text Scales (Primary & Secondary) --- */
  --cs-text-primary: oklch(0.24 0 0);   /* #2a2a2a */
  --cs-text-secondary: oklch(0.42 0 0); /* #555555 */
  
  /* --- Cinescore Ratings Colors --- */
  /* --- 1-2: Burn (Red #e50914) --- */
  --cs-burn-base: oklch(0.58 0.23 28.0);
  --cs-burn-100: oklch(0.95 0.05 28.0);
  --cs-burn-200: oklch(0.85 0.10 28.0);
  --cs-burn-300: oklch(0.75 0.16 28.0);
  --cs-burn-400: oklch(0.65 0.20 28.0);
  --cs-burn-500: var(--cs-burn-base);
  --cs-burn-600: oklch(0.50 0.23 28.0);
  --cs-burn-700: oklch(0.40 0.20 28.0);
  --cs-burn-800: oklch(0.30 0.14 28.0);
  --cs-burn-900: oklch(0.15 0.07 28.0);

  /* Burn: Opacity Scale */
  --cs-burn-90: oklch(from var(--cs-burn-base) l c h / 0.9);
  --cs-burn-80: oklch(from var(--cs-burn-base) l c h / 0.8);
  --cs-burn-70: oklch(from var(--cs-burn-base) l c h / 0.7);
  --cs-burn-60: oklch(from var(--cs-burn-base) l c h / 0.6);
  --cs-burn-50: oklch(from var(--cs-burn-base) l c h / 0.5);
  --cs-burn-40: oklch(from var(--cs-burn-base) l c h / 0.4);
  --cs-burn-30: oklch(from var(--cs-burn-base) l c h / 0.3);
  --cs-burn-20: oklch(from var(--cs-burn-base) l c h / 0.2);
  --cs-burn-10: oklch(from var(--cs-burn-base) l c h / 0.1);

  /* --- 3-4: Trash (Gray #9D9D9D) --- */
  --cs-trash-base: oklch(0.68 0 0);
  --cs-trash-100: oklch(0.95 0 0);
  --cs-trash-200: oklch(0.85 0 0);
  --cs-trash-300: oklch(0.75 0 0);
  --cs-trash-400: oklch(0.70 0 0);
  --cs-trash-500: var(--cs-trash-base);
  --cs-trash-600: oklch(0.60 0 0);
  --cs-trash-700: oklch(0.50 0 0);
  --cs-trash-800: oklch(0.30 0 0);
  --cs-trash-900: oklch(0.15 0 0);

  /* Trash: Opacity Scale */
  --cs-trash-90: oklch(from var(--cs-trash-base) l c h / 0.9);
  --cs-trash-80: oklch(from var(--cs-trash-base) l c h / 0.8);
  --cs-trash-70: oklch(from var(--cs-trash-base) l c h / 0.7);
  --cs-trash-60: oklch(from var(--cs-trash-base) l c h / 0.6);
  --cs-trash-50: oklch(from var(--cs-trash-base) l c h / 0.5);
  --cs-trash-40: oklch(from var(--cs-trash-base) l c h / 0.4);
  --cs-trash-30: oklch(from var(--cs-trash-base) l c h / 0.3);
  --cs-trash-20: oklch(from var(--cs-trash-base) l c h / 0.2);
  --cs-trash-10: oklch(from var(--cs-trash-base) l c h / 0.1);

  /* --- 5-6: Basic (Green #1EFF00) --- */
  --cs-basic-base: oklch(0.86 0.29 142.5);
  --cs-basic-100: oklch(0.98 0.05 142.5);
  --cs-basic-200: oklch(0.95 0.12 142.5);
  --cs-basic-300: oklch(0.92 0.20 142.5);
  --cs-basic-400: oklch(0.89 0.25 142.5);
  --cs-basic-500: var(--cs-basic-base);
  --cs-basic-600: oklch(0.70 0.29 142.5);
  --cs-basic-700: oklch(0.55 0.25 142.5);
  --cs-basic-800: oklch(0.40 0.18 142.5);
  --cs-basic-900: oklch(0.25 0.08 142.5);

  /* Basic: Opacity Scale */
  --cs-basic-90: oklch(from var(--cs-basic-base) l c h / 0.9);
  --cs-basic-80: oklch(from var(--cs-basic-base) l c h / 0.8);
  --cs-basic-70: oklch(from var(--cs-basic-base) l c h / 0.7);
  --cs-basic-60: oklch(from var(--cs-basic-base) l c h / 0.6);
  --cs-basic-50: oklch(from var(--cs-basic-base) l c h / 0.5);
  --cs-basic-40: oklch(from var(--cs-basic-base) l c h / 0.4);
  --cs-basic-30: oklch(from var(--cs-basic-base) l c h / 0.3);
  --cs-basic-20: oklch(from var(--cs-basic-base) l c h / 0.2);
  --cs-basic-10: oklch(from var(--cs-basic-base) l c h / 0.1);

  /* --- 7-8: Epic (Blue #0070DD) --- */
  --cs-epic-base: oklch(0.52 0.20 253.9);
  --cs-epic-100: oklch(0.95 0.05 253.9);
  --cs-epic-200: oklch(0.85 0.10 253.9);
  --cs-epic-300: oklch(0.75 0.15 253.9);
  --cs-epic-400: oklch(0.65 0.18 253.9);
  --cs-epic-500: var(--cs-epic-base);
  --cs-epic-600: oklch(0.45 0.20 253.9);
  --cs-epic-700: oklch(0.35 0.16 253.9);
  --cs-epic-800: oklch(0.25 0.11 253.9);
  --cs-epic-900: oklch(0.15 0.06 253.9);

  /* Epic: Opacity Scale */
  --cs-epic-90: oklch(from var(--cs-epic-base) l c h / 0.9);
  --cs-epic-80: oklch(from var(--cs-epic-base) l c h / 0.8);
  --cs-epic-70: oklch(from var(--cs-epic-base) l c h / 0.7);
  --cs-epic-60: oklch(from var(--cs-epic-base) l c h / 0.6);
  --cs-epic-50: oklch(from var(--cs-epic-base) l c h / 0.5);
  --cs-epic-40: oklch(from var(--cs-epic-base) l c h / 0.4);
  --cs-epic-30: oklch(from var(--cs-epic-base) l c h / 0.3);
  --cs-epic-20: oklch(from var(--cs-epic-base) l c h / 0.2);
  --cs-epic-10: oklch(from var(--cs-epic-base) l c h / 0.1);

  /* --- 9-10: Legendary (Gold #e2b304) --- */
  --cs-legendary-base: oklch(0.79 0.18 85.9);
  --cs-legendary-100: oklch(0.98 0.03 85.9);
  --cs-legendary-200: oklch(0.95 0.08 85.9);
  --cs-legendary-300: oklch(0.90 0.12 85.9);
  --cs-legendary-400: oklch(0.85 0.16 85.9);
  --cs-legendary-500: var(--cs-legendary-base);
  --cs-legendary-600: oklch(0.65 0.18 85.9);
  --cs-legendary-700: oklch(0.50 0.16 85.9);
  --cs-legendary-800: oklch(0.35 0.12 85.9);
  --cs-legendary-900: oklch(0.20 0.06 85.9);

  /* Legendary: Opacity Scale */
  --cs-legendary-90: oklch(from var(--cs-legendary-base) l c h / 0.9);
  --cs-legendary-80: oklch(from var(--cs-legendary-base) l c h / 0.8);
  --cs-legendary-70: oklch(from var(--cs-legendary-base) l c h / 0.7);
  --cs-legendary-60: oklch(from var(--cs-legendary-base) l c h / 0.6);
  --cs-legendary-50: oklch(from var(--cs-legendary-base) l c h / 0.5);
  --cs-legendary-40: oklch(from var(--cs-legendary-base) l c h / 0.4);
  --cs-legendary-30: oklch(from var(--cs-legendary-base) l c h / 0.3);
  --cs-legendary-20: oklch(from var(--cs-legendary-base) l c h / 0.2);
  --cs-legendary-10: oklch(from var(--cs-legendary-base) l c h / 0.1);

  /* --- Flexible Colors --- */
  --flex-overlay-1: rgba(255, 255, 255, 0.4);
  --flex-icon-1: rgba(18, 43, 70, 0.5);
  --flex-white-black: #ffffff; /* Starts White */
  --flex-white-black-900: oklch(1 0 0 / 0.90);
  --flex-white-black-800: oklch(1 0 0 / 0.80);
  --flex-white-black-700: oklch(1 0 0 / 0.70);
  --flex-white-black-600: oklch(1 0 0 / 0.60);
  --flex-white-black-500: oklch(1 0 0 / 0.50);
  --flex-white-black-400: oklch(1 0 0 / 0.40);
  --flex-white-black-300: oklch(1 0 0 / 0.30);
  --flex-white-black-200: oklch(1 0 0 / 0.20);
  --flex-white-black-100: oklch(1 0 0 / 0.10);
  --flex-black-white: #111111; /* Starts Black */
  --flex-black-white-900: oklch(0 0 0 / 0.90);
  --flex-black-white-800: oklch(0 0 0 / 0.80);
  --flex-black-white-700: oklch(0 0 0 / 0.70);
  --flex-black-white-600: oklch(0 0 0 / 0.60);
  --flex-black-white-500: oklch(0 0 0 / 0.50);
  --flex-black-white-400: oklch(0 0 0 / 0.40);
  --flex-black-white-300: oklch(0 0 0 / 0.30);
  --flex-black-white-200: oklch(0 0 0 / 0.20);
  --flex-black-white-100: oklch(0 0 0 / 0.10);
  --contrast-1: #ffffff;
  --contrast-2: #eaeaea;
  --flex-bg-color: #e8e8e8;
  /* Black BG */
  /* Black Spy Color for Day Time Adapt*/
  --flex-bg-color-2: #e5e5e5;
  --flex-bg-color-3: #c4c4c4;
  --flex-header-bg: linear-gradient(to right, #fff 20%, #e5e5e5 100%);
  --flex-footer-bg: linear-gradient(to right, #fff 20%, #e5e5e5 100%);
  --flex-footer-color: #fff; /* Solid Footer BG */
  --flex-header-color: #fff; /* Solid Header BG */

  /* FLex Gray Color Changes */
  --flex-gray-1: var(--color-gray-100);
  --flex-gray-2: var(--color-gray-200);
  --flex-gray-3: var(--color-gray-300);
  --flex-gray-4: var(--color-gray-400);
  --flex-gray-5: var(--color-gray-500);
  --flex-gray-6: var(--color-gray-600);
  --flex-gray-7: rgba(255, 255, 255, 0.35) !important;
  --flex-gray-8: var(--color-gray-800);
  --flex-gray-15: #88888826;

  /* Flex Snarkive Brand Colors */
  --flex-snarkive: var(--cs-brand-400);
  /* Snarkive Purple */
  --flex-snarkive-90: var(--cs-brand-90);
  /* Snarkive Purple 90% Opacity */
  --flex-snarkive-50: var(--cs-brand-50);
  /* Snarkive Purple 50% Opacity */
  --flex-snarkive-rev: var(--cs-brand-2-400);
  /* Snarkive Orange Reverse */
  --flex-snarkive-rev-90: var(--cs-brand-2-90);
  /* Snarkive Orange Reverse */
  --flex-snarkive-rev-50: var(--cs-brand-2-50);
  /* Snarkive Orange Reverse */

  /* Flex Text Colors */
  --flex-text-title: #1a1a1a;
  /* Makes Titles Dark */
  --flex-text-primary: #2a2a2a;
  /* Dark grey for general text */
  --flex-text-secondary: #555555;
  /* --Cinesist-middle-grey */
  --flex-decor-border: rgba(0, 0, 0, 0.2);
  /* Subtle dark border */
  --flex-glass-bg: rgb(255, 255, 255, / 70%) !important;


  /* Flex Effects */
  --news-letter-bg: #e5e5e5;
  --flex-hover-brightness: 110%;
  /* 80% brightness (20% darker) */
  --shadow-1: 5px 10px 20px 0px #00000051;
  --shadow-7: #00000051;
  --round-10: 10px;
  /* Standard Border Radius */
  --round-5: 5px;
  --page-bg-color: #ffffff;

  /* --- Set your ticket stub colors --- */
  --ticket-bg-color: var(--flex-gray-3);
  --ticket-text-color: var(--flex-title-color);
  --ticket-text-hover: var(--cs-brand-400);
  --ticket-text-current: #111111;

  /* --- Cinescore Review Section Colors --- */
  --review-color: var(--review-accent);

  /* --- Wordpress Color Presets For Light Mode --- */
  --wp--preset--color--flex-header-bg: var(--flex-header-bg);
  --wp--preset--color--flex-footer-bg: var(--flex-footer-bg);
  --wp--preset--color--flex-bg-color: var(--flex-bg-color);
  --wp--preset--color--flex-bg-color-2: var(--flex-bg-color-2);
  --wp--preset--color--flex-snarkive: var(--flex-snarkive);
  --wp--preset--color--flex-snarkive-90: var(--flex-snarkive-90);
  --wp--preset--color--flex-snarkive-50: var(--flex-snarkive-50);
  --wp--preset--color--flex-snarkive-rev: var(--flex-snarkive-rev);
  --wp--preset--color--flex-snarkive-rev-90: var(--flex-snarkive-rev-90);
  --wp--preset--color--flex-snarkive-rev-50: var(--flex-snarkive-rev-50);
  --wp--preset--color--flex-gray-1: var(--flex-gray-1);
  --wp--preset--color--flex-gray-2: var(--flex-gray-2);
  --wp--preset--color--flex-gray-3: var(--flex-gray-3);
  --wp--preset--color--flex-gray-4: var(--flex-gray-4);
  --wp--preset--color--flex-gray-7: var(--flex-gray-7);
  --wp--preset--color--flex-text-title: var(--flex-text-title);
  --wp--preset--color--flex-text-primary: var(--flex-text-primary);
  --wp--preset--color--flex-text-secondary: var(--flex-text-secondary);
  --wp--preset--color--flex-decor-border: var(--flex-decor-border);
}

/* ====================
     Black Spy Colors For Dark Mode
==================== */
[data-theme="dark"],
.light-scheme {
  /* --- Cinesist Branded Icons --- */
  /* Dark Mode: Black & Purple Icon */
  --cinesist-card-logo: url("https://www.cinesist.com/wp-content/uploads/2025/10/Cinesist-White-Spy-Icon-Logomark-1.png");

  /* --- Cinesist Dark Branded Colors --- */
  --gc-color: #d45f35;
  /* Primary Orange Color */
  --gc-spy: #1a1b1f;
  /* Black Spy Color */
  --gc-snarkive-accent: #d45f35;
  --btn-primary: var(--flex-snarkive);
  /* Snarkive Purple to Orange */
  --btn-primary-h: var(--flex-snarkive-rev);
  /* Snarkive Purple Reverse on Hover */

  /* --- Flexible Colors --- */

  /* Custom variable for form description text color */
  --cs-spy: #1a1b1f;
  --flex-overlay-1: rgba(0, 0, 0, 0.4);
  --flex-icon-1: rgb(229, 232, 235, 0.5);

  /* --- White to Black Scale --- */
  --flex-white-black: #111111; /* Starts Black */
  --flex-white-black-900: oklch(0 0 0 / 0.90);
  --flex-white-black-800: oklch(0 0 0 / 0.80);
  --flex-white-black-700: oklch(0 0 0 / 0.70);
  --flex-white-black-600: oklch(0 0 0 / 0.60);
  --flex-white-black-500: oklch(0 0 0 / 0.50);
  --flex-white-black-400: oklch(0 0 0 / 0.40);
  --flex-white-black-300: oklch(0 0 0 / 0.30);
  --flex-white-black-200: oklch(0 0 0 / 0.20);
  --flex-white-black-100: oklch(0 0 0 / 0.10);

  /* --- Black to White Scale --- */
  --flex-black-white: #ffffff; /* Starts White */
  --flex-black-white-900: oklch(1 0 0 / 0.90);
  --flex-black-white-800: oklch(1 0 0 / 0.80);
  --flex-black-white-700: oklch(1 0 0 / 0.70);
  --flex-black-white-600: oklch(1 0 0 / 0.60);
  --flex-black-white-500: oklch(1 0 0 / 0.50);
  --flex-black-white-400: oklch(1 0 0 / 0.40);
  --flex-black-white-300: oklch(1 0 0 / 0.30);
  --flex-black-white-200: oklch(1 0 0 / 0.20);
  --flex-black-white-100: oklch(1 0 0 / 0.10);

  /* --- Contrast Scale --- */
  --contrast-1: #000000;
  --contrast-2: #131313;
  --flex-bg-color: #282828;
  /* White BG */

  /* --- Brand Flex: Orange to Purple --- */
  /* --- Brand: Orange (#d45f35) to Brand: Purple (#d102d1) --- */
  --cs-brand: oklch(0.624 0.158 39.51);
  --cs-brand-50: oklch(0.958 0.018 26.18);
  --cs-brand-100: oklch(0.926 0.032 27.46);
  --cs-brand-200: oklch(0.852 0.066 30.1);
  --cs-brand-300: oklch(0.779 0.108 32.98);
  --cs-brand-400: oklch(0.706 0.161 37.82);
  --cs-brand-500: oklch(0.624 0.158 39.51);
  --cs-brand-600: oklch(0.531 0.135 39.32);
  --cs-brand-700: oklch(0.433 0.11 39.24);
  --cs-brand-800: oklch(0.335 0.085 39.24);
  --cs-brand-900: oklch(0.239 0.06 39.29);
  --cs-brand-950: oklch(0.18 0.046 38.7);
  
  /* Brand: Orange Opacity Scale */
  --cs-brand-90: oklch(from var(--cs-brand) l c h / 0.9);
  --cs-brand-80: oklch(from var(--cs-brand) l c h / 0.8);
  --cs-brand-70: oklch(from var(--cs-brand) l c h / 0.7);
  --cs-brand-60: oklch(from var(--cs-brand) l c h / 0.6);
  --cs-brand-50: oklch(from var(--cs-brand) l c h / 0.5);
  --cs-brand-40: oklch(from var(--cs-brand) l c h / 0.4);
  --cs-brand-30: oklch(from var(--cs-brand) l c h / 0.3);
  --cs-brand-20: oklch(from var(--cs-brand) l c h / 0.2);
  --cs-brand-10: oklch(from var(--cs-brand) l c h / 0.1);

  /* --- Brand: Purple (#d102d1) to Brand: Orange (#d45f35) --- */
  --cs-brand-2: oklch(0.604 0.277 328.37);
  --cs-brand-2-50: oklch(0.962 0.034 325.9);
  --cs-brand-2-100: oklch(0.921 0.072 326.17);
  --cs-brand-2-200: oklch(0.846 0.148 326.8);
  --cs-brand-2-300: oklch(0.771 0.233 327.56);
  --cs-brand-2-400: oklch(0.698 0.32 328.37);
  --cs-brand-2-500: oklch(0.604 0.277 328.37);
  --cs-brand-2-600: oklch(0.514 0.236 328.37);
  --cs-brand-2-700: oklch(0.424 0.194 328.37);
  --cs-brand-2-800: oklch(0.331 0.152 328.37);
  --cs-brand-2-900: oklch(0.239 0.11 328.37);
  --cs-brand-2-950: oklch(0.188 0.087 328.37);

  /* Brand: Purple Opacity Scale */
  --cs-brand-2-90: oklch(from var(--cs-brand-2) l c h / 0.9);
  --cs-brand-2-80: oklch(from var(--cs-brand-2) l c h / 0.8);
  --cs-brand-2-70: oklch(from var(--cs-brand-2) l c h / 0.7);
  --cs-brand-2-60: oklch(from var(--cs-brand-2) l c h / 0.6);
  --cs-brand-2-50: oklch(from var(--cs-brand-2) l c h / 0.5);
  --cs-brand-2-40: oklch(from var(--cs-brand-2) l c h / 0.4);
  --cs-brand-2-30: oklch(from var(--cs-brand-2) l c h / 0.3);
  --cs-brand-2-20: oklch(from var(--cs-brand-2) l c h / 0.2);
  --cs-brand-2-10: oklch(from var(--cs-brand-2) l c h / 0.1);

  /* --- Dark Mode Neutral Scale (#242424 Base) --- */
  --cs-bg: oklch(0.2603 0 0);
  --cs-bg-100: oklch(12% 0.009 255.046);
  --cs-bg-500: var(--cs-bg);
  --cs-bg-900: oklch(33.588% 0.033 261.424);

  /* Dark Mode BG Opacities */
  --cs-bg-90: oklch(from var(--cs-bg) l c h / 0.9);
  --cs-bg-50: oklch(from var(--cs-bg) l c h / 0.5);
  --cs-bg-10: oklch(from var(--cs-bg) l c h / 0.1);

  /* --- Dark Mode Rich Scale (#0D0D0D Base) --- */
  --cs-bg-2: oklch(0.1591 0 0);
  --cs-bg-2-100: oklch(87.2% 0.01 258.338);
  --cs-bg-2-500: var(--cs-bg-2);
  --cs-bg-2-900: oklch(33.588% 0.033 261.424);
  
  /* Dark Mode BG Opacities */
  --cs-bg-2-90: oklch(from var(--cs-bg-2) l c h / 0.9);
  --cs-bg-2-50: oklch(from var(--cs-bg-2) l c h / 0.5);
  --cs-bg-2-10: oklch(from var(--cs-bg-2) l c h / 0.1); 

  /* --- Component Scales (Dark #4c4c4c) --- */
  --cs-comp: oklch(0.38 0 0);
  --cs-comp-50: oklch(from var(--cs-comp) l c h / 0.5);

  /* --- Dark Mode Titles (#e5e5e5) --- */
  --cs-title: oklch(0.91 0 0); /* Base #e5e5e5 is ~91% lightness */
  --cs-title-100: oklch(0.98 0 0);
  --cs-title-200: oklch(0.95 0 0);
  --cs-title-300: var(--cs-title);
  --cs-title-400: oklch(0.85 0 0);
  --cs-title-500: oklch(0.75 0 0);
  --cs-title-600: oklch(0.65 0 0);
  --cs-title-700: oklch(0.50 0 0);
  --cs-title-800: oklch(0.35 0 0);
  --cs-title-900: oklch(0.20 0 0);

  /* Dark Mode Title Opacity Scale */
  --cs-title-90: oklch(from var(--cs-title) l c h / 0.9);
  --cs-title-80: oklch(from var(--cs-title) l c h / 0.8);
  --cs-title-70: oklch(from var(--cs-title) l c h / 0.7);
  --cs-title-60: oklch(from var(--cs-title) l c h / 0.6);
  --cs-title-50: oklch(from var(--cs-title) l c h / 0.5);
  --cs-title-40: oklch(from var(--cs-title) l c h / 0.4);
  --cs-title-30: oklch(from var(--cs-title) l c h / 0.3);
  --cs-title-20: oklch(from var(--cs-title) l c h / 0.2);
  --cs-title-10: oklch(from var(--cs-title) l c h / 0.1);

  /* --- Text Scales (Primary & Secondary) --- */
  --cs-text-primary: oklch(0.94 0 0);    /* #ededed */
  --cs-text-secondary: oklch(0.70 0 0);   /* #aaaaaa */

  /* White Spy Color for Night Time Adapt */
  --flex-bg-color-2: #1a1b1f;
  --flex-bg-color-3: #353839;
  /* Black Spy Color for Dark Mode */

  /* Flex Color For Header Footer */
  --flex-header-bg: linear-gradient(to right, #000000 20%, #1a1b1f 100%);
  --flex-footer-bg: linear-gradient(to right, #000000 20%, #1a1b1f 100%);
  --flex-footer-color: #000; /* Solid Footer BG */
  --flex-header-color: #000; /* Solid Header BG */

  /* FLex Gray Color Changes */
  --flex-gray-1: var(--color-neutral-900);
  --flex-gray-2: var(--color-neutral-800);
  --flex-gray-3: var(--color-neutral-700);
  --flex-gray-4: var(--color-neutral-600);
  --flex-gray-5: var(--color-neutral-500);
  --flex-gray-6: var(--color-neutral-400);
  --flex-gray-7: rgba(0, 0, 0, 0.35) !important;
  --flex-gray-8: var(--color-neutral-300);
  --flex-gray-15: #88888840;
  --color-cine-border: var(--color-neutral-800);
  --flex-snarkive: var(--cs-brand-400);
  /* Snarkive Orange */
  --flex-snarkive-90: var(--cs-brand-90);
  /* Snarkive Orange 90% Opacity */
  --flex-snarkive-50: var(--cs-brand-50);
  /* Snarkive Orange 50% Opacity */
  --flex-snarkive-rev: var(--cs-brand-2-400);
  /* Snarkive Purple Reverse */
  --flex-snarkive-rev-90: var(--cs-brand-2-90);
  /* Snarkive Purple Reverse 90% Opacity */
  --flex-snarkive-rev-50: var(--cs-brand-2-50);
  /* Snarkive Purple Reverse 50% Opacity */
  --flex-text-title: #ffffff;
  /* Makes Titles Gleam White */
  --flex-text-primary: #f0f0f0;
  /* Off-white for general text */
  --flex-text-secondary: #cccccc;
  /* --Cinesist-light-grey */
  --flex-decor-border: rgba(255, 255, 255, 0.2);
  /* Subtle white border */
  --flex-glass-bg: rgb(0 0 0 / 60%) !important;
  --news-letter-bg: #1a1b1f;
  --flex-hover-brightness: 1.2;
  /* 120% brightness (20% brighter) */
  --shadow-1: 5px 10px 20px 0px #0000004d;
  --page-bg-color: #111111;

  /* --- Set your ticket stub colors --- */
  --ticket-bg-color: var(--flex-gray-3);
  --ticket-text-color: var(--flex-title-color);
  --ticket-text-hover: #d45f35;
  /* Kept your orange! */
  --ticket-text-current: #ffffff;

  /* --- Wordpress Color Presets For Light Mode --- */
  --wp--preset--color--flex-header-bg: var(--flex-header-bg);
  --wp--preset--color--flex-footer-bg: var(--flex-footer-bg);
  --wp--preset--color--flex-bg-color: var(--flex-bg-color);
  --wp--preset--color--flex-bg-color-2: var(--flex-bg-color-2);
  --wp--preset--color--flex-snarkive: var(--flex-snarkive);
  --wp--preset--color--flex-snarkive-90: var(--flex-snarkive-90);
  --wp--preset--color--flex-snarkive-50: var(--flex-snarkive-50);
  --wp--preset--color--flex-snarkive-rev: var(--flex-snarkive-rev);
  --wp--preset--color--flex-snarkive-rev-90: var(--flex-snarkive-rev-90);
  --wp--preset--color--flex-snarkive-rev-50: var(--flex-snarkive-rev-50);
  --wp--preset--color--flex-gray-1: var(--flex-gray-1);
  --wp--preset--color--flex-gray-2: var(--flex-gray-2);
  --wp--preset--color--flex-gray-3: var(--flex-gray-3);
  --wp--preset--color--flex-gray-4: var(--flex-gray-4);
  --wp--preset--color--flex-gray-7: var(--flex-gray-7);
  --wp--preset--color--flex-text-title: var(--flex-text-title);
  --wp--preset--color--flex-text-primary: var(--flex-text-primary);
  --wp--preset--color--flex-text-secondary: var(--flex-text-secondary);
  --wp--preset--color--flex-decor-border: var(--flex-decor-border);
}

/* ====================
   End Cinesist System Tokens
   ==================== */


/*
-----------------
1 - Framework
-----------------
*/

/* --- Admin Visibility Protocol --- */
.cs-admin-only {
  display: none !important;
}

body.is-admin-user .cs-admin-only {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  font-size: 0.7rem;
  font-family: var(--wp--preset--font-family--space-grotesk, monospace);
  color: var(--cinesist-gold, #ffd700);
  vertical-align: middle;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Selection Glow --- */
::selection {
  background: var(--flex-snarkive);
  color: #fff;
}

/*
-----------------
2 - General
-----------------
*/

html :where(.editor-styles-wrapper) p {
  font-family: var(--body-family);
  font-size: var(--body-fsize);
  font-weight: var(--body-fweight);
  font-style: var(--body-font-style);
  line-height: var(--body-fheight, 1.7);
  letter-spacing: var(--body-fspace);
  text-transform: var(--body-transform);
  color: var(--body-fcolor);
  margin-bottom: 2rem !important;
}

html :where(.editor-styles-wrapper) h1, 
html :where(.editor-styles-wrapper) h2, 
html :where(.editor-styles-wrapper) h3, 
html :where(.editor-styles-wrapper) h4, 
html :where(.editor-styles-wrapper) h5, 
html :where(.editor-styles-wrapper) h6 {
  font-family: var(--body-family);
  font-size: var(--body-fsize);
  font-weight: var(--body-fweight);
  font-style: var(--body-font-style);
  line-height: var(--body-fheight, 1.7);
  letter-spacing: var(--body-fspace);
  text-transform: var(--body-transform);
  color: var(--body-fcolor);
  margin-bottom: 1rem !important;
}
html :where(.editor-styles-wrapper) h1 {
  font-size: var(--cs-font-size-h1) !important;
  line-height: var(--line-height-h1) !important;
  letter-spacing: var(--cs-tracking-h1) !important;
  font-weight: var(--cs-heading-weight) !important;
}
html :where(.editor-styles-wrapper) h2 {
  font-size: var(--cs-font-size-h2) !important;
  line-height: var(--line-height-h2) !important;
  letter-spacing: var(--cs-tracking-h2) !important;
  font-weight: var(--cs-heading-weight) !important;
}
html :where(.editor-styles-wrapper) h3 {
  font-size: var(--cs-font-size-h3) !important;
  line-height: var(--line-height-h3) !important;
  letter-spacing: var(--cs-tracking-h3) !important;
  font-weight: var(--cs-heading-weight) !important;
}
html :where(.editor-styles-wrapper) h4 {
  font-size: var(--cs-font-size-h4) !important;
  line-height: var(--line-height-h4) !important;
  letter-spacing: var(--cs-tracking-h4) !important;
  font-weight: var(--cs-heading-weight) !important;
}
html :where(.editor-styles-wrapper) h5 {
  font-size: var(--cs-font-size-h5) !important;
  line-height: var(--line-height-h5) !important;
  letter-spacing: var(--cs-tracking-h5) !important;
  font-weight: var(--cs-heading-weight) !important;
}
html :where(.editor-styles-wrapper) h6 {
  font-size: var(--cs-font-size-h6) !important;
  line-height: var(--line-height-h6) !important;
  letter-spacing: var(--cs-tracking-h6) !important;
  font-weight: var(--font-weight-bold) !important;
  text-transform: uppercase !important;
}

body :where(.editor-styles-wrapper) {
  --gb-container-width: 1520px;
  background-color: #fff !important;
}

.editor-styles-wrapper.block-editor-writing-flow {
  background-color: #ffffff !important;
}

/*
-----------------
3 - Layout
-----------------
*/

/* --- Global Container Protocol --- */
/* Full Width Website section */
.cs-section {
  width: 100%;
}

/* Cinesist Wrapper - Holds the max site width of website - use to insulate the section and hold the content or container at 1520px */
.cs-wrapper {
  width: 100%;
  margin-inline: auto;
  max-width: var(--cs-width-xl);
/* Optional: adds a safety gutter for mobile */
  padding-inline: 20px;
}

/* Container Block - Holds 1300px Inner Content to maintain virtual gutters */
.cs-content {
  max-width: var(--cs-width-lg);
  width: 100%;
  margin: 0 auto;
}
/* --- 1.1: Layout & Containers --- */

/* Ultra-Wide Container (1520px) - Great for high-end galleries or hero areas */
.cs-container-wide {
  width: var(--cs-width-full);
  max-width: var(--cs-width-xl);
  margin: 0 auto;
}

/* Standard Site Container (1300px limit) - Our default content width */
.cs-container,
.cs-main,
.inner-w {
  width: var(--cs-width-full) !important;
  max-width: var(--cs-width-lg) !important;
  margin-inline: auto;
}

/* Full Width Utility - For background bleeds */
.full-w {
  width: 100% !important;
  max-width: none !important;
}

/* Narrow Focus Container (1000px) - Best for readability on long-form blog posts */
.cs-narrow,
.cs-container-narrow {
  width: var(--cs-width-full);
  max-width: var(--cs-width-md);
  margin: 0 auto;
}

/* Minimalist Focus (800px) - Use for single column, text-heavy focus */
.cs-container-focus {
  width: var(--cs-width-full);
  max-width: var(--cs-width-sm);
  margin: 0 auto;
}

/* --- Fluid Headings & Noto Color Emoji --- */
/* ====================
   2 - Typography Protocol
   ==================== */

h1, .h1 {
  font-size: var(--cs-font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--cs-tracking-h1);
  font-weight: var(--cs-heading-weight);
}

h2, .h2 {
  font-size: var(--cs-font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--cs-tracking-h2);
  font-weight: var(--cs-heading-weight);
}

h3, .h3 {
  font-size: var(--cs-font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--cs-tracking-h3);
  font-weight: var(--cs-heading-weight);
}

h4, .h4 {
  font-size: var(--cs-font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--cs-tracking-h4);
  font-weight: var(--font-weight-bold);
}

h5, .h5 {
  font-size: var(--cs-font-size-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--cs-tracking-h5);
  font-weight: var(--font-weight-bold);
}

h6, .h6 {
  font-size: var(--cs-font-size-h6);
  line-height: var(--line-height-h6);
  letter-spacing: var(--cs-tracking-h6);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

h2.cs-review-blurb {
  margin-bottom: 1.5rem !important;
  text-shadow: 1px 1px var(--flex-snarkive) !important;
  font-size: var(--cs-font-size-h2) !important;
  line-height: var(--line-height-h2) !important;
}

.cs-review-body__article h1,
.cs-review-body__article h2,
.cs-review-body__article h3,
.cs-review-body__article h4,
.cs-review-body__article h5,
.cs-review-body__article h6,
.cs-review-body__article figcaption {
  margin-bottom: 1rem;
}

@media (min-width: 1025px) {
  .review-content {
      padding: 0px !important;
  }
}

figcaption,
.wp-caption-text {
    font-family: var(--cs-font-secondary);
    font-size: var(--cs-font-size-caption)!important;
    font-weight: 500;
    font-style: var(--meta-fstyle);
    letter-spacing: var(--meta-fspace);
    text-transform: var(--meta-transform);
    margin-bottom: var(--cs-spacing-reg)!important;
}

/* Custom Patterns & Animations */
.bg-data-pattern {
  background-image: radial-gradient(var(--cs-brand-400) 2px, transparent 2px);
  background-size: 32px 32px;
  background-position: 0 0;
  opacity: 0.3;
  transition: all 0.5s ease;
  position: fixed;
  inset: calc(var(--spacing) * 0);
  pointer-events: none;
}

.dark .bg-data-pattern {
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--cs-brand-2-400) 2px, var(--cs-brand-2-400) 4px),
                    linear-gradient(90deg, var(--cs-brand-2-400) 1px, transparent 1px);
  background-size: 100% 4px, 40px 100%;
  opacity: 0.1;
}

.data-scan-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, transparent 0%, var(--cs-brand-400) 50%, transparent 100%);
  background-size: 100% 200%;
  opacity: 0.15;
  animation: dataFlowScan 6s linear infinite;
  pointer-events: none;
}

.dark .data-scan-line {
  background: linear-gradient(to bottom, transparent 0%, var(--cs-brand-2-400) 50%, transparent 100%);
  opacity: 0.15;
  animation: dataFlowScan 4s linear infinite;
}

@keyframes dataFlowScan {
  0% { background-position: 0 -100%; }
  100% { background-position: 0 200%; }
}

/* Glitch Effects */
.glitch-text-red {
  position: relative;
  color: #ff0000;
  z-index: 1;
  display: inline-block;
}

.glitch-text-red::before,
.glitch-text-red::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  transition: background 0.3s;
}

.glitch-text-red::before {
  left: 2px;
  text-shadow: -2px 0 #8b0000;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
  z-index: -1;
}

.glitch-text-red::after {
  left: -2px;
  text-shadow: -2px 0 #ff0000;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
  z-index: -2;
}

@keyframes glitch-anim {
  0% { clip: rect(10px, 9999px, 83px, 0); }
  20% { clip: rect(61px, 9999px, 14px, 0); }
  40% { clip: rect(14px, 9999px, 89px, 0); }
  60% { clip: rect(98px, 9999px, 100px, 0); }
  80% { clip: rect(32px, 9999px, 24px, 0); }
  100% { clip: rect(81px, 9999px, 12px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(29px, 9999px, 92px, 0); }
  20% { clip: rect(8px, 9999px, 32px, 0); }
  40% { clip: rect(65px, 9999px, 99px, 0); }
  60% { clip: rect(38px, 9999px, 18px, 0); }
  80% { clip: rect(85px, 9999px, 66px, 0); }
  100% { clip: rect(12px, 9999px, 81px, 0); }
}

/* Default Foxiz Padding: Set to left and right edge (20px*2). */
.edge-padding {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/* --- Hyperlinks Style --- */

/* --- Button Style --- */
.is-btn {
  color: var(--awhite) !important;
}

.is-button a:hover {
  color: var(--awhite);
}


/* --- Framework Sub-Utilities --- */

/* Padding */
.cs-padding-4xs {
  padding: var(--cs-space-4xs);
}

.cs-padding-3xs {
  padding: var(--cs-space-3xs);
}

.cs-padding-2xs {
  padding: var(--cs-space-2xs);
}

.cs-padding-xs {
  padding: var(--cs-space-xs);
}

.cs-padding-s {
  padding: var(--cs-space-s);
}

.cs-padding-m {
  padding: var(--cs-space-m);
}

.cs-padding-l {
  padding: var(--cs-space-l);
}

.cs-padding-xl {
  padding: var(--cs-space-xl);
}

.cs-padding-2xl {
  padding: var(--cs-space-2xl);
}

.cs-padding-3xl {
  padding: var(--cs-space-3xl);
}

.cs-padding-4xl {
  padding: var(--cs-space-4xl);
}

.cs-padding-left-4xs {
  padding-left: var(--cs-space-4xs);
}

.cs-padding-left-3xs {
  padding-left: var(--cs-space-3xs);
}

.cs-padding-left-2xs {
  padding-left: var(--cs-space-2xs);
}

.cs-padding-left-xs {
  padding-left: var(--cs-space-xs);
}

.cs-padding-left-s {
  padding-left: var(--cs-space-s);
}

.cs-padding-left-m {
  padding-left: var(--cs-space-m);
}

.cs-padding-left-l {
  padding-left: var(--cs-space-l);
}

.cs-padding-left-xl {
  padding-left: var(--cs-space-xl);
}

.cs-padding-left-2xl {
  padding-left: var(--cs-space-2xl);
}

.cs-padding-left-3xl {
  padding-left: var(--cs-space-3xl);
}

.cs-padding-left-4xl {
  padding-left: var(--cs-space-4xl);
}

.cs-padding-right-4xs {
  padding-right: var(--cs-space-4xs);
}

.cs-padding-right-3xs {
  padding-right: var(--cs-space-3xs);
}

.cs-padding-right-2xs {
  padding-right: var(--cs-space-2xs);
}

.cs-padding-right-xs {
  padding-right: var(--cs-space-xs);
}

.cs-padding-right-s {
  padding-right: var(--cs-space-s);
}

.cs-padding-right-m {
  padding-right: var(--cs-space-m);
}

.cs-padding-right-l {
  padding-right: var(--cs-space-l);
}

.cs-padding-right-xl {
  padding-right: var(--cs-space-xl);
}

.cs-padding-right-2xl {
  padding-right: var(--cs-space-2xl);
}

.cs-padding-right-3xl {
  padding-right: var(--cs-space-3xl);
}

.cs-padding-right-4xl {
  padding-right: var(--cs-space-4xl);
}

.cs-padding-top-4xs {
  padding-top: var(--cs-space-4xs);
}

.cs-padding-top-3xs {
  padding-top: var(--cs-space-3xs);
}

.cs-padding-top-2xs {
  padding-top: var(--cs-space-2xs);
}

.cs-padding-top-xs {
  padding-top: var(--cs-space-xs);
}

.cs-padding-top-s {
  padding-top: var(--cs-space-s);
}

.cs-padding-top-m {
  padding-top: var(--cs-space-m);
}

.cs-padding-top-l {
  padding-top: var(--cs-space-l);
}

.cs-padding-top-xl {
  padding-top: var(--cs-space-xl);
}

.cs-padding-top-2xl {
  padding-top: var(--cs-space-2xl);
}

.cs-padding-top-3xl {
  padding-top: var(--cs-space-3xl);
}

.cs-padding-top-4xl {
  padding-top: var(--cs-space-4xl);
}

.cs-padding-bottom-4xs {
  padding-bottom: var(--cs-space-4xs);
}

.cs-padding-bottom-3xs {
  padding-bottom: var(--cs-space-3xs);
}

.cs-padding-bottom-2xs {
  padding-bottom: var(--cs-space-2xs);
}

.cs-padding-bottom-xs {
  padding-bottom: var(--cs-space-xs);
}

.cs-padding-bottom-s {
  padding-bottom: var(--cs-space-s);
}

.cs-padding-bottom-m {
  padding-bottom: var(--cs-space-m);
}

.cs-padding-bottom-l {
  padding-bottom: var(--cs-space-l);
}

.cs-padding-bottom-xl {
  padding-bottom: var(--cs-space-xl);
}

.cs-padding-bottom-2xl {
  padding-bottom: var(--cs-space-2xl);
}

.cs-padding-bottom-3xl {
  padding-bottom: var(--cs-space-3xl);
}

.cs-padding-bottom-4xl {
  padding-bottom: var(--cs-space-4xl);
}

.cs-padding-horizontal-4xs {
  padding-left: var(--cs-space-4xs);
  padding-right: var(--cs-space-4xs);
}

.cs-padding-horizontal-3xs {
  padding-left: var(--cs-space-3xs);
  padding-right: var(--cs-space-3xs);
}

.cs-padding-horizontal-2xs {
  padding-left: var(--cs-space-2xs);
  padding-right: var(--cs-space-2xs);
}

.cs-padding-horizontal-xs {
  padding-left: var(--cs-space-xs);
  padding-right: var(--cs-space-xs);
}

.cs-padding-horizontal-s {
  padding-left: var(--cs-space-s);
  padding-right: var(--cs-space-s);
}

.cs-padding-horizontal-m {
  padding-left: var(--cs-space-m);
  padding-right: var(--cs-space-m);
}

.cs-padding-horizontal-l {
  padding-left: var(--cs-space-l);
  padding-right: var(--cs-space-l);
}

.cs-padding-horizontal-xl {
  padding-left: var(--cs-space-xl);
  padding-right: var(--cs-space-xl);
}

.cs-padding-horizontal-2xl {
  padding-left: var(--cs-space-2xl);
  padding-right: var(--cs-space-2xl);
}

.cs-padding-horizontal-3xl {
  padding-left: var(--cs-space-3xl);
  padding-right: var(--cs-space-3xl);
}

.cs-padding-horizontal-4xl {
  padding-left: var(--cs-space-4xl);
  padding-right: var(--cs-space-4xl);
}

.cs-padding-vertical-4xs {
  padding-top: var(--cs-space-4xs);
  padding-bottom: var(--cs-space-4xs);
}

.cs-padding-vertical-3xs {
  padding-top: var(--cs-space-3xs);
  padding-bottom: var(--cs-space-3xs);
}

.cs-padding-vertical-2xs {
  padding-top: var(--cs-space-2xs);
  padding-bottom: var(--cs-space-2xs);
}

.cs-padding-vertical-xs {
  padding-top: var(--cs-space-xs);
  padding-bottom: var(--cs-space-xs);
}

.cs-padding-vertical-s {
  padding-top: var(--cs-space-s);
  padding-bottom: var(--cs-space-s);
}

.cs-padding-vertical-m {
  padding-top: var(--cs-space-m);
  padding-bottom: var(--cs-space-m);
}

.cs-padding-vertical-l {
  padding-top: var(--cs-space-l);
  padding-bottom: var(--cs-space-l);
}

.cs-padding-vertical-xl {
  padding-top: var(--cs-space-xl);
  padding-bottom: var(--cs-space-xl);
}

.cs-padding-vertical-2xl {
  padding-top: var(--cs-space-2xl);
  padding-bottom: var(--cs-space-2xl);
}

.cs-padding-vertical-3xl {
  padding-top: var(--cs-space-3xl);
  padding-bottom: var(--cs-space-3xl);
}

.cs-padding-vertical-4xl {
  padding-top: var(--cs-space-4xl);
  padding-bottom: var(--cs-space-4xl);
}

/* Margins */
.cs-margin-4xs {
  margin: var(--cs-space-4xs);
}

.cs-margin-3xs {
  margin: var(--cs-space-3xs);
}

.cs-margin-2xs {
  margin: var(--cs-space-2xs);
}

.cs-margin-xs {
  margin: var(--cs-space-xs);
}

.cs-margin-s {
  margin: var(--cs-space-s);
}

.cs-margin-m {
  margin: var(--cs-space-m);
}

.cs-margin-l {
  margin: var(--cs-space-l);
}

.cs-margin-xl {
  margin: var(--cs-space-xl);
}

.cs-margin-2xl {
  margin: var(--cs-space-2xl);
}

.cs-margin-3xl {
  margin: var(--cs-space-3xl);
}

.cs-margin-4xl {
  margin: var(--cs-space-4xl);
}

.cs-margin-left-4xs {
  margin-left: var(--cs-space-4xs);
}

.cs-margin-left-3xs {
  margin-left: var(--cs-space-3xs);
}

.cs-margin-left-2xs {
  margin-left: var(--cs-space-2xs);
}

.cs-margin-left-xs {
  margin-left: var(--cs-space-xs);
}

.cs-margin-left-s {
  margin-left: var(--cs-space-s);
}

.cs-margin-left-m {
  margin-left: var(--cs-space-m);
}

.cs-margin-left-l {
  margin-left: var(--cs-space-l);
}

.cs-margin-left-xl {
  margin-left: var(--cs-space-xl);
}

.cs-margin-left-2xl {
  margin-left: var(--cs-space-2xl);
}

.cs-margin-left-3xl {
  margin-left: var(--cs-space-3xl);
}

.cs-margin-left-4xl {
  margin-left: var(--cs-space-4xl);
}

.cs-margin-right-4xs {
  margin-right: var(--cs-space-4xs);
}

.cs-margin-right-3xs {
  margin-right: var(--cs-space-3xs);
}

.cs-margin-right-2xs {
  margin-right: var(--cs-space-2xs);
}

.cs-margin-right-xs {
  margin-right: var(--cs-space-xs);
}

.cs-margin-right-s {
  margin-right: var(--cs-space-s);
}

.cs-margin-right-m {
  margin-right: var(--cs-space-m);
}

.cs-margin-right-l {
  margin-right: var(--cs-space-l);
}

.cs-margin-right-xl {
  margin-right: var(--cs-space-xl);
}

.cs-margin-right-2xl {
  margin-right: var(--cs-space-2xl);
}

.cs-margin-right-3xl {
  margin-right: var(--cs-space-3xl);
}

.cs-margin-right-4xl {
  margin-right: var(--cs-space-4xl);
}

.cs-margin-top-4xs {
  margin-top: var(--cs-space-4xs);
}

.cs-margin-top-3xs {
  margin-top: var(--cs-space-3xs);
}

.cs-margin-top-2xs {
  margin-top: var(--cs-space-2xs);
}

.cs-margin-top-xs {
  margin-top: var(--cs-space-xs);
}

.cs-margin-top-s {
  margin-top: var(--cs-space-s);
}

.cs-margin-top-m {
  margin-top: var(--cs-space-m);
}

.cs-margin-top-l {
  margin-top: var(--cs-space-l);
}

.cs-margin-top-xl {
  margin-top: var(--cs-space-xl);
}

.cs-margin-top-2xl {
  margin-top: var(--cs-space-2xl);
}

.cs-margin-top-3xl {
  margin-top: var(--cs-space-3xl);
}

.cs-margin-top-4xl {
  margin-top: var(--cs-space-4xl);
}

.cs-margin-bottom-4xs {
  margin-bottom: var(--cs-space-4xs);
}

.cs-margin-bottom-3xs {
  margin-bottom: var(--cs-space-3xs);
}

.cs-margin-bottom-2xs {
  margin-bottom: var(--cs-space-2xs);
}

.cs-margin-bottom-xs {
  margin-bottom: var(--cs-space-xs);
}

.cs-margin-bottom-s {
  margin-bottom: var(--cs-space-s);
}

.cs-margin-bottom-m {
  margin-bottom: var(--cs-space-m);
}

.cs-margin-bottom-l {
  margin-bottom: var(--cs-space-l);
}

.cs-margin-bottom-xl {
  margin-bottom: var(--cs-space-xl);
}

.cs-margin-bottom-2xl {
  margin-bottom: var(--cs-space-2xl);
}

.cs-margin-bottom-3xl {
  margin-bottom: var(--cs-space-3xl);
}

.cs-margin-bottom-4xl {
  margin-bottom: var(--cs-space-4xl);
}

.cs-margin-horizontal-4xs {
  margin-left: var(--cs-space-4xs);
  margin-right: var(--cs-space-4xs);
}

.cs-margin-horizontal-3xs {
  margin-left: var(--cs-space-3xs);
  margin-right: var(--cs-space-3xs);
}

.cs-margin-horizontal-2xs {
  margin-left: var(--cs-space-2xs);
  margin-right: var(--cs-space-2xs);
}

.cs-margin-horizontal-xs {
  margin-left: var(--cs-space-xs);
  margin-right: var(--cs-space-xs);
}

.cs-margin-horizontal-s {
  margin-left: var(--cs-space-s);
  margin-right: var(--cs-space-s);
}

.cs-margin-horizontal-m {
  margin-left: var(--cs-space-m);
  margin-right: var(--cs-space-m);
}

.cs-margin-horizontal-l {
  margin-left: var(--cs-space-l);
  margin-right: var(--cs-space-l);
}

.cs-margin-horizontal-xl {
  margin-left: var(--cs-space-xl);
  margin-right: var(--cs-space-xl);
}

.cs-margin-horizontal-2xl {
  margin-left: var(--cs-space-2xl);
  margin-right: var(--cs-space-2xl);
}

.cs-margin-horizontal-3xl {
  margin-left: var(--cs-space-3xl);
  margin-right: var(--cs-space-3xl);
}

.cs-margin-horizontal-4xl {
  margin-left: var(--cs-space-4xl);
  margin-right: var(--cs-space-4xl);
}

.cs-margin-vertical-4xs {
  margin-top: var(--cs-space-4xs);
  margin-bottom: var(--cs-space-4xs);
}

.cs-margin-vertical-3xs {
  margin-top: var(--cs-space-3xs);
  margin-bottom: var(--cs-space-3xs);
}

.cs-margin-vertical-2xs {
  margin-top: var(--cs-space-2xs);
  margin-bottom: var(--cs-space-2xs);
}

.cs-margin-vertical-xs {
  margin-top: var(--cs-space-xs);
  margin-bottom: var(--cs-space-xs);
}

.cs-margin-vertical-s {
  margin-top: var(--cs-space-s);
  margin-bottom: var(--cs-space-s);
}

.cs-margin-vertical-m {
  margin-top: var(--cs-space-m);
  margin-bottom: var(--cs-space-m);
}

.cs-margin-vertical-l {
  margin-top: var(--cs-space-l);
  margin-bottom: var(--cs-space-l);
}

.cs-margin-vertical-xl {
  margin-top: var(--cs-space-xl);
  margin-bottom: var(--cs-space-xl);
}

.cs-margin-vertical-2xl {
  margin-top: var(--cs-space-2xl);
  margin-bottom: var(--cs-space-2xl);
}

.cs-margin-vertical-3xl {
  margin-top: var(--cs-space-3xl);
  margin-bottom: var(--cs-space-3xl);
}

.cs-margin-vertical-4xl {
  margin-top: var(--cs-space-4xl);
  margin-bottom: var(--cs-space-4xl);
}

/* Gaps */
.cs-gap-4xs {
  gap: var(--cs-space-4xs);
}

.cs-gap-3xs {
  gap: var(--cs-space-3xs);
}

.cs-gap-2xs {
  gap: var(--cs-space-2xs);
}

.cs-gap-xs {
  gap: var(--cs-space-xs);
}

.cs-gap-s {
  gap: var(--cs-space-s);
}

.cs-gap-m {
  gap: var(--cs-space-m);
}

.cs-gap-l {
  gap: var(--cs-space-l);
}

.cs-gap-xl {
  gap: var(--cs-space-xl);
}

.cs-gap-2xl {
  gap: var(--cs-space-2xl);
}

.cs-gap-3xl {
  gap: var(--cs-space-3xl);
}

.cs-gap-4xl {
  gap: var(--cs-space-4xl);
}

/* ====================
  Components
==================== */
/* Components */

.cs-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cs-space-4xs);
  padding: var(--cs-space-2xs) var(--cs-space-s);
  background: var(--cs-dark-10);
  color: var(--cs-primary);
  font-size: var(--text-s);
  font-weight: 500;
  border-radius: var(--cs-radius-full);
  border: 0;
  outline: 0;
}

.cs-badge.secondary {
  color: var(--cs-secondary);
}

.cs-link {
  color: var(--cs-primary);
  font-size: var(--text-m);
  font-weight: 600;
  letter-spacing: 0.05rem;
  box-shadow: 0 2px 0 var(--cs-primary-20);
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.cs-link:hover {
  box-shadow: 0 2px 0 var(--cs-primary-40);
}

.cs-link:focus {
  background: var(--cs-primary-10);
}

.cs-link.secondary {
  color: var(--cs-secondary);
  border-color: var(--cs-secondary-20);
}

.cs-link.tertiary {
  color: var(--tertiary);
  border-color: var(--tertiary-20);
}

.cs-input {
  padding: var(--cs-space-xs) var(--cs-space-s);
  background: var(--cs-dark-5);
  color: var(--cs-text-title);
  font-size: var(--text-m);
  font-weight: 500;
  border-radius: var(--cs-radius-m);
  border: 1px solid var(--cs-border-primary);
  box-shadow: var(--cs-shadow-xs);
  transition: all 0.25s ease-in-out;
  appearance: none;
  outline: 0;
}

.cs-input:focus {
  background: var(--cs-primary-20);
  border-color: var(--cs-primary);
  box-shadow: var(--cs-shadow-l);
}

.cs-input:hover {
  border-color: var(--cs-primary);
  background: transparent;
  box-shadow: var(--cs-shadow-l);
}

.cs-input::placeholder {
  color: var(--cs-dark-40);
}

.cs-input:invalid {
  border-color: var(--cs-error);
  background: var(--cs-error-10);
}

.cs-input:disabled {
  cursor: not-allowed;
  opacity: .75;
  box-shadow: none;
  background: var(--cs-dark-10);
}

.cs-select {
  padding: var(--cs-space-xs) var(--cs-space-s);
  background: var(--cs-dark-5);
  color: var(--cs-text-body);
  font-size: var(--text-m);
  font-weight: 500;
  border-radius: var(--cs-radius-m);
  border: 1px solid var(--cs-border-primary);
  box-shadow: var(--cs-shadow-xs);
  transition: all 0.25s ease-in-out;
  outline: 0;
}

.cs-select:focus {
  background: var(--cs-primary-20);
  border-color: var(--cs-primary);
}

.cs-select:hover {
  border-color: var(--cs-primary);
}

.cs-select::placeholder {
  color: var(--cs-dark-40);
}

.cs-select:invalid {
  border-color: var(--cs-error);
  background: var(--cs-error-10);
}

.cs-select:disabled {
  cursor: not-allowed;
  opacity: .75;
  box-shadow: none;
  background: var(--cs-dark-10);
}

.cs-card {
  display: grid;
  gap: var(--cs-space-xs);
  padding: var(--cs-space-m);
  font-size: var(--text-m);
  color: var(--cs-text-body);
  background: var(--cs-bg-surface);
  line-height: 1.3;
  border-radius: var(--cs-radius-m);
  box-shadow: var(--cs-shadow-m);
}

.cs-card.secondary {
  background: var(--cs-secondary);
  color: #fff;
}

.cs-card.primary {
  background: var(--cs-primary);
  color: #fff;
}

.cs-icon {
  color: var(--cs-primary);
  width: var(--cs-space-2xl);
  height: auto;
  font-size: var(--cs-space-2xl);
}

.cs-icon.large {
  width: var(--cs-space-3xl);
  font-size: var(--cs-space-3xl);
}

.cs-icon.secondary {
  color: var(--cs-secondary);
}

.cs-icon.tertiary {
  color: var(--tertiary);
}

.cs-icon.outline {
  padding: 0.5em;
  border: 1px solid var(--cs-border-primary);
  border-radius: 100%;
  box-sizing: content-box;
}

.cs-icon.filled {
  padding: 0.5em;
  border-radius: 100%;
  box-sizing: content-box;
  background: var(--cs-dark-10);
}

.cs-icon.small {
  width: var(--cs-space-l);
  font-size: var(--cs-space-l);
}

.cs-avatar {
  width: var(--cs-space-2xl);
  height: var(--cs-space-2xl);
  border-radius: 100%;
  box-shadow: var(--cs-shadow-m);
  object-fit: cover;
}

.cs-avatar.small {
  width: var(--cs-space-l);
  height: var(--cs-space-l);
}

.cs-avatar.large {
  width: var(--cs-space-4xl);
  height: var(--cs-space-4xl);
}

.cs-divider {
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 1px;
  height: 1px;
  max-height: 1px;
  background: var(--cs-border-primary);
  margin: var(--cs-space-m) 0;
  border: 0;
}

.cs-divider.vertical {
  min-width: 1px;
  width: 1px;
  max-width: 1px;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
}

.cs-checkbox {
  appearance: none;
  display: grid;
  place-content: center;
  border: 2px solid var(--cs-dark-40);
  border-radius: var(--cs-radius-s);
  width: clamp(1.13rem, calc(-0.38vw + 1.49rem), 1.38rem);
  height: clamp(1.13rem, calc(-0.38vw + 1.49rem), 1.38rem);
}

.cs-checkbox:checked:before {
  transform: scale(1);
}

.cs-checkbox::before {
  content: "";
  width: 1em;
  height: 1em;
  box-shadow: inset 1em 1em #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform 0.2s;
}

.cs-checkbox:hover {
  border-color: var(--cs-primary);
}

.cs-checkbox:focus {
  outline: 3px solid var(--cs-primary-l-3);
  outline-offset: 2px;
}

.cs-checkbox:checked {
  background: var(--cs-primary);
  border-color: var(--cs-primary);
}

.cs-radio {
  appearance: none;
  display: grid;
  place-content: center;
  border: 2px solid var(--cs-dark-40);
  border-radius: var(--cs-radius-full);
  width: clamp(1.13rem, calc(-0.38vw + 1.49rem), 1.38rem);
  height: clamp(1.13rem, calc(-0.38vw + 1.49rem), 1.38rem);
}

.cs-radio:checked:before {
  transform: scale(1);
}

.cs-radio::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 100%;
  transform: scale(0);
  transition: transform 0.2s;
  background: var(--cs-primary);
}

.cs-radio:hover {
  border-color: var(--cs-primary);
}

.cs-radio:focus {
  outline: 3px solid var(--cs-primary-l-3);
  outline-offset: 2px;
}

.cs-radio:checked {
  border-color: var(--cs-primary);
}

/* Text Modifiers */
.cs-italic {
  font-style: italic;
}

.cs-bold {
  font-weight: bold;
}

.cs-lowercase {
  text-transform: lowercase;
}

.cs-uppercase {
  text-transform: uppercase;
}

.cs-underline {
  text-decoration: underline;
}

.cs-font-100 {
  font-weight: 100;
}

.cs-font-200 {
  font-weight: 200;
}

.cs-font-300 {
  font-weight: 300;
}

.cs-font-400 {
  font-weight: 400;
}

.cs-font-500 {
  font-weight: 500;
}

.cs-font-600 {
  font-weight: 600;
}

.cs-font-700 {
  font-weight: 700;
}

.cs-font-800 {
  font-weight: 800;
}

.cs-font-900 {
  font-weight: 900;
}

/* Text Alignment */
.cs-text-left {
  text-align: left;
}

.cs-text-center {
  text-align: center;
}

.cs-text-right {
  text-align: right;
}

.cs-text-justify {
  text-align: justify;
}

/* --- Tailwind Static Grid Utilities --- */
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Grid Columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Column Spans */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-full { grid-column: 1 / -1; }

.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }

/* Grid Rows */
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

/* Row Spans */
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-full { grid-row: 1 / -1; }

.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }

/* Global Gaps */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* Column Gaps */
.gap-c-1 { column-gap: 0.25rem; }
.gap-c-2 { column-gap: 0.5rem; }
.gap-c-3 { column-gap: 0.75rem; }
.gap-c-4 { column-gap: 1rem; }
.gap-c-6 { column-gap: 1.5rem; }
.gap-c-8 { column-gap: 2rem; }
.gap-c-10 { column-gap: 2.5rem; }
.gap-c-12 { column-gap: 3rem; }

/* Row Gaps */
.gap-r-1 { row-gap: 0.25rem; }
.gap-r-2 { row-gap: 0.5rem; }
.gap-r-3 { row-gap: 0.75rem; }
.gap-r-4 { row-gap: 1rem; }
.gap-r-6 { row-gap: 1.5rem; }
.gap-r-8 { row-gap: 2rem; }
.gap-r-10 { row-gap: 2.5rem; }
.gap-r-12 { row-gap: 3rem; }

/* Responsive Helpers */
@media (min-width: 768px) {
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:col-span-full { grid-column: 1 / -1; }
    .md\:gap-4 { gap: 1rem; }
}

@media (min-width: 1300px) {
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
    .lg\:col-span-full { grid-column: 1 / -1; }
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:row-span-1 { grid-row: span 1 / span 1; }
    .lg\:row-span-2 { grid-row: span 2 / span 2; }
    .lg\:col-start-1 { grid-column-start: 1; }
    .lg\:col-start-2 { grid-column-start: 2; }
    .lg\:col-start-4 { grid-column-start: 4; }
    .lg\:row-start-1 { grid-row-start: 1; }
    .lg\:row-start-2 { grid-row-start: 2; }
    .lg\:gap-4 { gap: 1rem; }
    .lg\:gap-8 { gap: 2rem; }
}

/* Grid Layouts */
.cs-row {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
}

.cs-column {
  display: grid;
  grid-auto-flow: row;
  justify-items: start;
  align-content: start;
}

.cs-columns-2 {
  display: grid;
  grid-template-columns: var(--columns-2);
}

.cs-columns-3 {
  display: grid;
  grid-template-columns: var(--columns-3);
}

.cs-columns-4 {
  display: grid;
  grid-template-columns: var(--columns-4);
}

.cs-columns-5 {
  display: grid;
  grid-template-columns: var(--columns-5);
}

.cs-columns-6 {
  display: grid;
  grid-template-columns: var(--columns-6);
}

.cs-columns-7 {
  display: grid;
  grid-template-columns: var(--columns-7);
}

.cs-columns-8 {
  display: grid;
  grid-template-columns: var(--columns-8);
}

/* Automatic Columns */
.cs-columns-min-5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}

.cs-columns-min-10 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.cs-columns-min-20 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.cs-columns-min-30 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}

.cs-columns-min-40 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
}

.cs-columns-min-50 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
}

.cs-columns-min-60 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60rem, 1fr));
}

.cs-columns-min-70 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70rem, 1fr));
}

/* Simple Flex Layouts */
.cs-flex-row {
  display: flex;
  flex-direction: row;
}

.cs-flex-column {
  display: flex;
  flex-direction: column;
}

.cs-flex-1 {
  flex: 1;
}

.cs-flex-2 {
  flex: 2;
}

.cs-flex-3 {
  flex: 3;
}

.cs-flex-wrap {
  flex-wrap: wrap;
}

.cs-flex-nowrap {
  flex-wrap: nowrap;
}

/* Grid Column Span */
.cs-col-span-2 {
  grid-column: auto / span 2;
}

.cs-col-span-3 {
  grid-column: auto / span 3;
}

.cs-col-span-4 {
  grid-column: auto / span 4;
}

.cs-col-span-5 {
  grid-column: auto / span 5;
}

.cs-col-span-6 {
  grid-column: auto / span 6;
}

.cs-col-span-7 {
  grid-column: auto / span 7;
}

.cs-col-span-8 {
  grid-column: auto / span 8;
}

/* Grid Column Start */
.cs-col-start-1 {
  grid-column-start: 1;
}

.cs-col-start-2 {
  grid-column-start: 2;
}

.cs-col-start-3 {
  grid-column-start: 3;
}

.cs-col-start-4 {
  grid-column-start: 4;
}

.cs-col-start-5 {
  grid-column-start: 5;
}

.cs-col-start-6 {
  grid-column-start: 6;
}

.cs-col-start-7 {
  grid-column-start: 7;
}

.cs-col-start-8 {
  grid-column-start: 8;
}

/* Grid Row Span */
.cs-row-span-2 {
  grid-row: auto / span 2;
}

.cs-row-span-3 {
  grid-row: auto / span 3;
}

.cs-row-span-4 {
  grid-row: auto / span 4;
}

.cs-row-span-5 {
  grid-row: auto / span 5;
}

.cs-row-span-6 {
  grid-row: auto / span 6;
}

.cs-row-span-7 {
  grid-row: auto / span 7;
}

.cs-row-span-8 {
  grid-row: auto / span 8;
}

/* Grid Row Start */
.cs-row-start-1 {
  grid-row-start: 1;
}

.cs-row-start-2 {
  grid-row-start: 2;
}

.cs-row-start-3 {
  grid-row-start: 3;
}

.cs-row-start-4 {
  grid-row-start: 4;
}

.cs-row-start-5 {
  grid-row-start: 5;
}

.cs-row-start-6 {
  grid-row-start: 6;
}

.cs-row-start-7 {
  grid-row-start: 7;
}

.cs-row-start-8 {
  grid-row-start: 8;
}

/* Alignments */
.cs-items-left {
  justify-items: start;
}

.cs-content-left {
  justify-content: start;
}

.cs-items-center {
  justify-items: center;
}

.cs-content-center {
  justify-content: center;
}

.cs-items-right {
  justify-items: end;
}

.cs-content-right {
  justify-content: end;
}

.cs-items-top {
  align-items: start;
}

.cs-content-top {
  align-content: start;
}

.cs-items-middle {
  align-items: center;
}

.cs-content-middle {
  align-content: center;
}

.cs-items-bottom {
  align-items: end;
}

.cs-content-bottom {
  align-content: end;
}

.cs-items-stretch {
  align-items: stretch;
}

.cs-content-stretch {
  justify-content: stretch;
}

.cs-space-between {
  justify-content: space-between;
}

.cs-space-around {
  justify-content: space-around;
}

/* Self Alignments */
.cs-self-left {
  margin-right: auto;
  place-self: start;
}

.cs-self-center {
  margin-inline: auto;
  place-self: center;
}

.cs-self-right {
  margin-left: auto;
  place-self: end;
}

.cs-self-top {
  margin-bottom: auto;
  align-self: start;
}

.cs-self-middle {
  margin-block: auto;
  align-self: center;
}

.cs-self-bottom {
  margin-top: auto;
  align-self: end;
}

.cs-self-stretch {
  align-self: stretch;
}

/* Dimensions */
.cs-full-width {
  width: 100%;
}

.cs-full-height {
  height: 100%;
}

.cs-screen-width {
  width: 100vw;
}

.cs-screen-height {
  height: 100vh;
}

.cs-auto-width {
  width: auto;
}

.cs-auto-height {
  height: auto;
}

.cs-width-90 {
  width: 90%;
}

.cs-width-80 {
  width: 80%;
}

.cs-width-70 {
  width: 70%;
}

.cs-width-60 {
  width: 60%;
}

.cs-width-50 {
  width: 50%;
}

.cs-width-40 {
  width: 40%;
}

.cs-width-30 {
  width: 30%;
}

.cs-width-20 {
  width: 20%;
}

.cs-width-10 {
  width: 10%;
}

/* Max Width */
.cs-max-site-width {
  max-width: var(--cs-max-screen-width);
  width: 100%;
}

.cs-max-width-140 {
  max-width: 140rem;
}

.cs-max-width-130 {
  max-width: 130rem;
}

.cs-max-width-120 {
  max-width: 120rem;
}

.cs-max-width-110 {
  max-width: 110rem;
}

.cs-max-width-100 {
  max-width: 100rem;
}

.cs-max-width-90 {
  max-width: 90rem;
}

.cs-max-width-80 {
  max-width: 80rem;
}

.cs-max-width-70 {
  max-width: 70rem;
}

.cs-max-width-60 {
  max-width: 60rem;
}

.cs-max-width-50 {
  max-width: 50rem;
}

.cs-max-width-40 {
  max-width: 40rem;
}

.cs-max-width-30 {
  max-width: 30rem;
}

.cs-max-width-20 {
  max-width: 20rem;
}

.cs-max-width-10 {
  max-width: 10rem;
}

/* Border Radius */
.cs-radius-xs {
  border-radius: var(--cs-radius-xs);
}

.cs-radius-s {
  border-radius: var(--cs-radius-s);
}

.cs-radius-m {
  border-radius: var(--cs-radius-m);
}

.cs-radius-l {
  border-radius: var(--cs-radius-l);
}

.cs-radius-xl {
  border-radius: var(--cs-radius-xl);
}

.cs-radius-full {
  border-radius: var(--cs-radius-full);
}

/* Borders */
.cs-border {
  border-width: 1px;
  border-style: solid;
}

.cs-border-left {
  border-left-width: 1px;
  border-left-style: solid;
}

.cs-border-right {
  border-right-width: 1px;
  border-right-style: solid;
}

.cs-border-top {
  border-top-width: 1px;
  border-top-style: solid;
}

.cs-border-bottom {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

/* Shadows */
.cs-shadow-xs {
  box-shadow: var(--cs-shadow-xs);
}

.cs-shadow-s {
  box-shadow: var(--cs-shadow-s);
}

.cs-shadow-m {
  box-shadow: var(--cs-shadow-m);
}

.cs-shadow-l {
  box-shadow: var(--cs-shadow-l);
}

.cs-shadow-xl {
  box-shadow: var(--cs-shadow-xl);
}

/* Opacity */
.cs-opacity-0 {
  opacity: 0;
}

.cs-opacity-10 {
  opacity: 0.1;
}

.cs-opacity-20 {
  opacity: 0.2;
}

.cs-opacity-30 {
  opacity: 0.3;
}

.cs-opacity-40 {
  opacity: 0.4;
}

.cs-opacity-50 {
  opacity: 0.5;
}

.cs-opacity-60 {
  opacity: 0.6;
}

.cs-opacity-70 {
  opacity: 0.7;
}

.cs-opacity-80 {
  opacity: 0.8;
}

.cs-opacity-90 {
  opacity: 0.9;
}

.cs-opacity-100 {
  opacity: 1;
}

/* Aspect Ratios */
.cs-aspect-1 {
  aspect-ratio: 1;
}

.cs-aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.cs-aspect-3-4 {
  aspect-ratio: 3 / 4;
}

.cs-aspect-3-2 {
  aspect-ratio: 3 / 2;
}

.cs-aspect-2-3 {
  aspect-ratio: 2 / 3;
}

.cs-aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.cs-aspect-9-16 {
  aspect-ratio: 9 / 16;
}

/* Image Fit */
.cs-fit-contain {
  object-fit: contain;
}

.cs-fit-cover {
  object-fit: cover;
}

.cs-fit-fill {
  object-fit: fill;
}

/* Backdrop Blur */
.cs-bg-blur-xs {
  backdrop-filter: blur(2px);
}

.cs-bg-blur-s {
  backdrop-filter: blur(4px);
}

.cs-bg-blur-m {
  backdrop-filter: blur(8px);
}

.cs-bg-blur-l {
  backdrop-filter: blur(16px);
}

.cs-bg-blur-xl {
  backdrop-filter: blur(32px);
}

/* Filters */
.cs-grayscale {
  filter: grayscale(1);
}

/* Transforms */
.cs-rotate-90 {
  transform: rotate(90deg);
}

.cs-rotate-180 {
  transform: rotate(180deg);
}

/* Positioning */
.cs-relative {
  position: relative;
}

.cs-absolute {
  position: absolute;
}

.cs-sticky {
  position: sticky;
}

.cs-fixed {
  position: fixed;
}

.cs-inset-0 {
  inset: 0;
}

.cs-bottom-0 {
  bottom: 0;
}

.cs-top-0 {
  top: 0;
}

.cs-left-0 {
  left: 0;
}

.cs-right-0 {
  right: 0;
}

/* Cursors */
.cs-pointer {
  cursor: pointer;
}

.cs-not-allowed {
  cursor: not-allowed;
}

.cs-cursor-auto {
  cursor: auto;
}

.cs-no-pointer-events {
  pointer-events: none;
}

/* Z-Index */
.cs-z--1 {
  z-index: -1;
}

.cs-z-0 {
  z-index: 0;
}

.cs-z-1 {
  z-index: 1;
}

.cs-z-10 {
  z-index: 10;
}

.cs-z-100 {
  z-index: 100;
}

.cs-z-1000 {
  z-index: 1000;
}

.cs-z-10000 {
  z-index: 10000;
}

@media (max-width: 1400px) {
  .cs-column--on-xl {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .cs-row--on-xl {
    grid-template-columns: unset;
    grid-auto-flow: column;
  }

  .cs-columns-2--on-xl {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-columns-3--on-xl {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-columns-4--on-xl {
    grid-template-columns: repeat(4, 1fr);
  }

  .cs-columns-5--on-xl {
    grid-template-columns: repeat(5, 1fr);
  }

  .cs-columns-6--on-xl {
    grid-template-columns: repeat(6, 1fr);
  }

  .cs-col-span-1--on-xl {
    grid-column: auto / span 1;
  }

  .cs-col-span-2--on-xl {
    grid-column: auto / span 2;
  }

  .cs-col-span-3--on-xl {
    grid-column: auto / span 3;
  }

  .cs-col-span-4--on-xl {
    grid-column: auto / span 4;
  }

  .cs-col-span-5--on-xl {
    grid-column: auto / span 5;
  }

  .cs-col-span-6--on-xl {
    grid-column: auto / span 6;
  }

  .cs-col-start-1--on-xl {
    grid-column-start: 1;
  }

  .cs-col-start-2--on-xl {
    grid-column-start: 2;
  }

  .cs-col-start-3--on-xl {
    grid-column-start: 3;
  }

  .cs-col-start-4--on-xl {
    grid-column-start: 4;
  }

  .cs-col-start-5--on-xl {
    grid-column-start: 5;
  }

  .cs-col-start-6--on-xl {
    grid-column-start: 6;
  }

  .cs-row-span-1--on-xl {
    grid-row: auto / span 1;
  }

  .cs-row-span-2--on-xl {
    grid-row: auto / span 2;
  }

  .cs-row-span-3--on-xl {
    grid-row: auto / span 3;
  }

  .cs-row-span-4--on-xl {
    grid-row: auto / span 4;
  }

  .cs-row-span-5--on-xl {
    grid-row: auto / span 5;
  }

  .cs-row-span-6--on-xl {
    grid-row: auto / span 6;
  }

  .cs-row-start-1--on-xl {
    grid-row-start: 1;
  }

  .cs-row-start-2--on-xl {
    grid-row-start: 2;
  }

  .cs-row-start-3--on-xl {
    grid-row-start: 3;
  }

  .cs-row-start-4--on-xl {
    grid-row-start: 4;
  }

  .cs-row-start-5--on-xl {
    grid-row-start: 5;
  }

  .cs-row-start-6--on-xl {
    grid-row-start: 6;
  }
}

@media (max-width: 992px) {
  .cs-column--on-l {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .cs-row--on-l {
    grid-template-columns: unset;
    grid-auto-flow: column;
  }

  .cs-columns-2--on-l {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-columns-3--on-l {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-columns-4--on-l {
    grid-template-columns: repeat(4, 1fr);
  }

  .cs-columns-5--on-l {
    grid-template-columns: repeat(5, 1fr);
  }

  .cs-columns-6--on-l {
    grid-template-columns: repeat(6, 1fr);
  }

  .cs-col-span-1--on-l {
    grid-column: auto / span 1;
  }

  .cs-col-span-2--on-l {
    grid-column: auto / span 2;
  }

  .cs-col-span-3--on-l {
    grid-column: auto / span 3;
  }

  .cs-col-span-4--on-l {
    grid-column: auto / span 4;
  }

  .cs-col-span-5--on-l {
    grid-column: auto / span 5;
  }

  .cs-col-span-6--on-l {
    grid-column: auto / span 6;
  }

  .cs-col-start-1--on-l {
    grid-column-start: 1;
  }

  .cs-col-start-2--on-l {
    grid-column-start: 2;
  }

  .cs-col-start-3--on-l {
    grid-column-start: 3;
  }

  .cs-col-start-4--on-l {
    grid-column-start: 4;
  }

  .cs-col-start-5--on-l {
    grid-column-start: 5;
  }

  .cs-col-start-6--on-l {
    grid-column-start: 6;
  }

  .cs-row-span-1--on-l {
    grid-row: auto / span 1;
  }

  .cs-row-span-2--on-l {
    grid-row: auto / span 2;
  }

  .cs-row-span-3--on-l {
    grid-row: auto / span 3;
  }

  .cs-row-span-4--on-l {
    grid-row: auto / span 4;
  }

  .cs-row-span-5--on-l {
    grid-row: auto / span 5;
  }

  .cs-row-span-6--on-l {
    grid-row: auto / span 6;
  }

  .cs-row-start-1--on-l {
    grid-row-start: 1;
  }

  .cs-row-start-2--on-l {
    grid-row-start: 2;
  }

  .cs-row-start-3--on-l {
    grid-row-start: 3;
  }

  .cs-row-start-4--on-l {
    grid-row-start: 4;
  }

  .cs-row-start-5--on-l {
    grid-row-start: 5;
  }

  .cs-row-start-6--on-l {
    grid-row-start: 6;
  }
}

@media (max-width: 768px) {
  .cs-column--on-m {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .cs-row--on-m {
    grid-template-columns: unset;
    grid-auto-flow: column;
  }

  .cs-columns-2--on-m {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-columns-3--on-m {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-columns-4--on-m {
    grid-template-columns: repeat(4, 1fr);
  }

  .cs-columns-5--on-m {
    grid-template-columns: repeat(5, 1fr);
  }

  .cs-columns-6--on-m {
    grid-template-columns: repeat(6, 1fr);
  }

  .cs-col-span-1--on-m {
    grid-column: auto / span 1;
  }

  .cs-col-span-2--on-m {
    grid-column: auto / span 2;
  }

  .cs-col-span-3--on-m {
    grid-column: auto / span 3;
  }

  .cs-col-span-4--on-m {
    grid-column: auto / span 4;
  }

  .cs-col-span-5--on-m {
    grid-column: auto / span 5;
  }

  .cs-col-span-6--on-m {
    grid-column: auto / span 6;
  }

  .cs-col-start-1--on-m {
    grid-column: 1;
  }

  .cs-col-start-2--on-m {
    grid-column: 2;
  }

  .cs-col-start-3--on-m {
    grid-column: 3;
  }

  .cs-col-start-4--on-m {
    grid-column: 4;
  }

  .cs-col-start-5--on-m {
    grid-column: 5;
  }

  .cs-col-start-6--on-m {
    grid-column: 6;
  }

  .cs-row-span-1--on-m {
    grid-row: auto / span 1;
  }

  .cs-row-span-2--on-m {
    grid-row: auto / span 2;
  }

  .cs-row-span-3--on-m {
    grid-row: auto / span 3;
  }

  .cs-row-span-4--on-m {
    grid-row: auto / span 4;
  }

  .cs-row-span-5--on-m {
    grid-row: auto / span 5;
  }

  .cs-row-span-6--on-m {
    grid-row: auto / span 6;
  }

  .cs-row-start-1--on-m {
    grid-row-start: 1;
  }

  .cs-row-start-2--on-m {
    grid-row-start: 2;
  }

  .cs-row-start-3--on-m {
    grid-row-start: 3;
  }

  .cs-row-start-4--on-m {
    grid-row-start: 4;
  }

  .cs-row-start-5--on-m {
    grid-row-start: 5;
  }

  .cs-row-start-6--on-m {
    grid-row-start: 6;
  }
}

@media (max-width: 480px) {
  .cs-column--on-s {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .cs-row--on-s {
    grid-template-columns: 1fr;
    grid-auto-flow: column;
  }

  .cs-columns-2--on-s {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-columns-3--on-s {
    grid-template-columns: repeat(3, 1fr);
  }

  .cs-columns-4--on-s {
    grid-template-columns: repeat(4, 1fr);
  }

  .cs-columns-5--on-s {
    grid-template-columns: repeat(5, 1fr);
  }

  .cs-columns-6--on-s {
    grid-template-columns: repeat(6, 1fr);
  }

  .cs-col-span-1--on-s {
    grid-column: auto / span 1;
  }

  .cs-col-span-2--on-s {
    grid-column: auto / span 2;
  }

  .cs-col-span-3--on-s {
    grid-column: auto / span 3;
  }

  .cs-col-span-4--on-s {
    grid-column: auto / span 4;
  }

  .cs-col-span-5--on-s {
    grid-column: auto / span 5;
  }

  .cs-col-span-6--on-s {
    grid-column: auto / span 6;
  }

  .cs-col-start-1--on-s {
    grid-column-start: 1;
  }

  .cs-col-start-2--on-s {
    grid-column-start: 2;
  }

  .cs-col-start-3--on-s {
    grid-column-start: 3;
  }

  .cs-col-start-4--on-s {
    grid-column-start: 4;
  }

  .cs-col-start-5--on-s {
    grid-column-start: 5;
  }

  .cs-col-start-6--on-s {
    grid-column-start: 6;
  }

  .cs-row-span-1--on-s {
    grid-row: auto / span 1;
  }

  .cs-row-span-2--on-s {
    grid-row: auto / span 2;
  }

  .cs-row-span-3--on-s {
    grid-row: auto / span 3;
  }

  .cs-row-span-4--on-s {
    grid-row: auto / span 4;
  }

  .cs-row-span-5--on-s {
    grid-row: auto / span 5;
  }

  .cs-row-span-6--on-s {
    grid-row: auto / span 6;
  }

  .cs-row-start-1--on-s {
    grid-row-start: 1;
  }

  .cs-row-start-2--on-s {
    grid-row-start: 2;
  }

  .cs-row-start-3--on-s {
    grid-row-start: 3;
  }

  .cs-row-start-4--on-s {
    grid-row-start: 4;
  }

  .cs-row-start-5--on-s {
    grid-row-start: 5;
  }

  .cs-row-start-6--on-s {
    grid-row-start: 6;
  }
}

/* --- Cinesist Grid --- */
@media (width >=992px) {
  .grid-container {
    flex-flow: row nowrap;
  }

  .grid-container>*:nth-child(1) {
    flex: 100%;
    width: 100%;
  }

  .grid-container>*:nth-child(2) {
    flex: 100%;
    width: 100%;
  }
}

/** desktop */
@media (width >=1025px) {
  .grid-container {
    margin-right: 0px;
    margin-left: 0px;
  }

  .grid-container>* {
    padding-right: 0px;
    padding-left: 0px;
  }
}

/* --- Utility Classes --- */

.cs-display-none {
  display: none;
}

.cs-visible {
  visibility: visible;
}

.cs-hidden {
  visibility: hidden;
}

.cs-overflow-hidden {
  overflow: hidden;
}

.cs-overflow-auto {
  overflow: auto;
}

.cs-overflow-x-hidden {
  overflow-x: hidden;
}

.cs-overflow-x-auto {
  overflow-x: auto;
}

.cs-overflow-y-hidden {
  overflow-y: hidden;
}

.cs-overflow-y-auto {
  overflow-y: auto;
}

.cs-list-none {
  list-style-type: none;
}

.cs-white-space-nowrap {
  white-space: nowrap;
}

.cs-transition-global {
  transition: all 0.3s;
}

/* --- Zoom Animations --- */

/* Image Zoom and Brighten Effect */
.cs-zoom {
  position: relative;
  overflow: hidden;
  display: block;
}

/* The Image (Base State) */
/* 2. The Zooming Image */
.cs-zoom img {
  transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1), 
              filter 0.8s ease-in-out !important;
  will-change: transform;          /* Fixes the "stuck" performance issue */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
}

/* The Isolated Action */
/* Only zooms the image if its specific parent container (.cs-zoom) is hovered */
.cs-zoom:hover img {
  filter: brightness(110%) !important;
  transform: scale(1.08) !important;
}
/* Image Zoom and Brighten Effect */
.cs-zoom-2 {
  position: relative;
  overflow: clip;
  display: block;
}

/* The Image (Base State) */
.cs-zoom-2 img {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, filter;
  transform: scale(1);
  /* Ensure a base scale is set */
}

/* The Isolated Action */
/* Only zooms the image if its specific parent container (.cs-zoom) is hovered */
.cs-zoom-2:hover img {
  filter: brightness(110%) !important;
  transform: scale(1.05) !important;
}

/* 1. The Container */
.cs-zoom-2 {
  position: relative;
  overflow: hidden; /* Changed from clip for better corner support */
  display: block;
}

/* 2. The Image (Base State) */
.cs-zoom-2 img {
  /* Snappier 0.3s duration matches the 'vibe' better than 0.8s */
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
  display: block; /* Removes bottom whitespace gap in some themes */
  width: 100%;
  height: auto;
  transform: scale(1);
}

/* 3. The Hover State */
.cs-zoom-2:hover img {
  filter: brightness(1.1); /* Matches your 110% but slightly cleaner syntax */
  transform: scale(1.04);  /* 1.05 is good, 1.04 is a bit more elegant for galleries */
}


/* 1. The Overlay Container */
.cs-overlay {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  /* Matches your .cs-zoom logic */
}

/* 2. The Gradient Layer */
.cs-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  /* Allows clicking the image underneath */

  /* Premium Gradient: Transparent -> 70% Black */
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0.7) 100%);

  /* Smooth fade in case you want to toggle it */
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* 3. Ensure HUD Text stays ON TOP of the gradient */
.cs-overlay .cinescore-hud,
.cs-overlay .grid-meta {
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 3;
  /* Higher than the ::after layer */
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* Extra crispness */
}

/* Line Clamp 1 - to keep all of the headings and excerpts uniform and end them with ellipsis (Premium Look) */
.cs-line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  text-overflow: ellipsis;
  /* Optional: Add a min-height for uniform alignment
  min-height: 60px; */
}

/* Line Clamp 2 - to keep all of the headings and excerpts uniform and end them with ellipsis (Premium Look) */
.cs-line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    /* Optional: Add a min-height for uniform alignment
    min-height: 60px; */
}

/* Line Clamp 3 - to keep all of the headings and excerpts uniform and end them with ellipsis (Premium Look) */
.cs-line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    text-overflow: ellipsis;
    /* Optional: Add a min-height for uniform alignment
    min-height: 60px; */
}

/**
* Animations
**/

/* Dual Color Loading Animation */
/* HTML: <div class="jw-loader"></div> */
.jw-loader {
  width: fit-content;
  font-weight: bold;
  color: currentColor;
  background: linear-gradient(90deg, currentColor calc(50% + 0.5ch), currentColor 0) right/calc(200% + 1ch) 100%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: l7 2s infinite steps(11);
}
.jw-loader:before {
  content:"Downloading Data..."
}
@keyframes l7 {to{background-position: left}}

/* --- Core Component Resets --- */

.wp-site-blocks {
  padding: 0;
}

/* --- Cinesist Wrapper gives us Nice Uniform Gutters --- */
.edge-margin {
  margin: 0 20px;
  margin-block-end: 0 !important;
  margin-block-start: 0 !important;
}

/* For elements that need to span the full width */
.breakout {
  grid-column: 1 / -1;
}

/* --- Mobile Gutters --- */
@media (min-width: 768px) {
  .wrapper {
    /* --margin-gutter: 2rem; */
    padding: 0.5rem 2rem;
  }
}

/* --- Smaller Screen Gutters --- */
@media (min-width: 1024px) {
  .wrapper {
    --margin-gutter: 3rem;
    padding: 0 3rem;
  }
}

/* --- Laptop Gutters --- */
@media (min-width: 1440px) {
  .wrapper {
    --margin-gutter: 80px;
    padding: 0 80px;
  }
}

/* --- Cinesist Framework Over Rides: Checking Relevancy as this made Blocksy Spacing use our spacing --- */

/* --- Display Post Card Titles --- */
.entry-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  /* Adjust this number to limit lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Ensures ellipsis appears */
}

/* --- Table of Contents Override --- */
.rbtoc {
  display: inline-flex;
  float: none;
  flex-flow: column nowrap;
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  padding: 20px 20px 13px;
  border-radius: var(--round-5);
  background-color: var(--toc-bg, var(--flex-gray-7));
  box-shadow: 0 5px 30px var(--shadow-7);
}

/* --- Comments Section Style --- */

#comment {
  border-width: 2px;
  border-style: groove;
  border-color: var(--flex-snarkive) !important;
  border-radius: 10px;
  box-shadow:
    inset 0px 2px 5px rgba(0, 0, 0, 0.3),
    inset 0px -2px 5px rgba(255, 255, 255, 0.5);
}

.bookmarked .follow-i svg {
  color: red;
}

/* --- Global Icon Sets & Logic --- */

/* --- Global Icon Protocol --- */
i[class^="rbi-"],
i[class*=" rbi-"],
.fa-solid,
.fa-regular {
  transition: color 0.3s ease, transform 0.2s ease;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}


/* --- Foxiz Bookmark Hijack (Protocol e906/e907) --- */
.rbi-plus:before {
  content: "\e907" !important;
  /* Outlined Bookmark */
}

.rbi-bookmark-fill:before {
  content: "\e906" !important;
  /* Filled Bookmark */
  color: var(--review-accent, var(--flex-snarkive)) !important;
  /* Visual confirmation of 'Saved' state */
}

/* --- Follow Button Logic --- */
.b-follow .rb-follow i {
  position: relative;
  align-items: center;
}

.b-follow .rb-follow i:after {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  margin-left: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* RESPONSIVE ICON SCALING 
   Breakpoint 768px (Tablets) 
*/
@media (max-width: 768px) {

  .rbi-plus:before,
  .rbi-bookmark-fill:before {
    font-size: 16px;
    /* Ensure touch targets are usable but not bloated */
  }

  .b-follow .rb-follow i:after {
    display: none;
    /* Hide 'Follow' text on mobile to save HUD space */
  }
}

/* Breakpoint 480px (Mobile) */
@media (max-width: 480px) {
  .elementor-icon-list-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* Container settings */
.bio-title-wrap {
    display: flex;
    align-items: center;
}

/* Hide the 'Followed' button by default */
.followed-icon-btn {
    display: none !important;
}

/* When the parent is in 'followed' state, swap buttons */
.is-followed .follow-icon-btn {
    display: none !important;
}

.is-followed .followed-icon-btn {
    display: inline-flex !important;
}


/* --- Gallery & Slider Modules (Third Party) --- */

/* --- Main Container Overrides --- */
.rb-swiper-container,
.swiper-container {
  overflow: visible !important;
  /* Allows our glows to bleed out without being clipped */
}

/* --- Navigation Arrows (Tactical HUD Look) --- */
.swiper-button-next,
.swiper-button-prev {
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid var(--primary);
  width: 40px !important;
  height: 40px !important;
  color: var(--primary) !important;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 14px !important;
  font-weight: 900;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--primary) !important;
  color: #000 !important;
  box-shadow: 0 0 15px var(--primary);
}

/* --- Pagination Dots (Power Indicators) --- */
.swiper-pagination-bullet {
  background: var(--text-muted) !important;
  opacity: 0.5;
  width: 8px;
  height: 2px;
  /* Rectangular 'Terminal' style dots */
  border-radius: 0;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: var(--primary) !important;
  opacity: 1;
  width: 20px;
  /* Expands when active */
  box-shadow: 0 0 10px var(--primary);
}

/* -----------------
RESPONSIVE: SWIPER SCALING
-----------------
*/

/* Breakpoint: 1400px - 1520px */
@media (max-width: 1520px) {
  .swiper-button-next {
    right: -10px;
  }

  .swiper-button-prev {
    left: -10px;
  }
}

/* Breakpoint: 992px (Small Laptops/Tablets) */
@media (max-width: 992px) {

  .swiper-button-next,
  .swiper-button-prev {
    width: 35px !important;
    height: 35px !important;
  }
}

/* Breakpoint: 768px (Mobile Portrait) */
@media (max-width: 768px) {

  /* Hide arrows on mobile to favor touch swiping and save space */
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }

  .swiper-pagination {
    bottom: 5px !important;
  }
}

/* Breakpoint: 480px (Small Mobile) */
@media (max-width: 480px) {
  .swiper-pagination-bullet {
    width: 6px;
  }

  .swiper-pagination-bullet-active {
    width: 15px;
  }
}

/*
-----------------
4 - Navigation (Main Menu, HUD, Command Bar)
-----------------
*/
/* --- Header logged in greeting --- */
.logged-welcome {
  font-size: 1rem;
  align-items: center;
}

/* Apply glassmorphism effect to #sticky-holder when body has the 'sticky-on' class */
body.sticky-on #sticky-holder, .gb-is-sticky {
  background-color: var(--flex-glass-bg) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Subtle white border for separation */
}

/* Ensure the navbar-outer placeholder has correct height */
#navbar-outer {
  /* height: 60px !important; */
  /* Adjust if your actual header height is different */
}

/* Hide all default logos within the sticky header, to allow JS to show the correct one */
body.sticky-on .logo-wrap .logo img {
  display: none !important;
}

/* Ensure the specific logo-transparent is visible when JavaScript makes it active */
body.sticky-on .logo-wrap .logo img.logo-transparent {
  display: block !important;
}

.mode-icon-default {
  color: var(--dm-light-color, var(--awhite));
}

/* --- News Ticker Styles --- */


/* --- Sticky Header "Tinted Glass" Effect --- */

/* Target the sticky container when the body is in its sticky state and the container itself is active */
body[data-header*='type-1'] .ct-header [data-sticky*='yes'] [data-row*='middle'] {
  /* Ensure a background color is set for backdrop-filter to work */
  background-color: rgba(255, 255, 255, 0.2);
  /* Light mode translucent white */
  border-radius: 3px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(5px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(2px) saturate(180%);
  /* For Safari compatibility */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* You might also need to adjust border, shadow, etc., if Blocksy adds them */
  /* For example, if it has a box-shadow that you want to remove or change */
  /* box-shadow: none !important; */
}

/* Dark Mode Tinted Glass for Sticky Header */
html[data-color-mode='dark'] body[data-header*='type-1'] .ct-header [data-sticky*='yes'] [data-row*='middle'] {
  background-color: rgba(0, 0, 0, 0.3);
  /* Dark mode translucent black */
  /* Adjust blur/saturate if you want a different effect for dark mode */
  backdrop-filter: blur(2px) saturate(150%) !important;
  border-radius: 3px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  -webkit-backdrop-filter: blur(5px) saturate(150%);
  border: 1px solid rgba(0, 0, 0, 0.3);
  z-index: 99999;
}

/* ==========================================================================
   CINESIST: DARK MODE IMAGE TOGGLE EXPLOIT
   ========================================================================== */

/* 1. Default State (Light Mode is Active) 
   Hide the dark image, show the light image. */
.cs-img-dark {
    display: none !important;
}
.cs-img-light {
    display: block !important; /* Use inline-block if it's acting weird in flex containers */
}

/* 2. Foxiz Dark Mode Triggered 
   When Foxiz applies [data-theme="dark"] to the root/body, invert the visibility. */
[data-theme="dark"] .cs-img-light {
    display: none !important;
}
[data-theme="dark"] .cs-img-dark {
    display: block !important;
}

/* --- 1. BASE CONTAINER & ELEMENT SETUP --- */
.cs-site-header__brand-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 180px; /* Adjust to match your widest logo */
  height: 50px;     /* Adjust to match your header height */
}

/* Base style for ALL logo variants: Absolute positioning for perfect stacking */
.cs-site-header__brand-wrapper img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  /* NO transition here by default to prevent jank on scroll-up */
}

/* --- 2. SELECTIVE TRANSITION (ONLY ON SCROLL DOWN) --- */
/* We only apply the transition when .gb-is-sticky is active */
.gb-is-sticky .cs-site-header__brand-wrapper img {
  transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

/* --- 3. LIGHT MODE LOGIC (Default) --- */

/* Normal Header (Light): Show Cinefox Logo */
:not([data-theme="dark"]) .gb-site-header:not(.gb-is-sticky) .cinefox-logo {
  opacity: 1;
  visibility: visible;
}

/* Sticky Header (Light): Show Light Mode Emblem (cs-brand-lm) */
:not([data-theme="dark"]) .gb-is-sticky .cs-brand-lm {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- 4. DARK MODE LOGIC (Foxiz [data-theme="dark"]) --- */

/* Normal Header (Dark): Show Cipher Logo */
[data-theme="dark"] .gb-site-header:not(.gb-is-sticky) .cipher-logo {
  opacity: 1;
  visibility: visible;
}

/* Sticky Header (Dark): Show Dark Mode Emblem (cs-brand-dm) */
[data-theme="dark"] .gb-is-sticky .cs-brand-dm {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --- 5. HIDE LOGOS DURING STICKY FAIL-SAFE --- */
/* Explicitly ensures default logos vanish when sticky is active */
.gb-is-sticky .cinefox-logo,
.gb-is-sticky .cipher-logo {
  opacity: 0 !important;
  visibility: hidden !important;
}


/* --- Possibly Defunct CSS --- */
/* Sticky Header (Light Mode): Show sticky logo, hide default and dark mode logos */
body[data-header*='sticky:shrink'] .cs-site-header__brand-wrapper .default-logo,
body[data-header*='sticky:shrink'] .cs-site-header__brand-wrapper .dark-mode-logo {
  display: none;
  /* Hide default and dark mode logos when sticky */
}

body[data-header*='sticky:shrink'] .site-logo-container .sticky-logo {
  display: inline;
  /* Show sticky logo */
}

/* Sticky Header (Dark Mode): Show sticky logo (if it's also dark-mode appropriate) */
/* This rule assumes your .sticky-logo is suitable for both light and dark sticky states. */
/* If you have a *separate* sticky-dark-mode-logo, you'd adjust this. */
html[data-color-mode='dark'] body[data-header*='sticky:shrink'] .site-logo-container .sticky-logo {
  display: inline;
  /* Ensure sticky logo is visible in dark mode sticky state */
  /* If your sticky logo needs a filter for dark mode (e.g., if it's light and needs to appear dark) */
  /* filter: brightness(0.5) invert(0.8); */
}

/* IMPORTANT: If Blocksy adds additional CSS that overrides these rules, you might need to use `!important` 
   or increase specificity. Always test thoroughly. */
/* --- Header Bottom Row --- */
/* Light Mode */
[data-header*='type-1'] .ct-header [data-row*='bottom'] {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0px 5px 15px rgba(0, 0, 0, 0.3),
    0px 10px 30px rgba(0, 0, 0, 0.2),
    0px 0px 0px 2px rgba(255, 255, 255, 0.03) !important;
  transform: perspective(1000px) rotateX(2deg) translateY(-2px);
  transform-origin: bottom center;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Dark Mode */
html[data-color-mode='dark'] [data-header*='type-1'] .ct-header [data-row*='bottom'] {
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0px 5px 15px rgba(0, 0, 0, 0.3),
    0px 10px 30px rgba(0, 0, 0, 0.2),
    0px 0px 0px 2px rgba(0, 0, 0, 0.03) !important;
  transform: perspective(1000px) rotateX(2deg) translateY(-2px);
  transform-origin: bottom center;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* --- Header Wrapper --- */
.header-set-1 {
  /* Setting Full Width */
  --rb-width: var(--cs-width-xl);
  background: var(--nav-bg);
  background: -webkit-linear-gradient(left, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%);
  background: linear-gradient(to right, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%);
  box-shadow: 0 4px 30px var(--shadow-7);
  grid-column: 1 / -1;
}

.navbar-outer {
  /* background: var(--nav-bg); */
  /* background: -webkit-linear-gradient(left, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%); */
  /* background: linear-gradient(to right, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%); */
}

.rb-container {
  max-width: var(--rb-width, var(--cs-width-lg));
}

/* .cs-block-group {
  grid-column: 2;
}
*/

.style-shadow .navbar-wrap:not(.navbar-transparent),
.sticky-on .navbar-wrap {
  /* box-shadow: none !important; */
}

.wrapper {
  margin: 0 auto;
  padding: 0 1rem;
  --margin-site: 1rem;
}

@media (min-width: 768px) {
  .wrapper {
    padding: .5rem 2rem;
  }
}

@media (min-width: 1024px) {
  .wrapper {
    padding: 0 3rem;
  }
}

@media (min-width: 1440px) {
  .wrapper {
    padding: 0 80px;
  }
}

@media (min-width: 768px) {
  .wrapper {
    --margin-site: 2rem;
  }
}

@media (min-width: 1024px) {
  .wrapper {
    --margin-site: 3rem;
  }
}

@media (min-width: 1440px) {
  .wrapper {
    --margin-site: 80px;
  }
}

/* --- Header Navigation --- */
[data-header*="type-1"] .ct-header [data-id="menu"]>ul>li>a {
  --theme-font-weight: 700;
  --theme-text-transform: uppercase;
  --theme-font-size: 1rem;
  --theme-line-height: 1.3;
  --theme-link-initial-color: var(--body-fcolor);
  --theme-link-hover-color: var(--flex-snarkive);
  --theme-link-active-color: var(--gc-snarkive-accent);
}

/* --- Cinesist Header Search Modal --- */
.cs-search-modal__form-inner {
  border: 0 !important;
}

span.cs-search__modal-icon-svg {
  font-size: 3rem;
}

.cs-search-modal-form input[type='text'] {
  font-size: 4rem;
  padding: 0 1rem 2rem 6rem;
  border: 0;
  border-bottom: 2px solid var(--flex-snarkive);
  height: 100%;
}

/* --- Cinesist Mode Selector Switch --- */

.dark-mode-toggle-wrap:not(:first-child) .dark-mode-toggle {
  margin: 0;
}

i.dark-mode-slide-btn {
  background: var(--flex-snarkive-rev);
}
.dark-mode-slide-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* --- Remove Margin Spacing from Template Parts --- */
.wp-block-template-part {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* --- Cinesist Bottom Header --- */
.cs-header-bottom {
  background-color: var(--flex-bg-color-3);
  border-bottom: 4px solid var(--flex-snarkive-50);
  box-shadow: var(--wp--preset--shadow--natural);
  grid-column: 1 / -1;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.cs-bottom-header {
  display: flex;
  max-width: 1300px;
  justify-content: space-between;
  align-items: center;
  margin-top: 0 !important;
  margin: 0 auto;
  padding: 0 !important;
}

/* --- Cinesist Bottom Header End Row --- */
.cs-bottom-header-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cs-intel-header {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Cinesist Intel Command Bar --- */
.cinesist-intel-command-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--black-spy);
  padding: 0;
  margin-bottom: 0 !important;
  min-height: 3.5rem;
  gap: 2rem;
}

.cinesist-intel-command-bar-start {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--black-spy);
  padding: 0.5rem 0;
  min-height: 3.5rem;
  gap: 2rem;
}

.cinesist-intel-command-bar-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  background: var(--black-spy);
  padding: 0.5rem 0;
  min-height: 3.5rem;
  gap: 2rem;
}

/* Intel Stream Module */
.intel-stream-module {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
  /* Occupy all available middle space */
  overflow: hidden;
  width: 100%;
}

.stream-icon,
.stream-text,
.hubs-nav__label-text {
  margin-block-end: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.stream-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0;
  margin-block-end: 0 !important;
  margin-bottom: 0 !important;
  color: var(--flex-snarkive);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.75rem;
  white-space: nowrap;
  height: 1.5rem;
  background: var(--flex-gray-2);
  padding: 0 10px;
  border-radius: 5px;
  box-shadow: 0 2px 10px var(--shadow-7);
}

.stream-icon svg {
  width: 14px;
  height: 14px;
}

/* Ticker Inner Fix */
.cinesist-ticker-wrapper {
  flex: 1;
  position: relative;
  height: 1.5rem;
  /* Exactly one line high */
  overflow: hidden;
  width: 35rem;
}

/* Hubs Module */
.hubs-nav-module {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  /* Don't allow hubs to squish */
}

.hubs-nav__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0;
  margin-block-end: 0 !important;
  margin-bottom: 0 !important;
  color: var(--flex-snarkive);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.75rem;
  white-space: nowrap;
  height: 1.5rem;
  background: var(--flex-gray-2);
  padding: 0 10px;
  border-radius: 5px;
  box-shadow: 0 2px 10px var(--shadow-7);
}

.hubs-nav__label-text {
  color: var(--flex-snarkive);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.hubs-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 0.5rem;
}

/*
-----------------
5 - UI Elements (Buttons, Pills, Badges)
-----------------
*/

/* Hub Pill Styling */
.hub-pill {
  padding: 0.4rem 0.8rem !important;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 3px;
  color: #fff !important;
  transition:
    filter 0.2s ease,
    transform 0.1s ease;
  white-space: nowrap;
}

.hub-pill:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

.pill-red {
  background-color: var(--cinesist-red) !important;
}

.pill-blue {
  background-color: var(--cinesist-tv) !important;
}

.pill-green {
  background-color: var(--cinesist-gaming) !important;
}

.pill-gray {
  background-color: var(--cinesist-industry) !important;
}

/* Mobile Optimization */
@media (max-width: 1024px) {
  /* .cs-bottom-header,
  .cs-bottom-header-start, 
  .cs-bottom-header-end {
    display: none !important;
  } */

  .cinesist-intel-command-bar {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }

  .intel-stream-module,
  .hubs-nav-module {
    width: 100%;
    justify-content: center;
  }

  .hubs-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .editor-styles-wrapper .cs-master-grid__header-bottom {
      display: Flex;
  }
}

/* --- Cinesist Intel Stream: Fix for One-Line Ticker --- */
.cs-sub-nav-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-height: 3.5rem;
  /* Ensure a stable height */
}

.news-ticker-col {
  flex: 1 1 auto !important;
  /* Take up remaining space */
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
}

.cs-intel-stream-label {
  flex-shrink: 0;
  margin-right: 0;
  white-space: nowrap;
}

.cinesist-ticker-container {
  width: 100%;
  height: 1.5rem;
  /* Force a single line height */
  position: relative;
  overflow: hidden;
  flex-grow: 1;
}

.ticker-list {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.ticker-item {
  position: absolute !important;
  /* This is the key to one-line fades */
  top: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  /* Prevent text wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  /* Add "..." if title is too long */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out;
  display: block !important;
  /* Overwrite any block defaults */
}

.ticker-item.active {
  opacity: 1;
  visibility: visible;
}

/* --- Fix for Horizontal Hub Buttons --- */
.cs-hubs-nav-col {
  flex: 0 0 auto !important;
  /* Stay on the right */
  display: flex !important;
  justify-content: flex-end !important;
}

.cs-hubs-nav-col .wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  /* Force Horizontal */
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.cs-hubs-nav-col .wp-block-buttons {
  display: flex !important;
  flex-direction: row !important;
  /* Force buttons side-by-side */
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
}

/* Responsive: Stack only on mobile if necessary */
@media (max-width: 768px) {
  .cs-sub-nav-row {
    flex-direction: column !important;
    height: auto;
  }

  .cs-hubs-nav-col .wp-block-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* --- Cinesist Intel Stream Styling --- */
.cinesist-ticker-container {
  display: flex;
  align-items: center;
  background: var(--black-spy);
  width: 500px;
  color: var(--flex-text-title);
  height: 1.75rem;
  overflow: hidden;
  font-family: var(--font-sans);
}

.ticker-label {
  background: var(--cinesist-red);
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

.ticker-content {
  position: relative;
  flex-grow: 1;
  height: 100%;
}

.ticker-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
}

.ticker-item {
  position: absolute;
  top: 0;
  left: 0.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}

.ticker-item.active {
  opacity: 1;
  pointer-events: auto;
}

.ticker-item a {
  color: var(--body-fcolor);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.ticker-item a:hover {
  color: var(--body-fcolor);
  font-weight: 600;
  text-decoration: 2px underline;
  text-decoration-color: var(--flex-snarkive-90);
}

/* Sticky Header */
.sticky-title {
  line-height: var(--nav-height, inherit);
  font-size: 1rem;
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 600px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- Cinesist Responsive Stack --- */

@media (max-width: 1024px) {
    /* 1. Force the main wrapper to stack and clear fixed heights */
    .cinesist-intel-command-bar,
    .cinesist-intel-command-bar-start,
    .cinesist-intel-command-bar-end,
    .cs-sub-nav-row {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 1rem !important;
        padding: 1rem 0 !important;
    }

    /* 2. Reset Widths so elements don't push past the screen edge */
    .intel-stream-module, 
    .cinesist-ticker-wrapper,
    .cinesist-ticker-container,
    .hubs-nav-module {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: auto !important;
    }

    /* 3. Center align labels and nav for a cleaner mobile look */
    .stream-label, 
    .hubs-nav__label {
        align-self: center;
        margin-right: 0 !important;
    }

    /* 4. Allow the Hubs Nav to wrap so buttons don't fly off-screen */
    .hubs-links,
    .cs-hubs-nav-col .wp-block-buttons,
    .wp-block-navigation__container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* 5. Ticker Text Adjustment: Allow wrapping or ensure hidden overflow works */
    .ticker-item {
        width: 100% !important;
        left: 0 !important;
        text-align: center;
        justify-content: center;
    }
    
    .ticker-item a {
        font-size: 0.8rem !important; /* Slightly smaller for mobile */
        white-space: normal !important; /* Optional: allow news titles to wrap to 2 lines on small phones */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 6. Fix for the "End" column alignment */
    .cs-bottom-header-end, 
    .cs-hubs-nav-col {
        justify-content: center !important;
        width: 100% !important;
    }
}

/* Extra small screens (Phones) */
@media (max-width: 480px) {
    .hub-pill {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.65rem !important;
    }
    
    .stream-text {
        display: none; /* Hide "Intel Stream" text, keep icon to save space */
    }
}

/*
-----------------
6 - Post Entry
-----------------
*/

/* --- Featured Image Container Style --- */
.s-feat-holder {
  border-radius: var(--round-10);
  /* More Rounded Corners */
  box-shadow: var(--shadow-1);
  /* Use Uniform Shadow Variable */
}

/* --- Featured Image Gradient Overlay --- */
.single-standard-3 .single-header-inner:before {
  height: 628px;
  /* Made the Featured Image look complete */
  background: linear-gradient(to top, var(--dark-accent) 30%, transparent 100%);
}

/* --- Post Title Style --- */
.s-title {
  margin-bottom: 5px;
}

/* --- Captions Decoration Style --- */
figcaption:not(:empty):before,
.wp-caption-text:before {
  color: var(--g-color);
}

/* --- Cinesist Category Button Style --- */
.s-cats {
  margin: 0;
}

/* --- Cinesist Post Header Meta HUD --- */
.smeta-extra {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  flex-shrink: 0;
  flex-direction: row-reverse; /* Reverses the order of the elements */
}
/* Make the read time bold */
.meta-el.meta-read {
  font-weight: 700;
  padding-right: 0.75rem;
}

/*
-----------------
7 - Post Modules
-----------------
*/

/* --- Highlight Post Module Wrapper Style --- */
.s-hl.s-hl-1 {
  background-color: var(--news-letter-bg);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  box-shadow: 5px 10px 20px 0px var(--shadow-7);
}

/* --- Highlight Post Module Style --- */
.s-hl-1 .s-hl-heading {
  opacity: 0.55;
  z-index: 1;
}

.s-hl-1 .hl-point:not(:last-child) {
  padding-bottom: var(--s-hl-gap);
  border-bottom: none;
}

/* --- Cinescore Quick Section Styles --- */
.sqview {
  border-top: 2px solid var(--g-color);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  box-shadow: 5px 10px 20px 0px var(--shadow-7);
}

/* --- Cinescore Section Styles --- */
.review-section {
  background-color: var(--news-letter-bg);
  border-top: 2px solid var(--g-color);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  box-shadow: 5px 10px 20px 0px var(--shadow-7);
}

/* --- Cinescore Meta Bar Style --- */
.rline-wrap {
  border: solid 1px #888888ab;
  /* A Nice little border to give 3d effect */
}

/* --- Cinescore Meta Score Style --- */
.review-quickview-meta .meta-score {
  font-size: max(28px, 2rem) !important;
  line-height: 1;
}

/* --- Cinescore Meta Rating Word Style --- */
.meta-text {
  font-size: 16px !important;
  /*  font-weight: 700;  Bold for Emphasis */
}

/* --- Remove Foxiz Text Related Post Links from Posts --- */
.widget.entry-widget .related-sec {
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  display: none;
}

/**
 * Cinescore Content Section
**/

/* --- Cinescore Breakdown Label Info Line Style --- */
.review-label-info {
  border-left: 3px solid var(--review-accent, var(--flex-snarkive));
}

/*
-----------------
-----------------
8 - Blocks
-----------------
*/

/**
 * MODERN FRAME COMPONENT
 * Architecture: Glassmorphism / Elevated Card
 */
.modern-frame-container {
  position: relative;
  border-radius: 2.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  mask-image: radial-gradient(circle at bottom right, transparent 65px, black 66px);
  -webkit-mask-image: radial-gradient(circle at bottom right, transparent 65px, black 66px);
}

.modern-frame-wrapper:hover .modern-frame-container {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);
  border-color: var(--snarkive);
}

.modern-frame-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.modern-frame-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.modern-frame-wrapper:hover .modern-frame-image-wrapper img {
  transform: scale(1.05);
}

.modern-frame-cta-button {
  width: 54px;
  height: 54px;
  background: var(--snarkive);
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 8px 16px -4px rgba(209, 2, 209, 0.5);
  pointer-events: auto;
}

.modern-frame-wrapper:hover .modern-frame-cta-button {
  transform: scale(1.1) rotate(5deg);
  background: var(--cinesist-orange);
  box-shadow: 0 12px 24px -8px rgba(255, 85, 0, 0.6);
}

/**
 * VOID SECTION & DATA COMPONENTS
 * Architecture: Cyberpunk / Glitch Aesthetics
 */
.dark .bg-data-pattern {
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 85, 0, 0.05) 2px, rgba(255, 85, 0, 0.05) 4px),
                      linear-gradient(90deg, rgba(255, 85, 0, 0.08) 1px, transparent 1px);
    background-size: 100% 4px, 40px 100%;
    opacity: 0.4;
}

.data-scan-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, transparent 0%, rgba(209, 2, 209, 0.15) 50%, transparent 100%);
    background-size: 100% 200%;
    animation: dataFlowScan 6s linear infinite;
    pointer-events: none;
}

.dark .data-scan-line {
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 85, 0, 0.15) 50%, transparent 100%);
    animation: dataFlowScan 4s linear infinite;
}

/* Hype Frequency Bars */
.hype-bars {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 300px;
  opacity: 0.15;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hype-bar {
  width: 2%;
  background: #d102d1;
  animation: hypePulse 1.5s ease-in-out infinite alternate;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
}

.dark .hype-bar {
  background: #ff5500;
}

/* Void Section Rumors */
.void-card-rumor-25 {
  border: 2px solid #6b7280;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
}

.void-card-rumor-50 {
  border: 4px solid var(--cinesist-gold);
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(234, 179, 8, 0.1) 10px, rgba(234, 179, 8, 0.1) 20px);
}

.void-card-rumor-75 {
  border: 2px solid var(--flex-snarkive);
  box-shadow: 0 0 15px rgba(0, 102, 255, 0.4);
}

.void-card-rumor-100 {
  border: 2px solid var(--flex-legendary);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
  position: relative;
}

.void-card-rumor-100::after {
  content: "VERIFIED";
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--flex-legendary);
  color: white;
  font-size: 8px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  transform: rotate(15deg);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
}
/* --- Layout Headings --- */
/* Layout 3 Title */
.heading-layout-3 .heading-inner,
.heading-layout-c3 .heading-inner {
  border-bottom: 2px solid var(--body-fcolor);
}

.heading-layout-3 .heading-title>* {
  display: inline-flex;
  padding-bottom: var(--heading-spacing, 10px);
  border-bottom: 5px solid var(--heading-sub-color);
  /* position: absolute; */
  bottom: -3px;
}

/* Layout 12 Title */
.heading-layout-12 .heading-inner {
  width: 100%;
  padding-bottom: var(--heading-spacing, 7px);
  border-bottom: 2px solid var(--heading-color);
}

.heading-layout-12 .heading-title>*:before {
  display: none;
}

/* --- Cinepress 3.0: Popular Intel Terminal --- */

.ct-trending-block {
  padding: 2.5rem 0;
  margin: 2rem 0;
  border-top: 1px solid var(--flex-decor-border);
  border-bottom: 1px solid var(--flex-decor-border);
  background: var(--flex-gray-7);
  /* Using your flexible gray opacity */
}

/* Module Title Styling */
.ct-module-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--flex-text-title);
  margin-bottom: 1.875rem;
  letter-spacing: 1px;
}

/* --- Cinepress 3.0: Custom Bolt Icon Injection --- */

/* 1. Hide the original Fire SVG */
.ct-module-title svg {
  display: none !important;
}

/* 2. Remove the previous ::after that floated to the right */

/* 3. Target the text directly (Blocksy usually wraps this in a span or just text) */
/* We will use the 'Popular Intel' text as the anchor */
.ct-module-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative;
  gap: 0.5rem;
}

/* 4. Inject the Bolt specifically after the text content */
/* We target the specific text node if possible, or just the main title */
.ct-module-title {
  position: relative;
}

.ct-module-title::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--cinesist-gold);

  /* Clean URL-Encoded SVG Bolt with overflow handling */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z'/%3E%3C/svg%3E") no-repeat center;

  /* Ensure it fits exactly in your 1.25rem box */
  mask-size: contain;
  -webkit-mask-size: contain;

  filter: drop-shadow(0 0 5px var(--cinesist-gold));
  animation: bolt-arc-flicker 4s infinite;
}

/* Ensure the navigation arrows stay on the far right */
.ct-slider-arrows {
  margin-left: auto !important;
  /* Pushes only the arrows to the right */
}

/* 5. The Arc Flicker Animation */
@keyframes bolt-arc-flicker {

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  20%,
  24%,
  55% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}

/* The Cards (Items) */
.ct-trending-block .ct-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.ct-trending-block-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.3s ease;
}

.ct-trending-block-item:hover {
  transform: translateY(-5px);
}

/* Media (Images) */
.ct-media-container img {
  border-radius: 0.25rem;
  border: 1px solid var(--flex-decor-border);
  transition: border-color 0.3s ease;
}

.ct-trending-block-item:hover img {
  border-color: var(--flex-snarkive);
}

/* Post Titles */
.ct-post-title {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--flex-text-title);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ct-post-title:hover {
  color: var(--flex-snarkive);
}

/* Arrows (Slider Navigation) */
.ct-slider-arrows {
  display: flex;
  gap: 0.5rem;
  margin-left: auto !important;
  /* Pushes only the arrows to the right */
}

.ct-arrow-prev,
.ct-arrow-next {
  cursor: pointer;
  background: var(--flex-gray-2);
  padding: 0.5rem;
  border-radius: 0.25rem;
  color: var(--flex-text-title);
  transition: all 0.2s ease;
}

.ct-arrow-prev:hover,
.ct-arrow-next:hover {
  background: var(--flex-snarkive);
  color: #fff;
}

@keyframes flicker-red {
  0% {
    opacity: 0.8;
    filter: drop-shadow(0 0 2px var(--cinesist-red));
  }

  100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--cinesist-red));
  }
}

/*
-----------------
6 - Post Entry (Article Header, Layout, Meta)
-----------------
*/

/* --- Section Transitions & Logic --- */

/* --- THE PRESETS --- */
/* You just add these classes to the outer Header Group in the editor */
.is-news {
  --accent: var(--cinesist-info);
}

.is-rants {
  --accent: var(--cinesist-red);
}

.is-movies {
  --accent: var(--cinesist-gold);
}

.is-gaming {
  --accent: var(--cinesist-gaming);
}

.is-tv {
  --accent: var(--cinesist-tv);
}

.is-industry {
  --accent: var(--cinesist-industry);
}

.is-reviews {
  /* --accent: var(--review-accent); */
}

.is-topic {
  /* --accent: var(--flex-snarkive); */
}

/* --- Cinesist Spoiler Warning Block Styling --- */
.cinesist-spoiler-warning-block {
  clear: both;
  /* Ensures it breaks out of any floats */
  margin: 50px auto;
  /* Centered with vertical spacing */
  padding: 2rem;
  max-width: 900px;
  /* Consistent with CTA block */
  background: linear-gradient(145deg, var(--gc-spy), var(--flex-gray-1));
  /* Subtle Color Changing Gradient */
  border-radius: 15px;
  border: 2px dashed var(--cinesist-red);
  border-left: 5px outset var(--gc-color) !important;
  /* Cinefox Orange outset border on the left */
  box-shadow:
    10px 10px 30px rgba(0, 0, 0, 0.7),
    /* Stronger shadow for depth */
    -5px -5px 15px rgba(50, 50, 50, 0.2);
  /* Subtle light source shadow */
  text-align: center;
  box-sizing: border-box;
  animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
  0% {
    border-color: var(--cinesist-red);
  }

  50% {
    border-color: transparent;
  }

  100% {
    border-color: var(--cinesist-red);
  }
}

.cinesist-spoiler-inner {
  display: flex;
  align-items: center;
  /* Vertically align icon and text */
  justify-content: center;
  /* Center content horizontally */
  gap: 20px;
  /* Space between icon and text */
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
}

.cinesist-spoiler-icon {
  font-size: 2em;
  /* Large siren emoji */
  line-height: 1;
  display: block;
  /* Ensure it behaves as a block for sizing */
  color: var(--cinesist-red);
  /* Make the siren red (or keep default emoji color) */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  /* Subtle 3D effect */
  flex-shrink: 0;
  /* Prevent it from shrinking */
  /* Add a subtle animation to make it "flash" or pulse a bit */
  animation: cinesist-siren-pulse 1.5s infinite alternate;
}

@keyframes cinesist-siren-pulse {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.cinesist-spoiler-text {
  font-family: var(--cinesist-body-font);
  /* Set Font */
  font-size: 1.4em;
  color: var(--body-fcolor);
  /* Color Changing text */
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  /* Remove default paragraph margin */
  max-width: 700px;
  /* Constrain text width */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  /* Subtle text shadow */
}

.cinesist-spoiler-text strong {
  color: var(--cinesist-red);
  /* Make "SPOILER ALERT!" bold and red */
}

.cinesist-content-breakdown::before {
  content: var(--cinesist-card-logo);
}

/**
 * RUMOR HUD COMPONENT
 * Architecture: BEM (.rumor-hud)
 */

/* Base HUD Container */
.rumor-hud-base {
    position: relative;
    border-left: 5px solid #333;
    background: #111; /* Dark background to pop from article white/grey */
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Label Styling */
.rumor-hud__label {
    font-family: var(--font-display), sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 !important;
}

/* Percentage Styling */
.rumor-hud__value {
    font-family: monospace;
    opacity: 0.6;
}

/* TIER 25%: STATIC NOISE (The Low-Level Leak) */
.rumor-hud--tier-25 {
    border-color: #555;
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 
                url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAElBMVEWFhYWDg4N3d3dtbW1mzMzMzMz960JAAAAABnRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLjsuOz09Pj8/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr+AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/P0f6AAAAAnRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLjsuOz09Pj8/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr+AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/P0f6AAAAInRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLjsuOz09Pj8/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr+AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/P0f6');
}

/* TIER 50%: INTERCEPTED (The Danger Zone) */
.rumor-hud--tier-50 {
    border-color: var(--cinesist-gold);
    background: repeating-linear-gradient(
      -45deg,
      #222,
      #222 10px,
      #333 10px,
      #333 20px
    );
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2);
}
.rumor-hud--tier-50 .rumor-hud__label { color: var(--cinesist-gold); }

/* TIER 75%: DECLASSIFIED (The Blue Chip Intel) */
.rumor-hud--tier-75 {
    border-color: var(--flex-snarkive);
    background: rgba(0, 255, 255, 0.05);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
}
.rumor-hud--tier-75 .rumor-hud__label { color: var(--flex-snarkive); text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }

/* TIER 100%: VERIFIED (The Green Truth) */
.rumor-hud--tier-100 {
    border-color: var(--flex-legendary);
    background: rgba(50, 205, 50, 0.1);
    animation: verified-pulse 2s infinite;
}
.rumor-hud--tier-100 .rumor-hud__label { color: var(--flex-legendary); }

@keyframes verified-pulse {
    0% { box-shadow: 0 0 5px rgba(50, 205, 50, 0.2); }
    50% { box-shadow: 0 0 25px rgba(50, 205, 50, 0.5); }
    100% { box-shadow: 0 0 5px rgba(50, 205, 50, 0.2); }
}


/* --- Cinesist Movie Review Pattern Style --- */
/* Cinesist Review 2.0 Base Styles */
.cinesist-review-container {
  --cs-primary: var(--cinesist-gold);
  /* Default Gold */
  --cs-accent: var(--cinesist-red);
  border: 3px solid var(--cs-primary);
  padding: 2rem;
  background: var(--cs-bg);
  color: var(--cs-text);
  border-radius: 5px;
}

/* MASTERPIECE VARIANT (Good Review) */
.cinesist-review-container.is-legendary {
  --cs-primary: var(--flex-legendary);
  /* Cinescore Legendary🏆 Green */
  --cs-accent: #00d4ff;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

/* DISASTER VARIANT (Bad Review) */
.cinesist-review-container.is-burn {
  --cs-primary: var(--cinesist-red);
  /* Cinescore Burn Notice🔥 Red Red */
  --cs-accent: #ffa502;
  box-shadow: 0 0 20px rgba(255, 71, 87, 0.2);
}

/* Header & Subtitle */
.cinesist-title {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-transform: capitalize;
  font-weight: 700;
}

/* Subtitle Styling */
.cinesist-subtitle {
  font-style: italic;
  font-weight: 500;
  color: var(--cs-primary);
  border-left: 4px solid var(--cs-accent);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

/* Fourth Wall Styling */

/* Fourth Wall Break */
.cinesist-fourth-wall {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--cs-primary);
  padding: 1.5rem;
  position: relative;
  font-size: 1.1rem;
  margin: 2rem 0;
}

.cinesist-fourth-wall::before {
  content: "👀 INTERNAL MONOLOGUE";
  position: absolute;
  top: -12px;
  left: 10px;
  background: var(--cs-primary);
  color: #000;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 2px 8px;
}

.wall-label {
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--cs-primary);
  color: #000;
  font-weight: 900;
  font-size: 0.7rem;
  padding: 2px 10px;
}

/* Verdict Box */
.cinesist-verdict-box {
  background: #1a1a1a;
  border-radius: 15px;
  padding: 20px;
  margin-top: 40px;
}

.verdict-title {
  padding: 0;
}

.cinescore-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid var(--cs-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
}

/* Cinesist Character Bio Post Insert Style */
/* Bio Wrapper Grid */
.cinesist-bio-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

/* Individual Bio Card */
.character-bio-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.character-bio-card:hover {
  transform: translateY(-5px);
  border-color: var(--cs-primary);
}

/* Bio Image Circle */
.bio-image img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cs-primary);
  margin-right: 15px;
}

/* Text Elements */
.actor-name {
  font-size: 1.1rem;
  margin: 0;
  color: var(--cs-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.character-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 8px;
  opacity: 0.8;
}

.bio-snark {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

/* Visual Masonry Grid for Review Posts */
/* Gallery Container */
.cinesist-visual-gallery {
  margin: 50px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 15px;
}

.gallery-title {
  text-align: center;
  color: var(--cs-primary);
  margin-bottom: 30px;
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
}

/* Masonry Layout */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 200px;
  gap: 15px;
}

.masonry-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.masonry-item:hover img {
  transform: scale(1.1);
}

/* Large image spanning two rows */
.masonry-item.is-large {
  grid-row: span 2;
}

/* Snarky Caption Overlay */
.masonry-item figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.75rem;
  padding: 8px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  font-style: italic;
}

.masonry-item:hover figcaption {
  transform: translateY(0);
}

/* Deep Thoughts Container */
.cinesist-deep-thoughts {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 60px 0;
  padding: 30px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 100%);
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}

/* The Character Graphic */
.thoughts-character-art {
  width: 200px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px var(--cs-primary));
}

/* LEGENDARY Logic: Cinefox */
.is-legendary .thoughts-character-art {
  background-image: url("https://www.cinesist.com/wp-content/uploads/2025/10/Cinefox-The-Inquisitor-Legendary-Movie-Review-Graphic.png");
}

/* BURN Logic: Hacker Cipher */
.is-burn .thoughts-character-art {
  background-image: url("https://www.cinesist.com/wp-content/uploads/2025/10/Hacker-Cipher-Burn-Notice-Movie-Graphic.png");
}

/* Text Content Styling */
.thoughts-content {
  flex-grow: 1;
}

.thoughts-heading {
  color: var(--cs-primary);
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.thoughts-signature {
  display: block;
  margin-top: 20px;
  font-size: 0.8rem;
  color: var(--cs-primary);
  text-transform: uppercase;
  opacity: 0.7;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .cinesist-deep-thoughts {
    flex-direction: column;
    text-align: center;
  }

  .thoughts-character-art {
    width: 150px;
    height: 150px;
  }
}

/* Badge Container Logic */
.cinesist-badge-wrapper {
  display: none;
  /* Hidden by default */
  justify-content: center;
  margin-bottom: 20px;
}

/* Only show badge if the review is a Masterpiece */
.is-legendary .cinesist-badge-wrapper {
  display: flex;
}

/* The Badge Design */
.cinesist-must-watch-badge {
  position: relative;
  background: linear-gradient(135deg, var(--cinesist-gold) 0%, #ffac00 100%);
  color: #000;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(255, 172, 0, 0.4);
  overflow: hidden;
  /* For the shimmer effect */
}

.badge-icon {
  font-size: 1.2rem;
}

/* The Shimmer Effect */
.cinesist-must-watch-badge::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to bottom right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(45deg);
  animation: cinesist-shimmer 3s infinite;
}

@keyframes cinesist-shimmer {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }

  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

/* --- Cinesist Heading Tagline Style - Makes the Heading Transparent and Large --- */
/* --- Applies to Heading Layout 11 Large Faded Headings --- */
.heading-layout-11 .heading-tagline,
.heading-layout-c11 .heading-tagline {
  font-size: 3rem;
  line-height: 1;
  position: absolute;
  top: auto;
  bottom: -20px;
  /* Adjust position as needed */
  left: 0;
  margin: 0;
  pointer-events: none;
  opacity: 30%;
}

/* --- Cinesist Ultimate Review Box Style --- */
.ultimate-review-wrapper {
  margin-block-start: 2rem !important;
  background: var(--flex-white-black);
  /* white Spy background */
  color: var(--body-fcolor);
  /* White Spy */
  border-top: 5px solid var(--flex-snarkive) !important;
  border: 1px solid var(--flex-snarkive);
  border-radius: 8px;
  box-shadow: 5px 10px 20px 0px var(--shadow-7);
  overflow: hidden;
  font-family: 'Work Sans', sans-serif;
}

.top-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

/* Ensure the Hexagon Score stays on top of poster */
.col-poster {
  position: relative;
  overflow: hidden;
  flex: 0 0 220px;
  /* Fixed poster width */
}

.col-poster img {
  border-radius: 4px;
  width: 100%;
  height: auto;
  display: block;
}

.col-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.snarkive-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 15px;
  background: var(--flex-snarkive);
  box-shadow: 0 0 10px var(--flex-snarkive);
  /* Snarkive Purple [cite: 16] */
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  transition: background 0.2s;
}

.snarkive-btn:hover {
  background: var(--flex-snarkive);
}

/* D20 Score Overlay */
.d20-score-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  background: var(--flex-snarkive);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 24px;
  color: #fff;
}

/* 5-Bar Score Visualizer */
.bar-container {
  display: flex;
  gap: 4px;
  height: 10px;
  width: 100px;
}

.bar {
  flex: 1;
  background: #333;
  border-radius: 2px;
}

.bar.filled {
  background: var(--flex-snarkive);
}

/* Snarkive Purple fills */

/* The Orange-to-Purple CTA */
.cta-gradient-btn {
  display: block;
  padding: 15px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 20px;
}

/* Economic Warfare Bar Styling [cite: 157] */
.economic-warfare-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--flex-gray-40);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 10px 15px;
  margin: 10px 0;
}

.metric-item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.metric-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--flex-snarkive);
  margin-bottom: 2px;
}

.metric-value {
  font-weight: 700;
  color: var(--body-fcolor);
  /* Body text color to Change on Modes */
}

.metric-divider {
  font-weight: 900;
  color: var(--flex-snarkive-rev);
  /* Cinefox Orange to Snarkive Purple */
  font-style: italic;
}

/* Success/Fail Field Styling [cite: 158] */
.verdict-status-field {
  text-align: center;
  margin-top: 5px;
}

.status-indicator {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-indicator.cash-cow {
  background: #27ae60;
  color: #fff;
}

/* Win [cite: 159] */
.status-indicator.flop {
  background: var(--cinesist-red);
  color: #fff;
}

/* Burn Notice [cite: 166] */

/* Snarkive CTA Get Intel Section */
.snarkive-action {
  display: flex;
  padding-bottom: 25px;
}

.snarkive-intel-btn {
  font-size: var(--btn-fsize);
  display: inline-flex;
  align-items: center;
}

/* Middle Section: Breakdown Styles */
.middle-row {
  padding: 20px;
  background: var(--flex-bg-color-2);
  /* Cinefox White Spy to Black Spy */
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.breakdown-header h3 {
  margin: 0;
  font-size: 20px;
  color: #e5e5e5;
  /* Cinefox White Spy */
}

.meta-word {
  padding: 4px 12px;
  border-radius: 4px;
  color: var(--awhite);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
}

.age-rating {
  border: 2px solid var(--flex-snarkive);
  padding: 2px 5px 2px 5px;
}

.age-rating a {
  text-decoration: none;
}

.age-rating a:hover {
  color: var(--flex-snarkive-rev);
}

/* Score-based Color Logic [cite: 168] */
.meta-word.legendary {
  background: var(--flex-snarkive);
  color: #fff;
}

/* Purple */
.meta-word.epic {
  background: #27ae60;
  color: #fff;
}

.meta-word.burn {
  background: var(--cinesist-red);
  color: #fff;
}

.breakdown-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.metric-line {
  margin-bottom: 15px;
}

.metric-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
}

.metric-title {
  color: var(--body-fcolor);
  border-radius: 6px;
  border-left: 3px solid var(--review-color);
  padding: 10px;
}

.metric-number {
  color: var(--cinesist-orange);
}

/* Cinefox Orange [cite: 12] */

/* The 5-Bar System */
.bar-visualizer {
  display: flex;
  gap: 5px;
  height: 8px;
}

.score-bar {
  flex: 1;
  background: #333;
  border-radius: 2px;
  transition: background 0.3s ease;
}

.score-bar.filled {
  background: var(--cinesist-gold);
  /* Legendary Gold */
  box-shadow: 0 0 8px rgb(241, 202, 43 / 50%);
}

/* --- Cinescore Dynamic Bar Colors --- */
.score-bar {
  flex: 1;
  height: 10px;
  border-radius: 2px;
  background-color: #333;
  /* Default Empty Bar */
  transition: all 0.3s ease;
}

/* Logic: Classes applied based on the bar index and total score */
.score-bar.fill-burn {
  background-color: var(--cinesist-red);
  box-shadow: 0 0 5px rgba(255, 13, 13, 0.3);
}

.score-bar.fill-trash {
  background-color: #717171;
}

.score-bar.fill-basic {
  background-color: #22c55e;
}

.score-bar.fill-epic {
  background-color: #3b82f6;
}

.score-bar.fill-legendary {
  background-color: var(--cinesist-gold);
  box-shadow: 0 0 8px rgb(241, 202, 43 / 50%);
}

/* Container spacing */
.bar-visualizer {
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 150px;
  margin-top: 5px;
}

/* --- Middle Row: Intel & Bullets --- */
.col-intel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.intel-block h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.intel-block.gold h4 {
  color: #27ae60;
}

.intel-block.bad h4 {
  color: var(--cinesist-red);
}

.hex-bullet {
  width: 12px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.intel-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.intel-block li {
  font-size: 13px;
  margin-bottom: 8px;
  padding-left: 15px;
  position: relative;
  color: var(--body-fcolor);
  line-height: 1.4;
}

.intel-block li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--cinesist-orange);
  font-weight: 900;
}

.intel-block.gold li {
  font-size: 13px;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  color: var(--body-fcolor);
  line-height: 1.4;
}

.intel-block.gold li::before {
  content: '🪙';
  position: absolute;
  left: 0;
  color: var(--cinesist-orange);
  font-weight: 900;
  font-size: 15px;
}

.intel-block.bad li {
  font-size: 13px;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  color: var(--body-fcolor);
  line-height: 1.4;
}

.intel-block.bad li::before {
  content: '🗡️';
  position: absolute;
  left: 0;
  color: var(--cinesist-orange);
  font-weight: 900;
  font-size: 15px;
}

/* --- Cinescore Dynamic Bar Colors --- */
/* --- Cinebar Color Progression --- */
.score-bar.filled.fill-burn {
  background: var(--cinesist-red);
}

.score-bar.filled.fill-trash {
  background: #717171;
}

.score-bar.filled.fill-basic {
  background: #22c55e;
}

.score-bar.filled.fill-epic {
  background: #3b82f6;
}

.score-bar.filled.fill-legendary {
  background: var(--cinesist-gold);
}

/* The "Glow" logic: only the highest filled bar glows */
.score-bar.filled.glowing.fill-burn {
  box-shadow: 0 0 10px 1px #991b1b;
}

.score-bar.filled.glowing.fill-trash {
  box-shadow: 0 0 10px 1px #404040;
}

.score-bar.filled.glowing.fill-basic {
  box-shadow: 0 0 10px 1px #166534;
}

.score-bar.filled.glowing.fill-epic {
  box-shadow: 0 0 10px 1px #1e40af;
}

.score-bar.filled.glowing.fill-legendary {
  box-shadow: 0 0 10px 1px #a16207;
}

/* Intel Bullet Styling */
/* --- Featured Crew Style --- */
.featured-crew-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.crew-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  border-left: 3px solid var(--cinesist-orange);
  padding: 10px;
  background: var(--flex-gray-15);
}

.crew-card img {
  border-radius: 4px;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid #333;
}

.crew-info {
  display: flex;
  flex-direction: column;
}

.crew-label {
  font-size: 9px;
  color: var(--cinesist-orange);
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
}

.crew-name {
  font-size: 13px;
  color: var(--body-fcolor) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.crew-name a {
  color: var(--body-fcolor) !important;
  text-decoration: none !important;
}

.crew-name a:hover {
  color: var(--cinesist-orange) !important;
}

/* --- Badge & Genre Polish --- */
.badge-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.cinesist-links a {
  color: var(--cinesist-orange);
  text-decoration: none;
  font-weight: 700;
}

.cinesist-links a:hover {
  text-decoration: underline;
}

.item-title {
  margin: 0 0 15px 0;
  font-size: 2rem;
  letter-spacing: -1.5px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 900;
}

/* --- Interactive Toggle Logic --- */
.breakdown-state-check {
  display: none;
  /* Hide the actual checkbox */
}

.breakdown-content {
  max-height: 2000px;
  /* Large enough for content */
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  border-top: 1px solid #333;
}

/* Logic: When checkbox is NOT checked, collapse the content */
.breakdown-state-check:not(:checked)~.breakdown-content {
  max-height: 0;
}

.cinesist-review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: var(--flex-white-black);
  border-top: 1px solid #333;
}

.cta-wrapper a {
  color: #fff;
  font-weight: 900;
}

.cinesist-review-footer .cta-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cta-price {
  font-family: monospace;
  font-weight: 800;
  color: #27ae60;
  font-size: 14px;
}

.toggle-btn-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--flex-snarkive);
  cursor: pointer;
  user-select: none;
}

/* Toggle Text Logic */
.breakdown-state-check:checked~.cinesist-review-footer .text-closed {
  display: none;
}

.breakdown-state-check:not(:checked)~.cinesist-review-footer .text-open {
  display: none;
}

.snarkive-intel-btn {
  font-weight: 900;
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
}

.snarkive-intel-btn:hover {
  text-decoration: underline;
}

/* --- Footer Truth Row --- */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.math-declassified {
  font-family: monospace;
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
}

.final-calc {
  color: var(--flex-snarkive-rev);
  font-weight: 900;
}

/* --- Layout Refinements --- */
.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two columns of metrics */
  gap: 20px 40px;
  padding: 30px;
}

.intel-row {
  background: var(--flex-white-black);
  border-top: 1px dashed #333;
}

/* --- Verdict Section Polish --- */
.verdict-row {
  padding: 25px 30px;
  border-top: 1px solid #333;
}

.verdict-row h3 {
  margin: 0 0 10px 0;
  font-size: 22px;
  color: var(--body-fcolor);
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.verdict-row p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-fcolor);
  margin: 0;
}

/* --- Footer Score Polish --- */
.footer-score-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.total-visualizer {
  max-width: 165px !important;
  height: 10px !important;
}

.footer-meta-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.final-score-val {
  font-size: 32px;
  font-weight: 900;
  color: var(--body-fcolor);
}

/* --- Transformed CTA Button --- */
.cta-wrapper .cta-gradient-btn {
  position: relative;
  padding: 12px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.cta-price-tag {
  display: block;
  font-size: 11px;
  font-family: monospace;
  color: #00ff00;
  /* Arcade Green Price */
  margin-top: 4px;
  opacity: 0.9;
}

/* --- Cinepress 3.0: Snarkive Tag Box --- */
.snarkive-links-box {
  background-color: var(--gc-spy);
  border-radius: 12px;
  padding: 20px 25px;
  margin-top: 30px;
  border-top: 3px solid var(--flex-snarkive);
  box-shadow: var(--shadow-1);
}

.snarkive-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.snarkive-tag-link {
  display: flex;
  align-items: center;
  background: var(--flex-header-bg);
  border: 1px solid var(--flex-decor-border);
  padding: 5px 12px 5px 5px;
  border-radius: 4px;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.snarkive-tag-link img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 2px;
  margin-right: 10px;
}

.snarkive-tag-link:hover {
  border-color: var(--cinesist-gold);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* --- Cinepress 3.0: Cinesist Review Box Admin Skin --- */

/* 1. The Postbox Wrapper */
#acf-group_cinesist_review_box_fields {
  background: #1a1a1a !important;
  border: 2px solid #333 !important;
  color: #e5e5e5 !important;
}

#acf-group_cinesist_review_box_fields .postbox-header {
  background: #222 !important;
  border-bottom: 2px solid var(--flex-snarkive, #f0217d) !important;
}

#acf-group_cinesist_review_box_fields .hndle {
  color: var(--flex-snarkive, #f0217d) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
}

/* 2. Sidebar Tabs (The Data Streams) */
#acf-group_cinesist_review_box_fields .acf-tab-wrap {
  background: #111 !important;
  border-right: 1px solid #333 !important;
}

#acf-group_cinesist_review_box_fields .acf-tab-group li a {
  background: transparent !important;
  color: #888 !important;
  border: none !important;
  transition: all 0.3s ease;
}

#acf-group_cinesist_review_box_fields .acf-tab-group li.active a {
  color: var(--cinesist-gold, #ffde21) !important;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 222, 33, 0.4);
  background: rgba(255, 222, 33, 0.05) !important;
}

/* 3. The Fields (Diagnostic Modules) */
.acf-field {
  border-color: #333 !important;
}

.acf-label label {
  color: #aaa !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 1px;
}

/* 4. Score Breakdown Coloring (Dynamic DNA) */
/* We target the specific fields for Plot, Performance, etc. */
.acf-field-plot-score,
.acf-field-performance-score,
.acf-field-execution-score,
.acf-field-visuals-vibes-score,
.acf-field-pacing-score,
.acf-field-rewatch-factor-score {
  background: rgba(255, 255, 255, 0.02) !important;
}

.acf-field input[type="number"],
.acf-field input[type="text"],
.acf-field textarea {
  background: #000 !important;
  border: 1px solid #444 !important;
  color: #00ff41 !important;
  /* Matrix/Hacker Green text */
  font-family: 'Courier New', Courier, monospace !important;
}

/* 5. The "Master Score" Module */
.admin-cinescore {
  background: rgba(240, 33, 125, 0.05) !important;
  border-top: 2px solid var(--flex-snarkive) !important;
}

.admin-cinescore input {
  font-size: 24px !important;
  text-align: center;
  color: var(--cinesist-gold, #ffde21) !important;
}

/* 6. The Switch (The Disruptor Toggle) */
.acf-switch {
  background: #333 !important;
}

.acf-switch .acf-switch-on {
  background: var(--flex-snarkive) !important;
}

/* 7. Radio Buttons (Horizontal) */
.acf-radio-list li label {
  background: #222 !important;
  border: 1px solid #444 !important;
  color: #eee !important;
  padding: 5px 15px !important;
}

.acf-radio-list li label.selected {
  background: var(--flex-snarkive) !important;
  border-color: var(--flex-snarkive) !important;
}

/*
-----------------
9 - Single
-----------------
*/

/* --- Blog Pages Body Styles --- */

/* --- Review Header Layering Fix --- */
header.review-header {
    z-index: 40 !important;
    padding: 0;
}
/* Review Header Right Side Meta Read Time */
.single-right-meta {
  padding-right: 0.75rem;
}

.single-right-meta:not(:first-child):after {
  content: "";
  display: inline-flex;
  width: 1px;
  /* padding-right: 0.75rem; */
  height: 6px;
  margin-right: 10px;
  margin-left: 6px;
  background-color: var(--meta-fcolor);
  opacity: 0.25;
}

/* --- Adjust Blog Font Size --- */
.eplus-wrapper {
  font-size: 18px;
}

/* --- Cinepress 3.0: Post Dossier DNA Skin --- */

/* 1. Automated Image Borders (Featured and In-Post) */

/* 3. The Snarky Highlights Sync */
.s-hl {
  border: 2px solid var(--review-accent) !important;
  background: rgba(0, 0, 0, 0.4) !important;
}

.s-hl-heading {
  background: var(--review-accent) !important;
  color: #000 !important;
}

/* 4. Pullquote "Glow" */
figure.wp-block-pullquote blockquote:before {
  color: var(--review-accent, var(--flex-snarkive)) !important;
  opacity: .7 !important;
}

/* --- Cinepress 3.0: Post Dossier DNA Skin --- */

/* 3. Subtitle Sync */
.cs-dossier-subtitle {
  color: var(--review-accent, var(--flex-snarkive)) !important;
}

/* --- Cinepress 3.0: Review Dossier Skin --- */

/* 1. THE SPOTLIGHT HUD */
.cs-review-spotlight {
  min-height: 500px !important;
  border-bottom: 4px solid var(--flex-snarkive);
  margin: auto 5% auto 5%;
  /* Review Wrapper Simulator */
}

.cs-review-spotlight img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-spotlight-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.cs-spotlight-meta {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--review-accent, var(--cinesist-gold)) !important;
  background: rgba(0, 0, 0, 0.5);
  display: inline-block;
  padding: 5px 20px;
  border-radius: 2px;
  margin-bottom: 1rem !important;
}

.cs-spotlight-title {
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 1.5rem !important;
}

.cs-spotlight-verdict {
  font-family: var(--cs-font-mono, monospace);
  font-size: 1.1rem;
  color: var(--flex-text-secondary);
  max-width: 700px;
  margin: 0 auto !important;
}

/* 2. THE ANALYTICS HUB GAUGE */
.cs-analytics-hub {
  background: var(--flex-gray-2);
  padding: 3rem !important;
  margin: 2rem 0 !important;
  border: 1px solid var(--flex-decor-border);
  border-left: 10px solid var(--review-accent, var(--flex-snarkive));
}

/* Progress Bar Track */
.cs-gauge-track {
  background: #000;
  height: 10px;
  width: 100%;
  margin-top: 10px;
  position: relative;
}

/* Progress Bar Fill - Animated */
.cs-gauge-fill {
  height: 100%;
  background: var(--review-accent, var(--flex-snarkive));
  box-shadow: 0 0 10px var(--review-accent, var(--flex-snarkive, #333));
  transition: width 1.5s ease-in-out;
}

/* --- Cinepress 3.0: High-Fidelity Ticket Stub Breadcrumbs --- */

/* 1. Reset the Nav & Paragraph */
nav.rank-math-breadcrumb {
  margin: 20px 0 25px 0;
  display: block;
  overflow: visible;
  /* Required for the cutout circles to pop out */
}

nav.rank-math-breadcrumb p {
  display: flex !important;
  /* Forces all links/spans onto one line */
  flex-wrap: wrap;
  /* Allows wrapping on small mobile screens */
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 2px;
  /* Creates the space for the circular cutouts */
}

/* 2. Style the Ticket Stubs */
nav.rank-math-breadcrumb a,
nav.rank-math-breadcrumb .last {
  display: inline-flex !important;
  align-items: center;
  position: relative;
  background: var(--ticket-bg-color);
  padding: 8px 20px;
  color: var(--ticket-text-color);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 4px;
  /* Slight base rounding */
  transition: all 0.3s ease;
}

/* 3. The "Punch Hole" Cutouts (Pseudo-elements) */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::before,
nav.rank-math-breadcrumb .last::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  /* Slightly smaller for a cleaner look */
  height: 14px;
  border-radius: 50%;
  background-color: var(--flex-gray-3);
  /* Matches page background to "punch" through */
  transform: translateY(-50%);
  z-index: 5;
}

/* Position Left Hole */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb .last::before {
  left: -8px;
}

/* Position Right Hole */
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::after {
  right: -8px;
}

/* 4. Hide the separators entirely */
nav.rank-math-breadcrumb .separator {
  display: none !important;
}

/* 5. Start/End Exceptions */

/* Home Link: No left hole, rounded left edge */
nav.rank-math-breadcrumb a:first-of-type {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

nav.rank-math-breadcrumb a:first-of-type::before {
  display: none;
}

/* Last Item: Different color/weight, rounded right edge, no right hole */
nav.rank-math-breadcrumb .last {
  background: var(--cinesist-gold) !important;
  color: #000 !important;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

nav.rank-math-breadcrumb .last::after {
  display: none;
}

/* 6. Interaction */
nav.rank-math-breadcrumb a:hover {
  background: var(--flex-snarkive) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* 1. THE META BAR */
.cs-post-meta-bar {
  padding: 15px 0;
  border-bottom: 1px solid var(--flex-decor-border);
  margin-bottom: 2rem !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: auto 5%;
}

body .smeta-sec .meta-avatar img {
  width: 4rem;
  height: 4rem;
}

@media (width <= 767px) {
    body .smeta-sec .meta-avatar img {
        width: 3rem;
        height: 3rem;
    }
}

.cs-meta-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cs-meta-author img {
  border-radius: 50%;
  border: 2px solid var(--flex-snarkive);
}

.wp-block-post-author-name a {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1rem;
}

.cs-meta-stats {
  display: flex;
  gap: 20px;
  font-family: var(--cs-font-mono, monospace);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.meta-el.meta-comment {
  display: none;
}

@media (min-width: 768px) {

  .smeta-in .is-meta>*,
  .smeta-in .meta-text>*,
  .review-section .meta-text>*,
  .spon-qview .sponsor-label,
  .spon-qview .is-text,
  .ubox .nice-name {
    font-size: 1rem;
  }
}

/* Review Post & Sidebar Columns */
.cs-dossier-columns {
  /* display: flex; */
  flex-direction: row;
  /* gap: 20px; */
}

/* 2. THE COLUMNS GRID */
.cs-dossier-grid {
  gap: 3rem !important;
  margin-top: 2rem !important;
}

/* Sidebar Specific Styling */
.cs-sidebar-profile {
  background: var(--flex-gray-2);
  border: 1px solid var(--flex-decor-border);
  padding: 20px;
  border-top: 4px solid var(--flex-snarkive);
  position: sticky;
  top: 100px;
}

/* Review Content Area */
.cs-review-content {
  width: 100%;
}

.cs-review-content p,
.cs-review-content h1,
.cs-review-content h2,
.cs-review-content h3,
.cs-review-content h4,
.cs-review-content h5,
.cs-review-content h6 {
  color: var(--cs-text-primary);
}

/* Content Area Polish */
.wp-block-post-content {
  line-height: 1.8;
  font-size: 1.1rem;
}

/* --- Save It Placeholder Glow --- */
.cs-meta-stats p:contains('[SAVE]') {
  color: var(--cinesist-gold);
  cursor: pointer;
  font-weight: 900;
}

.updated-date {
  color: var(--cs-text-primary);
}

.wp-block-post-terms__prefix {
  color: var(--cs-text-primary);
}

/* --- Reaction Section --- */
/* The Container */

/* Individual Reaction Module */
.cs-reaction-sec-content .reaction {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Mobile View */
@media (max-width: 767px) {
  .cs-reaction-sec-content .rb-reaction {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 1rem;
  }
}

/* Desktop View */
@media (min-width: 768px) {
  .cs-reaction-sec-content .rb-reaction {
      display: grid;
      grid-template-columns: repeat(10, 1fr); /* All 10 in one line */
      gap: 0.5rem;
  }
}

/* The SVG Icons */
.cs-reaction-sec-content .reaction-icon svg {
    width: 45px;  /* Sized for 5-across fit */
    height: 45px;
    transition: all 0.3s ease;
}

/* The "Cinesist" Hover - Lights up the Tech */
.cs-reaction-sec-content .reaction:hover .reaction-icon svg {
    transform: scale(1.2) rotate(5deg);
}

/* The Labels (Love, Sad, etc.) */
.cs-reaction-sec-content .reaction-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 10px;
    color: var(--cs-text-secondary);
}

.cs-reaction-sec-content .reaction-count {
  background: var(--flex-gray-1);
  color: var(--cs-text-primary);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  margin-top: 5px;
  border: 1px solid var(--flex-decor-border);
}

/* Bring back the color only when selected */
.cs-reaction-sec-content .reaction.is-active .reaction-icon svg {
    transform: scale(1.3);
    /* Add a purple 'Cinesist pulse' to show selection */
    filter: drop-shadow(0 0 8px var(--flex-snarkive));
}

/* Optional: Slight pulse animation for the active selection */
@keyframes signalPulse {
    0% { transform: scale(1.3); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1.3); }
}
.cs-reaction-sec-content .reaction.is-active {
    animation: signalPulse 2s infinite ease-in-out;
}

/* --- Conflict Widget --- */
.cs-btn__black-spy:hover {
  animation: glitch 0.3s infinite;
}

@keyframes glitch {
  0% { transform: translate(0) }
  20% { transform: translate(-2px, 1px) }
  40% { transform: translate(-2px, -1px) }
  60% { transform: translate(2px, 1px) }
  80% { transform: translate(2px, -1px) }
  100% { transform: translate(0) }
}

/* Initial State: Bars are zeroed and hidden */
.cs-gauge__white-bar, 
.cs-gauge__black-bar {
    width: 0%; 
    opacity: 0;
    transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
}

/* Standby State for the Widget */
.cs-conflict-widget {
    transition: opacity 0.5s ease;
    opacity: 0.3; /* Dimmed until data is ready */
}

/* Active State triggered by script */
.cs-conflict-widget.is-ready {
    opacity: 1;
}

.cs-conflict-widget.is-ready .cs-gauge__white-bar,
.cs-conflict-widget.is-ready .cs-gauge__black-bar {
    opacity: 1;
}

/* --- Streaming Tonight Widget - Powered by JustWatch --- */

/* Force the JustWatch widget to be cleaner */
.cs-streaming-hud [data-jw-widget] {
    margin-bottom: 10px !important;
}

/* ---------------------------------*/
/* --- Cinepress 3.0: Cinematic Spotlight Protocol --- */

/* Remove foxiz Extra Meta from Mobile */
@media (width <= 991px) {
  .smeta-extra {
      display: none;
  }
}

/* 1. The Stage & Backdrop */
.cs-spotlight-stage {
  display: flex !important;
  align-items: flex-end !important;
  /* Pushes text to the bottom */
  position: relative;
}

.cs-spotlight-img {
  position: relative;
  overflow: hidden;
}

.cs-spotlight-img img {
  border-radius: var(--round-5);
  box-shadow: var(--shadow-1), 0 0 15px rgba(0, 0, 0, 0.5), 0 0 5px var(--review-accent);
  border: 5px solid var(--review-accent) !important;
  transition: all 0.5s ease;
}

.cs-spotlight-overlay {
  width: 100%;
  position: absolute;
  right: 0;
  padding: 1.5rem 2rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 2. Dossier Typography */
.cs-dossier-title {
  font-size: var(--cs-font-size-h1) !important;
  text-transform: CAPITALIZE;
  color: #fff !important;
  font-weight: 800;
  line-height: 0.95;
  margin-bottom: 10px !important;
  z-index: 5;
}

.cs-dossier-subtitle {
  font-family: var(--cs-font-secondary) !important;
  color: var(--review-accent, var(--flex-snarkive));
  font-weight: 500;
  line-height: 1.3;
  z-index: 5;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: start;
}

/* 3. The Meta HUD Bar */
.cs-meta-hud-bar {
  justify-content: space-between !important;
}

.cs-operative-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-left: 0;
  padding-right: 0;
}

.cs-operative-info img {
  width: 3rem;
  border: 2px solid var(--flex-snarkive);
  border-radius: 50%;
}

.cs-operative-info-box {
  display: flex;
  align-items: center;
  position: relative;
  gap: 15px;
  padding-left: 0;
  padding-right: 0;
}

.cs-operative-info-box img {
  width: 3.5rem;
  border: 2px solid var(--flex-snarkive);
  border-radius: 50%;
}

.cs-operative-info-verify {
  position: absolute;
  left: 75px;
  margin-top: -1.3em !important;
}

.cs-user-badge {
  display: flex;
  position: relative;
}

/* --- Cinepress 3.0: Mission Status HUD --- */

.cs-mission-status {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: var(--cs-font-mono, monospace);
}

/* The Meta Word (Legendary, Burn-it, etc.) */
.cs-hud-meta-word {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 2px;
  text-shadow: 0 0 10px currentColor;
  /* Gives it that neon glow */
}

/* The Large Cinescore Bubble */
.cs-hud-big-score {
  font-size: 2rem;
  font-weight: 900;
  color: var(--review-accent);
  padding: 5px 15px;
  /* Color injected by PHP */
  border-radius: 2px;
  text-shadow: 0 0 10px currentColor;
}

/* Interaction: Pulse effect on the score */
.cs-hud-big-score:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease-in-out;
}

/* 4. Sidebar Card Styling */
.cs-sidebar-card {
  background: var(--flex-gray-2);
  border: 1px solid var(--flex-decor-border);
  padding: 25px !important;
  border-top: 4px solid var(--flex-snarkive);
  position: fixed;
  top: 100px;
}

/* --- Cinepress 3.0: Snarkive Holographic Sidebar --- */

.cs-snarkive-intel-card {
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
  /* Adjust based on your header height */
  margin-bottom: 50px;
  background: var(--flex-gray-15);
  border: 1px solid var(--flex-decor-border);
  border-top: 5px solid var(--review-accent);
  padding: 0 !important;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  z-index: 10;
  transition: top 0.3s ease;
}

/* 1. The Holographic Poster Effect */
/* We create a "double" poster look using a pseudo-element for the blurred background */
.cs-sidebar-poster-wrap {
  position: relative;
  height: 350px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

/* The "ghost" background image */
.cs-sidebar-poster-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(15px) opacity(0.4) saturate(2);
  transform: scale(1.2);
}

/* The sharp front-facing poster */
.cs-sidebar-poster-main {
  position: relative;
  z-index: 2;
  height: 80%;
  width: auto;
  border: 1px solid var(--review-accent);
  box-shadow: 0 0 30px var(--review-accent);
  transform: perspective(1000px) rotateY(-5deg);
  /* Subtle 3D tilt */
}

/* --- Cinepress 3.0: GitBash Terminal Styling --- */

.cs-terminal-line {
  font-family: var(--cs-font-mono, monospace);
  font-size: 0.75rem;
  line-height: 1.4;
  margin-bottom: 15px;
  background: #000;
  padding: 8px 12px;
  border-radius: 4px;
  border-left: 3px solid #333;
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

/* User & Host (Green) */
.cs-user {
  color: #2ecc71;
  /* Classic Terminal Green */
  font-weight: 700;
}

/* Separator (White) */
.cs-bash-sep {
  color: #ffffff;
  margin: 0 2px;
}

/* Directory (Snarkive Purple) */
.cs-dir {
  color: var(--flex-snarkive);
  /* Injects the score color or purple */
  font-weight: 600;
}

/* Command & Args (White) */
.cs-command {
  color: #ecf0f1;
  margin-left: 8px;
}

/* Blinking Cursor Effect */
.cs-cursor {
  color: var(--review-accent);
  font-weight: 900;
  animation: terminal-blink 1s step-end infinite;
}

@keyframes terminal-blink {

  from,
  to {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

/* Content adjustment to fit the new terminal line */
.cs-intel-title {
  margin-top: 10px !important;
}

/* 2. Content Area: Data Terminal */
.cs-intel-card-content {
  padding: 25px !important;
  position: relative;
}

/* Scanline Effect Overlay */
.cs-intel-card-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
  z-index: 5;
}

.cs-intel-title {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  color: var(--flex-text-primary);
  margin-bottom: 5px !important;
  letter-spacing: -1px;
}

.cs-intel-type {
  font-family: var(--cs-font-mono, monospace);
  font-size: 0.7rem;
  color: var(--review-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
  display: block;
}

.cs-intel-overview {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--flex-text-secondary);
  border-top: 1px dashed var(--flex-decor-border);
  padding-top: 15px;
}

/* 3. The Access Button */
.cs-intel-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--review-accent) !important;
  /* Solid Brand Color */
  border: 1px solid var(--review-accent) !important;
  border-radius: 2px;
  color: #fff !important;
  box-shadow: 0 4px 0px rgba(0, 0, 0, 0.5), 0 0 15px var(--review-accent);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 12px;
  margin-top: 20px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.cs-intel-btn:hover {
  background: var(--review-accent) !important;
  color: #ffffff;
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.2);
  box-shadow: 0 6px 20px var(--review-accent);
}

/* Interaction: "Active Signal" Animation on the button */
.cs-intel-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0px rgba(0, 0, 0, 0.8);
}

/* --- Cinepress Review Share Box --- */
.cs-review-social-share {
  margin-block-start: var(--cs-spacing-md) !important;
  margin-block-end: var(--cs-spacing-md) !important;
  padding: 0 !important;
}

.cs-review-share-box {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-right: 10px;
}

.cs-post-author-box {
  border-radius: 5px;
  border-top: 5px solid var(--flex-snarkive);
  border-right: 1px solid var(--flex-snarkive);
  border-bottom: 1px solid var(--flex-snarkive);
  border-left: 1px solid var(--flex-snarkive);
  box-shadow: var(--wp--preset--shadow--natural);
}

/* --- Cinesist After Review Wrapper --- */
.cs-section.after-review-section {
  background-color: var(--flex-bg-color);
}

.cs-after-review-wrapper {
  background-color: var(--flex-bg-color);
}

/* --- Cinesist Review Comments Block --- */
/* Comments Spacing */
.cs-review-comments-wrapper {
  margin-block-start: var(--cs-spacing-md) !important;
  margin-block-end: var(--cs-spacing-md) !important;
  background-color: var(--flex-bg-color);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.cs-review-comments-label-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cs-review-thoughts-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cs-review-comments-label-icon {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.5rem !important;
  color: var(--flex-black-white);
}

.cs-review-comments-label {
  margin: 0 !important;
  font-size: var(--cs-font-size-h5);
  color: var(--cs-title);
}

.comment-respond:not(:only-child) .comment-reply-title,
.cs-comments-reply-title {
  position: relative;
  padding-top: var(--cs-spacing-sm) !important;
  border-top: 1px solid var(--flex-text-title) !important;
}

.comment-respond:not(:only-child) .comment-reply-title::before,
.cs-comments-reply-title::before {
  background-color: var(--flex-snarkive);
  top: -2.5px;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  width: 27%;
  z-index: 1;
}

/* Comments Text Area */
/* Styling for all comment inputs and textarea */
/* --- Snarkive: Comment Heading Protocol --- */

.cs-comments-reply-title {
  font-family: var(--font-mono, monospace);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Add a "Ready to Type" Cursor effect to the heading */
.cs-comments-reply-title::after {
  content: "_";
  color: var(--body-fcolor);
  animation: terminal-blink 1s step-end infinite;
}

/* Ensure the 'Cancel Reply' link doesn't break the layout */
.cs-comments-reply-title small a {
  font-size: 0.6rem;
  color: var(--cinesist-red);
  text-decoration: underline;
  margin-left: 15px;
  font-weight: 400;
}

.comment-form-field-textarea textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
  border: 2px solid var(--flex-snarkive-90) !important;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  /* Ensure they fill the container */
  box-shadow: inset 5px 5px 10px var(--flex-gray-2),
    inset -5px -5px 10px var(--wp--preset--color--flex-gray-4);
}

/* Hide labels but keep them accessible for screen readers */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.comment-form .logged-in-as,
.comment-form .comment-notes {
  display: none;
}

/* Avatar styling */
.user-avatar-circle,
.user-icon-placeholder {
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 5px;
}

/* Brand styling for comments login/out link */
.cs-comment-operative-info .brand-first,
.cs-comment-operative-info .brand-last {
  display: inline-flex;
}

.brand-first {
  font-weight: bold;
  color: var(--flex-snarkive);
  /* Adjust to your brand color */
  padding-left: 5px;
}

.brand-last {
  font-weight: 600;
}

.required-mark {
  color: var(--cinesist-red);
}

.cs-comment-operative-info {
  display: flex !important;
  margin-bottom: 20px;
  line-height: 1.6;
  align-items: center;
  gap: 5px;
}

.cs-comment-operative-info .login-toggle {
  vertical-align: unset;
}

.cs-comment-operative-info img {
  width: 2.25rem;
  border: 2px solid var(--flex-snarkive);
  border-radius: 50%;
}

.cs-logged-in-as {
  margin: 0 !important;
  font-size: 0.75rem;
  color: var(--cs-text-secondary);
}

.cs-logged-out-msg {
  margin: 0 !important;
  font-size: 0.75rem;
  color: var(--cs-text-primary);
}

.cs-logged-out-msg .login-toggle {
  vertical-align: unset;
}

.cs-operative-info-avatar-icon {
  font-size: 1.2rem;
  align-items: center;
  width: 1.5rem;
  color: var(--body-fcolor);
  fill: var(--body-fcolor);
}

/* Blocksy Modal Trigger Style */
.ct-open-modal {
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

/* --- Cinesist Suggest Card Grid --- */

/* Section Wrapper */
.cs-suggest-grid-wrapper {
  margin-bottom: 0 !important;
}
.cs-suggest-grid-card {
  /* position: relative; */
  /* overflow: hidden; */
}

.cs-suggest-grid-card li {
  position: relative;
  overflow: hidden;
}

.cs-suggest-grid-card-image-holder {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.cs-suggest-grid-card-image {
  position: relative;
  /* overflow: hidden !important; */
  /* Hardware acceleration (will-change) + smooth cubic-bezier */
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  height: 400px;
  border-radius: 8px;
  margin-bottom: 0;
}

.cs-suggest-grid-card-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.cs-suggest-grid-card-image:hover {
  transform: scale(1.05);
}

/* related resource: generateblocks-inline-css:2:2788 */
.gb-element-7984b69f { /* the element was .gb-element-7984b69f */
  overflow: hidden;
}

/* related resource: style.css?ver=2.7.2:696:1 */
a.gb-element-7984b69f { /* the element was a */
  display: block;
}

.cs-suggest-grid-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cs-suggest-grid-card-details {
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  /* grid-area: auto; */
  left: 0;
  padding: 3rem 1rem 1rem;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.cs-suggest-grid-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -moz-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.cs-suggest-grid-card-title a {
  color: unset;
}

.cs-suggest-grid-card-title a:hover {
  color: unset;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--flex-snarkive);
}

@media (min-width: 768px) {
  .cs-suggest-grid-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
  }
}

/*
-----------------
10 - Archives
-----------------
*/
/* Archive Grid */
.archive-header-content {
  flex-grow: 1;
  border-bottom: 3px solid;
  /* Gives us the nice separation */
  max-width: 1250px;
  /* Makes the header lineup with the page */
  padding: 0px 0px 0px 0px;
  /* Removes all the padding */
}

.archive-title {
  text-align: left !important;
  /* Fixes Foxiz Stuck on Center Rule */
  padding: 0px !important;
  /* Takes the spacing away from the left side */
  margin-bottom: 1rem !important;
  /* Adds a small space between the Archive Title and Description */
  font-size: var(--cs-font-size-h1) !important;
}

/* --- Heading Titles --- */
.archive-title.b-follow {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  gap: 20px;
  /* border-bottom: 3px solid var(--body-fcolor); /* Adds a border underneath the Heading, that changes colors */
}

/* Find this rule in your Foxiz CSS and add the two lines below: */
.b-follow .rb-follow {
  width: auto;
  min-width: 25px;
  padding-right: 0px;
  padding-left: 0px;
  border-radius: var(--round-7);
  display: inline-flex;
  align-items: center;
  /* THIS IS THE KEY FLEXBOX PROPERTY */
  justify-content: center;
  /* ADD THIS to center content horizontally as well */
  border: none;
}

.b-follow .rb-follow:hover {
  color: var(--flex-snarkive);
  cursor: pointer;
}

/* Now, ensure the icon and the text added via ::after are aligned */
.b-follow .rb-follow i {
  -webkit-transform: none !important;
  transform: none !important;
  /* ADD THIS to ensure the icon is centered relative to the text baseline */
  vertical-align: middle;
  font-size: 1em !important;
  color: var(--flex-text-primary);
  font-weight: 600;
}

.b-follow .rb-follow i:hover {
  color: var(--flex-snarkive);
  cursor: pointer;
}

.b-follow .rb-follow i:before {
  font-size: 2em;
}

.b-follow .rb-follow i:after {
  font-family: var(--meta-b-family);
  font-size: 1.25em;
  font-weight: var(--meta-b-fweight);
  margin-left: 5px;
  position: absolute;
  color: var(--flex-text-primary);
}

.b-follow .rb-follow i:after:hover {
  color: var(--flex-snarkive);
  cursor: pointer;
}

/* --- Target the main wrapper to ensure it has space to work with --- */
.category-hero-wrap {
  /* Set an appropriate height/max-height for the hero section */
  /* Example: adjust the max-height as needed */
  max-height: 400px;
}

/* --- Ensure the item container takes up the full space and is a Flex container --- */
.category-hero-item-inner {
  width: 100%;
  height: 100%;
  /* Ensures items inside are centered (optional, but often helpful for 'contain') */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- The KEY Change: Use 'object-fit: contain' --- */
.category-hero-item-inner img {
  /* Set dimensions to ensure the image can use the whole container space */
  width: 100%;
  height: 100%;
  /* This scales the image down to fit its container without cropping. */
  /* It preserves the image's aspect ratio, so you'll see the whole image. */
  object-fit: contain;

  /* Remove any fixed margins or padding that might be squishing the image */
  margin: 0;
  padding: 0;
}

/* =========================================
  CINESIST HERO: TRI-INTEL GRID (GB PRO SKIN) - CONSOLIDATED & OPTIMIZED
========================================= */
/* Container must be relative for the link to stick */

/* Tactical Admin Overlays */
.cs-admin-edit-shroud {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 2. Reveal on hover of the li (p-wrap) */
.p-wrap:hover .cs-edit-link-wrapper {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.cs-edit-link-wrapper {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none; /* Prevents blocking clicks when invisible */
}

.cs-edit-link-wrapper:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.cs-archive-hero.post-item:hover .cs-admin-edit-shroud {
  opacity: 1;
}

.cs-edit-link {
  display: inline-block;
  background: var(--cs-brand);
  color: var(--awhite) !important;
  font-family: var(--font-sans, sans-serif);
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.cs-edit-link:hover {
  background: #fff;
  color: var(--cinesist-orange) !important;
}

/* Target the cards specifically in the archive feed */
.cs-archive-hero.post-item.p-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Ensure the 'p-link' (the invisible full-card link) covers the GB structure */
.cs-archive-hero.post-item.p-wrap .p-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* Archive Hero Grid - Main Grid Container */
div#cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "main main sideCol"
    "main main sideCol";
  gap: 10px;
  max-height: 550px;
  /* Overall max height for the entire grid */
  overflow: hidden;
  /* Prevents content overflow */
}

/* Large Main Item Wrapper: placed in the 'main' area */
.cs-archive-hero.grid-query.first-post-query-wrapper {
  grid-area: main;
  height: 100%;
  /* Important: Wrapper must fill its grid area */
  /* If this wrapper needs to be a flex container for its children (the ul), uncomment below */
  /* display: flex; */
  /* flex-direction: column; */
}

/* UL within the Large Main Item Wrapper */
.cs-archive-hero.grid-query.first-post-query-wrapper>ul.gbp-list--unstyled.cs-archive-hero-loop-list {
  height: 100%;
  /* Important: This ul must fill its parent wrapper */
  width: 100%;
  display: grid;
  /* Make this ul a flex container for its li child */
  flex-direction: column;
  /* Stack its li child vertically */
  grid-area: unset;
  /* Ensure no conflicting grid-area property */
}

/* Individual Large List Item (the large tile) */
li.gb-loop-item.post-item.cs-archive-hero-loop-item.cs-hero-large-tile {
  height: 100% !important;
  /* Force li to fill its ul parent */
  width: 100%;
  flex-grow: 1 !important;
  /* Allow li to grow within its flex ul parent */
  overflow: hidden !important;
  /* Contains any overflowing children within this li */
  display: flex;
  /* Make the li a flex container for its tile-holder */
  flex-direction: column;
  /* Stack children vertically */
  grid-area: unset;
  /* Remove any conflicting grid-area property */
}

.cs-archive-hero-loop-item.cs-hero-large-tile {
  margin: unset;
}

/* Wrapper for the Two Small Tiles: placed in the 'sideCol' area */
.cs-archive-hero.grid-query.second-post-query-wrapper {
  grid-area: sideCol;
  display: grid;
  /* Make this wrapper itself a grid container */
  grid-template-columns: 1fr;
  /* Single column for stacking its children (the ul) */
  height: 100%;
  /* Important: This wrapper must take 100% height of its grid-area */
}

/* Unordered list (ul) that holds the two small tiles */
.cs-archive-hero.grid-query.second-post-query-wrapper>ul.gbp-list--unstyled.cs-archive-hero-loop-list {
  display: grid;
  /* Make the ul a grid container */
  grid-template-rows: 270px 270px;
  /* Two rows, each 270px high, to fit within 550px total height with a 10px gap */
  gap: 10px;
  /* Gap between the two small tiles (li children) */
  height: 100%;
  /* Important: Ensure the ul takes full height of its parent */
  grid-area: unset;
  /* Ensure no conflicting grid-area property */
}

/* Individual small list items (the small tiles) */
li.gb-loop-item.post-item.cs-archive-hero-loop-item.cs-hero-small-tile {
  grid-area: unset;
  /* Remove any conflicting grid-area property */
  height: 100%;
  /* Important: Ensure li fills its grid row */
  width: 100%;
  display: flex;
  /* Make it a flex container to control internal content */
  flex-direction: column;
}


/* 3. TILE INTERIOR (Article Container) - Apply to both large and small tiles */
.cs-archive-hero.tile-holder {
  position: relative;
  height: 100%;
  /* Important: Ensures the tile-holder fills its parent (li) */
  width: 100%;
  overflow: hidden;
  /* Necessary for object-fit on image and potential hover effects */
  background: var(--cinefox-black-spy);
  /* border: 1px solid var(--cinesist-border-color); */
  border-radius: var(--round-10);
  display: flex;
  /* Make it a flex container to center/align content if needed */
  flex-direction: column;
  /* Often useful for stacking image and text overlay */
}

/* Wrapper for the image (the 'a' tag) within the tile-holder */
.cs-archive-hero.tile-holder>a {
  display: block !important;
  /* Force it to be a block for consistent sizing */
  height: 100% !important;
  /* Important: Make the 'a' tag fill its parent .tile-holder */
  width: 100% !important;
  overflow: hidden !important;
  /* Crucial to contain the image if it tries to overflow */
}


/* Feature Image Layer - Specific to the image itself */
.cs-archive-hero .tile-feat img {
  /* General rule for all such images */
  width: 100% !important;
  height: 100% !important;
  /* Important: Make the image fill its parent container */
  object-fit: cover !important;
  /* Maintain aspect ratio and cover the area */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  /* Removes extra space below images */
  transform: scale(0.9);
}

.tile-feat img {
  /* General rule for all such images */
  width: 100% !important;
  height: 100% !important;
  /* Important: Make the image fill its parent container */
  object-fit: cover !important;
  /* Maintain aspect ratio and cover the area */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  /* Removes extra space below images */
  transform: scale(0.9);
}

/* .cs-archive-hero.post-item:hover .cs-archive-hero.tile-feat img */
/* ... existing hover styles ... */
.cs-archive-hero.post-item:hover .cs-archive-hero.tile-feat img {
  transform: scale(1.08);
}


/* Text Overlay (The Details Container) */
.cs-archive-hero.tile-details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px;
  z-index: 5;
}

/* 4. TYPOGRAPHY & META (Dossier Branding) */
/* These seem fine as they are for text styling */
.cs-archive-hero.tile-meta-title a {
  color: var(--cinesist-title-color) !important;
  font-family: var(--font-sans);
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.cs-archive-hero.tile-meta-term {
  color: var(--cinesist-orange);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.65rem;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.cs-archive-hero.tile-meta-summary {
  color: var(--cinesist-text-color);
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Author Byline Sub-Section */
.cs-archive-hero.tile-meta-writer-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.cs-archive-hero.tile-meta-writer-av {
  border-radius: 50%;
  border: 2px solid var(--cinesist-orange);
}

/* --- Archive Feed --- */
/* Feed Cards */

/* --- Pagination Navigation --- */


/* --- 10A --- Cinesist Reviews Archive Template --- */

/* --- Cinesist Engine: Tactical Topic Hero Grid --- */

.cs-topic-hero-wrap {}

.cs-topic-hero-grid {
  margin: 0 !important;
  gap: 10px !important;
}

/* 1. THE DOSSIER CARD (Base) */
.cs-topic-hero-wrap li.wp-block-post {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  height: 100%;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Pushes content to bottom */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-topic-hero-wrap li.wp-block-post:hover {
  transform: scale(1.01);
  border-color: var(--review-accent);
}

/* 2. THE IMAGE (Full Bleed Background) */
.cs-topic-hero-wrap figure.cs-featured-hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  z-index: 1;
}

.cs-topic-hero-wrap figure.cs-featured-hero-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.6;
  /* Cinematic dimming */
  transition: opacity 0.3s ease;
}

.cs-topic-hero-wrap li.wp-block-post:hover img {
  opacity: 0.8;
}

/* 4. THE CONTENT (Text HUD) */
.cs-topic-hero-wrap h2.cs-featured-hero-title {
  position: relative;
  z-index: 3;
  padding: 25px;
  margin: 0;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.cs-topic-hero-wrap h2.cs-featured-hero-title a {
  color: #fff !important;
  text-decoration: none !important;
}

/* Main Hero (Large Left) */
.cs-topic-hero-main h2.cs-featured-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  max-width: 85%;
}

/* Sidebar Dossiers (Small Right) */
.cs-topic-hero-sidebar h2.cs-featured-hero-title {
  font-size: 1.3rem;
  padding: 15px;
}

.cs-topic-query-sidebar ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

/* Force Sidebar items to split height evenly */
.cs-topic-hero-sidebar li.wp-block-post {
  flex: 1;
}

/* 5. TACTICAL "STAR" OR SCORE BAR INJECTION 
   (If you use the meta-bar here, we style it for overlay) */
.cs-topic-hero-wrap .cs-meta-overlay {
  position: relative;
  z-index: 3;
  padding: 0 25px 25px 25px;
  display: flex;
  gap: 15px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #aaa;
}

/* Cinesist Archive Hero Review Hud */
.cs-hero-review-hud {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
  z-index: 55;
}

/* Cinesist Topic Hero Card Title */
.cs-topic-featured-hero-title .wp-block-post-title {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  z-index: 22;
  margin: 0 !important;
}

/* Cinesist Topic Hero Card Title Links */

.entry-title a {
  color: var(--awhite);
  transition: coloe 0.3 ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-title a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--flex-snarkive)!important;
  text-decoration-thickness: 2px;
}

h2.entry-title {
  font-size: var(--title-size, var(--h2-fsize)) !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

h2.entry-title.overlay a {
  color: var(--awhite);
  transition: color 0.3s ease;
}

h2.entry-title.overlay a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--review-accent, var(--flex-snarkive)) !important;
  text-decoration-thickness: 2px;
}

/* --- Cinesist Topic Hero Card Cinescore Stats --- */
/* Topic Review Cinemeter */
.cs-review-hud-cinemeter-wrapper {
  display: contents;
}

/* Cinesist Topic Review Cinescore Number */
.cs-review-hud-cinescore {
  margin: 0 !important;
  display: flex;
  align-items: center;
}

/* Cinesist Cinescore Meta Word */
.cs-review-hud-cinescore-meta-word-badge {
  background: var(--review-accent);
  color: #e5e5e5 !important;
  padding: 2px 15px !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  z-index: 15;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* --- Cinesist: Tactical Topic Hero HUD --- */

/* Container Grid Setup */
.cs-topic-hero-main {
  margin: 0 !important;
}

/* 1. UNIVERSAL CARD STYLING (Main & Sidebar) */
.cs-topic-hero-wrap li.wp-block-post {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  list-style: none;
  height: 100%;
  margin: 0 !important;
}

/* 2. IMAGE HANDLING (Background Layer) */
.cs-topic-featured-hero-img,
.cs-topic-sidebar-hero-img {
  margin: 0 !important;
  height: 100%;
}

.cs-topic-featured-hero-img img,
.cs-topic-sidebar-hero-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: opacity 0.4s ease, transform 0.8s ease;
}

/* 3. THE HUD CONTENT (Foreground Layer) */
.cs-hero-review-hud {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem !important;
  z-index: 99;
  pointer-events: none;
  /* Let clicks pass to the image link */
}

.cs-hero-review-hud * {
  pointer-events: auto;
  /* Re-enable for title links */
}

.cs-topic-hud-author {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  flex-wrap: nowrap;
}

.cs-topic-hud-author .wp-block-post-author__avatar {
  margin: 0 !important;
}

.cs-topic-hud-pub {
  display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.cs-topic-hud-pub-date {
  font-size: 12px;
  margin: 0 !important;
}

/* 4. MAIN FEATURED HUD (Large Left) */
.cs-topic-featured-hero-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 900 !important;
  line-height: 1.1;
  margin-bottom: 0.5rem !important;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.cs-topic-featured-hero-title a {
  color: #fff !important;
  text-decoration: none !important;
}

/* Cinescore Overlay Rows */
.cs-topic-hero-cinescore {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  margin: 0 !important;
}

/* Meta HUD (Author/Date) */
.cs-topic-hud-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #ccc;
  letter-spacing: 1px;
  margin: 0 !important;
}

.cs-topic-hud-author .wp-block-post-author__avatar img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  opacity: 1 !important;
}

/* 5. SIDEBAR CARDS (Stacked Right) */
.cs-topic-query-sidebar ul {
  display: flex;
  flex-direction: column;
  gap: 10px !important;
  height: 100%;
}

.cs-topic-hero-sidebar li.wp-block-post {
  flex: 1;
  /* Splits the height evenly */
  min-height: 225px;
}

/* Sidebar Text HUD */
h3.entry-title {
  font-size: var(--title-size, var(--h3-fsize)) !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

h3.entry-title.overlay a {
  color: var(--awhite);
  transition: color 0.3s ease;
}

h3.entry-title.overlay a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--review-accent, var(--flex-snarkive)) !important;
  text-decoration-thickness: 2px;
}

/* Post Cards Excerpts */
.entry-summary p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-block-end: 0 !important;
}

.cs-topic-featured-hero-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-topic-sidebar-hero-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 10;
  font-size: 1.2rem !important;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 !important;
}

.cs-topic-sidebar-hero-title a {
  color: #fff !important;
  text-decoration: none;
}

/* Sidebar Gradient Protection */
.cs-topic-hero-sidebar li.wp-block-post::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0) 60%);
  z-index: 5;
}

/* 6. SPECIAL HUD ELEMENTS (C-METER placeholders) */

.cs-topic-main-sidebar-card .cs-topic-hero-cinescore .cs-card-cinemeter {
  margin: unset;
}

.cs-topic-main-sidebar-card .cs-topic-hero-cinescore .cs-meter-icon {
  font-size: 1.2rem;
}

.cs-topic-main-sidebar-card .cs-hud-value {
  font-size: 1.5rem;
}

.cs-topic-main-sidebar-card .cs-review-hud-cinescore-meta-word-badge {
  font-size: 0.9rem !important;
}

.cs-review-hud-cinescore-meta-word-badge {
  background: var(--review-accent, #ff5612);
  color: #000;
  padding: 2px 8px;
  font-weight: 900;
  font-size: 10px;
  border-radius: 2px;
}

/* Suggested Article Titles */
h4.entry-title {
  font-size: var(--title-size, var(--h4-fsize)) !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

h4.entry-title.overlay a {
  color: var(--awhite);
  transition: color 0.3s ease;
}

h4.entry-title.overlay a:hover {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--review-accent, var(--flex-snarkive)) !important;
  text-decoration-thickness: 2px;
}

/*
-----------------
11 - Pages
-----------------
*/
.page-header-1 .page-header-inner {
  display: none;
  /* Hides Default Foxiz Page Header */
}

/* --- Homepage --- */
/* Sets Adaptive BG Color */
/* Light Mode */
.bg-data-color {
  --bg-opacity: 1;
  background-color: rgb(244 244 245 / var(--bg-opacity, 1));
}

/* Dark Mode */
[data-theme="dark"] .bg-data-color {
  --bg-opacity: 1;
  background-color: rgb(5 5 5 / var(--bg-opacity, 1));
}
  

/* Sets Adaptive Patterns */
/* Light Mode */
.bg-data-pattern {
  background-image: radial-gradient(rgba(209, 2, 209, 0.3) 2px, transparent 2px);
  background-size: 32px 32px;
  background-position: 0 0;
  opacity: 0.7;
  transition: all 0.5s ease;
}

/* Dark Mode */
[data-theme="dark"] .bg-data-pattern {
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 85, 0, 0.05) 2px, rgba(255, 85, 0, 0.05) 4px), linear-gradient(90deg, rgba(255, 85, 0, 0.08) 1px, transparent 1px);
  background-size: 100% 4px, 40px 100%;
  opacity: 1;
}

/* Sets Adaptive BG Animation and Color */
/* Light Mode */
.data-scan-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, transparent 0%, rgba(209, 2, 209, 0.15) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: dataFlowScan 6s linear infinite;
  pointer-events: none;
  transition: all 0.5s ease;
}

/* Dark Mode */
[data-theme="dark"] .data-scan-line {
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 85, 0, 0.15) 50%, transparent 100%);
  animation: dataFlowScan 4s linear infinite;
}

/* Data Flow Scan Animation */
@keyframes dataFlowScan {
  0% {
    background-position: 0 -100%;
  }
  100% {
    background-position: 0 200%;
  }
}

/* Homepage Hero Grid Category Links */
.gb-primary-cat-target {
  color: var(--awhite) !important;
}

/* Sets the font size for quick links */
.qlink {
  font-size: var(--rem-mini);
  /* 0.8rem */
}

/* Homepage Category Boxes */
.cbox-title {
  font-size: 1.2rem;
}

/* --- CS Bookmark Button --- */
/* 1. Fix the Overlap (Put it back in line) */
.user-action-bar .qa-button.bookmark-trigger.rb-bookmark {
    position: static !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    color: var(--cs-brand);
}

/* 2. Hide the fill icon by default */
/* We target the specific gb-shape class that GB uses */
.user-action-bar .qa-button.bookmark-trigger .gb-shape.bookmarked-icon {
    display: none !important;
}

/* 3. Show the outline icon by default */
.user-action-bar .qa-button.bookmark-trigger .gb-shape:not(.bookmarked-icon) {
    display: flex !important;
}

/* Change the outline icon color when the button is hovered */
.user-action-bar .qa-button.bookmark-trigger:hover .gb-shape:not(.bookmarked-icon), .user-action-bar .qa-button.bookmark-trigger:hover .gb-shape:not(.bookmarked-icon) svg {
    color: var(--cs-brand) !important;
    fill: var(--cs-brand);
}

/* Optional: Add a smooth transition so it doesn't just 'snap' */
.user-action-bar .qa-button.bookmark-trigger .gb-shape {
    transition: color 0.2s ease-in-out !important;
}

/* 4. Bookmarked State (The Swap) */
.user-action-bar .qa-button.bookmark-trigger.bookmarked .gb-shape:not(.bookmarked-icon) {
    display: none !important;
}

.user-action-bar .qa-button.bookmark-trigger.bookmarked .gb-shape.bookmarked-icon {
    display: flex !important;
    color: var(--flex-snarkive-90) !important;
}

/* 5. Centering fix for GenerateBlocks spans */
.user-action-bar .qa-button.bookmark-trigger .gb-shape {
    justify-content: center !important;
    align-items: center !important;
    font-size: 28px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* --- CS Bookmark Spinning Animation --- */
/* 1. Define the smooth 360-degree spin */
@keyframes bookmark-spin-smooth {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 2. Apply the animation when the 'is-loading' class is present */
.user-action-bar .qa-button.bookmark-trigger.is-loading .qa-icon,
.user-action-bar .qa-button.bookmark-trigger.is-loading .gb-shape {
    /* 0.8s duration with a smooth cubic-bezier curve */
    animation: bookmark-spin-smooth 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 3. Ensure the icon container allows the spin without clipping */
.user-action-bar .qa-button.bookmark-trigger .qa-icon {
    display: flex !important;
    transition: color 0.2s ease-in-out !important;
}

.qa-button svg {
  overflow: visible;
}

.cs-quickbar-av {
  border-radius: 50%;
}

@media (min-width: 768px) {

  /* makes .cbox elements shrink to 15% width,
     but only when the screen width is 768px or larger. */
  .rb-col-4>.block-inner>.cbox {
    flex-basis: 15%;
    width: auto;
    /* Ensures flex-basis takes precedence over width */
  }
}

.hide {
  display: none !important;
}

/* --- 11 A. The Homepage --- */

/* --- Cinesist HQ: Hero Grid Revamp --- */

/* 1. The Main Frame */
.hero-section[data-type='type-1'] {
  text-align: var(--alignment);
  margin-bottom: var(--margin-bottom, 0) !important;
}

.cs-homepage-hero-wrap {
  padding: 0.5rem 0;
  margin: 0 auto;
}

/* Hides Small Tites on Large Tiles */
.cs-hero__grid-tile:nth-child(1) .cs-hero__grid-title.smallTile,
.cs-hero__grid-tile:nth-child(1) .smallTile__summary,
.cs-intel-card__heroVid:nth-child(1) .cs-hero__grid-title.smallTile,
.cs-writer-grid-tile:nth-child(1) .cs-hero__grid-title.smallTile {
  display: none;
}

/* Hides Large Tites and summaries on Small Tiles */
.cs-hero__grid-tile:nth-child(n+2) .cs-hero__grid-title.largeTile,
.cs-intel-card__heroVid:nth-child(n+2) .cs-hero__grid-title.largeTile,
.cs-hero__grid-tile:nth-child(n+2) .largeTile__summary, 
.cs-hero__grid-tile:nth-child(n+2) .cs-hero__grid-pub,
.cs-writer-grid-tile:nth-child(n+2) .cs-hero__grid-title.largeTile {
  display: none;
}

/* 1. Ensure the first tile is the "Anchor" for the absolute fox */
.cs-hero-grid > .cs-hero__grid-tile:nth-child(1) {
    position: relative;
    overflow: visible; /* Important: Allow fox to peek outside the tile */
    transition: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

/* 2. Hide the fox on all tiles EXCEPT the first one */
.cs-hero__grid-tile:nth-child(n+2) .cinefox-peeking {
    display: none !important;
}

.cinefox-peeking {
  transform: translateX(100%) rotateY(308deg) !important; /* Initial position: fully below the container */
  transition: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

/* Specific override for the peeking character */
img.cinefox-peeking {
    /* Size control */
    width: 225px !important; /* Right in the middle of your 320-350px range */
    height: auto !important;
    
    /* Style control */
    object-fit: contain !important; /* Ensure he isn't stretched or cropped */
    max-width: none !important;     /* Allow him to exist outside the 100% parent container logic */
    
    /* Positioning (Ensures he sits at the bottom right) */
    bottom: 0 !important;
    top: auto !important;
    right: 0 !important;
}

/* Hover Trigger: Move only when the first tile is hovered */
/* Note: We use the tile itself as the trigger for the image inside it */
.cs-hero-grid > .cs-hero__grid-tile:nth-child(1):hover .cinefox-peeking {
    transform: scale(1.05) translateY(0) rotate(10deg)!important;
}

/* Hover Trigger: Move only when the first tile is hovered */
/* Note: We use the tile itself as the trigger for the image inside it */
.cs-hero-grid > .cs-hero__grid-tile:nth-child(n+2):hover .cinefox-peeking {
    transform: none !important;
    /* -translate-x-2 is ~8px */
}

/* The Featured Card (70% Column) */
.cs-hero-main .wp-block-post {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--contrast-1);
  transition: transform 0.3s ease;
}

/* Target the Cover Block specifically in our Hero */
.cs-hero-main .wp-block-cover {
  padding: 2.5rem !important;
  /* Spacing inside the "Terminal" */
  border-radius: 0.5rem;
  overflow: hidden;
}

/* The Adaptive Underline for the Title inside the Cover */
.cs-hero-main .wp-block-cover .wp-block-post-title a {
  color: #ffffff !important;
  /* Always white over the dark gradient */
  font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
  /* Responsive font sizing */
  line-height: 1.1;
  display: inline;
  background-image: linear-gradient(var(--flex-snarkive), var(--flex-snarkive));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 3px;
  transition: background-size 0.3s;
}

.cs-hero-main .wp-block-cover:hover .wp-block-post-title a {
  background-size: 100% 3px;
}

/* All Category Link & Button Style */
.p-category {
  position: relative;
  z-index: 1;
  display: inline-flex;
  color: var(--cat-fcolor, inherit);
  background-color: var(--topic-accent, var(--cat-highlight));
  /* background: var(--cat-highlight-90); */
  padding: 0.25rem;
  border-radius: 0.25rem;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1;
  font-style: inherit;
}

/* --- Notification Popup Style --- */
/* Notification Bubble */
.notification-popup {
  display: block;
  width: var(--dropdown-w, 400px);
  max-width: 100vw;
  --bottom-spacing: 0;
  border: 1px solid var(--flex-gray-4);
  border-top: none;
}
/* Notification Header */
.notification-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  /* Added new border */
  border-bottom: 1px solid var(--flex-gray-3);
}

/* --- Cinesist Overlay/Pop-up Search Block --- */
/* Cinesist Search Overlay: "The Intercept" */

/* 1. Backdrop Blur & Darken */
.gb-overlay-1000065662 .gb-overlay__backdrop {
    background-color: rgba(10, 10, 10, 0.9) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* 2. Inner Wrapper Layout */
.cs-search-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
}

/*
-----------------
8 - Blocks (GenerateBlocks, Core Blocks, Patterns)
-----------------
*/

/*
-----------------
9 - Archive (Category, Tag, Search Results)
-----------------
*/

/* --- Archive Hero Overlays --- */
.cs-hero-main .wp-block-post-featured-image {
  position: relative;
  margin: 0 !important;
  height: 35rem;
  transition: filter 0.3s ease;
}

/*
-----------------
10 - Pages (Default Page, Contact, Legal)
-----------------
*/

/*
-----------------
11 - Forms (Search, Newsletter, Inputs)
-----------------
*/

/* 3. The Search Input Group */
.cs-search-input-group {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 3px solid var(--flex-snarkive);
    padding: 15px 0;
    margin-bottom: 40px;
    position: relative;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.cs-search-input-group:focus-within {
    border-color: #ffffff;
    box-shadow: 0 5px 20px -10px var(--flex-snarkive);
}

.cs-search-icon {
    color: var(--flex-snarkive);
    margin-right: 25px;
    display: flex;
    align-items: center;
    opacity: 0.8;
}

.cs-search-input {
    background: transparent !important;
    border: none !important;
    color: var(--flex-text-title)!important;
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    font-weight: 200 !important;
    width: 100% !important;
    outline: none !important;
    font-family: var(--font-primary, sans-serif) !important;
    padding: 0 !important;
}

.cs-search-input::placeholder {
    color: var(--flex-text-secondary)!important;
}

/* 4. Popular Tags / Active Signals */
.cs-search-popular {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    animation: fadeIn 0.8s ease forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.cs-popular-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--flex-snarkive);
    font-weight: 800;
    white-space: nowrap;
}

.cs-tag-cloud {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.cs-search-tag {
    color: var(--flex-text-secondary);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.cs-search-tag:hover {
    color: #ffffff;
    background: var(--flex-snarkive);
    transform: translateY(-2px);
}

/* 5. Close Button Styling (Custom) */
.cs-custom-close {
    position: fixed !important;
    top: 40px !important;
    right: 40px !important;
    color: var(--flex-text-title);
    font-size: 40px !important;
    line-height: 1 !important;
    opacity: 0.6;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer;
    background: transparent !important;
    border: none !important;
    z-index: 999999 !important;
    padding: 10px !important;
}

.cs-custom-close:hover {
    opacity: 1;
    color: var(--flex-snarkive) !important;
    transform: rotate(90deg);
}

.cs-custom-close:active {
    transform: rotate(360deg) scale(0.7);
    color: var(--flex-snarkive) !important;
}

/* The Gradient Overlay: Ensuring Title Scannability */
.cs-hero-main .wp-block-post-featured-image {
  position: relative;
  margin: 0 !important;
  height: 35rem;
  transition: filter 0.3s ease;
  /* Smooth transition for the effect */
}

.cs-hero-main .wp-block-post-featured-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  /* Only covers the bottom half */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
  pointer-events: none;
}

.cs-hero-main .wp-block-post-featured-image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.1);
  transition: filter 0.5s ease;
}

.cs-hero-main .wp-block-post-featured-image img:hover {
  filter: brightness(var(--flex-hover-brightness));
}

/* Overlay the Headline on the image */
.cs-hero-main .wp-block-post-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  z-index: 22;
  margin: 0 !important;
}

.cs-hero-main .wp-block-post-title a {
  color: #fff;
  font-size: var(--cs-font-size-h2) !important;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.largeTile a:hover {
  text-decoration: 3px solid underline;
  text-decoration-color: var(--flex-snarkive);
  color: unset;
}

.smallTile a:hover, .cs-hero__grid-pub-info a:hover {
  text-decoration: 2px solid underline;
  text-decoration-color: var(--flex-snarkive);
  color: unset;
}

/* 2. Adaptive Title Links & Hover Underline */
.cs-hero-main .wp-block-post-title a,
.cs-hero-sidebar .wp-block-post-title a {
  color: #e5e5e5;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  display: inline-block;
}

/* Sidebar Title Hover Logic */
.cs-hero-sidebar .wp-block-post-title a {
  color: var(--flex-text-title);
  /* Adaptive: Dark in Light mode, White in Dark mode */
  transition: color 0.2s ease;
}

.cs-hero-main .wp-block-post-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--flex-snarkive);
}

/* 3. The Sidebar Intel (30% Column) */
.cs-hero-sidebar .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cs-hero-sidebar .wp-block-post {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--flex-gray-2);
  padding: 0.75rem;
  border-bottom: 1px solid var(--flex-decor-border);
  border-left: 3px solid var(--flex-snarkive-50);
  transition: all 0.3s ease;
  margin-bottom: 0;
}

.cs-main-feature-list-card-content {
  margin-bottom: 0;
}

.cs-hero-sidebar .wp-block-post:hover {
  border-left-color: var(--flex-snarkive-90);
  background: var(--flex-snarkive-50);
  /* Subtle tinted background on hover */
}

.cs-hero-sidebar .wp-block-post-featured-image {
  flex: 0 0 6rem;
  /* Small thumbnails */
  margin: 0 !important;
}

.cs-hero-sidebar .wp-block-post-featured-image img {
  aspect-ratio: 1/1;
  border-radius: 2px;
  border-radius: 0.25rem;
  width: 6.25rem;
  /* ~100px */
  height: 6.25rem;
  object-fit: cover;
}

/* 4. Formatting Sidebar Titles */
.cs-hero-sidebar .wp-block-post-title {
  font-size: 0.95rem !important;
  font-weight: 700;
  line-height: 1.3;
}

.cs-hero-main .wp-block-post-excerpt {
  color: #f0f0f0;
  /* Kept bright for visibility over dark gradient */
  font-size: 1rem;
  max-width: 80%;
  margin-top: 0.5rem;
}

/* ===============================================================
   ARKAHNA SUMMONING ANIMATION
=============================================================== */
/* 1. Base Container Setup */
.arkahna-summoning-container {
    position: relative;
    display: inline-block; /* Or width/max-width */
    overflow: hidden; /* Keeps smoke inside the bounds */
    border-radius: 12px; /* Optional: adds a slight corner soften */
    line-height: 0; /* Prevents image bottom spacing */
}

/* 2. The Base Image */
.arkahna-image {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: screen; /* Optional: If she is on a dark background */
}

/* 3. The Existing Floating Animation (You Already Have This) */
.arkahna-float {
    animation: float_up_down 5s ease-in-out infinite;
}

/* Define YOUR float animation (if needed for testing) */
@keyframes float_up_down {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* THE VOID METER 
   Note: We default to 0% if the variable isn't found. 
   If PHP is working, it will override this.
*/
.void-meter {
    background-color: var(--cinesist-info); /* Your cyan blue */
    height: 100%;
    transition: width 0.8s cubic-bezier(0.17, 0.67, 0.83, 0.67); /* Smooth loading feel */
    width: var(--void-width, 0%) !important; /* !important ensures we override GB's internal CSS */
}

/* ------------------------------------------------ */
/* 4. THE INTRICATE CSS SMOKE EFFECT                */
/* ------------------------------------------------ */

/* Define the base properties for all smoke wisps */
.smoke-effect {
    position: absolute;
    border-radius: 50%; /* Start spherical, blend via gradient */
    filter: blur(25px); /* Crucial: Softens the edges of the gradient */
    opacity: 0;
    pointer-events: none; /* Prevents the smoke from being clickable */
}

/* Create different smoke elements with different positions, sizes, and animations */

/* SMOKE 1: Subtle Left Hand Swirl */
.smoke-1 {
    position: absolute;
    width: 25%; height: 25%;
    background: radial-gradient(circle, rgba(144 6 230 / 94%) 0%, rgba(255, 255, 255, 0) 70%);
    top: 25%; left: 5%;
    animation: smoke_wisp_left 8s ease-in-out infinite;
    animation-delay: -2s; /* Starts at a different phase */
    z-index: 20;
}

/* SMOKE 2: Central Rune Pulse */
.smoke-2 {
  position: absolute;
  width: 20%;
  height: 20%;
  background: radial-gradient(circle, rgba(144 6 230 / 94%), rgb(145 9 241 / 88%) 85%);
  top: 35%;
  left: 40.5%;
  animation: smoke_pulse_center 10s ease-in-out infinite;
  border-radius: 50%;
  z-index: 99;
}

/* SMOKE 3: Subtle Right Hand Swirl (Opposite) */
.smoke-3 {
  position: absolute;
    width: 20%; height: 20%;
    background: radial-gradient(circle, rgba(144 6 230 / 94%) 0%, rgba(255, 255, 255, 0) 70%);
    top: 25%; right: 5%;
    animation: smoke_wisp_right 7s ease-in-out infinite;
    animation-delay: -4s; /* Starts at a different phase */
    z-index: 20;
}


/* ------------------------------------------------ */
/* 5. INFINITE SMOKE KEYFRAMES                     */
/* ------------------------------------------------ */

/* Left Wisp: Drifts slightly up and right, fading in/out */
@keyframes smoke_wisp_left {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    20%  { opacity: 0.5; }
    50%  { transform: translate(15px, -15px) scale(1.1); opacity: 0.8; }
    80%  { opacity: 0.3; }
    100% { transform: translate(25px, -25px) scale(0.9); opacity: 0; }
}

/* Right Wisp: Drifts slightly up and left (opposite), fading in/out */
@keyframes smoke_wisp_right {
    0%   { transform: translate(0, 0) scale(1); opacity: 0; }
    30%  { opacity: 0.7; }
    60%  { transform: translate(-10px, -10px) scale(1.05); opacity: 0.6; }
    90%  { opacity: 0.2; }
    100% { transform: translate(-20px, -20px) scale(1); opacity: 0; }
}

/* Center Pulse: Pulsates in opacity and scale, no drift */
@keyframes smoke_pulse_center {
    0%   { transform: scale(1); opacity: 0.2; }
    50%  { transform: scale(1.15); opacity: 0.5; }
    100% { transform: scale(1); opacity: 0.2; }
}

/* ==========================================
   Cinesist Animations
======================================== */
/* --- 1. Soft Pulse --- */
.card-pulse {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.card-pulse:hover {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

/* --- 2. Glitch Flicker --- */
.card-flicker {
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.card-flicker:hover {
  animation: flicker 0.2s infinite;
}

@keyframes flicker {
  0% { opacity: 1; transform: translateX(0); }
  25% { opacity: 0.8; transform: translateX(-1px); }
  50% { opacity: 0.9; transform: translateX(1px); }
  75% { opacity: 0.7; transform: translateX(-1px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* --- 3. Attention Shake --- */
.card-shake {
  transition: transform 0.2s ease;
  cursor: pointer;
}

.card-shake:hover {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-3deg); }
  40% { transform: rotate(3deg); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
}

/* --- 4. Floating Ghost --- */
.card-float {
  transition: transform 0.5s ease;
  cursor: pointer;
}

.card-float:hover {
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* --- 5. Glow Trail --- */
.card-glow {
  transition: filter 0.3s ease;
  cursor: pointer;
}

.card-glow:hover {
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #3498db); }
  to { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #3498db); }
}


/* ===============================================================
   CINESCORE TIER EFFECTS
=============================================================== */
/* Base Card Styling */
.cinesist-card {
    transition: all 0.3s ease-in-out;
    border: 5px solid transparent;
    box-shadow: 0 10px 30px transparent;    
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* 9-10: LEGENDARY(Gold)👑 */
.tier-legendary { 
    --tier-color: var(--cs-legendary-500); 
    border-color: var(--tier-color);
}
.tier-legendary:hover {
    box-shadow: 0 0 25px var(--tier-color);
    box-shadow: 0 10px 30px var(--tier-color);
    /* Add a subtle "shimmer" effect here */
}
.tier-legendary a:hover {
  text-decoration: 3px solid underline;
  text-decoration-color: var(--tier-color, var(--flex-snarkive))
}

/* 7-8: Epic(Blue)💎 */
.tier-epic { 
    --tier-color: var(--cs-epic-500); 
    border-color: var(--tier-color);
}
.tier-epic:hover {
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
    box-shadow: 0 10px 30px var(--tier-color);
}
.tier-epic a:hover {
  text-decoration: 3px solid underline;
  text-decoration-color: var(--tier-color, var(--flex-snarkive))
}

/* 5-6: Basic(Green)🔋 */
.tier-basic { 
    --tier-color: var(--cs-basic-500); 
    border-color: var(--tier-color);
    border-style: dashed; /* The "System Flaw" look */
}

.tier-basic:hover {
    box-shadow: 0 10px 30px var(--tier-color);
}
.tier-basic a:hover {
  text-decoration: 3px solid underline;
  text-decoration-color: var(--tier-color, var(--flex-snarkive))
}

/* 3-4: Trash(Grey)🗑️ */
.tier-trash {
    --tier-color: var(--cs-trash-500);
    border-image: repeating-linear-gradient(45deg, var(--tier-color), var(--tier-color) 10px, #000 10px, #000 20px) 5 !important;
    /* z-index: 9999999; */
}

.tier-trash:hover {
    box-shadow: 0 10px 30px var(--tier-color);
}
.tier-trash a:hover {
  text-decoration: 3px solid underline;
  text-decoration-color: var(--tier-color, var(--flex-snarkive))
}

/* 1-2: Burn(Red)🔥 */
.tier-burn { 
    --tier-color: var(--cs-burn-500);
    border-image: repeating-linear-gradient(45deg, var(--tier-color), var(--tier-color) 10px, #000 10px, #000 20px) 5;
}
.tier-burn:hover {
    animation: flicker 0.1s infinite !important;
    background: linear-gradient(0deg, rgba(255,0,0,0.2) 0%, transparent 100%);
    box-shadow: 0 10px 30px var(--tier-color);
}
.tier-burn a:hover {
  text-decoration: 3px solid underline;
  text-decoration-color: var(--tier-color, var(--flex-snarkive))
}
    
@keyframes flicker {
    0% { border-color: #ff0000; }
    50% { border-color: #ff8000; }
    100% { border-color: #ff0000; }
}

/* Tier: NR (Not Rated / Flex Snarkive) */
.tier-nr {
    /* Uses your global flex variable */
    --tier-color: var(--flex-snarkive); 
    border-color: var(--flex-snarkive);
    border-style: double; /* Gives it a "double-encrypted" look */
    opacity: 0.9;
}

.tier-nr:hover {
    opacity: 1;
    box-shadow: 0 0 15px var(--flex-snarkive);
    /* A subtle pulse to indicate it's "Active" but unranked */
    animation: nr-pulse 2s infinite ease-in-out !important;
}

@keyframes nr-pulse {
    0% { border-color: var(--flex-snarkive); }
    50% { border-color: rgba(128, 128, 128, 0.5); } /* Fades toward a neutral grey */
    100% { border-color: var(--flex-snarkive); }
}

/* Ensure the Meta Badge for NR looks distinct */
.tier-nr .cinescore-badge {
    background-color: var(--flex-snarkive);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Apply colors to internal elements automatically */
.cinesist-card .cinescore-number { color: var(--tier-color); }
.cinesist-card .cinescore-badge { background-color: var(--tier-color); }

/* ===============================================================
   CINESCORE GEM/BADGE EFFECTS
=============================================================== */

/* Legendary Gem */
.is-legendary-gem {
  background-blend-mode: normal;
  background-image: linear-gradient(135deg,var(--cs-legendary-400) 0%,var(--cs-legendary-600) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 20px 0px var(--cs-legendary-300);
  transform: scale(1.1);
  transition: transform 0.150s cubic-bezier(0.4,0,0.2,1) 0s
}

.is-legendary-gem:is(:hover,:focus) {
  border: 1px solid var(--color-yellow-100)
}

.is-legendary-gem a {
  text-decoration: none;
  color: var(--wp--preset--color--custom-frost-white,#fafafa)
}

.is-legendary-gem a:hover {
  text-decoration: none;
  color: var(--wp--preset--color--custom-frost-white,#fafafa)
}

/* Epic Gem */
.is-epic-gem {
  background-blend-mode: normal;
  background-image: linear-gradient(135deg,var(--cs-epic-400) 0%,var(--cs-epic-600) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 20px 0px var(--cs-epic-300);
  transform: scale(1.1);
  transition: all 0.5s ease 0s
}

.is-epic-gem:is(:hover,:focus) {
  border: 1px solid var(--color-blue-100)
}

.is-epic-gem a {
  text-decoration: none;
  color: var(--wp--preset--color--custom-frost-white,#fafafa)
}

.is-epic-gem a:hover {
  text-decoration: none;
  color: var(--wp--preset--color--custom-frost-white,#fafafa)
}

/* Basic Gem */
.is-basic-gem {
  background-blend-mode: normal;
  background-image: linear-gradient(135deg,var(--cs-basic-400) 0%,var(--cs-basic-600) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 20px 0px var(--cs-basic-300);
  transform: scale(1.1);
  transition: all 0.5s ease 0s
}

.is-basic-gem:is(:hover,:focus) {
  border: 1px solid var(--color-green-100)
}

.is-basic-gem a {
  text-decoration: none;
  color: var(--wp--preset--color--custom-frost-white,#fafafa)
}

.is-basic-gem a:hover {
  text-decoration: none;
  color: var(--wp--preset--color--custom-frost-white,#fafafa)
}

/* Trash Gem */
.is-trash-gem {
  background-blend-mode: normal;
  background-image: linear-gradient(135deg,var(--cs-trash-400) 0%,var(--cs-trash-600) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 20px 0px var(--cs-trash-300);
  transform: scale(1.1);
  transition: all 0.5s ease 0s
}

.is-trash-gem:is(:hover,:focus) {
  border: 1px solid var(--color-neutral-100)
}

.is-trash-gem a {
  text-decoration: none;
  color: var(--wp--preset--color--custom-frost-white,#fafafa)
}

.is-trash-gem a:hover {
  text-decoration: none;
  color: var(--wp--preset--color--custom-frost-white,#fafafa)
}

/* Burn Gem */
.is-burn-gem {
  background-blend-mode: normal;
  background-image: linear-gradient(135deg,var(--cs-burn-400) 0%,var(--cs-burn-600) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 20px 0px var(--cs-burn-300);
  transform: scale(1.1);
  transition: all 0.5s ease 0s
}

.is-burn-gem:is(:hover,:focus) {
  border: 1px solid var(--color-red-100)
}

.is-burn-gem a {
  text-decoration: none;
  color: var(--wp--preset--color--custom-frost-white,#fafafa)
}

.is-burn-gem a:hover {
  text-decoration: none;
  color: var(--wp--preset--color--custom-frost-white,#fafafa)
}

/* Not Rated Gem */
.is-nr-gem {
  background-blend-mode: normal;
  background-image: linear-gradient(135deg,var(--color-purple-400) 0%,var(--color-purple-600) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 20px 0px var(--color-purple-300);
  transform: scale(1.1);
  transition: all 0.5s ease 0s
}

.is-nr-gem:is(:hover,:focus) {
  border: 1px solid var(--color-purple-100)
}

.is-nr-gem a {
  text-decoration: none
}

.is-nr-gem a:hover {
  text-decoration: none
}

/* --- Cinepress 3.0: Rant Section Logic --- */

.cs-rants-wrapper {
  padding: 0.5rem 0;
  margin-top: 3rem;
  /* Custom 25% Red / 75% Adaptive Border */
}

/* Force the Query Loop into a 3-column Horizontal Grid */
.cs-rants-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cs-rants-card-inner {
  padding: 0 !important;
}

/* --- Cinepress 3.0: Adaptive Intel Heading --- */

/* The Container Wrapper */
.cs-rants-header {
  display: flex;
  align-items: center;
  /* Keeps the heading and "View All" on the same line */
  justify-content: space-between;
  width: 100%;
  /* The Base Track: This stretches across the whole screen */
  border-bottom: 3px solid var(--flex-decor-border);
  margin-bottom: 2.5rem;
}

/* The Heading Logic */
.cs-rants-heading {
  position: relative;
  display: inline-flex !important;
  /* Forces the block to shrink-wrap the text */
  margin: 0 !important;
  padding-bottom: 10px;
  /* Space above the border */
  color: var(--cinesist-red) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* The Solid Red Bar (Adapts to text width) */
.cs-rants-heading::before {
  content: '';
  position: absolute;
  bottom: -3px;
  /* Sits on the container's border-bottom */
  left: 0;
  width: 100%;
  /* MAGIC: Always matches the width of the heading text */
  height: 3px;
  background: var(--cinesist-red);
  z-index: 5;
}

/* The Fade-Out (Fixed length at the end of the text) */
.cs-rants-heading::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -100px;
  /* Positions it just outside the right edge of the text */
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, var(--cinesist-red), transparent);
  z-index: 4;
}

/* If you have a "View All" link on the right */
.cs-rants-header a.view-all {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--flex-text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.cs-rants-header a.view-all:hover {
  color: var(--cinesist-red);
}

/* The Grid Cards: Horizontal Polish */
.cs-rants-grid .wp-block-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Ensures all cards match height */
  background: var(--flex-gray-2) !important;
  border: 1px solid var(--flex-decor-border);
  border-bottom: 4px solid var(--cinesist-red);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Hover Effect: The "Red Alert" Glow */
.cs-rants-grid .wp-block-post:hover {
  transform: translateY(-8px);
  border-color: var(--cinesist-red);
  box-shadow: 0 10px 30px rgba(229, 9, 20, 0.2);
}

/* Image Scanner Look */
.cs-rant-image img {
  width: 100%;
  height: 15rem;
  /* ~240px */
  object-fit: cover;
  transition: all 0.5s ease;
}

.cs-rant-image img:hover {
  border-bottom: 2px solid var(--cinesist-red);
}

.cs-rants-grid .wp-block-post:hover .cs-rant-image img {
  border-bottom: 2px solid var(--cinesist-red);
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--cinesist-red);
}

.cs-rants-grid .wp-block-post:hover::before .cs-rant-image img {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

/* Title: High Intensity */
.cs-rant-title a {
  color: var(--flex-text-title) !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  padding: 0.5rem 0.5rem 0.5rem !important;
  display: block;
  text-decoration: none;
}

.cs-rant-title a:hover {
  color: var(--cinesist-red) !important;
}

/* Excerpt: Redacted Body Text */
.cs-rant-excerpt {
  flex-grow: 1;
  padding: 0.315rem 0.5rem !important;
  font-size: 0.9rem !important;
  line-height: 1.6;
  color: var(--flex-text-primary);
  border-top: 1px dashed var(--flex-decor-border);
  opacity: 0.8;
}

.cs-rant-post-meta {
  gap: var(--cs-spacing-xxs);
  padding: 0.315rem;
}

.cs-rant-cal-icon {
  padding: unset;
}

.cs-rant-date {
  font-size: 0.8rem;
}

/* Mobile: Collapse to 1 Column */
@media (max-width: 768px) {
  .cs-rants-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* --- Cinepress 3.0: Global Intel Card & Header Framework --- */

/* 1. THE VARIABLE ENGINE */
.cs-intel-card-section-wrapper {
  --accent: var(--flex-snarkive); /* Default to Snarkive Brand */
  padding: 0.5rem 0;
}

/* Presets: Just add these classes to the wrapper in the editor */
.cs-intel-card-section-wrapper.is-rants, .p-wrap.is-rants {
  --accent: var(--cinesist-red);
}

.cs-intel-card-section-wrapper.is-news, .p-wrap.is-news {
  --accent: var(--cinesist-info);
}

.cs-intel-card-section-wrapper.is-gaming, .p-wrap.is-gaming {
  --accent: var(--cinesist-gaming);
}

.cs-intel-card-section-wrapper.is-tv, .p-wrap.is-tv {
  --accent: var(--cinesist-tv);
}

.cs-intel-card-section-wrapper.is-reviews, .p-wrap.is-reviews, 
.cs-intel-card__inner.is-reviews {
  /* --accent: var(--review-accent, var (--flex-snarkive)); */
}
/* --- Cinescore Color Injection System --- */
/* Fallback for all cards */
.is-review-card {
    --cinescore-accent: var(--flex-snarkive);
}

/* Specific rank overrides */
.has-cinescore-legendary   { --cinescore-accent: #50a735;
--cinescore-accent-60: #50a73599;
--cinescore-accent-40: #50a73566; }
.has-cinescore-solid       { --cinescore-accent: #c7e811;
--cinescore-accent-60: #c7e81199;
--cinescore-accent-40: #c7e81166;}
.has-cinescore-redacted    { --cinescore-accent: #ffde21;
--cinescore-accent-60: #ffde2199;
--cinescore-accent-40: #ffde2166;}
.has-cinescore-compromised { --cinescore-accent: #ff5612;
--cinescore-accent-60: #ff561299;
--cinescore-accent-40: #ff561266;}
.has-cinescore-burn { --cinescore-accent: #ff0d0d;
--cinescore-accent-60: #ff0d0d99;
--cinescore-accent-40: #ff0d0d66;}
.has-cinescore-nr { 
  --cinescore-accent: var(--flex-title-color); 
    border: 4px solid var(--flex-title-color);
    border-radius: 5px;
    box-shadow: unset;
}
.has-cinescore-nr {
    border: 2px solid var(--cinescore-accent);
    border-radius: 5px;
    box-shadow: inset 0 0 15px rgba(80, 167, 53, 0.1);
}

/* Apply the Glow to elements inside */
.has-cinescore-legendary .is-review-card {
    border: 1px solid var(--cinescore-accent);
    box-shadow: inset 0 0 15px rgba(80, 167, 53, 0.1);
}

.cs-cinescore__card-value {
    color: var(--cinescore-accent);
}

/* --- [END Cinescore Color Injection System] --- */

.cs-intel-card-section-wrapper.is-movies, .p-wrap.is-movies {
  --accent: var(--cinesist-gold);
}

.cs-intel-card-section-wrapper.is-industry, .p-wrap.is-industry {
  --accent: var(--cinesist-industry);
}

.cs-intel-card-section-wrapper.is-topic, .p-wrap.is-topic {
  --accent: var(--flex-snarkive);
}

/* 2. THE ADAPTIVE HEADER */
.cs-intel-card-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* border-bottom: 3px solid var(--flex-decor-border); */
  margin-bottom: 1rem !important;
  position: relative;
}

.cs-intel-card-section-heading {
  position: relative;
  display: inline-flex !important;
  margin: 0 !important;
  padding-bottom: 10px;
  color: var(--flex-text-title) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-style: normal;
}

/* 3. THE INTEL GRID & CARDS */
.cs-intel-card-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
}

.cs-intel-card-inner, .cs-intel-card__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  padding: 0 !important;
  /* Resetting the inline padding */
}

/* Hover State: The Alert Mode */
.cs-intel-card-inner:hover,
.cs-intel-card__inner:hover {
  transform: translateY(-8px);
  /* border-color: var(--accent); */
  /* box-shadow: 0 10px 30px var(--accent); */
  /* Now glows in the accent color! */
}

/* 4. ELEMENT STYLING */
.cs-intel-card-image img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
}

.cs-intel-card-inner:hover .cs-intel-card-image img {
  transform: scale(1.05);
  border-bottom: 2px solid var(--accent);
}

.cs-intel-card-title a {
  color: var(--flex-text-title) !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
  transition: color 0.3s ease;
}

.cs-intel-card-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-intel-card-title {
  padding: 0.5rem;
  margin-block-end: 0 !important;
}

.cs-intel-card-excerpt {
  flex-grow: 0;
  font-size: 0.85rem !important;
  line-height: 1.5;
  color: var(--flex-text-primary);
  border-top: 1px dashed var(--flex-decor-border);
  opacity: 0.8;
  margin-block-end: 0 !important;
  overflow: hidden;
}

.cs-intel-card-excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-block-end: 0 !important;
  min-height: 2.5rem;
}

/* Meta Data & Calendar Icon */
.cs-intel-card-post-meta {
  padding: 0.5rem !important;
  /* display: flex; */
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  margin-block-end: 0 !important;
}

.cs-intel-card-cal-icon {
  margin-block-end: 0 !important;
  color: var(--review-accent);
  fill: var(--review-accent);
}

.cs-intel-card-cal-icon svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--review-accent, var(--accent)) !important;
  fill: var(--review-accent);
  /* Calendar icon matches section color */
}

.cs-intel-card-date {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--flex-text-secondary);
}

/* Mobile: Collapse */
@media (max-width: 1024px) {
  .cs-intel-card-grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .cs-intel-card-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* --- Cinepress 3.0: Review Intel Card Fix --- */

/* 1. Correcting the Wrapper/Grid Relationship */
.cs-intel-card-section-wrapper .is-reviews .cs-intel-card {
  background: var(--flex-gray-2) !important;
  margin-bottom: 0 !important;
  /* Force spacing if grid-gap fails */
  position: relative;
  padding-top: 4px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* DYNAMIC COLOR */
}

h2.entry-title a:hover,
h3.entry-title a:hover,
h4.entry-title a:hover,
h5.entry-title a:hover {
  text-decoration: 3px solid underline;
  text-decoration-color: var(--review-accent, var(--topic-accent, var(--flex-snarkive))) !important;
}

/* 3. The Meta Badge: Slanted HUD */
.cs-review-meta-badge, .cs-cinescore__card-meta-badge {
  position: absolute;
  top: 10px;
  left: 0;
  /* Slight offset for that disruptive look */
  /* background: var(--review-accent, var(--flex-snarkive)); */
  color: #e5e5e5 !important;
  padding: 2px 10px !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  z-index: 15;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

p.cs-review-meta-badge {
  margin: 0 !important;
}

/* Global Meta Badge: High Efficiency */
.cs-meta-badge {
  width: fit-content;    /* Shrink background to text size */
  align-self: flex-start; /* Stop stretching in flex containers */
  display: inline-flex;  /* Ensure it behaves like a badge */
  padding: 4px 12px;     /* Adjust padding for a nice badge look */
  border-radius: 4px;    /* Optional: round those corners */
}

/* --- Cinepress 3.0: Review HUD --- */

/* 1. Main Wrapper: Change to Row and align items center */
.cs-review-hud-stats {
  display: flex !important;
  flex-direction: row !important;
  /* Forces one line */
  flex-wrap: wrap;
  /* Allows the long Verdict to drop to a second line if needed */
  align-items: center !important;
  gap: 12px !important;
  padding: 0.5rem;
}

/* 2. Cinemeter Container: Kill the 100% width so the score can sit next to it */
.cs-card-cinemeter, .cs-cinescore__card-cinemeter {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto !important;
  /* Key fix: allows score to sit next to it */
  margin-bottom: 0 !important;
  /* Remove bottom margin to keep centered with score */
}

/* 3. The Bars: Ensure they have a base width since the parent is now 'auto' -Updated 1/31*/
.cs-meter-bars, .cs-cinescore__card-cinemeter-bars {
  display: flex;
  gap: 1px;
  border: solid 1px #888888ab;
}

/* 4. The Score: Remove bottom margin from paragraph if WP added one */
.cs-review-meta-score {
  margin: 0 !important;
  display: flex;
  align-items: center;
}

p.cs-review-meta-score {
  margin: 0 !important;
}

/* 5. The Verdict: Force this to a new line so the HUD stays clean */
.cs-review-meta-verdict {
  width: 100%;
  /* Forces the long text to the next line */
  margin: 5px 0 0 0 !important;
  border-top: 1px dashed var(--flex-decor-border);
  padding-top: 5px;
  font-size: var(--cs-font-size-caption);
}

p.cs-review-meta-verdict {
  margin: 0 !important;
}

/* Adding Line Clamp to uniform Cards */
.cs-review-meta-verdict {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  display: -webkit-box;
  overflow: hidden;
}

.cs-hud-row, .cs-cinescore__card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 4. HUD Stats (Score & Verdict) */
.cs-review-hud-stats, .cs-cinescore__card-stats {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 !important;
  border-top: 1px dashed var(--flex-decor-border);
  border-bottom: 1px dashed var(--flex-decor-border);
}

.cs-hud-value, .cs-cinescore__card-value {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--review-accent);
  line-height: 1;
}

.cs-hud-verdict, .cs-cinescore__card-verdict {
  -webkit-line-clamp: 1;
  /* Number of lines to show before truncation */
  line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 0.7rem;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--flex-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  /* Adds the '...' at the end */
}

/* --- Cinepress 3.0: Card Cinemeter HUD --- */

.cs-meter-icon {
  color: var(--review-accent);
  display: none;
  align-items: center;
  line-height: 1;
  opacity: 0.8;
  font-size: 1.2rem;
}

.cs-meter-bars {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 3px;
  /* Clean gap between segments */
  width: 100px;
  /* Fixed width for the whole track */
  height: 12px;
  /* Fixed height for the track */
  border: 1px solid rgba(136, 136, 136, 0.4);
  padding: 2px;
  /* Inner padding for the "boxed" look */
  background: rgba(0, 0, 0, 0.2);
}

.cs-meter-bars .cs-bar {
  display: block !important;
  flex: 1;
  /* Automatically divides the 80px into 5 equal parts */
  height: 100% !important;
  /* Fills the 12px track height */
  background-color: var(--flex-gray-15);
  /* Inactive bar color */
  border-radius: 1px;
  transition: all 0.3s ease;
}

.cs-meter-bars .cs-bar:not(.is-active) {
  background-color: var(--flex-gray-15);
}

/* Ensure the wrapper doesn't force a block layout */
.cs-review-meter-wrapper {
  display: contents;
  /* Allows children to participate in the parent flex row */
}

/* --- DNA Active States --- */
/* We target the .is-active class added by the PHP */

.cs-bar.is-active.cs-bar-1 {
  background-color: #ff0d0d !important;
  box-shadow: 0 0 8px rgba(255, 13, 13, 0.6);
}

.cs-bar.is-active.cs-bar-2 {
  background-color: #ff5612 !important;
  box-shadow: 0 0 8px rgba(255, 86, 18, 0.6);
}

.cs-bar.is-active.cs-bar-3 {
  background-color: #ffde21 !important;
  box-shadow: 0 0 8px rgba(255, 222, 33, 0.6);
}

.cs-bar.is-active.cs-bar-4 {
  background-color: #c7e811 !important;
  box-shadow: 0 0 8px rgba(199, 232, 17, 0.6);
}

.cs-bar.is-active.cs-bar-5 {
  background-color: #50a735 !important;
  box-shadow: 0 0 8px rgba(80, 167, 53, 0.6);
}

/* Tablet Optimization: Drop to 2 columns */
@media (max-width: 1024px) {
  .cs-intel-card-section-wrapper.is-reviews .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile Optimization: Single Column Dossier */
@media (max-width: 768px) {
  .cs-intel-card-section-wrapper.is-reviews .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

/* --- Cinepress 3.0: CineScore Analytics Hub --- */

.cs-analytics-hub {
  background: var(--flex-header-bg);
  /* Adaptive Terminal Background */
  border-top: 2px solid var(--flex-decor-border);
  border-bottom: 2px solid var(--flex-decor-border);
  padding: 3rem 0;
  margin: 4rem 0;
}

/* 1. The Score Module */
.cs-score-module {
  text-align: center;
  border-right: 1px dashed var(--flex-decor-border);
}

.cs-score-module h2 {
  font-size: 5rem !important;
  font-weight: 900;
  color: var(--cinesist-gold);
  line-height: 1;
  margin: 0 !important;
  text-shadow: 0 0 15px var(--cinesist-gold);
}

/* 2. The Gauges (The Rating Bars) */
.cs-gauge-container {
  padding: 0 2rem;
}

.cs-gauge-row {
  margin-bottom: 1.5rem;
}

.cs-gauge-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--flex-text-secondary);
  display: flex;
  justify-content: space-between;
}

/* The Progress Bars */
.cs-progress-bar {
  height: 8px;
  background: var(--flex-gray-2);
  border-radius: 4px;
  margin-top: 5px;
  position: relative;
  overflow: hidden;
}

.cs-progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--cinebar-yellow), var(--cinebar-green));
  width: 85%;
  /* This is what you change for each review */
}

/* 3. The Verdict Module */
.cs-verdict-module {
  border-left: 1px dashed var(--flex-decor-border);
  padding-left: 2rem;
}

.cs-verdict-module h3 {
  color: var(--cinesist-info);
  font-size: 0.9rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Cinepress 3.0: Cinescore DNA Banner Skin --- */

.cs-dna-banner-wrapper {
  padding: var(--cs-spacing-md) !important;
  border-top: 2px solid var(--flex-decor-border);
  border-bottom: 2px solid var(--flex-decor-border);
  position: relative;
  overflow: hidden;
  background-color: var(--flex-gray-2) !important;
}

.cs-dna-banner {
  display: flex;
}

.cs-dna-banner-hook-col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* 1. Logo Adaptive Logic */
/* --- Cinepress 3.0: High-Precision Logo Toggle --- */

/* 1. Base State (Light Mode) */
[data-theme="default"] .cs-dna-banner-lm-logo {
  display: block !important;
}

[data-theme="dark"] .cs-dna-banner-lm-logo {
  display: none !important;
}

/* 2. Tactical State (Dark Mode Trigger) */
/* This matches your root [data-color-mode*="dark"] exactly */
[data-theme="default"] .cs-dna-banner-dm-logo {
  display: none !important;
}

[data-theme="dark"] .cs-dna-banner-dm-logo {
  display: block !important;
}

/* 3. Global CSS Variable Cleanup */
/* Let's make sure the images stay sharp during the transition */
.cs-dna-banner-lm-logo img,
.cs-dna-banner-dm-logo img {
  max-width: 320px !important;
  height: auto;
  transition: opacity 0.3s ease-in-out;
}

/* 2. Typography Impact */
.cs-dna-banner-mission {
  font-size: var(--cs-font-size-h2) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  max-width: 800px;
  margin-bottom: 1rem !important;
}

.cs-dna-banner-tagline {
  font-family: var(--cs-font-mono, monospace);
  font-size: var(--cs-font-size-h4) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.1rem !important;
  color: var(--flex-snarkive);
}

/* 3. The DNA Info-Box (Floating Terminal) */
.cs-dna-infobox {
  padding: 2.5rem !important;
  border: 1px solid var(--flex-decor-border);
  border-radius: 4px;
  box-shadow: var(--shadow-1);
  position: relative;
  background-color: var(--flex-bg-color);
}

.cs-dna-info-heading {
  text-align: center;
  font-size: 1rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem !important;
}

/* 4. The Pulsing Rating Bar */
.cs-dna-rating-bar {
  gap: 4px !important;
  margin-bottom: 2rem !important;
}

.cs-dna-rating-bar>div {
  height: 8px;
  flex-grow: 1;
  border-radius: 2px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

/* Animation: Subtle 'Scanning' pulse across the bar */
.cs-dna-rating-bar:hover>div {
  opacity: 1;
  box-shadow: 0 0 10px currentColor;
  transform: scaleY(1.2);
}

/* 5. The List Breakdown */
.cs-dna-infobox-breakdown {
  margin-bottom: 2rem !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.cs-dna-infobox-item {
  font-size: 0.85rem !important;
  line-height: 1.4;
  margin-bottom: 12px !important;
  position: relative;
  padding-left: 20px;
}

.cs-dna-infobox-item::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--flex-snarkive);
  font-weight: 900;
}

/* 6. The Button (Snarkive Glow) */
.cs-dna-infobox-button a {
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease !important;
  border: none !important;
}

.cs-dna-infobox-button a:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--flex-snarkive);
  filter: brightness(1.2);
}

/* --- Cinepress 3.0: Review Grid & Card Skin --- */

/* 1. THE Section HEADER: Intelligence Branding */
.cs-review-grid .cs-intel-card-section-header {
  --accent: var(--cinesist-gold);
  /* Reviews default to Gold Intelligence */
  margin-bottom: 3rem;
}

/* 1. THE GRID: Targeting the UL correctly */
.cs-review-query ul.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 2.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  background: transparent !important;
  /* Remove that solid block background */
  border: none !important;
}

/* 2. THE CARD: Targeting the LI specifically */
.cs-review-query li.wp-block-post {
  background: var(--flex-gray-2) !important;
  border: 1px solid var(--flex-decor-border);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  --card-accent: var(--cinesist-gold);
}

.cs-review-card {
  background: var(--flex-gray-2) !important;
  border: 1px solid var(--flex-decor-border);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Makes all cards in a row equal height */
  margin: 0 !important;
  /* Resetting any weird theme margins */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  /* Default Accent - ACF will override this later */
  --card-accent: var(--cinesist-gold);
}

/* THE CINEMETER: The top glowing bar */
.cs-review-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--card-accent);
  z-index: 30;
  box-shadow: 0 0 15px var(--card-accent);
}

/* HOVER EFFECT: The "Identity" Match */
.cs-review-card:hover {
  border-color: var(--card-accent) !important;
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    0 0 20px var(--card-accent);
}

/* THE CINEMETER: Top Accent Bar on the LI */
.cs-review-query li.wp-block-post::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--card-accent);
  z-index: 20;
  box-shadow: 0 0 12px var(--card-accent);
}

/* Hover effect on the LI */
.cs-review-query li.wp-block-post:hover {
  transform: translateY(-10px);
  border-color: var(--card-accent);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* 3. VISUAL WRAPPER: Poster & Badge */
.cs-card-visual-wrapper {
  position: relative;
  height: 240px;
  overflow: hidden;
  margin: 0 !important;
}

.cs-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(30%) brightness(0.8);
  transition:
    transform 0.6s ease,
    filter 0.6s ease;
}

.cs-review-card:hover .cs-card-image img {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.08);
}

/* THE META BADGE: Score Overlay */
.cs-card-meta-badge {
  background: var(--card-accent) !important;
  color: #000 !important;
  box-shadow: 0 0 10px var(--card-accent);
  font-family: var(--cs-font-mono, monospace);
  font-weight: 900;
  text-transform: uppercase;
  /* Tactical Scanline look */
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 50%, transparent 50%);
  background-size: 100% 2px;
}

/* 4. CONTENT AREA: Intel & Metadata */
.cs-card-content {
  padding: 1.5rem !important;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* --- Cinepress 3.0: Card Subject Thumbnail Skin --- */

.cs-card-subject-thumb {
  width: 45px;
  height: 60px;
  /* Poster Aspect Ratio */
  background: var(--flex-gray-3);
  border: 1px solid var(--card-accent);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-subject-mini-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-subject-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.05) 10px, rgba(255, 255, 255, 0.05) 20px);
}

.cs-card-title {
  margin: 0 0 0.75rem 0 !important;
}

.cs-card-title a {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  color: var(--flex-text-title) !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

.cs-card-title a:hover {
  color: var(--card-accent) !important;
}

.cs-review-card:hover .cs-card-title a {
  color: var(--card-accent) !important;
}

.cs-card-excerpt {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: var(--flex-text-secondary);
  margin-top: auto !important;
  /* Pushes excerpt to bottom */
  padding-top: 1rem;
  border-top: 1px dashed var(--flex-decor-border);
}

/* 5. POST DATE: The Timestamp */
.cs-review-card .wp-block-post-date {
  font-family: var(--cs-font-mono, monospace);
  font-size: 0.7rem !important;
  color: var(--card-accent);
  opacity: 0.8;
  padding: 0 1.5rem 1.5rem !important;
}

/* --- Cinepress 3.0: Video Section (Hero Clone) --- */

.cs-video-hub-wrapper {
  padding: 0;
  margin: 4rem 0;
}

/* 1. THE MAIN SPOTLIGHT (Left Side) */
.cs-video-spotlight .wp-block-post {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #000;
}

/* The Feature Image (matching your 35rem height) */
.cs-video-spotlight-thumbnail {
  position: relative;
  margin: 0 !important;
  height: 35rem;
  /* Sync with Hero Main */
}

.cs-video-spotlight-thumbnail img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  filter: brightness(0.7);
  transition: filter 0.5s ease;
}

/* Central Play Button Overlay */
.cs-video-spotlight-icon {
  font-size: 2rem;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 25;
  pointer-events: none;
  opacity: 0.8;
}

.cs-video-spotlight:hover .cs-video-spotlight-icon {
  filter: drop-shadow(0 0 20px var(--flex-snarkive));
}

.cs-video-spotlight .wp-block-post:hover img {
  filter: brightness(0.9);
}

/* Title Styling (Overlay at bottom) */
.cs-video-spotlight-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.5rem 1rem !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, transparent 100%);
  z-index: 22;
  margin: 0 !important;
}

.cs-video-spotlight-title a {
  color: #fff !important;
  font-size: var(--cs-font-size-h2) !important;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.cs-video-spotlight-title a:hover {
  text-decoration-color: var(--flex-snarkive) !important;
}

/* 2. THE QUEUE SIDEBAR (Right Side) */
.cs-queue-item {
  padding-top: 0 !important;
}

.cs-video-queue ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.cs-video-queue .wp-block-post {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--flex-gray-2);
  padding: 0.75rem;
  border-bottom: 1px solid var(--flex-decor-border);
  border-left: 3px solid var(--flex-snarkive-50);
  transition: all 0.3s ease;
  position: relative;
}

.cs-video-queue .wp-block-post:hover {
  border-left-color: var(--flex-snarkive-90);
  background: var(--flex-snarkive-50);
}

/* Sidebar Thumbnails (matching your 6.25rem Hero logic) */
.cs-queue-item-thumbnail {
  flex: 0 0 6.25rem;
  height: 6.25rem;
  margin: 0 !important;
  position: relative;
}

.cs-queue-item-thumbnail img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* Small Play Icon for Sidebar */
.cs-queue-item-icon {
  position: absolute !important;
  top: 50% !important;
  left: 3rem !important;
  /* Centered over the 6rem thumbnail */
  transform: translate(-50%, -50%) scale(0.4) !important;
  z-index: 30;
  opacity: 0.8;
}

.cs-queue-item-title {
  font-size: 0.95rem !important;
  font-weight: 700;
  line-height: 1.3;
}

.cs-queue-item-title a {
  color: var(--flex-text-title) !important;
  text-decoration: none;
}

/* --- 11 B. Cinescore DNA --- */

/* --- Cinepress 3.0: Cinescore Protocol Skin --- */

.is-danger {
  border: 5px dashed #8b0000;
  /* Deep blood red */
  animation: danger-flash 0.8s step-end infinite;
}

@keyframes danger-flash {
  50% {
    border-color: transparent;
  }
}

.is-warning {
  border: 12px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #000, #000 15px, #ffb101 15px, #ffb101 30px) 12;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

/* Interactive Hover Effect */
.is-warning:hover {
  transform: scale(1.02);
  /* Slight pop out */
  filter: drop-shadow(0 0 10px rgba(255, 177, 1, 0.7));
  /* Glowing warning */
  cursor: help;
  /* Changes cursor to a question mark/help icon */
}

.is-safe {
  border: 4px solid #bdfcc9;
  /* Soft mint green */
  border-radius: 20px;
  background: white;
  padding: 20px;
  box-shadow: 0 0 15px rgba(189, 252, 201, 0.5);
  transition: all 0.5s ease;
  animation: safe-breath 6s infinite ease-in-out;
}

@keyframes safe-breath {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(189, 252, 201, 0.4);
  }

  50% {
    box-shadow: 0 0 25px rgba(189, 252, 201, 0.8);
  }
}

/* Interactive Hover sanctuary effect */
.is-safe:hover {
  transform: translateY(-5px);
  /* Gentle float */
  cursor: default;
  /* Reassuring standard cursor */
  border-color: #399953;
  /* Deepens to a lush green on focus */
}

.cinescore-dna {
  line-height: 1.6;
  color: var(--flex-text-primary);
}

/* The Parameter Table: "Diagnostic Scanner" */
.cs-cinescore-parameter-table table {
  border-collapse: separate;
  border-spacing: 0 8px;
  border: none !important;
}

.cs-cinescore-parameter-table thead tr {
  background: var(--flex-snarkive-90);
  color: var(--flex-text-title);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.cs-cinescore-parameter-table tbody tr {
  background: var(--flex-gray-2);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.cs-cinescore-parameter-table tbody tr:hover {
  transform: scale(1.02);
  background: var(--flex-gray-3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.cs-cinescore-parameter-table td {
  padding: 1.25rem !important;
  border: none !important;
}

/* The Scoreboard: "System Gauges" */
.cs-cinescore-scoreboard {
  font-size: 1rem;
}

.cs-cinescore-scoreboard .wp-block-column {
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.cs-cinescore-scoreboard .wp-block-column:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}

/* Adding a "Glow" line to the top of the scoreboard blocks */
.cs-cinescore-scoreboard .wp-block-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
}

/* --- Cinepress 3.0: Title Spotlight Pattern --- */

.cs-title-spotlight-wrapper {
  border: 2px solid var(--flex-decor-border);
  margin: 3rem 0;
  padding: 2rem !important;
  position: relative;
  box-shadow: inset 0 0 50px #000;
}

/* The HUD Score (Left) */
.cs-spotlight-score-col {
  text-align: center;
  border-right: 1px dashed var(--flex-decor-border);
}

.cs-spotlight-score-col h2 {
  font-size: 6rem !important;
  font-weight: 900;
  color: #ff5612;
  /* Compromised Orange */
  line-height: 1;
  margin: 0 !important;
  text-shadow: 0 0 20px rgba(255, 86, 18, 0.5);
}

.cs-spotlight-score-col p {
  letter-spacing: 4px;
  font-weight: 800;
  text-transform: uppercase;
  color: #ff5612;
}

/* The Intel Diagnostic (Center) */
.cs-spotlight-intel-col {
  padding: 0 2rem !important;
}

.cs-spotlight-intel-col h3 {
  font-family: var(--cs-font-mono, monospace);
  color: var(--cinesist-gold);
  text-transform: uppercase;
  margin-bottom: 1rem !important;
}

/* The Verdict (Right) */
.cs-spotlight-verdict-col {
  border-left: 1px dashed var(--flex-decor-border);
  padding-left: 2rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs-spotlight-verdict-col p {
  font-size: 0.7rem;
  color: var(--flex-text-secondary);
  margin-bottom: 5px !important;
}

.cs-spotlight-verdict-col h4 {
  color: #ff0d0d;
  /* Red Alert */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem !important;
}

/* The Button - "Authorization Required" */
.cs-spotlight-verdict-col .wp-block-button__link {
  background: transparent !important;
  border: 1px solid var(--flex-decor-border) !important;
  color: var(--flex-text-title) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  font-weight: 700;
}

.cs-spotlight-verdict-col .wp-block-button__link:hover {
  background: var(--cinesist-gold) !important;
  color: #000 !important;
  border-color: var(--cinesist-gold) !important;
}

/* The Meta Breakdowns: "Intelligence Dossiers" */
.cs-cinescore-meta-breakdown {
  background: var(--flex-gray-2);
  padding: 2rem !important;
  list-style: none !important;
  margin-bottom: 2rem !important;
}

.cs-cinescore-meta-breakdown li:first-child {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.cs-cinescore-meta-breakdown li:nth-child(1) {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.cs-cinescore-meta-breakdown li:nth-child(2) {
  font-style: italic;
  opacity: 0.9;
}

/* --- Cinepress 3.0: Oath & Core Terminal Skin --- */

/* The Oath Columns: From Pastels to Protocols */
.cs-snark-oath-one,
.cs-snark-oath-two,
.cs-snark-oath-three {
  background-color: var(--flex-gray-2) !important;
  /* Neutralize the pastels */
  border: 1px solid var(--flex-decor-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Hover Effect: "Focusing the Signal" */
.cs-snark-oath-one:hover,
.cs-snark-oath-two:hover,
.cs-snark-oath-three:hover {
  transform: translateY(-5px);
  border-color: var(--cinesist-gold);
  box-shadow: 0 10px 30px rgba(255, 222, 33, 0.1);
}

/* Color Accent Bars for the Oath Nodes */
.cs-snark-oath-one::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--cinesist-gold);
}

.cs-snark-oath-two::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--flex-snarkive);
}

.cs-snark-oath-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--cinesist-info);
}

.cs-snark-oath-one h2,
.cs-snark-oath-two h2,
.cs-snark-oath-three h2 {
  color: var(--flex-text-title) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Cinefreaks Core: The Signal Reception Hub */
.cs-cinefreaks-core-section {
  background: var(--flex-header-bg);
  border: 2px solid var(--flex-decor-border);
  padding: 3rem !important;
  margin: 4rem 0;
  position: relative;
  border-left: 8px solid var(--flex-snarkive);
  /* Snarkive Purple Anchor */
}

/* Contact List: "Mastermind Direct Line" */
.cs-contact-masterminds {
  list-style: none !important;
  padding-left: 0 !important;
}

.cs-contact-masterminds li {
  padding: 1rem;
  background: var(--flex-gray-2);
  margin-bottom: 0.5rem;
  border-left: 3px solid var(--cinesist-gold);
  font-family: var(--cs-font-mono, monospace);
}

.wp-container-core-columns-is-layout-d2da2050 .wp-block-column {
  border: 1px solid var(--flex-decor-border);
  transition: background 0.3s ease;
}

.wp-container-core-columns-is-layout-d2da2050 .wp-block-column:hover {
  background-color: var(--flex-gray-3) !important;
}

/*
-----------------
12 - Footer
-----------------
*/
/* --- Style Footer Top Section --- */
.rb-section.fw-widget.top-footer.edge-padding {
  margin-top: 20px;
  padding-top: 10px;
  background-color: var(--flex-gray-1);
  border-top-width: 2px;
  border-top-style: groove;
}

#footer {
  background: var(--flex-bg-color);
}

/* --- Cinesist Terminal Footer: The Skin --- */

/* Root Container Padding & Background */
.cs-terminal-footer {
  --rb-width: var(--cs-width-xl);
  background: var(--nav-bg) !important;
  background: -webkit-linear-gradient(left, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%);
  background: linear-gradient(to right, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%) !important;
  box-shadow: 0 4px 30px var(--shadow-7);
  margin-block-start: 0 !important;
  padding-block-start: 2rem;
  /* padding-top: 2rem; */
  border-top: 4px solid var(--flex-snarkive-50);
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
  grid-column: 1 / -1;
}

.cs-terminal-footer-wrap {
  padding: 1rem;
  /* Color shifts based on Blocksy root variables */
  color: var(--body-fcolor);
  font-family: var(--font-sans);
}

/* 1. The Vanguard: Mascots & Newsletter */
.cs-footer-vanguard {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1.2fr;
  /* 3 Columns: Start, Center, End */
  align-items: center;
  gap: 2.5rem;
  padding: 0;
  margin-bottom: 3rem;
}
/**
.vanguard-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
**/
/* Speech Bubble */
.cs-speech-bubble {
  position: relative;
  font-size: 18px;
  line-height: 24px;
  width: 300px;
  background: #e5e5e5;
  border-radius: 40px;
  padding: 24px;
  text-align: center;
  color: #000;
}

/* Speech Bubble Pointer (The "Tail") */
.cs-speech-bubble::before,
.cs-speech-bubble::after {
  content: '';
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 24px solid #e5e5e5;
  border-right: 12px solid transparent;
  border-top: 12px solid #e5e5e5;
  border-bottom: 20px solid transparent;
  right: 4.5rem;
  bottom: -24px;
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}



/* Status Text & Color Wraps */
.cs-status-text {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 1px;
  margin-top: 1rem;
  text-transform: uppercase;
}

.status-purple {
  color: var(--snarkive-purple-accent);
  font-weight: 800;
}

/* Typing Cursor Effect */
.status-purple:after,
.status-orange:after {
  content: '_';
  animation: cursor-blink 1s infinite;
}

@keyframes cursor-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.status-orange {
  color: var(--cinefox-orange);
  font-weight: 800;
}

/* High-Intensity Glitch for Cipher Status */
.status-orange.is-glitching {
  position: relative;
  display: inline-block;
  animation: status-shake 0.3s infinite;
  text-shadow:
    2px 0 var(--cinesist-red),
    -2px 0 var(--snarkive-purple-accent);
}

@keyframes status-shake {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translate(1px, -1px);
  }

  50% {
    transform: translate(-1px, 1px);
  }

  75% {
    transform: translate(1px, 1px);
  }

  100% {
    transform: translate(0);
  }
}

/* Ensure this variable exists */

/* Cinefox Glow (Alpha-aware) */
.cs-cinefox-footer-logo img {
  width: 10rem !important;
  /* Increased from 125px (~7.8rem) */
  height: auto;
  filter: drop-shadow(0 0 0.93rem rgba(226, 179, 4, 0.6));
  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}

.cs-cinefox-footer-logo img:hover {
  filter: drop-shadow(0 0 1.56rem rgba(226, 179, 4, 0.9));
  transform: scale(1.05);
}

/* Cipher Glow (Alpha-aware) */
.cs-cipher-footer-logo img {
  width: 15rem !important;
  /* Significant increase for the Disruptor */
  height: auto;
  filter: drop-shadow(0 0 0.93rem rgba(121, 44, 133, 0.5));
  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}

.cs-cipher-footer-logo img:hover {
  filter: drop-shadow(0 0 1.56rem rgba(121, 44, 133, 0.8));
  animation: glitch-mini 0.2s infinite;
  transform: scale(1.05);
}

/* Middle Column Styling */
.terminal-header {
  padding: 0;
  margin: 0;
}

.cs-resistance-title {
  color: var(--cinesist-red);
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.cs-resistance-sub {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

/* Responsive Fix */
@media (max-width: 1024px) {
  .cs-footer-vanguard {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

/* --- Cinesist Terminal Form: Clean Revamp --- */

/* Reset the MailPoet container */
#mailpoet_form_1 {
  width: 100% !important;
  max-width: 31.25rem !important;
  /* 500px */
  margin: 0 auto !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#mailpoet_form_1 form.mailpoet_form {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  /* The Magic: Removes the gap */
  padding: 0 !important;
}

/* Style the Paragraph wrappers MailPoet injects */
#mailpoet_form_1 .mailpoet_paragraph {
  margin-bottom: 0 !important;
  flex: 1;
  /* Makes the email field expand */
}

#mailpoet_form_1 .mailpoet_paragraph.cs-footer-newsletter-button {
  flex: 0 0 auto !important;
  /* Keeps the button tight */
}

/* The Email Input Field */
#mailpoet_form_1 .mailpoet_text {
  width: 100% !important;
  height: 3.125rem !important;
  /* ~50px */
  background: var(--cs-spy) !important;
  border: 1px solid var(--flex-snarkive-90) !important;
  /* Snarkive Purple */
  border-right: none !important;
  /* Seam */
  border-radius: 0.25rem 0 0 0.25rem !important;
  color: var(--white-spy) !important;
  padding: 0 1rem !important;
  font-family: var(--font-sans) !important;
  outline: none !important;
}

#mailpoet_form_1 .mailpoet_text:focus {
  border-color: var(--snarkive-purple-accent) !important;
  box-shadow: inset 0 0 5px rgba(121, 44, 133, 0.2);
}

/* The Authorize Submit Button */
#mailpoet_form_1 .mailpoet_submit {
  height: 3.125rem !important;
  background-color: var(--cinesist-red) !important;
  color: #fff !important;
  border: 1px solid var(--cinesist-red) !important;
  border-radius: 0 0.25rem 0.25rem 0 !important;
  padding: 0 1.5rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#mailpoet_form_1 .mailpoet_submit:hover {
  background-color: var(--flex-snarkive) !important;
  border-color: var(--flex-snarkive-50) !important;
  transform: none !important;
}

/* Handle the "Loading" animation positioning */
#mailpoet_form_1 .mailpoet_form_loading {
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Mobile: Stack them when space is tight */
@media (max-width: 37.5rem) {

  /* 600px */
  #mailpoet_form_1 form.mailpoet_form {
    flex-direction: column !important;
    gap: 0.625rem !important;
  }

  #mailpoet_form_1 .mailpoet_text {
    border-right: 1px solid rgba(121, 44, 133, 0.4) !important;
    border-radius: 0.25rem !important;
  }

  #mailpoet_form_1 .mailpoet_submit {
    border-radius: 0.25rem !important;
    width: 100% !important;
  }
}

.cs-mailpoet-terminal-wrap input.mailpoet_submit:hover {
  background-color: var(--flex-snarkive) !important;
  border-color: var(--flex-snarkive-50) !important;
}

/* Security Status Detail */
.terminal-footer-security {
  margin-top: 15px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  opacity: 0.5;
  padding: 5px;
}

.blink-dot {
  height: 6px;
  width: 6px;
  background-color: var(--flex-snarkive);
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  animation: pulse-cinesist 2s infinite;
}

@keyframes pulse-cinesist {
  0% {
    box-shadow: 0 0 0 0 var(--flex-snarkive-50);
  }

  70% {
    box-shadow: 0 0 0 10px var(--flex-snarkive-90);
  }

  100% {
    box-shadow: 0 0 0 0 var(--flex-snarkive);
  }
}

/* 2. The Directory: Link Columns */
.cs-footer-directory {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.875rem;
  margin-bottom: 3.75rem;
}

.cs-footer-directory h4 {
  color: var(--cinesist-red);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 1.25rem;
  border-left: 3px solid var(--cinesist-red);
  padding-left: 0.75rem;
}

.cs-footer-directory ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cs-footer-directory ul li a {
  color: var(--body-fcolor);
  opacity: 0.7;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 2.2;
  transition: all 0.2s ease;
}

.cs-footer-directory ul li a:hover {
  opacity: 1;
  color: var(--snarkive-purple-accent);
  padding-left: 0.5rem;
}

/* 3. The Signature Block */
.cs-footer-signature {
  text-align: center;
  border-top: 1px dashed rgba(128, 128, 128, 0.3);
  padding-top: 0;
  margin-block-end: 0 !important;
  margin-bottom: 0 !important;
}

.cs-footer-signature-branding {
  margin-block-end: 0 !important;
  margin-bottom: 0 !important;
}

/* Light/Dark Wordmark Logic */
/* We only show the dark wordmark in dark mode, and vice versa */
[data-theme="default"] .cs-dark-wordmark-logo {
  display: none !important;
}

[data-theme="default"] .cs-light-wordmark-logo {
  display: block;
  margin: 0 auto 0.93rem;
}

[data-theme="dark"] .cs-dark-wordmark-logo {
  display: block;
  margin: 0 auto 0.93rem;
}

[data-theme='dark'] .cs-light-wordmark-logo {
  display: none;
}

.cs-footer-signature p {
  font-size: 0.75rem;
  letter-spacing: 1px;
  opacity: 0.6;
  margin-bottom: 0 !important;
}

/* Mini Glitch for Cipher */
@keyframes glitch-mini {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 1px);
  }

  40% {
    transform: translate(2px, -1px);
  }

  100% {
    transform: translate(0);
  }
}

/* Mobile Responsive Adjustments */
@media (max-width: 900px) {
  .cs-footer-vanguard {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .cs-footer-directory {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-cipher-footer-logo img,
  .cs-cinefox-footer-logo img {
    width: 12rem !important;
  }
}

.wp-block-group.alignfull.cs-footer-signature {
  max-width: 100vw;
}

/*
-----------------
13 - Responsive
-----------------
*/

/*
-----------------
14 - Print
-----------------
*/
/* --- Remove Foxiz Mark Spacing in Copy --- */
mark {
  margin: 0;
  /* Removes extra space  */
  padding: 0;
  /* Removes extra space  */
}

/*
-----------------
15 - Forms
-----------------
*/
/* --- Style All Input Forms --- */
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"] {
  border: 1px solid #d45f3559;
  color: var(--body-fcolor);
}

/* --- Post News-Letter Form Style --- */
#mailpoet_form_1 {
  border-radius: var(--round-10);
  /* More Rounded Corners */
  background: var(--news-letter-bg);
  /* Use variable for background color change */
  text-align: left;
}

/* --- Footer Newsletter Form Style --- */
#mailpoet_form_2 {
  border: 2px solid var(--g-color);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  background: var(--news-letter-bg);
  /* Use variable for background color change */
  text-align: left;
}

#mailpoet_form_1 .mailpoet_message {
  margin: 0;
  padding: 0 20px;
  display: none;
}

/* --- Style User Review Comment Section --- */
.comment-box-wrap.entry-sec.rb-user-reviews {
  background-color: var(--news-letter-bg);
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  --border-top-width: 1px;
  --border-right-width: 1px;
  --border-bottom-width: 1px;
  --border-left-width: 1px;
  border-color: var(--e-global-color-fb66372);
  --border-color: var(--e-global-color-fb66372);
  border-radius: var(--round-10);
  /* More Rounded Corners */
  box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.5);
  --margin-top: 20px;
  --margin-bottom: 0px;
  --margin-left: 0px;
  --margin-right: 0px;
  padding: 20px;
}

/* --- Search Form Style --- */
.is-form-layout .search-icon,
.is-form-layout .rbi-cright {
  opacity: 0.8;
  /* Override Foxiz Default */
}

/*
-----------------
16 - UI/UX
-----------------
*/
/* --- Custom Selection Style --- */
.rbct *::selection {
  background: var(--flex-snarkive);
  color: var(--awhite);
}

/* --- Noto Emoji Font Application --- */
/* --- Ensures Noto Emoji renders on key UI elements like navigation, tags, and category names --- */
.category-item a,
.tag-list li a,
.post-title a,
.nav-menu li a,
.emoji {
  font-family: inherit, var(--cs-font-emoji);
}

/* --- Admin Interface Changes --- */
.rwtm-images li {
  position: relative;
  float: left;
  width: 150px;
  height: 100%;
  margin: 0 10px 10px 0;
  text-align: center;
  border: 3px solid #9ed1bc;
}

/* --- Cinesist Review Cinescore Bars Style --- */

.rline-wrap {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  flex-flow: row nowrap;
  margin-right: 10px;
  gap: 1px;
}

.rline {
  display: inline-flex;
  width: calc(var(--rating-size, 14px) * 1.5);
  max-width: 20%;
  height: min(calc(var(--rating-size, 14px) * 0.5), 10px);
  background-color: var(--flex-gray-15);
}

/* Cinescore Burn-it🔥 Red Rating Bar */
.rline:nth-child(1) {
  background-color: #ff0d0d;
}

/* Cinescore Compromised⚠️ Orange Rating Bar */
.rline:nth-child(2) {
  background-color: #ff5612;
}

/* Cinescore Redacted❓ Yellow Rating Bar */
.rline:nth-child(3) {
  background-color: #f1ca2b;
}

/* Cinescore Solid👍 Light Green Rating Bar */
.rline:nth-child(4) {
  background-color: #b2cc21;
}

/* Cinescore Legendary🏆 Green Rating Bar */
.rline:nth-child(5) {
  background-color: #50a735;
}

.rline:not(.activated) {
  background-color: var(--flex-gray-15);
}


/* --- Review Stars Style --- */
.rb-review-stars {
  color: var(--g-color);
}

/* --- Review Star Filled In Style --- */
rbi rbi-star-o {
  color: var(--g-color);
}

/* --- Like/Dislike Button Styles --- */
.meta-like>span:hover {
  -webkit-transform: var(--flex-snarkive);
  transform: var(--flex-snarkive);
  color: var(--btn-accent-h, var(--awhite));
  border-color: var(--flex-snarkive, var(--flex-snarkive));
  background-color: var(--flex-snarkive, var(--flex-snarkive));
  box-shadow: var(--btn-shadow,
      0 3px 12px var(--flex-snarkive-90, var(--flex-snarkive-90)));
}

/* Cinesist Buttons */

/* Snarkive Intel Button */
.snarkive-intel-btn {
  font-weight: 900;
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
}

.snarkive-intel-btn {
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
}

/* Adding Flare to Images and Captions */
figcaption:not(:empty):before,
.wp-caption-text:before {
  color: var(--review-accent, var(--flex-snarkive));
}

figcaption:not(:empty):before,
.wp-caption-text:before {
  display: var(--caption-bdisplay, inline-block);
  width: 30px;
  height: .3rem;
  margin-right: 7px;
  content: '';
  border-top: 3px solid;
}

.entry-content figcaption {
  text-align: unset !important;
  margin-block: .5em 0;
  font-weight: 600;
  color: var(--cs-text-secondary);
}

/* --- Push Button Template. Apply .is-push-btn to any Button Block or the Comment Submit Button */
.is-push-btn {
  /* 1. SETUP DEFAULT COLORS (Edit these for manual use) */
  --btn-bg-color: var(--flex-snarkive);
  /* Snarkive Flex Color */
  --btn-text-color: #ffffff;
  position: relative;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: filter 250ms;
}

/* The 3D Edge & Shadow */
.is-push-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;

  /* Fallback: Uses black at 50% brightness of the background */
  background: var(--flex-decor-border);
  filter: brightness(0.5);
  opacity: 0.6;
  transform: translateY(0);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

/* The Top Face */
.is-push-btn>* {
  display: block;
  position: relative;

  /* SMART LOGIC: 
     Use inherited color if FSE sets it, 
     otherwise use our --btn-bg-color variable */
  background-color: var(--wp--preset--color--primary, var(--btn-bg-color)) !important;
  color: var(--wp--preset--color--white, var(--btn-text-color)) !important;

  border-radius: inherit !important;
  padding: 12px 42px !important;
  will-change: transform;
  transform: translateY(-6px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
  border: none !important;
}

/* HOVER & ACTIVE STATES */
.is-push-btn:hover {
  filter: brightness(110%);
}

.is-push-btn:hover>* {
  transform: translateY(-8px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.is-push-btn:active>* {
  transform: translateY(-2px);
  transition: transform 34ms;
}

/* Ensure the button inside our push-wrapper behaves correctly */
.is-push-btn button {
  border: none !important;
  background-color: inherit !important;
  color: inherit !important;
  font-family: inherit;
  cursor: pointer;
}

/* --- END PUSH BUTTON --- */

/* --- Cinesist: Tactical Load More Scanner --- */
.cs-terminal-loader {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--snarkive);
  text-shadow: 0 0 5px var(--snarkive);
  animation: cs-pulse 1.5s infinite;
}

@keyframes cs-pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

/* Live Search Results */
.ct-search-results a {
  display: flex;
  align-items: center;
  gap: var(--items-spacing, 15px);
  padding: var(--items-padding, 16px);
  color: var(--flex-text-title);
}

.ct-search-results a:hover {
  text-decoration: underline;
  color: var(--flex-snarkive) !important;
}

/* --- Block Quotes --- */
figure.wp-block-pullquote {
  position: relative;
  padding: 70px;
  text-align: initial;
  border-width: 1px !important;
  border-style: solid;
  border-color: var(--review-accent) !important;
  border-left-color: var(--review-accent) !important;
  border-left-width: 5px !important;
  border-radius: 5px;
}

.figure.wp-block-pullquote blockquote:before {
  color: var(--review-accent);
}

cite {
  font-family: var(--meta-family);
  font-size: min(14px, var(--rem-small));
  font-weight: var(--meta-fweight);
  font-style: italic !important;
}

blockquote cite:before {
  display: inline-block;
  width: 30px;
  height: .3em;
  margin-right: 7px;
  content: '';
  color: var(--review-accent);
  border-top: 3px solid currentColor;
}

/*
-----------------
7 - Post Modules (Grids, Sliders, Heros)
-----------------


/* --- Snarkive Person 'Dossier' Template --- */

.person-dossier-wrapper {
  padding: var(--cs-spacing-lg) 0;
  max-width: var(--layout-content-max-width);
  margin: 0 auto;
}

.dossier-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--cs-spacing-lg);
}

/* Standard spacing for the dossier biography */
.entry-content.dossier-bio p {
  margin-bottom: 1.5em;
  /* Adds space after each paragraph */
  line-height: 1.6;
  /* Improves readability within paragraphs */
}

/* Optional: Remove margin from the very last paragraph to avoid extra bottom space */
.entry-content.dossier-bio p:last-child {
  margin-bottom: 0;
}

.tactical-note {
  margin-bottom: 1.5em;
}

/* --- Filmography Grid & Glassmorphism Badge --- */

.filmography-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 172px);
  /* Strict width */
  gap: 10px;
  /* Strict 10px gap */
  /* justify-content: center; */
}

.film-card {
  width: 172px;
  height: 259px;
  /* Strict height */
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.film-card:hover {
  transform: translateY(-8px);
}

.card-poster {
  position: relative;
  width: 172px;
  height: 259px;
  border-radius: var(--round-5);
  overflow: hidden;
}

/* --- The Bottom Title Overlay --- */
.card-meta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 10px 15px 10px;
  /* Increased top padding for role height */
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 100%);
  z-index: 3;
  pointer-events: none;
  /* Allows clicks to pass through to the link */
}

/* Alias/Role Tag Styling */
.film-alias-tag {
  font-family: var(--cs-font-secondary);
  font-size: 11px;
  font-weight: 400;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alias-prefix {
  color: var(--flex-snarkive);
  /* Snarkive Purple/Orange */
  font-weight: 700;
  margin-right: 3px;
}

.alias-link {
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  /* Re-enable clicks for the taxonomy link */
}

.alias-link:hover {
  color: var(--flex-snarkive-90);
  text-decoration: underline;
}

/* --- Title Styling with 1-Line Ellipsis --- */
.film-title-overlay {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  text-align: center;
  line-height: 1.2;
  transition: color 0.3s ease;

  /* Strict 1-Line Truncation */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Hover Effect --- */
.film-card:hover .film-title-overlay {
  color: var(--flex-snarkive);
  /* Glows Snarkive Purple/Orange on hover */
}

/* Ensure image fills the fixed dimensions */
.poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Glowing Border Logic */
.film-card:hover .card-poster {
  border-color: var(--flex-snarkive);
  box-shadow: 0 0 20px var(--flex-snarkive-90);
}

/* Glassmorphism Cinescore Badge */
.cinescore-overlay {
  position: absolute;
  bottom: 35%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--flex-gray-1);
  /* Black Spy Semi-Transparent */
  backdrop-filter: blur(8px);
  border: 2px solid var(--flex-snarkive);
  border-radius: 8px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 80px;
  justify-content: center;
  z-index: 2;
}

.card-icon-marker {
  width: 24px;
  height: 24px;
  background-image: var(--cinesist-card-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.film-cinescore-number {
  display: inline-flex;
  align-items: center;
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--body-fcolor);
  font-family: var(--font-sans);
}

.film-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  /* Adjust this number to limit lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Ensures ellipsis appears */
  margin-top: var(--cs-spacing-xs);
  line-height: 1.2;
  color: var(--flex-text-primary);
}

.film-title:hover {
  color: var(--flex-snarkive-90);
  text-decoration: underline;
}

.film-title a:hover {
  color: var(--flex-snarkive-90);
}

.film-title .year {
  display: block;
  font-size: 0.8em;
  opacity: 0.7;
  color: var(--flex-snarkive);
}

/* ====================
   Tagged Intel Grid
   ==================== */
.intel-tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 275px);
  /* Strict width */
  gap: 5px;
  /*justify-content: center;*/
}

.intel-tag-card {
  width: 275px;
  height: 260px;
  /* Strict height */
  background: var(--contrast-2);
  border-radius: var(--round-5);
  /* Requested Border Radius */
  overflow: hidden;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
  border: 1px solid var(--flex-decor-border);
  display: flex;
  flex-direction: column;
}

.intel-tag-card:hover {
  transform: translateY(-5px);
  border-color: var(--flex-snarkive);
}

.intel-tag-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.intel-tag-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intel-tag-body {
  padding: var(--cs-spacing-xs);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 2-Line Title Clamp with Ellipsis */
.intel-tag-title {
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--flex-text-title);
  margin: 0 0 var(--cs-spacing-sm) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure the title link doesn't look like a standard blue hyperlink */
.intel-tag-title-link {
  text-decoration: none;
  display: block;
}

.intel-tag-title-link:hover .intel-tag-title {
  color: var(--flex-snarkive);
  /* Glow title on hover */
}

.intel-tag-footer {
  border-top: 1px solid var(--flex-decor-border);
  padding-top: var(--cs-spacing-xs);
}

.author-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Author and Comment links */
.author-profile-link,
.comment-recon-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.author-profile-link:hover,
.comment-recon-link:hover {
  opacity: 0.8;
  color: var(--flex-snarkive-rev);
}

/* Thumbnail hover effect */
.intel-tag-thumb-link {
  display: block;
  overflow: hidden;
}

.intel-tag-thumb-link img {
  transition: transform 0.5s ease;
}

.intel-tag-thumb-link:hover img {
  transform: scale(1.05);
}

/* Container styling */
.intel-tag-writer-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--flex-snarkive);
  display: inline-block;
  /* Ensures span respects dimensions */
  overflow: hidden;
  /* Clips the image to the circle */
}

/* Specific styling for the image inside the container */
.intel-tag-writer-img img {
  width: 100%;
  /* Fills the container width */
  height: 100%;
  /* Fills the container height */
  display: block;
  /* Removes bottom whitespace gap */
  object-fit: cover;
  /* Prevents distortion by cropping to fit */
  border-radius: 50%;
  /* Extra safeguard for older browsers */
}

.author-name {
  color: var(--flex-snarkive);
  font-weight: 800;
  font-size: 13px;
  padding-left: 5px;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.intel-tag-date {
  font-size: 11px;
  font-weight: 300;
  color: var(--body-fcolor);
}

.comment-recon {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--body-fcolor);
}

.chat-icon-custom {
  font-size: 1.25rem;
  color: var(--flex-snarkive);
  /* Snarkive Color Change */
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.myster-icon-custom {
  font-size: 1.25rem;
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.folder-eye-icon-custom {
  font-size: 1.25rem;
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

.comment-recon .material-symbols-sharp {
  font-size: 16px;
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 20;
}

.comment-num {
  font-size: 12px;
  font-weight: 700;
}

/* --- Show More Button Styling --- */
.show-more-wrap {
  text-align: center;
  margin: var(--cs-spacing-md) 0;
}

.show-more-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--flex-snarkive);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.show-more-trigger:hover {
  color: var(--flex-snarkive-rev);
}

.show-more-trigger .material-symbols-sharp {
  font-variation-settings: "FILL" 1;
  /* Filled icons as requested */
}

/* --- Legal Attribution --- */
.dossier-legal {
  margin-top: var(--cs-spacing-xl);
  padding-top: var(--cs-spacing-md);
  border-top: 1px solid var(--flex-decor-border);
  font-size: 0.85rem;
  opacity: 0.6;
  text-align: center;
}

/*
-----------------
13 - Widgets (Sidebar, Sidebars, Dynamic Widgets)
-----------------
*/

/* --- Left Column: Headshot & Intel --- */
.recon-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--cs-spacing-md);
}

.person-headshot-wrap {
  position: relative;
  border-radius: var(--round-10);
  overflow: hidden;
  border: 1px solid var(--flex-decor-border);
}

.headshot-img {
  width: 100%;
  height: auto;
  display: block;
}

.popularity-meter {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--cs-spacing-xs);
  background: var(--flex-gray-3);
  color: #fff;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-family: var(--font-sans);
}

.meter-label,
.meter-value {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 14px;
}

/* --- Person's Threat Level --- */
.threat-low {
  color: #3498db;
}

/* Blue */
.threat-elevated {
  color: #e67e22;
}

/* Orange */
.threat-critical {
  color: #e74c3c;
}

/* Red */
.threat-defcon {
  color: #e74c3c;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

.strategic-intel-card {
  background: var(--contrast-2);
  padding: var(--cs-spacing-md);
  border-radius: var(--round-10);
  border: 1px solid var(--flex-decor-border);
}

.intel-header {
  color: var(--flex-snarkive);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--cs-spacing-sm);
  border-bottom: 2px solid var(--flex-snarkive);
}

.intel-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--cs-spacing-md) 0;
}

.intel-list li {
  padding: var(--cs-spacing-xxs) 0;
  border-bottom: 1px solid var(--flex-decor-border);
  font-size: var(--cs-font-body-sm);
}

/* --- Right Column: Briefing --- */
.intelligence-briefing {
  background: var(--contrast-1);
  padding: var(--cs-spacing-lg);
  border-radius: var(--round-10);
  border: 1px solid var(--flex-decor-border);
}

.person-name {
  margin-bottom: var(--cs-spacing-xs);
  color: var(--flex-text-title);
}

.keyword-tag {
  display: inline-block;
  background: var(--flex-gray-2);
  color: var(--flex-snarkive);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  margin-right: 5px;
  font-weight: 700;
}

.section-title {
  margin: var(--cs-spacing-md) 0 var(--cs-spacing-sm);
  color: var(--flex-snarkive);
}

.social-recon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.social-btn {
  background: var(--flex-gray-3);
  color: #fff !important;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
}

.social-btn:hover {
  background: var(--flex-snarkive);
}

.review-sidebar-col .jw-offer-label {
  color: var(--flex-text-title);
}

/*
-----------------
12 - Comments (Post Comments, Threaded Replies)
-----------------
*/

/* ====================
   Tactical Discussion (Comments)
   ==================== */
.tactical-discussion {
  grid-column: 1 / -1;
  /* Forces the section to span the full width of the dossier grid */
  border-top: 1px dashed var(--flex-decor-border);
}

.discussion-inner {
  max-width: 1000px;
  /* Gives the comments breathing room without being too wide */
  margin: 0 auto;
}

.foxiz-comment-wrapper {
  background: var(--contrast-2);
  padding: var(--cs-spacing-md);
  border-radius: var(--round-5);
  border: 1px solid var(--flex-decor-border);
}

/* Foxiz Comment Styling Overrides */
#respond #reply-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 1px;
  color: var(--flex-snarkive);
}

.comment-list .comment-body {
  border-bottom: 1px solid var(--flex-gray-2);
  padding: var(--cs-spacing-sm) 0;
}

.comment-author .fn {
  font-weight: 800;
  color: var(--flex-text-title);
}

/* Make sure the "Post Comment" button matches your spy theme */
#respond input#submit {
  background: var(--flex-snarkive);
  color: #fff;
  border: none;
  border-radius: var(--round-5);
  font-weight: 800;
  text-transform: uppercase;
  padding: 10px 25px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#respond input#submit:hover {
  background: var(--flex-snarkive-rev);
}

/* Responsive Recon */
@media (max-width: 991px) {
  .dossier-grid {
    grid-template-columns: 1fr;
  }

  .recon-sidebar {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* --- Snarkive Person Grid Style --- */

.cinesist-person-grid {
  display: grid;
  /* Adjust columns for responsive */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}

.cinesist-person-card {
  display: flex;
  flex-direction: column;
}

.cinesist-person-card .cinesist-person-image-link img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* Or 0px for square */
  aspect-ratio: 2 / 3;
  /* Classic poster ratio */
  object-fit: cover;
  margin-bottom: 10px;
  transition: transform 0.2s ease;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
  /* A Little Shadow for Effect */
}

.cinesist-person-card .cinesist-person-image-link:hover img {
  transform: scale(1.03);
}

.cinesist-person-info {
  display: flex;
  flex-direction: column;
}

.cinesist-person-info .cinesist-person-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cinesist-cs-text-primary);
  /* Uses your light/dark mode color! */
  text-decoration: none;
}

.cinesist-person-info .cinesist-person-name:hover {
  text-decoration: underline;
  text-decoration-color: #d45f35;
}

.cinesist-person-info .cinesist-person-role {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--cinesist-text-secondary);
  transition: color 0.3s ease;
  /* Optional: smooth color change */
}

/* Add this new rule: */
.cinesist-person-info .cinesist-person-role:hover {
  color: #d45f35;
  /* The new color on hover */
}

/* Hides the extra cast/crew cards by default */
.cinesist-person-hidden {
  display: none;
}

/* NEW - This wrapper pushes the button to the right */
.cinesist-grid-toggle-wrapper {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 15px;
}

/* UPDATED - Styles the "Show All" link to be smaller */
.cinesist-grid-toggle {
  display: inline-block;
  /* Changed from block */
  text-align: center;
  padding: 8px 16px;
  /* Made padding smaller */
  background-color: var(--flex-snarkive);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 14px;
  /* Added to control size */
}

.cinesist-grid-toggle:hover {
  background-color: var(--flex-snarkive-rev);
  color: #fff;
}

/* When the grid is toggled, show the hidden items */
.cinesist-person-grid-wrapper.is-open .cinesist-person-hidden {
  display: block;
}

.cinesist-person-grid-wrapper.is-collapsible .cinesist-person-grid {
  /* * This is the magic. Adjust this height!
   * It should be the height of ONE card + its bottom margin.
   * e.g., If your card is 220px tall with 20px margin, set this to 240px.
   */
  max-height: 290px;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

/* This is the 'open' state */
.cinesist-person-grid-wrapper.is-expanded .cinesist-person-grid {
  /* Set to a number larger than the grid could ever be */
  max-height: 3000px;
  transition: max-height 0.6s ease-in;
}

/* Optional: Smooths the button wrapper's appearance */
.cinesist-grid-toggle-wrapper {
  transition: opacity 0.4s ease;
}

/* Hides the button when the grid is open (optional but clean) */
.cinesist-person-grid-wrapper.is-expanded .cinesist-grid-toggle-wrapper {
  /* You can hide it, or just let the JS text-swap work */
  opacity: 1;
}

/* --- Cast/Crew Differentiation Styles --- */

/* 1. Purple Border for CAST */
.cinesist-person-grid-wrapper.is-cast .cinesist-person-card .cinesist-person-image-link img {
  /* Example: Purple/Primary Color */
  border: 3px solid #7d3c98;
  /* Purple for Cast */
  box-shadow: 0 0 10px rgba(125, 60, 152, 0.5);
}

/* 2. Orange Border for CREW */
.cinesist-person-grid-wrapper.is-crew .cinesist-person-card .cinesist-person-image-link img {
  /* Example: Orange/Secondary Color */
  border: 3px solid #f27405;
  /* Orange for Crew */
  box-shadow: 0 0 10px rgba(242, 116, 5, 0.5);
}

/* Optional: Different name color for crew to separate the text visually
.cinesist-person-grid-wrapper.is-crew
  .cinesist-person-info
  .cinesist-person-name {
  color: #ffb347; /* Lighter Orange or Gold tone
}
/* --- Snarkive Social Meta Style --- */
#snarkive-social-meta .meta-like i {
  font-size: calc(1em + 10px);
}

#snarkive-social-meta .smeta-sec .meta-like>span {
  min-width: 52px;
  background: var(--flex-snarkive);
  color: var(--awhite);
}

#snarkive-social-meta .meta-like>span:hover {
  -webkit-transform: var(--flex-snarkive-rev);
  transform: var(--flex-snarkive-rev);
  color: var(--btn-accent-h, var(--awhite));
  border-color: var(--flex-snarkive-rev, var(--flex-snarkive-rev));
  background-color: var(--flex-snarkive-rev, var(--flex-snarkive-rev));
  box-shadow: var(--btn-shadow,
      0 3px 12px var(--flex-snarkive-rev-90, var(--flex-snarkive-rev-90)));
}

@media (min-width: 768px) {
  #snarkive-social-meta .meta-bookmark .rb-bookmark i {
    font-size: calc(var(--meta-fsize) * 1.45);
  }
}

.bookmark-notification-inner {
  border: 2px solid var(--flex-snarkive-90) !important;
}

.bookmark-title {
  color: var(--flex-snarkive) !important;
}

/* --- Snarkive Page Wrapper Style --- */
.snarkive-page-wrapper {
  /* This applies your 1536px max-width */
  max-width: var(--layout-max-width-full);

  /* This applies your 80px fluid padding */
  padding-left: var(--layout-padding-global);
  padding-right: var(--layout-padding-global);

  /* This centers it on the page */
  margin-left: auto;
  margin-right: auto;

  /* This is your 32-35px vertical gap */
  margin-bottom: var(--layout-block-gap);
}

/* --- Snarkive Linked Profiles Box Style --- */
.snarkive-links-box {
  background-color: var(--gc-spy);
  border-radius: 12px;
  padding: 20px 25px;
  margin-top: 30px;
  margin-block-start: 2rem !important;
  border-top: 3px solid var(--flex-snarkive);
  box-shadow: var(--shadow-1);
}

.snarkive-links-box h3 {
  color: var(--flex-snarkive);
  font-size: 18px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #333;
}

.snarkive-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* Spacing between tags */
}

/* --- Snarkive Pill Tag Style --- */
.snarkive-tag-link {
  display: inline-flex;
  align-items: center;
  background-color: var(--page-bg-color);
  color: var(--flex-snarkive);
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  padding: 3px 7px;
  /* Padding around the tag */
}

.snarkive-tag-link:hover {
  opacity: 0.75;
}

/* --- Snarkive Pill Tag Image Style --- */
.snarkive-tag-link img {
  width: 40px;
  /* Size of the thumbnail */
  height: auto;
  /* Size of the thumbnail */
  object-fit: cover;
  margin-right: 10px;
  /* Space between image and text */
  border: none;
}

/* --- Snarkive Pill Tag Fallback Icon Style --- */
.snarkive-tag-link .snarkive-tag-icon {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  background-color: #555;
  /* Fallback dot color */
  border-right: 1px solid #444;
}

/* --- Snarkive Pill Tag Text Style --- */
.snarkive-tag-link span {
  padding-right: 12px;
  /* Add padding to the text */
  /* The color is inherited from the <a> tag */
}

/* --- Snarkive Person Name Shortcode [person_name] --- */
.snarkive-person-name,
.snarkive-movie-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--flex-snarkive);
}

/* --- Snarkive Profile Box --- */
.wp-block-group>.snarkive-box-genres {
  display: inline-flex;
}

/*
-----------------
16 - BuddyPress (Social Networking)
-----------------
*/
/* --- Buddy Press Text Fields Style --- */
.buddypress-wrap .standard-form .groups-members-search input[type="search"],
.buddypress-wrap .standard-form .groups-members-search input[type="text"],
.buddypress-wrap .standard-form [data-bp-search] input[type="search"],
.buddypress-wrap .standard-form [data-bp-search] input[type="text"],
.buddypress-wrap .standard-form input[type="color"],
.buddypress-wrap .standard-form input[type="date"],
.buddypress-wrap .standard-form input[type="datetime-local"],
.buddypress-wrap .standard-form input[type="datetime"],
.buddypress-wrap .standard-form input[type="email"],
.buddypress-wrap .standard-form input[type="month"],
.buddypress-wrap .standard-form input[type="number"],
.buddypress-wrap .standard-form input[type="password"],
.buddypress-wrap .standard-form input[type="range"],
.buddypress-wrap .standard-form input[type="search"],
.buddypress-wrap .standard-form input[type="tel"],
.buddypress-wrap .standard-form input[type="text"],
.buddypress-wrap .standard-form input[type="time"],
.buddypress-wrap .standard-form input[type="url"],
.buddypress-wrap .standard-form input[type="week"],
.buddypress-wrap .standard-form select,
.buddypress-wrap .standard-form textarea {
  background: var(--flex-gray-15);
  border: 1px solid #d6d6d6;
  border-radius: 0;
  font: inherit;
  font-size: 100%;
  padding: 0.7em;
}

/* --- Buddy Press Tooltip Style --- */
[data-bp-tooltip]:after {
  background-color: var(--gc-color);
}

/* --- Buddy Press Profile Avatar Style --- */
#item-header-cover-image #item-header-avatar img.avatar {
  max-width: 175px;
  height: auto;
  border-radius: 50%;
  /* Make it circle */
}

#item-header-avatar img {
  border: solid 2px var(--flex-gray-1);
  /* Flex them colors to change with White and Black Spy Modes */
  background: var(--contrast-1);
  /* Flex them colors to change with White and Black Spy Modes */
  box-shadow: none;
  display: block;
  margin: 0 auto;
}

.users-header #item-header-avatar:hover .link-change-overlay {
  position: absolute;
  left: 15px;
  right: 0px;
  top: 0px;
  height: 175px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  max-width: 175px;
}

/* --- Buddy Press NiceNames Style --- */
#buddypress div#item-header-cover-image h2 {
  color: #dd7b45;
  text-rendering: optimizelegibility;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.05);
  margin: 0 0 0.6em;
  font-size: 200%;
  font-style: normal;
  text-transform: capitalize;
}

/* --- Buddy Press Navigation Menu Style --- */
.buddypress-wrap .bp-navs li:not(.current) a:hover,
.buddypress-wrap .bp-navs li:not(.selected) a:hover {
  background: var(--flex-overlay-1);
  color: var(--body-fcolor);
}

@media screen and (min-width: 46.8em) {
  .buddypress-wrap.bp-dir-hori-nav:not(.bp-vertical-navs) nav {
    border-bottom: 1px solid var(--flex-gray-1);
    border-top: 1px solid var(--flex-gray-1);
    margin-bottom: 20px;
    -webkit-box-shadow: var(--shadow-1);
    -moz-box-shadow: var(--shadow-1);
    box-shadow: var(--shadow-1);
    background-color: var(--flex-gray-2);
  }
}

@media screen and (min-width: 46.8em) {

  .buddypress-wrap .main-navs:not(.dir-navs) li.current a,
  .buddypress-wrap .main-navs:not(.dir-navs) li.selected a {
    background: var(--flex-overlay-1);
    color: var(--body-fcolor);
    font-weight: 600;
  }
}

/* --- Buddy Press Status Update Form Style --- */
#whats-new-form,
.bp-nouveau-activity-form-placeholder- {
  background-color: var(--contrast-1);
}

.bb-poll-form .bb-model-footer {
  background-color: var(--flex-gray-2);
}

.bb-action-popup .bb-action-popup-content {
  margin: 0 -30px;
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding: 20px 30px;
  background-color: var(--gc-spy);
}

.buddypress .buddypress-wrap button {
  background: var(--gc-color);
  color: var(--alight);
}

.buddypress .buddypress-wrap button:hover {
  background: var(--gc-color);
  color: var(--alight);
}

.buddypress .buddypress-wrap a.button {
  background: var(--gc-color);
}

.buddypress .buddypress-wrap a.button:hover {
  background: var(--gc-color);
  color: var(--alight);
}

/* --- Whats New Update Status --- */
#whats-new-textarea [contenteditable="true"]:empty:before,
#whats-new-textarea-placeholder [contenteditable="true"]:empty:before {
  content: attr(placeholder);
  color: var(--body-fcolor);
  cursor: text;
  display: block;
}

.activity-update-form .whats-new-title,
.bp-nouveau-activity-form-placeholder- .whats-new-title {
  color: var(--body-fcolor);
}

.activity-update-form .bb-model-header,
.bp-nouveau-activity-form-placeholder- .bb-model-header {
  display: none;
  background-color: var(--flex-gray-2) !important;
}

.activity-update-form #whats-new-form #whats-new-toolbar,
.activity-update-form #whats-new-form-placeholder #whats-new-toolbar,
.bp-nouveau-activity-form-placeholder- #whats-new-form #whats-new-toolbar,
.bp-nouveau-activity-form-placeholder- #whats-new-form-placeholder #whats-new-toolbar {
  padding: 12px 16px;
  background-color: var(--flex-gray-2);
  border-top: 1px solid #eee;
}

#whats-new-toolbar [class*=" bb-icon-"] {
  color: var(--flex-icon-1);
  /* make them icons change with the spies */
}

.activity-update-form .whats-new-form-footer,
.bp-nouveau-activity-form-placeholder- .whats-new-form-footer {
  display: flex;
  justify-content: space-between;
  background-color: var(--flex-gray-2);
  border-top: 1px solid #eee;
}

/* --- Buddy Press Activity Feed Style --- *//*
-----------------
12 - Comments (Post Comments, Threaded Replies)
-----------------
*/

/*
-----------------
16 - BuddyPress (Social Networking)
-----------------
*/
  background: var(--flex-gray-2);
  border: 1px solid var(--flex-decor-border);
}

/* --- BP Activity Feed H2 Title --- */
.activity-list .activity-item .activity-title h2 {
  color: var(--body-fcolor);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

/* --- Buddy Press Activity Status Screen Overlay --- */
.activity-update-form.modal-popup,
.bp-nouveau-activity-form-placeholder-.modal-popup {
  background-color: var(--flex-overlay-1);
}

.activity-list.bp-list .activity-item {
  background: var(--gc-spy);
  border: 1px solid #b7b7b7;
  -webkit-box-shadow: 0 0 6px #d2d2d2;
  -moz-box-shadow: 0 0 6px #d2d2d2;
  box-shadow: 0 0 6px #d2d2d2;
  margin: 20px 0;
}

.activity-list .activity-item .activity-content>.bp-generic-meta.activity-meta,
.activity-list .activity-item .activity-content>.bp-generic-meta.groups-meta,
.activity-list .activity-item>.bp-generic-meta.activity-meta,
.activity-list .activity-item>.bp-generic-meta.groups-meta,
.activity-list .activity-item>.bp-generic-meta[class*="-meta"] {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #eaeaea;
  padding: 5px 0;
  position: relative;
  background-color: var(--flex-gray-2);
}

.buddypress .buddypress-wrap .generic-button a,
.buddypress .buddypress-wrap a.button {
  color: var(--flex-icon-1);
}

#buddypress .activity-list .activity-item .activity-content .bp-generic-meta.action .button>.like-count {
  color: var(--flex-icon-1) !important;
}

.activity-list .activity-item .activity-content>.bp-generic-meta.activity-meta .acomment-reply.button .comment-count {
  color: var(--flex-icon-1);
}

.activity-list .activity-item .activity-content>.bp-generic-meta.activity-meta div.generic-button>a:hover {
  background-color: var(--flex-overlay-1);
}

.like-count reactions_item {
  color: var(--flex-icon-1);
}

.activity-list .activity-item .ac-emotions_list {
  background-color: var(--flex-gray-1);
}

/* --- Buddy Press View Profile Style --- */
.buddypress-wrap .bp-tables-user tbody tr {
  background-color: var(--flex-gray-15);
}

.buddypress-wrap .bp-tables-user tr.alt td {
  background-color: var(--flex-gray-2);
}

.buddypress-wrap .standard-form p.description {
  color: var(--body-fcolor);
  margin: 5px 0;
}

.buddypress-wrap .current-visibility-level {
  font-style: normal;
  color: var(--body-fcolor);
}

.buddypress-wrap .profile.edit .editfield {
  background: var(--flex-gray-2);
  border: 1px solid #eee;
  margin: 15px 0;
  padding: 1em;
}

.buddypress .buddypress-wrap input[type="submit"] {
  background: var(--gc-color);
  color: var(--alight);
}

/* --- Buddy Press Activity Feed --- */
.activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap,
.activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title,
.activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap,
.activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title,
.activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap,
.activity-list li.blogs .activity-content .activity-inner .bb-post-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  display: block;
  color: var(--body-fcolor);
}

/* Activity Avatar */
.activity-list .activity-item div.item-avatar img {
  height: auto;
  max-width: 50%;
}

/* Activity Inner */
.activity-list li.blogs .activity-content .activity-inner {
  display: flex;
  border: 1px solid #eaeaea21;
  padding: 12px;
  border-radius: 5px;
  max-width: 640px;
}

.activity-list li.blogs .activity-content .activity-inner .bb-post-img-link {
  background-color: transparent;
  display: block;
  border-radius: 3px 3px 0 0;
}

/* Activity Entry Background */
.activity-list li.blogs .activity-content .activity-inner .bb-content-wrp {
  display: block;
  padding: 12px;
  background-color: transparent;
}

/* Activity Comments Section */
.acomment-content_wrap {
  width: 750px;
}

.buddypress-wrap .activity-comments .acomment_inner .acomment-content_block {
  background-color: var(--gc-snarkive-accent);
}

.buddypress-wrap .activity-comments .acomment-meta {
  padding-left: 0;
}

.buddypress .buddypress-wrap .generic-button a {
  background: transparent;
}

.buddypress-wrap .activity-comments .acomment-foot-actions .generic-button {
  background-color: var(--gc-color);
}

.like-count {
  color: var(--flex-snarkive);
}

.like-count:hover {
  color: var(--btn-accent-h, var(--awhite));
}

form.ac-form .ac-reply-content {
  border: 1px solid var(--cinefox-orange-accent);
  background-color: var(--flex-gray-7);
  border-radius: 5px;
  padding: 8px;
  margin-left: 10px;
}

form.ac-form .ac-reply-content:focus-within {
  border-color: var(--gc-snarkive-purple);
}

.acomment-content {
  color: var(--awhite);
}

/*
-----------------
17 - bbPress (Forums)
-----------------
*/
/* --- Forum Header --- */
#bbpress-forums li.bbp-header {
  background: var(--flex-gray-1);
}

.page-header-1 img {
  width: 150px;
}

/* --- Forum Markers --- */
.rbct ul {
  list-style: none;
}

.rbct ul ul {
  list-style: none;
}

/* --- Forum Body --- */
#bbpress-forums div.odd,
#bbpress-forums ul.odd {
  background-color: var(--flex-overlay-1);
}

.bbp-forum-content ul.sticky,
.bbp-topics ul.sticky,
.bbp-topics ul.super-sticky,
.bbp-topics-front ul.super-sticky {
  background-color: #e6440a54 !important;
  font-size: 1.1em;
}

/* Forum Meta Avatar */
#bbpress-forums p.bbp-topic-meta img.avatar {
  float: none;
  margin-bottom: -3px;
  border: 3px solid #ddd;
  -webkit-box-shadow: none;
  box-shadow: none;
  width: 30px;
  border-radius: 50%;
}

/* Forum Tags */
.select2-container--default .select2-selection--multiple {
  background-color: var(--flex-gray-7);
  border: 1px solid #d45f3559 !important;
  border-radius: 4px;
  cursor: text;
}

body .bb-select-dropdown.select2-dropdown {
  background: var(--flex-gray-7);
  box-shadow:
    0 2px 7px 1px rgba(0, 0, 0, 0.05),
    0 6px 32px 0 rgba(18, 43, 70, 0.1);
  border-radius: 4px;
  border: 0;
  padding: 5px 10px;
  margin-right: 0;
  max-width: 300px;
}

/* --- Forum Footer --- */
#bbpress-forums li.bbp-footer,
#bbpress-forums li.bbp-header {
  background: var(--flex-gray-1);
  border-top: 1px solid #eee;
  font-weight: 700;
  padding: 8px;
  text-align: center;
}

/* --- Thread Header --- */
#bbpress-forums div.bbp-forum-header,
#bbpress-forums div.bbp-reply-header,
#bbpress-forums div.bbp-topic-header {
  background-color: var(--flex-gray-7);
}

/* --- Thread Body --- */
#bbpress-forums div.even,
#bbpress-forums ul.even {
  background-color: var(--flex-gray-2);
  box-shadow: 0 0px 20px -5px;
}

span.bbp-admin-links a {
  color: var(--body-fcolor);
  font-weight: 400;
  font-size: 10px;
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 1025px) {

  .type-reply,
  .bbp-replies .topic {
    margin-bottom: 30px;
    padding: 40px;
    box-shadow: 0 2px 20px -5px;
  }
}

#bbpress-forums div.bbp-the-content-wrapper {
  margin-bottom: 10px;
  border: 1px solid #d45f3559 !important;
}

/* --- Single Forum Box Style --- */
.ruby-single-forum {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  width: 100%;
  min-height: 120px;
  padding: 20px;
  border-left: 5px solid;
  border-radius: var(--bbp-round-7);
  box-shadow: 0 5px 20px var(--shadow-7);
  gap: 30px;
  background-color: var(--bbp-white);
}

/* --- Thread Background Color --- */
@media (min-width: 1025px) {

  .type-reply,
  .bbp-replies .topic {
    margin-bottom: 30px;
    padding: 40px;
    box-shadow: 0 4px 20px;
  }
}

/* --- Thread Reply Box --- */
.bbp-reply-form .bbp-form {
  border: solid 1px;
}

/*
-----------------
18 - WooCommerce (Shop)
-----------------
*/

/*
-----------------
19 - Mailpoet (Newsletter)
-----------------
*/

/*
-----------------
20 - Contact Form 7 (Inquiries)
-----------------
*/

/*
-----------------
21 - Third Party Plugins (RankMath, etc.)
-----------------
*/

/* --- Mailpoet Form Field Background Color --- */
.mp-email-field {
  background-color: var(--input-bg,
      var(--flex-gray-7)) !important;
  /* Match Foxiz input background */
  color: var(--input-fcolor) !important;
  /* Match Foxiz input text color */
}

/*
-----------------
14 - Footer (Main Footer Area, Copyright)
-----------------
*/

/*
-----------------
15 - Social (Sharing, Follow, Profiles)
-----------------
*/

/* ===============================================================
   CINESIST PERSONALIZATION (RECRUIT & SIPHON)
   =============================================================== */
.cs-follow-btn, 
.cs-bookmark-btn-wrapper {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

/* Stabbed Note SVG Architecture */
.cs-stabbed-note-icon {
    order: -1;
    width: 28px;
    height: 28px;
    fill: currentColor;
    transition: fill 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: block;
}

/* Active State: The Brand Stab */
.cs-follow-btn.followed .cs-stabbed-note-icon,
.cs-bookmark-btn-wrapper.bookmarked .cs-stabbed-note-icon {
    fill: var(--cs-brand) !important;
    transform: scale(1.15) rotate(-5deg); /* Dynamic "Stabbed" animation */
}

/* Loading State: Reactive feedback */
.cs-follow-btn.loading, 
.cs-bookmark-btn-wrapper.loading {
    opacity: 0.5;
    pointer-events: none;
    cursor: wait;
}

/* Label Toggling: Track vs Remove */
.cs-follow-btn .cs-active-label,
.cs-bookmark-btn-wrapper .cs-active-label {
    display: none !important;
}

.cs-follow-btn.followed .cs-active-label,
.cs-bookmark-btn-wrapper.bookmarked .cs-active-label {
    display: inline-block !important;
}

.cs-follow-btn.followed .cs-default-label,
.cs-bookmark-btn-wrapper.bookmarked .cs-default-label {
    display: none !important;
}

/* Suppression of Legacy Icon Injections */
.cs-follow-btn i, 
.cs-bookmark-btn-wrapper i {
    display: none !important;
}

/* Hover States */
.cs-follow-btn:hover, 
.cs-bookmark-btn-wrapper:hover {
    opacity: 0.85;
}

.cs-follow-btn:hover .cs-stabbed-note-icon,
.cs-bookmark-btn-wrapper:hover .cs-stabbed-note-icon {
    transform: translateY(-2px);
}

/* 1. Ensure Title and Button are centered vertically */
.feed-bookmark-heading {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 2. Button container reset */
.feed-bookmark-heading h2:nth-child(2) {
    margin: 0;
    display: flex;
    align-items: center;
}

.cs-recruit-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-weight: bold;
}

.cs-recruit-wrapper .cs-stabbed-note-icon {
    width: 40px;
    height: 40px;
    transition: fill 0.3s ease;
}

.cs-recruit-wrapper .cs-default-label,
.cs-recruit-wrapper .cs-active-label {
    font-size: 14px;
    letter-spacing: 1px;
}

/* 4. 'TRACK' STATE (Not followed): Primary Text color/fill, hovers to Purple Brand color */
.cs-recruit-wrapper:not(.followed) {
    color: var(--flex-text-primary);
}
.cs-recruit-wrapper:not(.followed) .cs-stabbed-note-icon {
    fill: var(--flex-text-primary);
}
.cs-recruit-wrapper:not(.followed):hover {
    color: var(--cs-brand-400);
}
.cs-recruit-wrapper:not(.followed):hover .cs-stabbed-note-icon {
    fill: var(--cs-brand-400);
}

/* 5. 'REMOVE' STATE (Followed): Purple text/fill, hovers to Primary Text */
.cs-recruit-wrapper.followed {
    color: var(--cs-brand-400);
}
.cs-recruit-wrapper.followed .cs-stabbed-note-icon {
    fill: var(--cs-brand-400);
}
.cs-recruit-wrapper.followed:hover {
    color: var(--flex-text-primary); 
}
.cs-recruit-wrapper.followed:hover .cs-stabbed-note-icon {
    fill: var(--flex-text-primary);
}

/*
-----------------
22 - WP Hacks (Core Overrides, Fixes)
-----------------
*/

/* --- Hide Wordpress Page Titles --- */
.page-title {
  display: none;
}

.p-url {
  position: relative;
  display: inline;
  font-size: inherit;
  line-height: inherit;
  text-underline-offset: min(3px, 0.1em);
  color: var(--flex-black-white)!important;
}


/* Ensure the main site container respects your framework gutter */

.wp-site-blocks,
.entry-content {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding: 0;
  margin: 0;
}

/* 23 - Admin */
.wp-block .wp-block[data-type='core/group']:not([data-align='full']):not([data-align='wide']):not([data-align='left']):not([data-align='right']),
.wp-block .wp-block[data-type='core/cover']:not([data-align='full']):not([data-align='wide']):not([data-align='left']):not([data-align='right']) {
  max-width: unset !important;
  margin-right: unset !important;
  margin-left: unset !important;
}

/* Admin Editor Wrapper */
body.admin-bar :where(.editor-styles-wrapper) {
    margin: 32px auto !important;
    padding: 40px !important;
    background-color: #ffffff !important;
    max-width: var(--cs-width-xl) !important;
    box-shadow: 0 0 50px rgba(0,0,0,0.1);
}

/* Ensure editor text is readable on forced white background */
body.admin-bar :where(.editor-styles-wrapper) :where(.wp-block-paragraph, .wp-block-heading, .wp-block-list, li) {
    color: #1a1a1a !important;
}

/* Admin Editor - Title */
:root :where(.editor-styles-wrapper) :where(.wp-block-post-title) {
    font-weight: 600 !important;
}

/* Post Card Edit Link */
.p-wrap {
  position: relative;
}

.p-wrap > *:not(:last-child), .grid-box > *:not(:last-child), .p-content > *:not(:last-child) {
  margin-bottom: 0 !important;
}

.card-edit-link {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.p-wrap:hover .card-edit-link {
  opacity: 1;
}

.card-edit-link:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

.card-edit-link svg {
  fill: #fff;
}

/* ===============================================================
   SECTION: MERGED TAILWIND & LEGACY STYLES (Phase 1)
   =============================================================== */

/* --- TAILWIND START --- */
/* This block is processed by the Tailwind Browser CDN in functions.php */
@import "tailwindcss";

@theme {
    /* Reference global CSS variables for Tailwind utilities */
    --font-sans: var(--font-sans);
    --font-display: var(--font-display);
    --font-quicksand: var(--cs-font-secondary);
    
    --color-brand-purple: #d102d1;
    --color-brand-orange: #ff5500;
    --color-snarkive: var(--color-snarkive);
    --color-cinesist-red: var(--color-cinesist-red);
    --color-cinesist-orange: var(--color-cinesist-orange);
    
    --shadow-neon: 0 0 15px var(--snarkive-glow);
    --container-7xl: 1300px !important;
}

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
/* --- TAILWIND END --- */


/* --- CONVERTED STATIC CSS (Replaces @apply) --- */

.wordpress-content {
    color: var(--text-secondary);
}

.wordpress-content h1, 
.wordpress-content h2, 
.wordpress-content h3, 
.wordpress-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: var(--cs-text-primary);
}

.wordpress-content p {
    margin-bottom: 1.5rem;
    line-height: 1.625;
}

.wordpress-content img {
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 1px solid rgba(228, 228, 231, 0.2);
}

:root :where(.wp-block-quote), .wp-block-quote, .wp-block-pullquote, .wp-block-quote:not(.is-large):not(.is-style-large) {
  margin-bottom: 2rem;
  background-color: var(--wp--preset--color--flex-gray-3);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-color: var(--wp--preset--color--flex-snarkive);
  border-top-width: 1px;
  border-top-style: solid;
  border-right-color: var(--wp--preset--color--flex-text-title);
  border-right-width: 1px;
  border-right-style: solid;
  border-bottom-color: var(--wp--preset--color--flex-text-title);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-left-color: var(--wp--preset--color--flex-snarkive-90);
  border-left-width: 5px;
  border-left-style: solid;
  color: var(--wp--preset--color--flex-text-title);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.5;
  margin-right: 0;
  margin-left: 0;
  padding-top: var(--wp--preset--spacing--cs-spacing-sm);
  padding-right: var(--wp--preset--spacing--cs-spacing-sm);
  padding-bottom: var(--wp--preset--spacing--cs-spacing-sm);
  padding-left: var(--wp--preset--spacing--cs-spacing-sm);
}

.wordpress-content blockquote {
    border-left-width: 4px;
    border-color: var(--brand-primary);
    padding-left: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--cs-text-primary);
    background-color: rgba(244, 244, 245, 0.5);
    border-radius: 0 0.5rem 0.5rem 0;
}

.wordpress-content a {
    color: var(--brand-primary);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--brand-secondary);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: color 0.3s ease;
}

.wordpress-content a:hover {
    color: var(--brand-secondary);
}

/* --- LEGACY TAILWIND CUSTOM STYLES --- */

/* Magical Animations */
@keyframes puffIn {
  0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); filter: blur(2px); }
  100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); }
}

@keyframes vanishIn {
  0% { opacity: 0; transform-origin: 50% 50%; transform: scale(1.5, 1.5); filter: blur(20px); }
  100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); filter: blur(0px); }
}

@keyframes neonPulse {
  from { box-shadow: 0 0 5px var(--color-snarkive), 0 0 15px var(--color-snarkive); }
  to { box-shadow: 0 0 15px var(--color-snarkive-light), 0 0 30px var(--color-snarkive-light); }
}

.animate-magic-puff-in { animation: puffIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
.hover\:animate-magic-puff-in:hover { animation: puffIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }

.animate-magic-vanish-in { animation: vanishIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
.hover\:animate-magic-vanish-in:hover { animation: vanishIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }

.animate-neon-pulse { animation: neonPulse 2s infinite alternate; }
.hover\:animate-neon-pulse:hover { animation: neonPulse 2s infinite alternate; }

/* --- Arkahna Float Animation --- */
.animate-float {
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

/* Global UI Interactions */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--drop-shadow-xl);
}


/* ========================================= */
/* --- 24 - Gallery Patterns & Modules --- */
/* ========================================= */

/**
 * post-gallery-grid-3
 * A high-impact 3-image gallery grid.
 * One large featured image (left) and two stacked smaller images (right).
 */
.post-gallery-grid-3 {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    grid-template-rows: 450px !important;
    gap: 0.75rem !important;
    margin: 2.5rem 0 !important;
    align-items: stretch !important;
}

/* Featured Column */
.post-gallery-left-col {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    position: relative !important;
}

/* Side Stack Column */
.post-gallery-right-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    height: 100% !important;
    width: 100% !important;
}

/* Ensure the two items in the right column share height exactly */
.post-gallery-right-col > div {
    flex: 1 !important;
    height: calc(50% - 0.375rem) !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    position: relative !important;
}

/* Force object-fit on all gallery images */
.post-gallery-grid-3 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: 0 !important;
}

/* Interaction: Zoom Effect (cs-zoom-2) */
.post-gallery-grid-3 .cs-zoom-2:hover img {
    transform: scale(1.08) !important;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .post-gallery-grid-3 {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        height: auto !important;
        gap: 1rem !important;
    }
    
    .post-gallery-left-col {
        height: 300px !important;
    }
    
    .post-gallery-right-col {
        height: auto !important;
        gap: 1rem !important;
    }
    
    .post-gallery-right-col > div {
        height: 250px !important;
        flex: none !important;
    }
}


/* ========================================= */
/* --- 25 - Homepage Sections --- */
/* ========================================= */

/* --- Section Containers --- */
.cs-hp-hero {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Featured Hero Grid --- */
/* The Main Container */
.cs-grid-hero {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}

/* 1. The Parent Grid */
ul.cs-grid-hero {
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr !important; /* 25% | 50% | 25% */
  grid-template-rows: repeat(2, 1fr) !important;
  grid-template-areas: none !important; /* This clears the old conflicting slots */
  gap: 1rem !important;
}

/* 2. Reset the Tiles */
ul.cs-grid-hero > li {
  width: 100% !important;
  height: 100% !important;
  position: relative;
  border-radius: 0.5rem !important; /* Your requested 0.5rem */
  overflow: hidden !important;     /* Force clipping */
  isolation: isolate;              /* Creates a new stacking context for perfect clipping */
  background: #000;                /* Prevents white flashes during zoom */
}

/* 3. The 2-1-2 Placement */
ul.cs-grid-hero > li:nth-child(1) { grid-column: 2; grid-row: 1 / span 2; } /* Large Middle */
ul.cs-grid-hero > li:nth-child(2) { grid-column: 1; grid-row: 1; }           /* Top Left */
ul.cs-grid-hero > li:nth-child(3) { grid-column: 1; grid-row: 2; }           /* Bottom Left */
ul.cs-grid-hero > li:nth-child(4) { grid-column: 3; grid-row: 1; }           /* Top Right */
ul.cs-grid-hero > li:nth-child(5) { grid-column: 3; grid-row: 2; }           /* Bottom Right */

/* Allow the character to "peek" outside the tile */
ul.cs-grid-hero > li:nth-child(1) {
    z-index: 20;
    overflow: hidden !important; /* This "hides" him into the edge */
    position: relative;
}

/* Reset the fox to a pure horizontal position */
.cinefox-peeking {
  position: absolute;
  right: 0;
  transform: translateX(100%) rotateY(0deg) !important;
  transition: transform 0.6s ease-in !important;
  pointer-events: none;
  z-index: 10;
}

/* Hover state: Slide in without rotating */
ul.cs-grid-hero > li:nth-child(1):hover .cinefox-peeking {
    /* Adjust -50px to decide how much he peeks out */
    transform: translateX(70px) rotateY(0deg) !important;
}

/* Ensure the parent clips him when he is at translateX(100%) */
ul.cs-grid-hero > li:nth-child(1) {
    overflow: hidden !important;
    position: relative;
}

/* Lower z-index for other tiles so the character can overlap them */
ul.cs-grid-hero > li:nth-child(n+2) {
    z-index: 1;
    overflow: hidden; /* Side tiles can keep overflow hidden if they don't have peeking characters */
}

/* Allow the character to peek outside the tile's box */
li.cs-hero__grid-tile {
  overflow: visible !important;
}

/* 3. Hover state (Peek in!) */
li.cs-hero__grid-tile:hover .cinefox-peeking {
  transform: translateX(0%) rotateY(0deg) !important;
}

/* Side Columns (Stacked Tiles) */
.cs-hero-col-side {
  flex: 1; /* Takes 1 part of space */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Middle Column (Large Tile) */
.cs-hero-col-main {
  flex: 2; /* Takes 2 parts of space - exactly double the sides */
}

/* Ensure the large tile fills the height */
.cs-hero-col-main > li {
  height: 100%;
}

.cs-hero__grid-tile {
    position: relative;
    overflow: hidden;
    grid-column: span 12;
    aspect-ratio: 16 / 9;
}

@media (min-width: 1024px) {
    .cs-hero__grid-tile:first-child {
        grid-column: span 8;
        grid-row: span 2;
        aspect-ratio: auto;
    }
    .cs-hero__grid-tile:not(:first-child) {
        grid-column: span 4;
        aspect-ratio: 16 / 10;
    }
}

.cs-hero__grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cs-hero__grid-tile:hover .cs-hero__grid-image {
    transform: scale(1.08);
}

.cs-hero__grid-details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    color: #fff;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.cs-hero__grid-title {
    margin: 0.75rem 0;
    color: #fff !important;
    font-weight: 800;
    line-height: 1.1;
}

.cs-hero__grid-tile:first-child .cs-hero__grid-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.cs-hero__grid-tile:not(:first-child) .cs-hero__grid-title {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
}

.cs-hero__grid-summary {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.9;
    max-width: 600px;
}

/* Cinefox Peeking Utility */
.cinefox-peeking {
    pointer-events: none;
    z-index: 10 !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cs-hero__grid-tile:hover .cinefox-peeking {
    transform: rotate(10deg) translateY(-10px);
}

/* --- THE WIRE SECTION --- */
.wire-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.wire-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem;
  background: var(--flex-white-black);
  border: 1px solid var(--cinesist-border-color);
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.wire-card:is(:hover,:focus) {
  border-right-width: 0px;
  border-right-style: solid;
  border-top: 1px solid var(--cinesist-info);
  border-bottom: 1px solid var(--cinesist-info);
  border-left: 5px solid var(--cinesist-info);
  border-radius: 0.5rem;
}

@media (min-width: 768px) {
    .wire-card {
        flex-direction: row;
        align-items: center;
    }
}

.wire-card-image-wrapper {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .wire-card-image-wrapper {
        width: 35%;
        aspect-ratio: 4 / 3;
    }
}

.wire-card-title {
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--cs-text-primary);
}

.wire-card-excerpt {
    font-size: 0.9rem;
    color: var(--cs-text-secondary);
    line-height: 1.6;
}

/* --- DNA BANNER --- */
.cs-cinescore-banner {
    padding: 2rem 0;
    background: linear-gradient(45deg, var(--cs-brand-800, var(--cs-brand-50)));
    border-top: 1px solid var(
    --cs-brand-300);
    border-bottom: 1px solid var(
    --cs-brand-300);
    overflow: hidden;
}

.cinescore-banner-wrapper {
    max-width: var(--cs-width-lg);
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.cinescore-banner-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 3.5rem;
}

.cinescore-banner-badge {
    padding: 2rem 1.5rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.cinescore-banner-badge:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-5px);
}

.cinescore-banner-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

/* Badge Tiers */
.cinescore-banner-badge.is-legendary { border-color: rgba(234, 179, 8, 0.3); }
.cinescore-banner-badge.is-epic { border-color: rgba(59, 130, 246, 0.3); }
.cinescore-banner-badge.is-basic { border-color: rgba(34, 197, 94, 0.3); }
.cinescore-banner-badge.is-trash { border-color: rgba(249, 115, 22, 0.3); }
.cinescore-banner-badge.is-burn { border-color: rgba(220, 38, 38, 0.3); }

.cinescore-banner-badge.is-legendary:hover { border-color: #eab308; box-shadow: 0 0 20px rgba(234, 179, 8, 0.1); }
.cinescore-banner-badge.is-epic:hover { border-color: #3b82f6; box-shadow: 0 0 20px rgba(59, 130, 246, 0.1); }
.cinescore-banner-badge.is-basic:hover { border-color: #22c55e; box-shadow: 0 0 20px rgba(34, 197, 94, 0.1); }
.cinescore-banner-badge.is-trash:hover { border-color: #f97316; box-shadow: 0 0 20px rgba(249, 115, 22, 0.1); }
.cinescore-banner-badge.is-burn:hover { border-color: #dc2626; box-shadow: 0 0 20px rgba(220, 38, 38, 0.1); }