/** Shopify CDN: Minification failed

Line 26:18 Unexpected "{"
Line 26:27 Expected ":"
Line 2527:18 Unexpected "{"
Line 2527:27 Expected ":"

**/
/* ══════════════════════════════════════════════════════════════
   BRUTECH CUSTOM CSS — Impact Theme
   brutech-custom.css
══════════════════════════════════════════════════════════════ */

div.shopify-section-group-header-group,
.shopify-section-group-header-group {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* ── Mega menu full-width fix ── */
#shopify-section-{{ section.id }} .mega-menu,
.shopify-section--header .mega-menu {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

.shopify-section-group-header-group {
  overflow-x: clip !important;
}

/* ── GLOBAL FONT ── */
/* Poppins globally, then specific overrides below */
body, body * {
  font-family: 'Poppins', sans-serif !important;
}

/* Poppins — RPG headings */
h1, h2, h3,
.brutech-fc-name,
.brutech-perk-title,
.brutech-faction-select-heading h2,
#shopify-section-header .mega-menu__nav > li > a.h5,
#shopify-section-header .mega-menu__nav > li > a:not(:has(img)):not(.link-faded) {
  font-family: 'Poppins', sans-serif !important;
}

/* Poppins — techy elements */
.brutech-stat-label,
.brutech-perk-badge,
.brutech-mega-tier-chip,
.brutech-mega-name-chip,
.brutech-faction-tag,
.brutech-fc-tag,
.brutech-fc-cta,
.brutech-eyebrow,
.brutech-hero-status,
.brutech-faction-desc,
.brutech-artist-badge,
.brutech-scientist-badge,
.brutech-formula-tag,
.brutech-artist-movement,
.chip-common, .chip-uncommon, .chip-rare, .chip-epic,
.chip-legendary, .chip-mystic, .chip-divine, .chip-celestial, .chip-eldritch, .chip-mythic, .chip-mythical,
.loot-hex, .brutech-scientist-formula, .brutech-scientist-cores {
  font-family: 'Poppins', monospace !important;
}

/* ══════════════════════════════════════════════════════════════
   LOADOUT CARD — Gaming PC collectible cards
══════════════════════════════════════════════════════════════ */

.product-card.brutech-loadout-card {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  border-radius: 18px;
  border: 1px solid rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.16);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.product-card.brutech-loadout-card.brutech-rarity::before {
  display: none !important;
}

.product-card.brutech-loadout-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.65);
  box-shadow: 0 24px 60px rgba(0,0,0,0.42), 0 0 34px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.20) !important;
}

.product-card.brutech-loadout-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 190px at var(--mx, 50%) var(--my, 50%), rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.13) 0%, transparent 72%);
  transition: opacity 0.25s ease;
}

.product-card.brutech-loadout-card:hover::after { opacity: 1; }

.product-card.brutech-loadout-card > *:not(.brutech-bottom-glow) {
  position: relative;
  z-index: 4;
}

.product-card.brutech-loadout-card .product-card__figure {
  position: relative !important;
  overflow: hidden;
}

/* Bottom glow */
.product-card.brutech-loadout-card .brutech-bottom-glow {
  position: absolute;
  left: 10%; right: 10%; bottom: -28px;
  height: 80px; z-index: 1; border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.45) 0%, rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.18) 38%, transparent 72%);
  opacity: 0; filter: blur(18px); transform: scaleX(0.72);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

.product-card.brutech-loadout-card:hover .brutech-bottom-glow { opacity: 1; transform: scaleX(1.18); }

/* Rarity badge */
.product-card.brutech-loadout-card .brutech-rarity-badge {
  position: absolute; top: 10px; left: 10px; z-index: 20;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; padding: 5px 10px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: 1.7px; line-height: 1;
  text-transform: uppercase; color: var(--brutech-rarity-hex, #27bcdd);
  background: linear-gradient(135deg, rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.20), rgba(0,0,0,0.52));
  border: 1px solid rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 16px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.12);
  opacity: 0.78; pointer-events: none;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
}

.product-card.brutech-loadout-card:hover .brutech-rarity-badge {
  opacity: 1; transform: translateY(-1px);
  text-shadow: 0 0 10px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.95);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 22px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.36);
}

/* Stat bar */
.product-card.brutech-loadout-card .brutech-stat-bar {
  position: absolute; top: 10px; right: 10px; z-index: 20;
  display: grid; gap: 5px; max-width: 148px; pointer-events: none;
}

.product-card.brutech-loadout-card .brutech-stat {
  display: grid; grid-template-columns: 20px minmax(0, 1fr);
  align-items: center; gap: 7px; min-height: 28px; padding: 5px 10px;
  border-radius: 999px; color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.58); border: 1px solid rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.26);
  backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(8px);
}

.product-card.brutech-loadout-card .brutech-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px; font-size: 9px;
  color: var(--brutech-rarity-hex, #27bcdd); background: rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.14);
}

.product-card.brutech-loadout-card .brutech-stat-copy { display: grid; min-width: 0; line-height: 1.1; }

.product-card.brutech-loadout-card .brutech-stat-label {
  font-size: 9px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
}

.product-card.brutech-loadout-card .brutech-stat-value {
  overflow: hidden; max-width: 135px; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.94); white-space: nowrap; text-overflow: ellipsis;
}

/* Image hover float */
.product-card.brutech-loadout-card img {
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease !important;
}

.product-card.brutech-loadout-card:hover img {
  transform: translateY(-10px) scale(1.035) !important;
  filter: drop-shadow(0 18px 24px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.34)) drop-shadow(0 0 22px rgba(0,191,255,0.18)) !important;
}

/* Hide quick add */
.product-card.brutech-loadout-card .quick-buy,
.product-card.brutech-loadout-card .product-card__quick-add-button,
.product-card.brutech-loadout-card .product-card__quick-buy,
.product-card.brutech-loadout-card button[name="add"],
.product-card.brutech-loadout-card form[action*="/cart/add"] { display: none !important; }

/* SELECT LOADOUT CTA */
.product-card.brutech-loadout-card .brutech-select-loadout {
  display: flex !important; align-items: center; justify-content: center;
  width: 100%; min-height: 42px; margin-top: 12px; padding: 11px 14px;
  border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 1.6px;
  line-height: 1; text-align: center; text-decoration: none !important; text-transform: uppercase;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.95), rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.36));
  border: 1px solid rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.82);
  box-shadow: 0 12px 24px rgba(0,0,0,0.26), 0 0 20px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.product-card.brutech-loadout-card .brutech-select-loadout:hover {
  transform: translateY(-2px); filter: brightness(1.1);
  box-shadow: 0 16px 30px rgba(0,0,0,0.34), 0 0 28px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.36);
}

/* Selected state */
.product-card.brutech-loadout-card.brutech-is-selected {
  border-color: var(--brutech-rarity-hex, #27bcdd) !important;
  box-shadow: 0 0 0 2px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.72), 0 0 34px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.42), 0 24px 60px rgba(0,0,0,0.45) !important;
  animation: brutech-selected-pulse 1.15s ease-in-out infinite;
}

.product-card.brutech-loadout-card .brutech-selected-check {
  position: absolute; top: 48px; left: 10px; z-index: 25;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px; font-size: 17px; font-weight: 900;
  color: #050505; background: var(--brutech-rarity-hex, #27bcdd);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.4), 0 0 22px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.55);
  opacity: 0; transform: scale(0.72); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.product-card.brutech-loadout-card.brutech-is-selected .brutech-selected-check { opacity: 1; transform: scale(1); }
.product-card.brutech-loadout-card.brutech--selected-flash {
  box-shadow: 0 0 0 2px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.7), 0 0 30px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.36) !important;
}

@keyframes brutech-selected-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.62), 0 0 24px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.34), 0 24px 60px rgba(0,0,0,0.45); }
  50%       { box-shadow: 0 0 0 3px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.95), 0 0 42px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.58), 0 28px 72px rgba(0,0,0,0.5); }
}

/* Tier colours */
.product-card.brutech-rarity-common    { --brutech-rarity-hex: #a8a8a8; --brutech-glow-rgb: 168,168,168; }
.product-card.brutech-rarity-uncommon  { --brutech-rarity-hex: #1eff00; --brutech-glow-rgb: 30,255,0; }
.product-card.brutech-rarity-rare      { --brutech-rarity-hex: #0070dd; --brutech-glow-rgb: 0,112,221; }
.product-card.brutech-rarity-epic      { --brutech-rarity-hex: #a335ee; --brutech-glow-rgb: 163,53,238; }
.product-card.brutech-rarity-legendary { --brutech-rarity-hex: #ff8000; --brutech-glow-rgb: 255,128,0; }
.product-card.brutech-rarity-mystic    { --brutech-rarity-hex: #00c8ff; --brutech-glow-rgb: 0,200,255; }
.product-card.brutech-rarity-divine    { --brutech-rarity-hex: #ffd700; --brutech-glow-rgb: 255,215,0; }
.product-card.brutech-rarity-celestial { --brutech-rarity-hex: #c8a8ff; --brutech-glow-rgb: 200,168,255; }
.product-card.brutech-rarity-eldritch  { --brutech-rarity-hex: #8b00ff; --brutech-glow-rgb: 139,0,255; }
.product-card.brutech-rarity-mythic    { --brutech-rarity-hex: #ff2020; --brutech-glow-rgb: 255,32,32; }
.product-card.brutech-rarity-mythical  { --brutech-rarity-hex: #ff69b4; --brutech-glow-rgb: 255,105,180; }

.product-card.brutech-rarity-mythical { animation: brutech-mythical-card-glow 2.8s ease-in-out infinite; }
@keyframes brutech-mythical-card-glow {
  0%, 100% { border-color: rgba(255,105,180,0.46); }
  50%       { border-color: rgba(255,105,180,0.96); }
}

/* Tier CTA colours */
product-card.brutech-loadout-card.brutech-rarity-legendary .brutech-select-loadout { background: linear-gradient(135deg, rgba(255,128,0,0.95), rgba(255,128,0,0.36)) !important; border-color: rgba(255,128,0,0.82) !important; }
product-card.brutech-loadout-card.brutech-rarity-mythical  .brutech-select-loadout { background: linear-gradient(135deg, rgba(255,105,180,0.95), rgba(255,105,180,0.36)) !important; border-color: rgba(255,105,180,0.82) !important; }
product-card.brutech-loadout-card.brutech-rarity-epic      .brutech-select-loadout { background: linear-gradient(135deg, rgba(163,53,238,0.95), rgba(163,53,238,0.36)) !important; border-color: rgba(163,53,238,0.82) !important; }
product-card.brutech-loadout-card.brutech-rarity-divine    .brutech-select-loadout { background: linear-gradient(135deg, rgba(255,215,0,0.95), rgba(255,215,0,0.36)) !important; border-color: rgba(255,215,0,0.82) !important; color: #000 !important; }

/* Hide badge chips on desktop */
product-card.brutech-loadout-card .product-card__badge-list--bottom { display: none !important; }

/* Price styling */
product-card.brutech-loadout-card price-list,
product-card.brutech-loadout-card .price-list { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 !important; }

product-card.brutech-loadout-card sale-price {
  font-family: 'Poppins', sans-serif !important; font-size: 20px !important;
  font-weight: 800 !important; color: #27bcdd !important;
  letter-spacing: -0.5px !important; text-shadow: 0 0 18px rgba(39,188,221,0.35) !important; line-height: 1 !important;
}

product-card.brutech-loadout-card .text-subdued { color: #27bcdd !important; }

product-card.brutech-loadout-card price-list::before {
  content: 'PRICE'; display: block; font-family: 'Poppins', monospace;
  font-size: 8px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(39,188,221,0.5);
}

product-card.brutech-loadout-card .text-xs { display: none !important; }

/* Mobile */
@media screen and (max-width: 749px) {
  product-card.brutech-loadout-card { border-radius: 14px; }
  product-card.brutech-loadout-card .brutech-stat-bar { display: none !important; }
  product-card.brutech-loadout-card .product-card__badge-list--bottom { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; padding: 0 0 4px !important; }
  product-card.brutech-loadout-card .product-card__info,
  product-card.brutech-loadout-card .product-card__details,
  product-card.brutech-loadout-card .product-card__content { padding: 10px 12px 14px !important; gap: 6px !important; }
  product-card.brutech-loadout-card .product-card__vendor { display: none !important; }
  product-card.brutech-loadout-card .price { margin-top: 4px !important; margin-bottom: 6px !important; }
  product-card.brutech-loadout-card .brutech-select-loadout { min-height: 38px !important; margin-top: 8px !important; font-size: 10px !important; letter-spacing: 1.2px !important; }
  .product-card.brutech-loadout-card .brutech-rarity-badge { top: 8px; left: 8px; font-size: 8px; padding: 5px 8px; }
}

/* ══════════════════════════════════════════════════════════════
   CREATOR + THREADRIPPER CARD IDENTITY
══════════════════════════════════════════════════════════════ */

product-card.brutech-loadout-card.brutech-creator-card {
  --brutech-glow-rgb: 163,53,238; --brutech-rarity-hex: #a335ee;
}

product-card.brutech-loadout-card .brutech-artist-badge {
  position: absolute; top: 10px; left: 10px; z-index: 20;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
  color: #a335ee; background: rgba(163,53,238,0.15); border: 1px solid rgba(163,53,238,0.5);
  padding: 4px 10px; border-radius: 999px; pointer-events: none;
}
product-card.brutech-loadout-card .brutech-artist-badge::before { content: '🎨'; font-size: 9px; }

product-card.brutech-loadout-card .brutech-artist-movement {
  position: absolute; bottom: 8px; right: 10px; z-index: 20;
  font-size: 7px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(163,53,238,0.75); background: rgba(0,0,0,0.7); border: 1px solid rgba(163,53,238,0.3);
  padding: 3px 8px; border-radius: 4px; pointer-events: none;
}

product-card.brutech-loadout-card.brutech-creator-card:hover {
  border-color: rgba(163,53,238,0.65) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.42), 0 0 34px rgba(163,53,238,0.25) !important;
}

product-card.brutech-loadout-card.brutech-creator-card .brutech-select-loadout {
  background: linear-gradient(135deg, rgba(163,53,238,0.95), rgba(163,53,238,0.36)) !important;
  border-color: rgba(163,53,238,0.82) !important;
}

product-card.brutech-loadout-card.brutech-threadripper-card {
  --brutech-glow-rgb: 39,188,221; --brutech-rarity-hex: #27bcdd;
  background-image: linear-gradient(rgba(39,188,221,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(39,188,221,0.025) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
}

product-card.brutech-loadout-card .brutech-scientist-badge {
  position: absolute; top: 10px; left: 10px; z-index: 20;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
  color: #27bcdd; background: rgba(39,188,221,0.12); border: 1px solid rgba(39,188,221,0.45);
  padding: 4px 10px; border-radius: 999px; pointer-events: none;
}
product-card.brutech-loadout-card .brutech-scientist-badge::before { content: '🔬'; font-size: 9px; }

product-card.brutech-loadout-card .brutech-formula-tag {
  position: absolute; bottom: 8px; right: 10px; z-index: 20;
  font-size: 8px; letter-spacing: 1px; font-style: italic;
  color: rgba(39,188,221,0.7); background: rgba(0,0,0,0.7); border: 1px solid rgba(39,188,221,0.25);
  padding: 3px 8px; border-radius: 4px; pointer-events: none;
}

product-card.brutech-loadout-card.brutech-threadripper-card .brutech-select-loadout {
  background: linear-gradient(135deg, rgba(39,188,221,0.95), rgba(39,188,221,0.36)) !important;
  border-color: rgba(39,188,221,0.82) !important;
}

/* ══════════════════════════════════════════════════════════════
   ANIMATED TOPBAR
══════════════════════════════════════════════════════════════ */

.brutech-header-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #27bcdd, #7c5cbf, #ff8000, #1eff00, #27bcdd);
  background-size: 400% 100%; animation: brutech-topbar 5s linear infinite;
  z-index: 99999; pointer-events: none;
}
@keyframes brutech-topbar { 0% { background-position: 400% 0; } 100% { background-position: -400% 0; } }

/* ══════════════════════════════════════════════════════════════
   MEGA MENU RPG
══════════════════════════════════════════════════════════════ */

#shopify-section-header .mega-menu {
  animation: brutech-mega-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes brutech-mega-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px) !important; }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) !important; }
}

#shopify-section-header .mega-menu__nav > li {
  position: relative !important; isolation: isolate; overflow: hidden !important; padding: 0 !important;
  border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.08) !important; background: #13131c !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
  display: flex !important; flex-direction: column !important;
}

#shopify-section-header .mega-menu__nav > li[data-faction="gaming"]       { --frgb: 39,188,221;   --fhex: #27bcdd; }
#shopify-section-header .mega-menu__nav > li[data-faction="invisio"]      { --frgb: 200,210,230;  --fhex: #c8d2e6; }
#shopify-section-header .mega-menu__nav > li[data-faction="zeroram"]      { --frgb: 34,211,238;   --fhex: #22d3ee; }
#shopify-section-header .mega-menu__nav > li[data-faction="creator"]      { --frgb: 163,53,238;   --fhex: #a335ee; }
#shopify-section-header .mega-menu__nav > li[data-faction="threadripper"] { --frgb: 39,188,221;   --fhex: #27bcdd; }
#shopify-section-header .mega-menu__nav > li[data-faction="office"]       { --frgb: 148,163,184;  --fhex: #94a3b8; }
#shopify-section-header .mega-menu__nav > li[data-faction="accessories"]  { --frgb: 148,163,184;  --fhex: #94a3b8; }

#shopify-section-header .mega-menu__nav > li::before {
  content: '' !important; position: absolute !important; top: 0; left: 0; right: 0 !important; height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(var(--frgb, 39,188,221), 0.9) 30%, rgba(var(--frgb, 39,188,221), 1) 50%, rgba(var(--frgb, 39,188,221), 0.9) 70%, transparent) !important;
  z-index: 10 !important; pointer-events: none !important;
}

#shopify-section-header .mega-menu__nav > li:hover {
  transform: translateY(-5px) !important; border-color: rgba(var(--frgb, 39,188,221), 0.55) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--frgb, 39,188,221), 0.2), 0 0 40px rgba(var(--frgb, 39,188,221), 0.10) !important;
}

#shopify-section-header .mega-menu__nav > li::after {
  content: '' !important; position: absolute !important; inset: 0 !important; border-radius: 16px !important;
  background: radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), rgba(var(--frgb, 39,188,221), 0.10) 0%, transparent 70%) !important;
  opacity: 0 !important; transition: opacity 0.25s ease !important; pointer-events: none !important; z-index: 0 !important;
}
#shopify-section-header .mega-menu__nav > li:hover::after { opacity: 1 !important; }

/* Corner brackets */
.brutech-corner { position: absolute; width: 14px; height: 14px; z-index: 15; pointer-events: none; opacity: 0; transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease; }
.brutech-corner-tl { top: 6px; left: 6px; border-top: 2px solid var(--fhex, #27bcdd); border-left: 2px solid var(--fhex, #27bcdd); }
.brutech-corner-tr { top: 6px; right: 6px; border-top: 2px solid var(--fhex, #27bcdd); border-right: 2px solid var(--fhex, #27bcdd); }
.brutech-corner-bl { bottom: 6px; left: 6px; border-bottom: 2px solid var(--fhex, #27bcdd); border-left: 2px solid var(--fhex, #27bcdd); }
.brutech-corner-br { bottom: 6px; right: 6px; border-bottom: 2px solid var(--fhex, #27bcdd); border-right: 2px solid var(--fhex, #27bcdd); }
#shopify-section-header .mega-menu__nav > li:hover .brutech-corner { opacity: 1; width: 18px; height: 18px; }

/* Portrait image area */
.brutech-card-portrait {
  position: relative; width: 100%; flex-shrink: 0; overflow: hidden;
  border-radius: 16px 16px 0 0; height: 190px;
  background: radial-gradient(circle at 50% 60%, rgba(var(--frgb, 39,188,221), 0.12) 0%, transparent 65%), #0d0d15;
}
.brutech-card-portrait::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px);
}
.brutech-card-portrait::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, transparent 0%, #13131c 100%);
}

#shopify-section-header .mega-menu__column-image {
  width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important;
  padding: 12px !important; margin: 0 !important; border-radius: 0 !important; background: transparent !important;
  border: none !important; display: block !important; transform: scale(1.05) !important; position: relative; z-index: 1;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease !important;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)) !important;
}
#shopify-section-header .mega-menu__nav > li:hover .mega-menu__column-image {
  transform: scale(1.1) translateY(-6px) !important;
  filter: drop-shadow(0 20px 30px rgba(var(--frgb, 39,188,221), 0.35)) drop-shadow(0 0 12px rgba(var(--frgb, 39,188,221), 0.2)) !important;
}

.brutech-faction-eyebrow {
  position: absolute !important; bottom: 8px !important; left: 10px !important; z-index: 10 !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important; margin: 0 !important;
}
.brutech-faction-tag {
  font-size: 8px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important;
  color: var(--fhex, #27bcdd) !important; background: rgba(0,0,0,0.75) !important;
  border: 1px solid rgba(var(--frgb, 39,188,221), 0.45) !important; padding: 3px 8px !important;
  border-radius: 4px !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; line-height: 1 !important;
  
}
.brutech-faction-dot {
  width: 5px !important; height: 5px !important; border-radius: 50% !important;
  background: var(--fhex, #27bcdd) !important; box-shadow: 0 0 6px var(--fhex, #27bcdd) !important;
  flex-shrink: 0 !important; animation: brutech-dot-blink 2s ease-in-out infinite !important;
}
@keyframes brutech-dot-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Card content */
.brutech-card-content {
  padding: 14px 16px 16px !important; display: flex !important; flex-direction: column !important;
  flex: 1 !important; position: relative !important; z-index: 1 !important;
}

#shopify-section-header .mega-menu__nav > li > a.h5,
#shopify-section-header .mega-menu__nav > li > a:not(:has(img)):not(.link-faded) {
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.3px !important;
  color: #f0eef8 !important; text-transform: none !important; margin-bottom: 3px !important;
  text-decoration: none !important; display: block !important;
}

.brutech-faction-desc {
  font-size: 11px !important; font-weight: 300 !important; font-style: italic !important;
  color: rgba(152,150,168,0.75) !important; line-height: 1.4 !important; margin-bottom: 10px !important; display: block !important;
}

/* Tier chips */
.brutech-mega-tiers { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin: 0 0 10px !important; padding: 8px 0 !important; border-top: 1px solid rgba(255,255,255,0.06) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.brutech-mega-tier-chip { font-size: 8px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; padding: 3px 8px !important; border-radius: 999px !important; border: 1px solid currentColor !important; opacity: 0.65 !important; transition: opacity 0.2s, text-shadow 0.2s, background 0.2s !important; cursor: default !important; }
.brutech-mega-tier-chip:hover { opacity: 1 !important; text-shadow: 0 0 8px currentColor !important; background: rgba(255,255,255,0.04) !important; }
.chip-common    { color: #a8a8a8 !important; }
.chip-uncommon  { color: #1eff00 !important; }
.chip-rare      { color: #0070dd !important; }
.chip-epic      { color: #a335ee !important; }
.chip-legendary { color: #ff8000 !important; }
.chip-mystic    { color: #00c8ff !important; }
.chip-divine    { color: #ffd700 !important; }
.chip-celestial { color: #c8a8ff !important; }
.chip-eldritch  { color: #8b00ff !important; }
.chip-mythic    { color: #ff2020 !important; }
.chip-mythical  { color: #ff69b4 !important; animation: chip-mythical-pulse 2.5s ease-in-out infinite !important; }
@keyframes chip-mythical-pulse { 0%,100% { opacity: 0.65; } 50% { opacity: 1; text-shadow: 0 0 8px #ff69b4; } }

/* Name chips */
.brutech-mega-names { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin: 0 0 10px !important; padding: 8px 0 !important; border-top: 1px solid rgba(255,255,255,0.06) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.brutech-mega-name-chip { font-size: 8px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: rgba(var(--frgb, 39,188,221), 0.75) !important; padding: 3px 8px !important; border-radius: 999px !important; border: 1px solid rgba(var(--frgb, 39,188,221), 0.25) !important; background: rgba(var(--frgb, 39,188,221), 0.06) !important; transition: all 0.2s !important; cursor: default !important; }
.brutech-mega-name-chip:hover { background: rgba(var(--frgb, 39,188,221), 0.14) !important; border-color: rgba(var(--frgb, 39,188,221), 0.5) !important; color: var(--fhex, #27bcdd) !important; }

/* Sub links */
#shopify-section-header .mega-menu__nav > li ul { display: flex !important; flex-direction: column !important; gap: 3px !important; flex: 1 !important; margin: 0 !important; padding: 0 !important; border: none !important; }
#shopify-section-header .mega-menu__nav ul a,
#shopify-section-header .mega-menu__nav .link-faded { font-size: 11.5px !important; font-weight: 400 !important; color: rgba(152,150,168,0.85) !important; padding: 6px 10px !important; border-radius: 8px !important; border: 1px solid transparent !important; transition: color 0.15s, background 0.15s, border-color 0.15s, padding-left 0.15s !important; display: flex !important; align-items: center !important; gap: 6px !important; text-decoration: none !important; }
#shopify-section-header .mega-menu__nav ul li:not(:last-child) a::before { content: '›' !important; color: rgba(var(--frgb, 39,188,221), 0.4) !important; font-size: 14px !important; line-height: 1 !important; transition: color 0.15s !important; flex-shrink: 0 !important; }
#shopify-section-header .mega-menu__nav ul a:hover,
#shopify-section-header .mega-menu__nav .link-faded:hover { color: #ffffff !important; background: rgba(var(--frgb, 39,188,221), 0.07) !important; border-color: rgba(var(--frgb, 39,188,221), 0.18) !important; padding-left: 14px !important; transform: none !important; }
#shopify-section-header .mega-menu__nav ul a:hover::before { color: rgba(var(--frgb, 39,188,221), 0.9) !important; }

/* CTA button */
#shopify-section-header .mega-menu__nav > li ul > li:last-child { margin-top: auto !important; padding-top: 10px !important; }
#shopify-section-header .mega-menu__nav > li ul > li:last-child a,
#shopify-section-header .mega-menu__nav > li ul > li:last-child .link-faded {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important;
  color: #0d0c12 !important; background: linear-gradient(135deg, #4fc3f7 0%, #27bcdd 100%) !important;
  border: none !important; border-radius: 999px !important; justify-content: center !important;
  box-shadow: 0 6px 20px rgba(39,188,221,0.35) !important; position: relative !important; overflow: hidden !important;
  transition: box-shadow 0.22s ease, transform 0.22s ease !important; padding-left: 10px !important;
}
#shopify-section-header .mega-menu__nav > li > ul > li:last-child a:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(39,188,221,0.55) !important; color: #0d0c12 !important; padding-left: 10px !important; }
#shopify-section-header .mega-menu__nav > li > ul > li:last-child a::after { content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 60% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent) !important; transition: left 0.5s ease !important; pointer-events: none !important; }
#shopify-section-header .mega-menu__nav > li > ul > li:last-child a:hover::after { left: 150% !important; }

/* Threadripper graph paper */
#shopify-section-header .mega-menu__nav > li[data-faction="threadripper"] { background-image: linear-gradient(rgba(39,188,221,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(39,188,221,0.025) 1px, transparent 1px) !important; background-size: 14px 14px !important; background-color: #13131c !important; }

/* Scroll-aware header */
#shopify-section-header.is-scrolled .header { box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 40px rgba(39,188,221,0.05) !important; }
#shopify-section-header.is-scrolled .header__wrapper { padding-block: 6px !important; min-height: 56px !important; }

/* ══════════════════════════════════════════════════════════════
   HOME PAGE RPG — scoped to body.template-index
══════════════════════════════════════════════════════════════ */

body.template-index { background: #0c0c10 !important; }

body.template-index::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(39,188,221,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(39,188,221,0.028) 1px, transparent 1px);
  background-size: 56px 56px; animation: brutech-home-grid 18s linear infinite;
}
@keyframes brutech-home-grid { 0% { background-position: 0 0; } 100% { background-position: 56px 56px; } }

/* Hero */
body.template-index .brutech-hero-rpg-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible; }
/* Allow hero RPG overlay to escape the slideshow's clip boundary */
body.template-index .slideshow:not(.brutech-slideshow),
body.template-index .banner,
body.template-index [data-section-type="slideshow"]:not(.brutech-slideshow),
body.template-index [class*="slideshow"]:not(.brutech-slideshow):not(.slideshow__slide):not(.slideshow__slides) { overflow: visible !important; }
body.template-index .brutech-hero-rpg-layer::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px); pointer-events: none; z-index: 2; }
.brutech-hero-corner { position: absolute; width: 36px; height: 36px; pointer-events: none; z-index: 10; }
.brutech-hero-corner-tl { top: 16px; left: 16px; border-top: 2.5px solid rgba(39,188,221,0.8); border-left: 2.5px solid rgba(39,188,221,0.8); border-top-left-radius: 12px; }
.brutech-hero-corner-tr { top: 16px; right: 16px; border-top: 2.5px solid rgba(39,188,221,0.8); border-right: 2.5px solid rgba(39,188,221,0.8); border-top-right-radius: 12px; }
.brutech-hero-corner-bl { bottom: 28px; left: 16px; border-bottom: 2.5px solid rgba(39,188,221,0.8); border-left: 2.5px solid rgba(39,188,221,0.8); border-bottom-left-radius: 12px; }
.brutech-hero-corner-br { bottom: 28px; right: 16px; border-bottom: 2.5px solid rgba(39,188,221,0.8); border-right: 2.5px solid rgba(39,188,221,0.8); border-bottom-right-radius: 12px; }
.brutech-hero-status { position: absolute; top: 20px; right: 52px; z-index: 20; display: flex; align-items: center; gap: 8px; font-size: 8px; letter-spacing: 2px; line-height: 1; color: rgba(39,188,221,0.55); text-transform: uppercase; white-space: nowrap; }
.brutech-hero-status-dot { width: 5px; height: 5px; border-radius: 50%; background: #27bcdd; box-shadow: 0 0 8px #27bcdd; animation: brutech-dot-blink 2s ease-in-out infinite; }

/* Trust bar */
body.template-index .brutech-trust-rpg { position: relative; padding: 48px clamp(24px,4vw,80px) !important; background: linear-gradient(180deg, rgba(18,18,28,0.95), rgba(13,13,20,0.98)) !important; border-top: 1px solid rgba(39,188,221,0.12) !important; border-bottom: 1px solid rgba(39,188,221,0.12) !important; overflow: hidden; }
body.template-index .brutech-trust-rpg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(39,188,221,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(39,188,221,0.03) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
body.template-index .brutech-trust-rpg .brutech-spec-card { position: relative; text-align: center; padding: 28px 20px; border-radius: 16px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
body.template-index .brutech-trust-rpg .brutech-spec-card:hover { border-color: rgba(39,188,221,0.35); box-shadow: 0 0 32px rgba(39,188,221,0.08); transform: translateY(-3px); }
body.template-index .brutech-trust-rpg .brutech-spec-card::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; background: linear-gradient(90deg, transparent, rgba(39,188,221,0.7), transparent); }

/* Faction select */
body.template-index .brutech-faction-select-section { padding: 64px clamp(24px,4vw,80px) !important; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(39,188,221,0.06), transparent 60%), #0d0d16 !important; }
body.template-index .brutech-faction-select-heading { text-align: center; margin-bottom: 48px; }
body.template-index .brutech-faction-select-heading .brutech-eyebrow { font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: rgba(39,188,221,0.6); margin-bottom: 10px; }
body.template-index .brutech-faction-select-heading h2 { font-size: clamp(28px,3.5vw,48px) !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: -0.03em !important; margin: 0 !important; }
body.template-index .brutech-faction-select-heading h2 span { color: #27bcdd; }

body.template-index .brutech-faction-grid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 12px !important; }
@media screen and (max-width: 1100px) { body.template-index .brutech-faction-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media screen and (max-width: 640px) { body.template-index .brutech-faction-grid { grid-template-columns: repeat(2, 1fr) !important; } }

body.template-index .brutech-faction-card { position: relative; display: flex !important; flex-direction: column !important; border-radius: 16px !important; background: #13131e !important; border: 1px solid rgba(255,255,255,0.08) !important; overflow: hidden !important; text-decoration: none !important; transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), border-color 0.22s ease, box-shadow 0.22s ease !important; isolation: isolate; }
body.template-index .brutech-faction-card:hover { transform: translateY(-6px) !important; border-color: rgba(var(--fc-rgb, 39,188,221), 0.55) !important; box-shadow: 0 24px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--fc-rgb, 39,188,221), 0.2), 0 0 40px rgba(var(--fc-rgb, 39,188,221), 0.10) !important; }

body.template-index .brutech-faction-card[data-faction="gaming"]       { --fc-rgb: 39,188,221;  --fc-hex: #27bcdd; }
body.template-index .brutech-faction-card[data-faction="creator"]      { --fc-rgb: 163,53,238;  --fc-hex: #a335ee; }
body.template-index .brutech-faction-card[data-faction="invisio"]      { --fc-rgb: 200,210,230; --fc-hex: #c8d2e6; }
body.template-index .brutech-faction-card[data-faction="zeroram"]      { --fc-rgb: 34,211,238;  --fc-hex: #22d3ee; }
body.template-index .brutech-faction-card[data-faction="office"]       { --fc-rgb: 148,163,184; --fc-hex: #94a3b8; }
body.template-index .brutech-faction-card[data-faction="threadripper"] { --fc-rgb: 39,188,221;  --fc-hex: #27bcdd; }

body.template-index .brutech-faction-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--fc-rgb, 39,188,221), 1) 50%, transparent); z-index: 5; }
body.template-index .brutech-faction-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 130px at var(--mx,50%) var(--my,50%), rgba(var(--fc-rgb, 39,188,221), 0.09) 0%, transparent 70%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 0; }
body.template-index .brutech-faction-card:hover::after { opacity: 1; }

body.template-index .brutech-faction-card .brutech-fc-img { position: relative; height: 160px; overflow: hidden; background: radial-gradient(circle at 50% 60%, rgba(var(--fc-rgb, 39,188,221),0.10) 0%, transparent 65%), #0d0d18; }
body.template-index .brutech-faction-card .brutech-fc-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 12px !important; transform: scale(1.06); transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s ease !important; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); }
body.template-index .brutech-faction-card:hover .brutech-fc-img img { transform: scale(1.14) translateY(-4px) !important; filter: drop-shadow(0 16px 24px rgba(var(--fc-rgb, 39,188,221),0.3)) !important; }
body.template-index .brutech-faction-card .brutech-fc-img::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px); pointer-events: none; z-index: 2; }
body.template-index .brutech-faction-card .brutech-fc-tag { position: absolute; bottom: 8px; left: 10px; z-index: 10; font-size: 7px; letter-spacing: 2px; text-transform: uppercase; color: var(--fc-hex, #27bcdd); background: rgba(0,0,0,0.75); border: 1px solid rgba(var(--fc-rgb, 39,188,221),0.45); padding: 3px 8px; border-radius: 4px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(8px); }
body.template-index .brutech-faction-card .brutech-fc-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--fc-hex, #27bcdd); box-shadow: 0 0 6px var(--fc-hex, #27bcdd); margin-right: 5px; vertical-align: middle; animation: brutech-dot-blink 2s ease-in-out infinite; }
body.template-index .brutech-faction-card .brutech-fc-body { padding: 14px 16px 18px; position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 6px; }
body.template-index .brutech-faction-card .brutech-fc-name { font-size: 13px; font-weight: 700; color: #f0eef8; letter-spacing: -0.01em; line-height: 1.2; }
body.template-index .brutech-faction-card .brutech-fc-desc { font-size: 10px; color: rgba(152,150,168,0.7); font-style: italic; line-height: 1.4; }
body.template-index .brutech-faction-card .brutech-fc-cta { margin-top: auto; padding-top: 10px; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fc-hex, #27bcdd); display: flex; align-items: center; gap: 4px; transition: gap 0.2s ease; }
body.template-index .brutech-faction-card:hover .brutech-fc-cta { gap: 8px; }

body.template-index .brutech-faction-card .brutech-fc-corner { position: absolute; width: 10px; height: 10px; pointer-events: none; opacity: 0; transition: opacity 0.22s ease; z-index: 15; }
body.template-index .brutech-faction-card:hover .brutech-fc-corner { opacity: 1; }
body.template-index .brutech-faction-card .brutech-fc-corner-tl { top: 5px; left: 5px; border-top: 1px solid var(--fc-hex, #27bcdd); border-left: 1px solid var(--fc-hex, #27bcdd); }
body.template-index .brutech-faction-card .brutech-fc-corner-tr { top: 5px; right: 5px; border-top: 1px solid var(--fc-hex, #27bcdd); border-right: 1px solid var(--fc-hex, #27bcdd); }
body.template-index .brutech-faction-card .brutech-fc-corner-bl { bottom: 5px; left: 5px; border-bottom: 1px solid var(--fc-hex, #27bcdd); border-left: 1px solid var(--fc-hex, #27bcdd); }
body.template-index .brutech-faction-card .brutech-fc-corner-br { bottom: 5px; right: 5px; border-bottom: 1px solid var(--fc-hex, #27bcdd); border-right: 1px solid var(--fc-hex, #27bcdd); }

/* Best sellers / blog / reviews / tiktok heading treatments */
body.template-index .brutech-loadouts-section,
body.template-index .brutech-intel-section,
body.template-index .brutech-rep-section,
body.template-index .brutech-tiktok-section { padding: 64px clamp(24px,4vw,80px) !important; }
body.template-index .brutech-intel-section { background: rgba(10,10,18,0.85) !important; border-top: 1px solid rgba(39,188,221,0.08); }
body.template-index .brutech-intel-section h2 { font-weight: 800 !important; letter-spacing: -0.03em !important; }

/* Review cards */
body.template-index .brutech-rep-section { position: relative; overflow: hidden; }
body.template-index .brutech-rep-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(39,188,221,0.04), transparent 60%); pointer-events: none; }
body.template-index .brutech-review-card { position: relative; padding: 20px !important; border-radius: 14px !important; background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.07) !important; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important; }
body.template-index .brutech-review-card:hover { border-color: rgba(39,188,221,0.28) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 24px rgba(39,188,221,0.06) !important; transform: translateY(-3px) !important; }
body.template-index .brutech-review-card::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.4), transparent); }
body.template-index .brutech-review-stars { color: #ffd700 !important; text-shadow: 0 0 8px rgba(255,215,0,0.3) !important; font-size: 13px !important; letter-spacing: 2px !important; margin-bottom: 10px !important; }

/* Passive perks */
body.template-index .shopify-section:has(.brutech-perk-card),
body.template-index .shopify-section:has(.brutech-perk-card) [class*="page-width"],
body.template-index .shopify-section:has(.brutech-perk-card) [class*="container"],
body.template-index .shopify-section:has(.brutech-perk-card) [class*="grid"],
body.template-index .shopify-section:has(.brutech-perk-card) [class*="column"],
body.template-index .shopify-section:has(.brutech-perk-card) [class*="multicolumn"] { overflow: visible !important; }

body.template-index .brutech-perk-card {
  margin: 0 !important; position: relative !important; padding: 24px 16px 28px !important;
  border-radius: 14px !important; background: rgba(255,255,255,0.022) !important;
  border: 1px solid rgba(255,255,255,0.06) !important; text-align: center !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 0 !important; overflow: visible !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
body.template-index .brutech-perk-card::before { display: none !important; }
body.template-index .bic-col:has(.brutech-perk-card) { padding-left: 0 !important; padding-right: 0 !important; overflow: visible !important; }
body.template-index .brutech-perk-card:hover { border-color: rgba(39,188,221,0.3) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 0 20px rgba(39,188,221,0.06) !important; transform: translateY(-3px) !important; }

body.template-index .brutech-perk-badge {
  position: static !important; transform: none !important; align-self: center !important; margin-bottom: 14px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  white-space: nowrap !important; padding: 5px 11px !important; border-radius: 999px !important;
  font-size: 8px !important; letter-spacing: 1.3px !important; text-transform: uppercase !important;
  color: rgba(39,188,221,0.88) !important; background: rgba(39,188,221,0.075) !important;
  border: 1px solid rgba(39,188,221,0.28) !important;
}
body.template-index .brutech-perk-badge::before { content: '◆' !important; font-size: 6px !important; margin-right: 6px !important; }

body.template-index .brutech-perk-icon-wrap {
  width: 52px !important; height: 52px !important; margin: 0 auto 16px !important;
  border-radius: 14px !important; background: rgba(39,188,221,0.08) !important;
  border: 1px solid rgba(39,188,221,0.2) !important; display: flex !important;
  align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
  align-self: center !important; position: relative !important; z-index: 1 !important;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
body.template-index .brutech-perk-card:hover .brutech-perk-icon-wrap { background: rgba(39,188,221,0.14) !important; border-color: rgba(39,188,221,0.4) !important; box-shadow: 0 0 20px rgba(39,188,221,0.15) !important; }
body.template-index .brutech-perk-icon-wrap svg,
body.template-index .brutech-perk-icon-wrap img { color: #27bcdd !important; filter: drop-shadow(0 0 4px rgba(39,188,221,0.3)) !important; max-width: 28px !important; max-height: 28px !important; }
body.template-index .brutech-perk-title { font-size: 15px !important; font-weight: 700 !important; color: #f0eef8 !important; letter-spacing: -0.01em !important; margin-bottom: 8px !important; line-height: 1.3 !important; }
body.template-index .brutech-perk-desc { font-size: 12px !important; color: rgba(152,150,168,0.72) !important; line-height: 1.65 !important; }

/* About section */
body.template-index .brutech-about-home { padding: 64px clamp(24px,4vw,80px) !important; background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(39,188,221,0.04), transparent 55%), #0e0e18 !important; border-top: 1px solid rgba(39,188,221,0.08); border-bottom: 1px solid rgba(39,188,221,0.08); }
body.template-index .brutech-about-home h2 { font-weight: 800 !important; letter-spacing: -0.03em !important; color: #ffffff !important; }

/* Eyebrow shared style */
body.template-index .brutech-eyebrow { font-size: 9px; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(39,188,221,0.6); margin-bottom: 6px; }

/* Scroll reveal */
body.template-index .brutech-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1); }
body.template-index .brutech-reveal.brutech-revealed { opacity: 1; transform: none; }
body.template-index .brutech-reveal-delay-1 { transition-delay: 0.08s; }
body.template-index .brutech-reveal-delay-2 { transition-delay: 0.16s; }
body.template-index .brutech-reveal-delay-3 { transition-delay: 0.24s; }
body.template-index .brutech-reveal-delay-4 { transition-delay: 0.32s; }
body.template-index .brutech-reveal-delay-5 { transition-delay: 0.40s; }
body.template-index .brutech-reveal-delay-6 { transition-delay: 0.48s; }

/* ══════════════════════════════════════════════════════════════
   BRUTECH FOOTER — DARK RPG FACTION IDENTITY
══════════════════════════════════════════════════════════════ */

[id*="__footer"] {
  position: relative;
  background: #08080e !important;
  border-top: 1px solid rgba(39,188,221,0.15) !important;
  overflow: hidden;
}

/* Animated cyan top border line */
[id*="__footer"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #27bcdd 20%, #7c5cbf 50%, #27bcdd 80%, transparent);
  background-size: 300% 100%;
  animation: brutech-footer-line 6s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes brutech-footer-line {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Subtle grid background */
[id*="__footer"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(39,188,221,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,188,221,0.018) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* All footer content above pseudo elements */
[id*="__footer"] .footer,
[id*="__footer"] > * { position: relative; z-index: 1; }

/* ── FACTION IDENTITY BLOCK ── */
.brutech-footer-faction {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.brutech-footer-faction-tag {
  font-family: 'Poppins', monospace !important;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #27bcdd;
  background: rgba(39,188,221,0.08);
  border: 1px solid rgba(39,188,221,0.35);
  padding: 8px 16px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  box-shadow: 0 0 16px rgba(39,188,221,0.08);
}

.brutech-footer-faction-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #27bcdd;
  box-shadow: 0 0 10px #27bcdd;
  animation: brutech-dot-blink 2s ease-in-out infinite;
  flex-shrink: 0;
}

.brutech-footer-status {
  font-family: 'Poppins', monospace !important;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: rgba(39,188,221,0.5);
  text-transform: uppercase;
}

/* ── FOOTER HEADINGS ── */
[id*="__footer"] .footer__title,
[id*="__footer"] [class*="footer__heading"],
[id*="__footer"] [class*="footer__title"] {
  font-family: 'Poppins', monospace !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(39,188,221,0.65) !important;
  margin-bottom: 14px !important;
}

/* ── FOOTER LINKS ── */
[id*="__footer"] .footer__menu a,
[id*="__footer"] [class*="footer__list"] a,
[id*="__footer"] [class*="footer__link"],
[id*="__footer"] .footer a:not([class*="button"]):not([class*="btn"]) {
  font-size: 12px !important;
  color: rgba(152,150,168,0.7) !important;
  text-decoration: none !important;
  transition: color 0.2s ease, padding-left 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 0 !important;
}

[id*="__footer"] .footer__menu a::before,
[id*="__footer"] [class*="footer__list"] a::before {
  content: '›';
  color: rgba(39,188,221,0.35);
  font-size: 12px;
  transition: color 0.2s ease;
}

[id*="__footer"] .footer__menu a:hover,
[id*="__footer"] [class*="footer__list"] a:hover,
[id*="__footer"] [class*="footer__link"]:hover {
  color: #27bcdd !important;
  padding-left: 4px !important;
}

[id*="__footer"] .footer__menu a:hover::before,
[id*="__footer"] [class*="footer__list"] a:hover::before {
  color: rgba(39,188,221,0.8);
}

/* ── EMAIL NEWSLETTER ── */
[id*="__footer"] [class*="newsletter"] input,
[id*="__footer"] [class*="footer"] input[type="email"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(39,188,221,0.25) !important;
  border-radius: 8px !important;
  color: #f0eef8 !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

[id*="__footer"] [class*="newsletter"] input:focus,
[id*="__footer"] [class*="footer"] input[type="email"]:focus {
  border-color: rgba(39,188,221,0.6) !important;
  box-shadow: 0 0 0 3px rgba(39,188,221,0.08) !important;
  outline: none !important;
}

[id*="__footer"] [class*="newsletter"] button,
[id*="__footer"] [class*="footer"] button[type="submit"] {
  background: linear-gradient(135deg, #27bcdd, rgba(39,188,221,0.7)) !important;
  color: #080810 !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Poppins', monospace !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

[id*="__footer"] [class*="newsletter"] button:hover,
[id*="__footer"] [class*="footer"] button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(39,188,221,0.3) !important;
}

/* ── PAYMENT ICONS ── */
[id*="__footer"] [class*="payment"] svg,
[id*="__footer"] [class*="payment"] img {
  filter: brightness(0.6) !important;
  transition: filter 0.2s ease !important;
}

[id*="__footer"] [class*="payment"] svg:hover,
[id*="__footer"] [class*="payment"] img:hover {
  filter: brightness(1) !important;
}

/* ── COPYRIGHT BAR ── */
[id*="__footer"] [class*="footer__copyright"],
[id*="__footer"] [class*="footer__bottom"] {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding-top: 20px !important;
  font-size: 11px !important;
  color: rgba(152,150,168,0.45) !important;
}

/* ── SOCIAL ICONS ── */
[id*="__footer"] [class*="social"] a,
[id*="__footer"] [class*="footer__social"] a {
  color: rgba(152,150,168,0.5) !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-flex !important;
}

[id*="__footer"] [class*="social"] a:hover,
[id*="__footer"] [class*="footer__social"] a:hover {
  color: #27bcdd !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════════
   VS BATTLE SCREEN — STREET FIGHTER / MORTAL KOMBAT VIBE
══════════════════════════════════════════════════════════════ */

/* Overlay */
.brutech-vs-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99990; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.brutech-vs-overlay.is-open { opacity: 1; pointer-events: all; }

/* Main drawer */
.brutech-vs-drawer {
  position: fixed; inset: 0;
  background: #050508;
  z-index: 99991;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column; overflow: hidden;
}
.brutech-vs-drawer.is-open { transform: translateY(0); }

/* Scanlines */
.brutech-vs-drawer::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.15) 3px, rgba(0,0,0,0.15) 4px);
  pointer-events: none; z-index: 0;
}

/* Grid */
.brutech-vs-drawer::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(39,188,221,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(39,188,221,0.015) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none; z-index: 0;
}

/* ── HEADER ── */
.brutech-vs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: relative; z-index: 10; flex-shrink: 0;
  background: rgba(0,0,0,0.4);
}

.brutech-vs-round {
  font-family: 'Poppins', monospace;
  font-size: 9px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(39,188,221,0.5);
}

.brutech-vs-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s ease;
}
.brutech-vs-close:hover { background: rgba(255,0,0,0.15); border-color: rgba(255,0,0,0.4); color: #ff4444; }

/* ── FIGHTER NAMES BAR ── */
.brutech-vs-names-bar {
  display: grid; grid-template-columns: 1fr auto 1fr;
  padding: 10px 32px 0;
  position: relative; z-index: 5; flex-shrink: 0;
}

.brutech-vs-fighter-name {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(11px, 1.2vw, 16px);
  font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; line-height: 1.2;
}

.brutech-vs-fighter-name--p1 { color: #27bcdd; text-align: left; text-shadow: 0 0 20px rgba(39,188,221,0.6); }
.brutech-vs-fighter-name--p2 { color: #ff4b4b; text-align: right; text-shadow: 0 0 20px rgba(255,75,75,0.6); }

.brutech-vs-names-center { width: 80px; }

/* ── HEALTH BARS ── */
.brutech-vs-healthbars {
  display: grid; grid-template-columns: 1fr 80px 1fr;
  gap: 0; padding: 6px 32px 10px;
  position: relative; z-index: 5; flex-shrink: 0;
}

.brutech-vs-health-wrap { display: flex; flex-direction: column; gap: 3px; }

.brutech-vs-health-track {
  height: 8px; border-radius: 2px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden; position: relative;
}

.brutech-vs-health-fill {
  height: 100%; border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.brutech-vs-health-fill--p1 {
  background: linear-gradient(90deg, #27bcdd, #4fc3f7);
  box-shadow: 0 0 8px rgba(39,188,221,0.6);
  transform-origin: left;
}

.brutech-vs-health-fill--p2 {
  background: linear-gradient(90deg, #ff4b4b, #ff8080);
  box-shadow: 0 0 8px rgba(255,75,75,0.6);
  transform-origin: right;
  margin-left: auto;
}

.brutech-vs-health-label {
  font-family: 'Poppins', monospace;
  font-size: 7px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

.brutech-vs-health-label--p1 { text-align: left; }
.brutech-vs-health-label--p2 { text-align: right; }

/* ── ARENA ── */
.brutech-vs-arena {
  flex: 1; display: grid; grid-template-columns: 1fr 80px 1fr;
  position: relative; z-index: 2; overflow: hidden; min-height: 0;
}

/* Side lighting effects */
.brutech-vs-side--left {
  background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(39,188,221,0.06) 0%, transparent 60%);
  border-right: 1px solid rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: hidden;
}

.brutech-vs-side--right {
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,75,75,0.06) 0%, transparent 60%);
  border-left: 1px solid rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: hidden;
}

/* Fighter card */
.brutech-vs-fighter {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; max-width: 320px; width: 100%; text-align: center;
}

.brutech-vs-fighter-img {
  width: clamp(120px, 15vw, 200px);
  height: clamp(120px, 15vw, 200px);
  object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.8));
  transition: transform 0.3s ease;
  animation: brutech-fighter-float 3s ease-in-out infinite;
}
.brutech-vs-side--right .brutech-vs-fighter-img {
  animation-delay: -1.5s;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.8)) hue-rotate(180deg) saturate(1.5);
}

@keyframes brutech-fighter-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.brutech-vs-fighter-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700; color: #f0eef8; line-height: 1.3;
}

.brutech-vs-fighter-price {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800; line-height: 1;
}
.brutech-vs-side--left .brutech-vs-fighter-price { color: #27bcdd; text-shadow: 0 0 16px rgba(39,188,221,0.5); }
.brutech-vs-side--right .brutech-vs-fighter-price { color: #ff4b4b; text-shadow: 0 0 16px rgba(255,75,75,0.5); }

.brutech-vs-fighter-link {
  font-family: 'Poppins', monospace;
  font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.35); text-decoration: none;
  transition: color 0.2s ease;
}
.brutech-vs-fighter-link:hover { color: rgba(255,255,255,0.7); }

/* Winner badge */
.brutech-vs-winner-badge {
  font-family: 'Poppins', sans-serif;
  font-size: 11px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 4px; display: none;
}
.brutech-vs-side--left .brutech-vs-winner-badge {
  color: #050508; background: #27bcdd; box-shadow: 0 0 20px rgba(39,188,221,0.5);
}
.brutech-vs-side--right .brutech-vs-winner-badge {
  color: #ffffff; background: #ff4b4b; box-shadow: 0 0 20px rgba(255,75,75,0.5);
}
.brutech-vs-winner-badge.is-visible {
  display: block;
  animation: brutech-winner-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes brutech-winner-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Empty slot */
.brutech-vs-empty {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px; opacity: 0.3;
}
.brutech-vs-empty-icon { font-size: 48px; }
.brutech-vs-empty-text {
  font-family: 'Poppins', monospace;
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.5); text-align: center; line-height: 2;
}

/* ── CENTER VS ── */
.brutech-vs-center {
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 5;
}

.brutech-vs-text {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 900; letter-spacing: -2px;
  background: linear-gradient(180deg, #ffffff 0%, #27bcdd 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(39,188,221,0.5));
  animation: brutech-vs-flicker 4s ease-in-out infinite;
}

@keyframes brutech-vs-flicker {
  0%,90%,100% { filter: drop-shadow(0 0 20px rgba(39,188,221,0.5)); }
  92%         { filter: drop-shadow(0 0 40px rgba(39,188,221,1)) brightness(1.5); }
  94%         { filter: drop-shadow(0 0 20px rgba(39,188,221,0.5)); }
  96%         { filter: drop-shadow(0 0 40px rgba(39,188,221,1)) brightness(1.5); }
}

/* ── STAT BATTLE BARS ── */
.brutech-vs-stats-bar {
  flex-shrink: 0;
  padding: 10px 32px 14px;
  background: rgba(0,0,0,0.5);
  border-top: 1px solid rgba(255,255,255,0.05);
  position: relative; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
}

.brutech-vs-stat-row {
  display: grid; grid-template-columns: 1fr 60px 1fr;
  align-items: center; gap: 8px;
}

.brutech-vs-stat-track {
  height: 20px; border-radius: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative; overflow: hidden; display: flex; align-items: center;
}

.brutech-vs-stat-fill {
  position: absolute; top: 0; height: 100%;
  transition: width 1s cubic-bezier(0.22,1,0.36,1);
  display: flex; align-items: center;
}

/* P1 fills from left */
.brutech-vs-stat-track--p1 .brutech-vs-stat-fill {
  left: 0; background: linear-gradient(90deg, rgba(39,188,221,0.3), rgba(39,188,221,0.15));
  justify-content: flex-end; padding-right: 8px;
}
.brutech-vs-stat-track--p1.is-winner .brutech-vs-stat-fill {
  background: linear-gradient(90deg, rgba(39,188,221,0.7), rgba(39,188,221,0.4));
}

/* P2 fills from right */
.brutech-vs-stat-track--p2 .brutech-vs-stat-fill {
  right: 0; background: linear-gradient(270deg, rgba(255,75,75,0.3), rgba(255,75,75,0.15));
  justify-content: flex-start; padding-left: 8px;
}
.brutech-vs-stat-track--p2.is-winner .brutech-vs-stat-fill {
  background: linear-gradient(270deg, rgba(255,75,75,0.7), rgba(255,75,75,0.4));
}

.brutech-vs-stat-text {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.7); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  position: relative; z-index: 1;
}
.brutech-vs-stat-track--p1 .brutech-vs-stat-text { text-align: right; }
.brutech-vs-stat-track--p2 .brutech-vs-stat-text { text-align: left; }
.brutech-vs-stat-track.is-winner .brutech-vs-stat-text { font-weight: 800; }
.brutech-vs-stat-track--p1.is-winner .brutech-vs-stat-text { color: #27bcdd; }
.brutech-vs-stat-track--p2.is-winner .brutech-vs-stat-text { color: #ff4b4b; }

.brutech-vs-stat-label {
  font-family: 'Poppins', monospace;
  font-size: 7px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.3); text-align: center;
}

/* ── VS BUTTON ON CARDS ── */
.brutech-vs-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 5px;
  width: 100%; min-height: 32px; margin-top: 6px; padding: 6px 14px;
  border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; cursor: pointer;
  color: rgba(255,255,255,0.5) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  transition: all 0.2s ease;
  font-family: 'Poppins', monospace !important;
}
.brutech-vs-btn:hover {
  color: #27bcdd !important;
  background: rgba(39,188,221,0.08) !important;
  border-color: rgba(39,188,221,0.35) !important;
}
.brutech-vs-btn.is-locked {
  color: #27bcdd !important;
  background: rgba(39,188,221,0.12) !important;
  border-color: rgba(39,188,221,0.5) !important;
  animation: brutech-lock-pulse 1.5s ease-in-out infinite;
}
@keyframes brutech-lock-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(39,188,221,0.3); }
  50%      { box-shadow: 0 0 0 4px rgba(39,188,221,0); }
}

/* ── WINNER SCREEN ── */
.brutech-vs-finish {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
}
.brutech-vs-finish.is-visible { opacity: 1; }

.brutech-vs-finish-text {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(32px, 6vw, 72px);
  font-weight: 900; letter-spacing: -2px; text-transform: uppercase;
  text-align: center; line-height: 1;
  animation: brutech-finish-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes brutech-finish-in {
  from { transform: scale(2); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Mobile */
@media screen and (max-width: 749px) {
  .brutech-vs-arena { grid-template-columns: 1fr 48px 1fr; }
  .brutech-vs-healthbars, .brutech-vs-names-bar { padding: 6px 16px; }
  .brutech-vs-stats-bar { padding: 8px 16px; }
  .brutech-vs-side--left, .brutech-vs-side--right { padding: 10px; }
  .brutech-vs-stat-row { gap: 4px; }
  .brutech-vs-text { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   BRUTECH VALUE + SPACING FIX — V4 HARD OVERRIDE
   Paste at the VERY BOTTOM of brutech-custom.css.
══════════════════════════════════════════════════════════════ */

/* Main card spacing */
product-card.brutech-loadout-card,
.product-card.brutech-loadout-card {
  display: flex !important;
  flex-direction: column !important;
}

/* Reduce the big empty image area */
product-card.brutech-loadout-card .product-card__figure,
.product-card.brutech-loadout-card .product-card__figure {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Content should use the full card width */
product-card.brutech-loadout-card .product-card__info,
product-card.brutech-loadout-card .product-card__details,
product-card.brutech-loadout-card .product-card__content,
product-card.brutech-loadout-card .product-card__aside,
.product-card.brutech-loadout-card .product-card__info,
.product-card.brutech-loadout-card .product-card__details,
.product-card.brutech-loadout-card .product-card__content,
.product-card.brutech-loadout-card .product-card__aside {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  position: relative !important;
  z-index: 7 !important;
  padding: 14px 16px 18px !important;
  gap: 8px !important;
}

/* Product title and price spacing */
product-card.brutech-loadout-card .product-card__title,
product-card.brutech-loadout-card .product-title,
product-card.brutech-loadout-card a[href*="/products/"],
.product-card.brutech-loadout-card .product-card__title,
.product-card.brutech-loadout-card .product-title,
.product-card.brutech-loadout-card a[href*="/products/"] {
  margin-bottom: 6px !important;
}

product-card.brutech-loadout-card price-list,
product-card.brutech-loadout-card .price-list,
.product-card.brutech-loadout-card price-list,
.product-card.brutech-loadout-card .price-list {
  margin: 6px 0 8px !important;
}

/* Top-right stat bar, compact so it does not eat the card */
product-card.brutech-loadout-card .brutech-stat-bar,
.product-card.brutech-loadout-card .brutech-stat-bar {
  top: 8px !important;
  right: 8px !important;
  gap: 5px !important;
  max-width: 150px !important;
  z-index: 30 !important;
}

product-card.brutech-loadout-card .brutech-stat,
.product-card.brutech-loadout-card .brutech-stat {
  min-height: 26px !important;
  padding: 4px 8px !important;
  gap: 6px !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
}

product-card.brutech-loadout-card .brutech-stat-icon,
.product-card.brutech-loadout-card .brutech-stat-icon {
  width: 15px !important;
  height: 15px !important;
  font-size: 7px !important;
}

product-card.brutech-loadout-card .brutech-stat-label,
.product-card.brutech-loadout-card .brutech-stat-label {
  font-size: 7px !important;
  letter-spacing: 1.2px !important;
}

product-card.brutech-loadout-card .brutech-stat-value,
.product-card.brutech-loadout-card .brutech-stat-value {
  max-width: 118px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
}

/* Top value pill */
product-card.brutech-loadout-card .brutech-stat--value-v4,
.product-card.brutech-loadout-card .brutech-stat--value-v4 {
  border-color: rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.38) !important;
  background: linear-gradient(135deg, rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.14), rgba(0, 0, 0, 0.62)) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30) !important;
}

/* Bottom meta, now full width and better spaced */
product-card.brutech-loadout-card .brutech-loadout-meta-v4,
.product-card.brutech-loadout-card .brutech-loadout-meta-v4,
product-card.brutech-loadout-card .brutech-loadout-meta,
.product-card.brutech-loadout-card .brutech-loadout-meta {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 12px 0 10px !important;
  padding: 8px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.22) !important;
  background: linear-gradient(135deg, rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.08), rgba(0, 0, 0, 0.24)) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20) !important;
  position: relative !important;
  z-index: 8 !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta-v4 span,
.product-card.brutech-loadout-card .brutech-loadout-meta-v4 span,
product-card.brutech-loadout-card .brutech-loadout-meta span,
.product-card.brutech-loadout-card .brutech-loadout-meta span {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2px !important;
  padding: 7px 8px !important;
  border-radius: 9px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.90) !important;
  font-family: 'Poppins', monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta-v4 b,
.product-card.brutech-loadout-card .brutech-loadout-meta-v4 b,
product-card.brutech-loadout-card .brutech-loadout-meta b,
.product-card.brutech-loadout-card .brutech-loadout-meta b {
  display: block !important;
  color: rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.78) !important;
  font-family: 'Poppins', monospace !important;
  font-size: 7px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta-v4 em,
.product-card.brutech-loadout-card .brutech-loadout-meta-v4 em,
product-card.brutech-loadout-card .brutech-loadout-meta em,
.product-card.brutech-loadout-card .brutech-loadout-meta em {
  display: block !important;
  min-width: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-style: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Bottom value tile */
product-card.brutech-loadout-card .brutech-loadout-meta-v4 .brutech-meta-value,
.product-card.brutech-loadout-card .brutech-loadout-meta-v4 .brutech-meta-value,
product-card.brutech-loadout-card .brutech-loadout-meta .brutech-meta-value,
.product-card.brutech-loadout-card .brutech-loadout-meta .brutech-meta-value {
  border-color: rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.28) !important;
  background: linear-gradient(135deg, rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.14), rgba(0, 0, 0, 0.32)) !important;
  box-shadow: 0 0 14px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.12) !important;
}

/* Tier-specific value emphasis */
product-card.brutech-loadout-card .brutech-loadout-meta-v4[data-rarity="rare"] .brutech-meta-value,
.product-card.brutech-loadout-card .brutech-loadout-meta-v4[data-rarity="rare"] .brutech-meta-value {
  border-color: rgba(0, 112, 221, 0.34) !important;
  background: linear-gradient(135deg, rgba(0, 112, 221, 0.15), rgba(0, 0, 0, 0.32)) !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta-v4[data-rarity="epic"] .brutech-meta-value,
.product-card.brutech-loadout-card .brutech-loadout-meta-v4[data-rarity="epic"] .brutech-meta-value {
  border-color: rgba(163, 53, 238, 0.42) !important;
  background: linear-gradient(135deg, rgba(163, 53, 238, 0.20), rgba(0, 0, 0, 0.34)) !important;
  box-shadow: 0 0 18px rgba(163, 53, 238, 0.18) !important;
}

/* Button spacing */
product-card.brutech-loadout-card .brutech-select-loadout,
.product-card.brutech-loadout-card .brutech-select-loadout {
  width: 100% !important;
  margin-top: 12px !important;
}

/* Mobile/narrow cards */
@media screen and (max-width: 749px) {
  product-card.brutech-loadout-card .product-card__figure,
  .product-card.brutech-loadout-card .product-card__figure {
    min-height: 292px !important;
    max-height: 318px !important;
    overflow: hidden !important;
  }

  product-card.brutech-loadout-card .product-card__info,
  product-card.brutech-loadout-card .product-card__details,
  product-card.brutech-loadout-card .product-card__content,
  product-card.brutech-loadout-card .product-card__aside,
  .product-card.brutech-loadout-card .product-card__info,
  .product-card.brutech-loadout-card .product-card__details,
  .product-card.brutech-loadout-card .product-card__content,
  .product-card.brutech-loadout-card .product-card__aside {
    padding: 12px 14px 16px !important;
    gap: 7px !important;
  }

  product-card.brutech-loadout-card .brutech-stat-bar,
  .product-card.brutech-loadout-card .brutech-stat-bar {
    max-width: 145px !important;
    gap: 5px !important;
  }

  product-card.brutech-loadout-card .brutech-stat,
  .product-card.brutech-loadout-card .brutech-stat {
    min-height: 25px !important;
    padding: 4px 8px !important;
  }

  product-card.brutech-loadout-card .brutech-stat-value,
  .product-card.brutech-loadout-card .brutech-stat-value {
    max-width: 112px !important;
    font-size: 9.5px !important;
  }

  product-card.brutech-loadout-card .brutech-loadout-meta-v4,
  .product-card.brutech-loadout-card .brutech-loadout-meta-v4,
  product-card.brutech-loadout-card .brutech-loadout-meta,
  .product-card.brutech-loadout-card .brutech-loadout-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 10px 0 8px !important;
    padding: 7px !important;
    border-radius: 11px !important;
  }

  product-card.brutech-loadout-card .brutech-loadout-meta-v4 span,
  .product-card.brutech-loadout-card .brutech-loadout-meta-v4 span,
  product-card.brutech-loadout-card .brutech-loadout-meta span,
  .product-card.brutech-loadout-card .brutech-loadout-meta span {
    font-size: 9px !important;
    padding: 6px 7px !important;
    border-radius: 8px !important;
  }

  product-card.brutech-loadout-card .brutech-loadout-meta-v4 b,
  .product-card.brutech-loadout-card .brutech-loadout-meta-v4 b,
  product-card.brutech-loadout-card .brutech-loadout-meta b,
  .product-card.brutech-loadout-card .brutech-loadout-meta b {
    font-size: 6.5px !important;
    letter-spacing: 1.1px !important;
  }
}

/* Very narrow mobile cards */
@media screen and (max-width: 390px) {
  product-card.brutech-loadout-card .product-card__figure,
  .product-card.brutech-loadout-card .product-card__figure {
    min-height: 276px !important;
    max-height: 302px !important;
  }

  product-card.brutech-loadout-card .brutech-stat-bar,
  .product-card.brutech-loadout-card .brutech-stat-bar {
    max-width: 135px !important;
  }

  product-card.brutech-loadout-card .brutech-stat-value,
  .product-card.brutech-loadout-card .brutech-stat-value {
    max-width: 103px !important;
    font-size: 9px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   BRUTECH LOADOUT CARD FINAL CLEANUP — V5
   Fixes card spacing + meta structure after unified JS
   Paste order: this must be at the VERY BOTTOM of brutech-custom.css
══════════════════════════════════════════════════════════════ */

product-card.brutech-loadout-card,
.product-card.brutech-loadout-card {
  display: flex !important;
  flex-direction: column !important;
}

product-card.brutech-loadout-card .product-card__figure,
.product-card.brutech-loadout-card .product-card__figure {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 300px !important;
  max-height: 360px !important;
}

product-card.brutech-loadout-card .product-card__info,
product-card.brutech-loadout-card .product-card__details,
product-card.brutech-loadout-card .product-card__content,
product-card.brutech-loadout-card .product-card__aside,
.product-card.brutech-loadout-card .product-card__info,
.product-card.brutech-loadout-card .product-card__details,
.product-card.brutech-loadout-card .product-card__content,
.product-card.brutech-loadout-card .product-card__aside {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  position: relative !important;
  z-index: 7 !important;
  padding: 12px 16px 18px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

product-card.brutech-loadout-card .brutech-stat-bar,
.product-card.brutech-loadout-card .brutech-stat-bar {
  top: 8px !important;
  right: 8px !important;
  gap: 5px !important;
  max-width: 148px !important;
  z-index: 30 !important;
}

product-card.brutech-loadout-card .brutech-stat,
.product-card.brutech-loadout-card .brutech-stat {
  min-height: 25px !important;
  padding: 4px 8px !important;
  gap: 6px !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
}

product-card.brutech-loadout-card .brutech-stat-icon,
.product-card.brutech-loadout-card .brutech-stat-icon {
  width: 15px !important;
  height: 15px !important;
  font-size: 7px !important;
}

product-card.brutech-loadout-card .brutech-stat-label,
.product-card.brutech-loadout-card .brutech-stat-label {
  font-size: 7px !important;
  letter-spacing: 1.2px !important;
}

product-card.brutech-loadout-card .brutech-stat-value,
.product-card.brutech-loadout-card .brutech-stat-value {
  max-width: 112px !important;
  font-size: 9.5px !important;
  line-height: 1.05 !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta,
.product-card.brutech-loadout-card .brutech-loadout-meta {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 12px 0 10px !important;
  padding: 8px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.22) !important;
  background: linear-gradient(135deg, rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.08), rgba(0, 0, 0, 0.24)) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20) !important;
  position: relative !important;
  z-index: 8 !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta span,
.product-card.brutech-loadout-card .brutech-loadout-meta span {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  padding: 7px 8px !important;
  border-radius: 9px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.90) !important;
  font-family: 'Poppins', monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta b,
.product-card.brutech-loadout-card .brutech-loadout-meta b {
  display: block !important;
  color: rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.78) !important;
  font-family: 'Poppins', monospace !important;
  font-size: 7px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta em,
.product-card.brutech-loadout-card .brutech-loadout-meta em {
  display: block !important;
  min-width: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-style: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta .brutech-meta-value,
.product-card.brutech-loadout-card .brutech-loadout-meta .brutech-meta-value {
  border-color: rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.30) !important;
  background: linear-gradient(135deg, rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.14), rgba(0, 0, 0, 0.32)) !important;
  box-shadow: 0 0 14px rgba(var(--brutech-glow-rgb, 39, 188, 221), 0.12) !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta[data-rarity="rare"] .brutech-meta-value,
.product-card.brutech-loadout-card .brutech-loadout-meta[data-rarity="rare"] .brutech-meta-value {
  border-color: rgba(0, 112, 221, 0.36) !important;
  background: linear-gradient(135deg, rgba(0, 112, 221, 0.16), rgba(0, 0, 0, 0.32)) !important;
}

product-card.brutech-loadout-card .brutech-loadout-meta[data-rarity="epic"] .brutech-meta-value,
.product-card.brutech-loadout-card .brutech-loadout-meta[data-rarity="epic"] .brutech-meta-value {
  border-color: rgba(163, 53, 238, 0.46) !important;
  background: linear-gradient(135deg, rgba(163, 53, 238, 0.22), rgba(0, 0, 0, 0.34)) !important;
  box-shadow: 0 0 18px rgba(163, 53, 238, 0.20) !important;
}

product-card.brutech-loadout-card .brutech-select-loadout,
.product-card.brutech-loadout-card .brutech-select-loadout,
product-card.brutech-loadout-card .brutech-vs-btn,
.product-card.brutech-loadout-card .brutech-vs-btn {
  width: 100% !important;
  margin-top: 10px !important;
}

@media screen and (max-width: 749px) {
  product-card.brutech-loadout-card .product-card__figure,
  .product-card.brutech-loadout-card .product-card__figure {
    min-height: 282px !important;
    max-height: 318px !important;
  }

  product-card.brutech-loadout-card .product-card__info,
  product-card.brutech-loadout-card .product-card__details,
  product-card.brutech-loadout-card .product-card__content,
  product-card.brutech-loadout-card .product-card__aside,
  .product-card.brutech-loadout-card .product-card__info,
  .product-card.brutech-loadout-card .product-card__details,
  .product-card.brutech-loadout-card .product-card__content,
  .product-card.brutech-loadout-card .product-card__aside {
    padding: 12px 14px 16px !important;
    gap: 7px !important;
  }

  product-card.brutech-loadout-card .brutech-loadout-meta,
  .product-card.brutech-loadout-card .brutech-loadout-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 10px 0 8px !important;
    padding: 7px !important;
    border-radius: 11px !important;
  }

  product-card.brutech-loadout-card .brutech-loadout-meta span,
  .product-card.brutech-loadout-card .brutech-loadout-meta span {
    font-size: 9px !important;
    padding: 6px 7px !important;
    border-radius: 8px !important;
  }

  product-card.brutech-loadout-card .brutech-loadout-meta b,
  .product-card.brutech-loadout-card .brutech-loadout-meta b {
    font-size: 6.5px !important;
    letter-spacing: 1.1px !important;
  }
}

@media screen and (max-width: 390px) {
  product-card.brutech-loadout-card .product-card__figure,
  .product-card.brutech-loadout-card .product-card__figure {
    min-height: 265px !important;
    max-height: 298px !important;
  }
}
.brutech-vs-btn.is-locked {
  color: #ffd700 !important;
  background: rgba(255, 215, 0, 0.10) !important;
  border-color: rgba(255, 215, 0, 0.45) !important;
}

.brutech-vs-btn.is-ready-to-fight {
  color: #1eff00 !important;
  background: rgba(30, 255, 0, 0.08) !important;
  border-color: rgba(30, 255, 0, 0.35) !important;
}

/* ══════════════════════════════════════════════════════════════
   BRUTECH VS VISUAL PATCH
   Improves fighter name visibility and makes VIEW LOADOUT fit the
   Street Fighter / Mortal Kombat vibe.
   Paste at the VERY BOTTOM of brutech-custom.css.
══════════════════════════════════════════════════════════════ */

/* Stronger top fighter names */
.brutech-vs-names-bar {
  padding: 10px 28px 4px !important;
  align-items: center !important;
}

.brutech-vs-fighter-name {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(12px, 1.4vw, 18px) !important;
  font-weight: 900 !important;
  letter-spacing: 1.4px !important;
  line-height: 1.15 !important;
}

.brutech-vs-fighter-name--p1 {
  color: #6fe8ff !important;
  box-shadow: 0 0 22px rgba(39,188,221,0.18) !important;
  justify-self: start !important;
}

.brutech-vs-fighter-name--p2 {
  color: #ff8b8b !important;
  box-shadow: 0 0 22px rgba(255,75,75,0.16) !important;
  justify-self: end !important;
}

/* Make the fighter title inside each side more visible */
.brutech-vs-fighter {
  gap: 12px !important;
}

.brutech-vs-fighter-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(13px, 1.15vw, 18px) !important;
  font-weight: 800 !important;
  color: #f7f8fc !important;
  line-height: 1.25 !important;
  letter-spacing: 0.3px !important;
  max-width: 280px !important;
  text-wrap: balance !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8) !important;
}

/* View Loadout as a proper fighting-game CTA */
.brutech-vs-fighter-link {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 166px !important;
  margin-top: 2px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.34)) !important;
  font-family: 'Poppins', monospace !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 1.5px !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

.brutech-vs-fighter-link:hover {
  transform: translateY(-1px) scale(1.01) !important;
}

.brutech-vs-side--left .brutech-vs-fighter-link {
  border-color: rgba(39,188,221,0.45) !important;
  background: linear-gradient(180deg, rgba(39,188,221,0.18), rgba(0,0,0,0.42)) !important;
  box-shadow: 0 0 0 1px rgba(39,188,221,0.18), 0 0 18px rgba(39,188,221,0.22), 0 10px 22px rgba(0,0,0,0.28) !important;
}

.brutech-vs-side--right .brutech-vs-fighter-link {
  border-color: rgba(255,75,75,0.42) !important;
  background: linear-gradient(180deg, rgba(255,75,75,0.18), rgba(0,0,0,0.42)) !important;
  box-shadow: 0 0 0 1px rgba(255,75,75,0.16), 0 0 18px rgba(255,75,75,0.20), 0 10px 22px rgba(0,0,0,0.28) !important;
}

.brutech-vs-fighter-link-main {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
}

.brutech-vs-fighter-link-sub {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1.7px !important;
  line-height: 1 !important;
  opacity: 0.86 !important;
}

/* Slightly clearer price/title grouping */
.brutech-vs-fighter-price {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

@media screen and (max-width: 900px) {
  .brutech-vs-fighter-name {
    font-size: 11px !important;
    letter-spacing: 1.1px !important;
    padding: 7px 10px !important;
    min-height: 36px !important;
  }

  .brutech-vs-fighter-title {
    font-size: 12px !important;
    max-width: 220px !important;
  }

  .brutech-vs-fighter-link {
    min-width: 144px !important;
    padding: 9px 12px !important;
  }

  .brutech-vs-fighter-link-main {
    font-size: 9px !important;
  }

  .brutech-vs-fighter-link-sub {
    font-size: 7px !important;
  }
}
/* ══════════════════════════════════════════════════════════════
   BRUTECH VS NAME VISIBILITY FIX
   Paste at the VERY BOTTOM of brutech-custom.css.
══════════════════════════════════════════════════════════════ */

.brutech-vs-names-bar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) 90px minmax(260px, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 58px !important;
  padding: 10px 28px 8px !important;
  position: relative !important;
  z-index: 30 !important;
}

.brutech-vs-fighter-name {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  width: fit-content !important;
  min-width: 260px !important;
  max-width: 42vw !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.28)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(13px, 1.35vw, 20px) !important;
  font-weight: 900 !important;
  letter-spacing: 1.5px !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.brutech-vs-fighter-name--p1 {
  justify-self: start !important;
  color: #6fe8ff !important;
  text-align: left !important;
  box-shadow: 0 0 24px rgba(39,188,221,0.18) !important;
  text-shadow: 0 0 16px rgba(39,188,221,0.65) !important;
}

.brutech-vs-fighter-name--p2 {
  justify-self: end !important;
  color: #ff8b8b !important;
  text-align: right !important;
  box-shadow: 0 0 24px rgba(255,75,75,0.18) !important;
  text-shadow: 0 0 16px rgba(255,75,75,0.65) !important;
}

.brutech-vs-fighter-title {
  display: block !important;
  min-height: 24px !important;
  max-width: 300px !important;
  color: #f7f8fc !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(13px, 1.2vw, 18px) !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85) !important;
}

.brutech-vs-fighter-link {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 170px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  font-family: 'Poppins', monospace !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.38)) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.28) !important;
}

.brutech-vs-side--left .brutech-vs-fighter-link {
  border-color: rgba(39,188,221,0.48) !important;
  background: linear-gradient(180deg, rgba(39,188,221,0.20), rgba(0,0,0,0.44)) !important;
  box-shadow: 0 0 18px rgba(39,188,221,0.22), 0 10px 22px rgba(0,0,0,0.28) !important;
}

.brutech-vs-side--right .brutech-vs-fighter-link {
  border-color: rgba(255,75,75,0.48) !important;
  background: linear-gradient(180deg, rgba(255,75,75,0.20), rgba(0,0,0,0.44)) !important;
  box-shadow: 0 0 18px rgba(255,75,75,0.22), 0 10px 22px rgba(0,0,0,0.28) !important;
}

.brutech-vs-fighter-link-main {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  line-height: 1 !important;
}

.brutech-vs-fighter-link-sub {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  line-height: 1 !important;
  opacity: 0.86 !important;
}

@media screen and (max-width: 900px) {
  .brutech-vs-names-bar {
    grid-template-columns: minmax(120px, 1fr) 48px minmax(120px, 1fr) !important;
    gap: 8px !important;
    padding: 8px 14px 6px !important;
  }

  .brutech-vs-fighter-name {
    min-width: 120px !important;
    max-width: 40vw !important;
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  .brutech-vs-fighter-link {
    min-width: 138px !important;
    padding: 8px 10px !important;
  }

  .brutech-vs-fighter-link-main {
    font-size: 8px !important;
  }

  .brutech-vs-fighter-link-sub {
    font-size: 6.5px !important;
  }
}
@media screen and (max-width: 749px) {

  /* ── Image area — remove dead space ── */
  product-card.brutech-loadout-card .product-card__figure,
  .product-card.brutech-loadout-card .product-card__figure {
    min-height: 200px !important;
    max-height: 240px !important;
  }

  /* ── Badge chips — styled as proper rarity pills ── */
  product-card.brutech-loadout-card .product-card__badge-list--bottom,
  .product-card.brutech-loadout-card .product-card__badge-list--bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    padding: 8px 0 4px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    margin-top: 6px !important;
  }

  /* Each chip */
  product-card.brutech-loadout-card .product-card__badge-list--bottom > *,
  .product-card.brutech-loadout-card .product-card__badge-list--bottom > * {
    font-family: 'Poppins', monospace !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: rgba(var(--brutech-glow-rgb, 39,188,221), 0.08) !important;
    border: 1px solid rgba(var(--brutech-glow-rgb, 39,188,221), 0.3) !important;
    color: rgba(var(--brutech-glow-rgb, 39,188,221), 0.9) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  /* ── Meta tiles — allow text to wrap so nothing cuts off ── */
  product-card.brutech-loadout-card .brutech-loadout-meta em,
  .product-card.brutech-loadout-card .brutech-loadout-meta em {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  product-card.brutech-loadout-card .brutech-loadout-meta span,
  .product-card.brutech-loadout-card .brutech-loadout-meta span {
    white-space: normal !important;
    padding: 6px 7px !important;
  }

  /* ── Price tighter ── */
  product-card.brutech-loadout-card sale-price {
    font-size: 18px !important;
  }

  /* ── Tighter card padding ── */
  product-card.brutech-loadout-card .product-card__info,
  product-card.brutech-loadout-card .product-card__content,
    .product-card.brutech-loadout-card .product-card__info,
  .product-card.brutech-loadout-card .product-card__content {
    padding: 10px 12px 14px !important;
  }

  /* ── Buttons ── */
  product-card.brutech-loadout-card .brutech-select-loadout,
  .product-card.brutech-loadout-card .brutech-select-loadout {
    min-height: 40px !important;
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
  }
}
/* ── Badge chip brand colours ── */
product-card.brutech-loadout-card .product-card__badge-list--bottom .badge--intel,
.product-card.brutech-loadout-card .product-card__badge-list--bottom .badge--intel {
  color: #60a5fa !important;
  border-color: rgba(96,165,250,0.4) !important;
  background: rgba(96,165,250,0.08) !important;
}

product-card.brutech-loadout-card .product-card__badge-list--bottom .badge--nvidia,
.product-card.brutech-loadout-card .product-card__badge-list--bottom .badge--nvidia {
  color: #4ade80 !important;
  border-color: rgba(74,222,128,0.4) !important;
  background: rgba(74,222,128,0.08) !important;
}

product-card.brutech-loadout-card .product-card__badge-list--bottom .badge--amd,
.product-card.brutech-loadout-card .product-card__badge-list--bottom .badge--amd {
  color: #f87171 !important;
  border-color: rgba(248,113,113,0.4) !important;
  background: rgba(248,113,113,0.08) !important;
}

product-card.brutech-loadout-card .product-card__badge-list--bottom .badge--other,
.product-card.brutech-loadout-card .product-card__badge-list--bottom .badge--other {
  color: #c084fc !important;
  border-color: rgba(192,132,252,0.4) !important;
  background: rgba(192,132,252,0.08) !important;
}
@media screen and (max-width: 749px) {
  product-card.brutech-loadout-card .brutech-loadout-meta,
  .product-card.brutech-loadout-card .brutech-loadout-meta {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   PAGE TRANSITION OVERLAY
══════════════════════════════════════════════════════════════ */
.brt-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  background: #0d0c14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: none;
}

.brt-transition-overlay.is-loading {
  opacity: 1;
  pointer-events: auto;
  animation: brt-sector-in 0.22s ease both;
}

@keyframes brt-sector-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.brt-transition-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(39,187,222,0.02) 3px, rgba(39,187,222,0.02) 4px
  );
  pointer-events: none;
}

.brt-transition-scan {
  position: absolute; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #27bbde, transparent);
  box-shadow: 0 0 12px #27bbde;
  animation: brt-scan-line 0.7s linear infinite;
  opacity: 0.7;
}

@keyframes brt-scan-line {
  from { top: -2px; }
  to   { top: 100vh; }
}

.brt-transition-label {
  font-family: 'Poppins', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #27bbde;
  position: relative; z-index: 1;
  animation: brt-label-blink 0.7s ease-in-out infinite;
}

@keyframes brt-label-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.brt-transition-bar-wrap {
  width: 180px;
  height: 2px;
  background: rgba(39,187,222,0.12);
  border-radius: 99px;
  overflow: hidden;
  position: relative; z-index: 1;
}

.brt-transition-bar {
  height: 100%;
  background: #27bbde;
  box-shadow: 0 0 8px #27bbde;
  animation: brt-load-bar 0.55s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes brt-load-bar {
  from { width: 0%; }
  to   { width: 100%; }
}


/* ══════════════════════════════════════════════════════════════
   HEADER CART → LOADOUT
══════════════════════════════════════════════════════════════ */
.brt-loadout-label {
  font-family: 'Poppins', monospace !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #27bbde !important;
  line-height: 1 !important;
  display: block !important;
}

.brt-loadout-count {
  font-family: 'Poppins', monospace !important;
  font-size: 8px !important;
  color: rgba(39,187,222,0.6) !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  display: block !important;
}

/* Ensure the cart button can stack label + count */
#shopify-section-header [data-open-cart],
#shopify-section-header [aria-controls="cart-notification"],
#shopify-section-header .header__cart-count,
#shopify-section-header a[href="/cart"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
}

/* ══════════════════════════════════════════════════════════════
   SPEC CARD FLIP — What's Inside (feature #2)
   Clicking a .brutech-spec-card flips it to show the back face
   with an enlarged value and COMPONENT IDENTIFIED hint.
══════════════════════════════════════════════════════════════ */

/* Outer card becomes the 3D perspective context */
.brutech-spec-card--flippable {
  perspective: 800px;
  cursor: pointer;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

/* Inner wrapper holds the two faces and rotates */
.brutech-spec-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

.brutech-spec-card--flippable.is-flipped .brutech-spec-card-inner {
  transform: rotateY(180deg);
}

/* Shared face styles */
.brutech-spec-card-front,
.brutech-spec-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 9px;
  padding: 15px 15px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Front face — normal flow (sets the card height) */
.brutech-spec-card-front {
  background: #222128;
  border: 1px solid #333240;
  /* border-top applied via JS using the card's accent colour */
}

/* Back face — absolute overlay, hidden behind front */
.brutech-spec-card-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: #1b1a28;
  border: 1px solid var(--brutech-flip-color, #27bbde);
  border-top: 2px solid var(--brutech-flip-color, #27bbde);
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
  box-shadow: inset 0 0 28px rgba(0,0,0,0.35), 0 0 20px var(--brutech-flip-glow, rgba(39,187,222,0.18));
}

/* Back face content */
.brutech-spec-back-icon {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 0 6px var(--brutech-flip-color, #27bbde));
  margin-bottom: 1px;
}

.brutech-spec-back-label {
  font-family: 'Poppins', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brutech-flip-color, #27bbde);
}

.brutech-spec-back-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  word-break: break-word;
  text-align: center;
}

.brutech-spec-back-hint {
  font-family: 'Poppins', monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4a4860;
  margin-top: 3px;
}

/* Subtle click-ripple flash on the outer card */
.brutech-spec-card--flippable .brutech-spec-flip-ripple {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  pointer-events: none;
  background: var(--brutech-flip-color, #27bbde);
  opacity: 0;
  animation: brutech-flip-flash 0.4s ease forwards;
  z-index: 10;
}

@keyframes brutech-flip-flash {
  0%   { opacity: 0.18; }
  100% { opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════
   QUICK SPEC TOOLTIP EXPAND — description area (feature #7)
   Clicking a .brutech-qs-row toggles an inline RPG tooltip
   below the spec value, explaining what it means.
══════════════════════════════════════════════════════════════ */

.brutech-qs-row {
  cursor: pointer;
  position: relative;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

/* Subtle "tap me" caret indicator on the value line */
.brutech-qs-val::after {
  content: ' ▾';
  font-size: 9px;
  opacity: 0.35;
  transition: opacity 0.2s;
  vertical-align: middle;
}

.brutech-qs-row.is-open .brutech-qs-val::after {
  content: ' ▴';
  opacity: 0.6;
}

/* Tooltip container — collapsed by default */
.brutech-qs-tip {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              margin-top 0.3s ease;
  margin-top: 0;
}

.brutech-qs-row.is-open .brutech-qs-tip {
  max-height: 100px;
  opacity: 1;
  margin-top: 8px;
}

/* Tooltip inner content */
.brutech-qs-tip-inner {
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: 'Poppins', monospace;
  font-size: 10px;
  line-height: 1.55;
  color: #7a7890;
  letter-spacing: 0.03em;
}

.brutech-qs-tip-inner strong {
  color: var(--brutech-qs-accent, #27bbde);
  font-weight: 700;
}

/* Open state — highlight the row */
.brutech-qs-row.is-open {
  background: rgba(255,255,255,0.055);
  border-color: #4a4860;
}

/* Colour the accent per brand */
.brutech-qs-row--nvidia.is-open  { --brutech-qs-accent: #6ebb0b; border-color: rgba(110,187,11,0.35); background: rgba(110,187,11,0.04); }
.brutech-qs-row--amd.is-open     { --brutech-qs-accent: #dd1925; border-color: rgba(221,25,37,0.35);  background: rgba(221,25,37,0.04);  }
.brutech-qs-row--intel.is-open   { --brutech-qs-accent: #238dfb; border-color: rgba(35,141,251,0.35); background: rgba(35,141,251,0.04); }
.brutech-qs-row--ram.is-open     { --brutech-qs-accent: #27bbde; border-color: rgba(39,187,222,0.35); background: rgba(39,187,222,0.04); }
.brutech-qs-row--storage.is-open { --brutech-qs-accent: #7c5cbf; border-color: rgba(124,92,191,0.35); background: rgba(124,92,191,0.04); }

#shopify-section-{{ section.id }} .header__secondary-nav,
.shopify-section--header .header__secondary-nav {
  margin-left: 12px !important;
}

.shopify-section--header .header__link-list a,
.shopify-section--header .header__link-list summary,
.shopify-section--header .header__link-list button {
  padding: 6px 7px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.05em !important;
}

/* ══════════════════════════════════════════════════════════════
   BRUTECH CATEGORY CARD COLOURS, CREATOR / THREADRIPPER / OFFICE
   Added for collection product grids
══════════════════════════════════════════════════════════════ */
product-card.brutech-loadout-card.brutech-creator-card,
.product-card.brutech-loadout-card.brutech-creator-card {
  --brutech-rarity-hex: #f1a20d !important;
  --brutech-glow-rgb: 241,162,13 !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(241,162,13,0.10), transparent 54%),
    linear-gradient(180deg, rgba(241,162,13,0.035), transparent 58%) !important;
}

product-card.brutech-loadout-card.brutech-threadripper-card,
.product-card.brutech-loadout-card.brutech-threadripper-card {
  --brutech-rarity-hex: #15bc85 !important;
  --brutech-glow-rgb: 21,188,133 !important;
  background-image:
    linear-gradient(rgba(21,188,133,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,188,133,0.03) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(21,188,133,0.10), transparent 54%) !important;
  background-size: 16px 16px, 16px 16px, auto !important;
}

product-card.brutech-loadout-card.brutech-office-card,
.product-card.brutech-loadout-card.brutech-office-card {
  --brutech-rarity-hex: #bac1cd !important;
  --brutech-glow-rgb: 186,193,205 !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(186,193,205,0.10), transparent 54%),
    linear-gradient(180deg, rgba(186,193,205,0.035), transparent 58%) !important;
}

product-card.brutech-loadout-card.brutech-creator-card:hover,
.product-card.brutech-loadout-card.brutech-creator-card:hover,
product-card.brutech-loadout-card.brutech-threadripper-card:hover,
.product-card.brutech-loadout-card.brutech-threadripper-card:hover,
product-card.brutech-loadout-card.brutech-office-card:hover,
.product-card.brutech-loadout-card.brutech-office-card:hover {
  border-color: rgba(var(--brutech-glow-rgb), 0.68) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.42),
    0 0 34px rgba(var(--brutech-glow-rgb),0.26) !important;
}

product-card.brutech-loadout-card.brutech-creator-card sale-price,
.product-card.brutech-loadout-card.brutech-creator-card sale-price,
product-card.brutech-loadout-card.brutech-threadripper-card sale-price,
.product-card.brutech-loadout-card.brutech-threadripper-card sale-price,
product-card.brutech-loadout-card.brutech-office-card sale-price,
.product-card.brutech-loadout-card.brutech-office-card sale-price {
  color: var(--brutech-rarity-hex) !important;
  text-shadow: 0 0 18px rgba(var(--brutech-glow-rgb),0.40) !important;
}

product-card.brutech-loadout-card.brutech-creator-card .text-subdued,
.product-card.brutech-loadout-card.brutech-creator-card .text-subdued,
product-card.brutech-loadout-card.brutech-threadripper-card .text-subdued,
.product-card.brutech-loadout-card.brutech-threadripper-card .text-subdued,
product-card.brutech-loadout-card.brutech-office-card .text-subdued,
.product-card.brutech-loadout-card.brutech-office-card .text-subdued {
  color: var(--brutech-rarity-hex) !important;
}

product-card.brutech-loadout-card.brutech-creator-card price-list::before,
.product-card.brutech-loadout-card.brutech-creator-card price-list::before,
product-card.brutech-loadout-card.brutech-threadripper-card price-list::before,
.product-card.brutech-loadout-card.brutech-threadripper-card price-list::before,
product-card.brutech-loadout-card.brutech-office-card price-list::before,
.product-card.brutech-loadout-card.brutech-office-card price-list::before {
  color: rgba(var(--brutech-glow-rgb),0.62) !important;
}

product-card.brutech-loadout-card.brutech-creator-card .brutech-select-loadout,
.product-card.brutech-loadout-card.brutech-creator-card .brutech-select-loadout,
product-card.brutech-loadout-card.brutech-threadripper-card .brutech-select-loadout,
.product-card.brutech-loadout-card.brutech-threadripper-card .brutech-select-loadout,
product-card.brutech-loadout-card.brutech-office-card .brutech-select-loadout,
.product-card.brutech-loadout-card.brutech-office-card .brutech-select-loadout {
  background: linear-gradient(135deg, rgba(var(--brutech-glow-rgb),0.95), rgba(var(--brutech-glow-rgb),0.36)) !important;
  border-color: rgba(var(--brutech-glow-rgb),0.82) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.26), 0 0 20px rgba(var(--brutech-glow-rgb),0.20) !important;
}

product-card.brutech-loadout-card.brutech-creator-card .brutech-artist-badge,
.product-card.brutech-loadout-card.brutech-creator-card .brutech-artist-badge,
product-card.brutech-loadout-card.brutech-threadripper-card .brutech-scientist-badge,
.product-card.brutech-loadout-card.brutech-threadripper-card .brutech-scientist-badge,
product-card.brutech-loadout-card.brutech-office-card .brutech-office-badge,
.product-card.brutech-loadout-card.brutech-office-card .brutech-office-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brutech-rarity-hex) !important;
  background: rgba(var(--brutech-glow-rgb),0.14) !important;
  border: 1px solid rgba(var(--brutech-glow-rgb),0.52) !important;
  box-shadow: 0 0 14px rgba(var(--brutech-glow-rgb),0.16) !important;
  padding: 4px 10px;
  border-radius: 999px;
  pointer-events: none;
}

product-card.brutech-loadout-card.brutech-creator-card .brutech-artist-badge::before,
.product-card.brutech-loadout-card.brutech-creator-card .brutech-artist-badge::before { content: '🎨'; font-size: 9px; }

product-card.brutech-loadout-card.brutech-threadripper-card .brutech-scientist-badge::before,
.product-card.brutech-loadout-card.brutech-threadripper-card .brutech-scientist-badge::before { content: '🔬'; font-size: 9px; }

product-card.brutech-loadout-card.brutech-office-card .brutech-office-badge::before,
.product-card.brutech-loadout-card.brutech-office-card .brutech-office-badge::before { content: '🖥️'; font-size: 9px; }

product-card.brutech-loadout-card.brutech-creator-card .brutech-artist-movement,
.product-card.brutech-loadout-card.brutech-creator-card .brutech-artist-movement,
product-card.brutech-loadout-card.brutech-threadripper-card .brutech-formula-tag,
.product-card.brutech-loadout-card.brutech-threadripper-card .brutech-formula-tag,
product-card.brutech-loadout-card.brutech-office-card .brutech-office-series,
.product-card.brutech-loadout-card.brutech-office-card .brutech-office-series {
  position: absolute;
  bottom: 8px;
  right: 10px;
  z-index: 20;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(var(--brutech-glow-rgb),0.78) !important;
  background: rgba(0,0,0,0.70) !important;
  border: 1px solid rgba(var(--brutech-glow-rgb),0.34) !important;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
}

product-card.brutech-loadout-card.brutech-threadripper-card .brutech-formula-tag,
.product-card.brutech-loadout-card.brutech-threadripper-card .brutech-formula-tag {
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   BRUTECH BLOG STYLES — bbl system
   All blog posts use these classes. No <style> blocks needed in posts.
══════════════════════════════════════════════════════════════ */
 
/* ── Base ── */
.bbl { color: #c8c8d4; line-height: 1.75; }
.bbl p { margin-bottom: 18px; color: #c8c8d4; }
.bbl strong { color: #ffffff !important; }
.bbl ul, .bbl ol { margin: 0 0 20px 20px; }
.bbl li { margin-bottom: 8px; color: #c8c8d4; }
.bbl a { color: #27bcdd; }
 
/* ── Headings ── */
.bbl .bbl-h2 { font-family: 'Syne', sans-serif !important; font-size: 1.45rem !important; font-weight: 700 !important; color: #ffffff !important; margin: 44px 0 14px !important; padding: 10px 16px !important; border-left: 3px solid #27bcdd !important; background: rgba(39,188,221,0.04) !important; border-radius: 0 6px 6px 0 !important; line-height: 1.3 !important; }
.bbl .bbl-h3 { font-family: 'Syne', sans-serif !important; font-size: 1.05rem !important; font-weight: 700 !important; color: #27bcdd !important; margin: 28px 0 10px !important; }
 
/* ── Hero ── */
.bbl-hero { text-align: center; padding: 48px 24px 40px; border-bottom: 1px solid rgba(39,188,221,0.12); margin-bottom: 40px; }
.bbl-unlock { display: inline-flex; align-items: center; gap: 8px; font-family: 'Share Tech Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #27bcdd; border: 1px solid rgba(39,188,221,0.3); border-radius: 4px; padding: 5px 14px; margin-bottom: 28px; }
.bbl-unlock.gold { color: #f0c040; border-color: rgba(240,192,64,0.3); }
.bbl-unlock::before { content: '◆'; font-size: 0.5rem; }
.bbl-hero-title { font-family: 'Syne', sans-serif !important; font-size: clamp(2rem, 5vw, 3.2rem) !important; font-weight: 900 !important; color: #ffffff !important; line-height: 1.1 !important; margin: 0 0 16px !important; letter-spacing: -0.01em; }
.bbl-hero-title .accent { color: #27bcdd !important; }
.bbl-meta-bar { font-family: 'Share Tech Mono', monospace; font-size: 0.68rem; letter-spacing: 0.08em; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; }
.bbl-meta-bar strong { color: #9ca3af !important; font-weight: 400; }
.bbl-hero-sub { font-size: 0.95rem; color: #9ca3af; margin: 0 0 32px; }
 
/* ── Stat boxes ── */
.bbl-stats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.bbl-stat-box { background: #111019; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 16px 20px; min-width: 100px; text-align: center; }
.bbl-stat-box .sb-val { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 700; color: #27bcdd !important; display: block; line-height: 1.1; margin-bottom: 4px; }
.bbl-stat-box .sb-val.white { color: #ffffff !important; }
.bbl-stat-box .sb-label { font-family: 'Share Tech Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; }
 
/* ── Quest log panel ── */
.bbl-quest-log { background: #111019; border: 1px solid rgba(39,188,221,0.2); border-radius: 10px; padding: 28px 32px; margin: 32px 0 44px; position: relative; }
.bbl-quest-log::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #27bcdd, transparent); border-radius: 10px 10px 0 0; }
.bbl-quest-log-label { font-family: 'Share Tech Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: #27bcdd; opacity: 0.7; margin-bottom: 16px; display: block; }
.bbl-quest-log p { color: #c0c8d8; font-size: 0.98rem; line-height: 1.75; margin-bottom: 14px; }
.bbl-quest-log p:last-child { margin-bottom: 0; }
 
/* ── Quest briefing grid ── */
.bbl-briefing { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }
.bbl-briefing-left { background: #0f0f1a; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 28px 26px; }
.bbl-briefing-label { font-family: 'Share Tech Mono', monospace; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: #f0c040; margin-bottom: 12px; display: block; }
.bbl-briefing-heading { font-family: 'Syne', sans-serif !important; font-size: 1.3rem !important; font-weight: 900 !important; color: #ffffff !important; text-transform: uppercase; line-height: 1.2 !important; margin: 0 0 16px !important; }
.bbl-briefing-left p { font-size: 0.88rem; color: #9ca3af; line-height: 1.7; margin-bottom: 12px; }
.bbl-briefing-right { background: #0f0f1a; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 24px 22px; display: flex; flex-direction: column; gap: 0; }
.bbl-dots { display: flex; gap: 6px; margin-bottom: 20px; }
.bbl-dot { width: 10px; height: 10px; border-radius: 50%; }
.bbl-dot-r { background: #ef4444; }
.bbl-dot-y { background: #f59e0b; }
.bbl-dot-g { background: #22c55e; }
 
/* ── Numbered objectives ── */
.bbl-objective { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.bbl-objective:last-child { border-bottom: none; padding-bottom: 0; }
.bbl-obj-num { background: rgba(39,188,221,0.15); color: #27bcdd; font-family: 'Share Tech Mono', monospace; font-size: 0.62rem; font-weight: 700; width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.bbl-obj-title { font-family: 'Syne', sans-serif; font-size: 0.85rem; font-weight: 700; color: #ffffff !important; display: block; margin-bottom: 4px; letter-spacing: 0.03em; text-transform: uppercase; }
.bbl-obj-desc { font-size: 0.82rem; color: #9ca3af; line-height: 1.6; }
 
/* ── Rarity badges ── */
.br { display:inline-block;font-family:'Share Tech Mono',monospace;font-size:0.58rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:4px;font-weight:700;vertical-align:middle;line-height:1.6; }
.br-common   { background:rgba(107,114,128,.14);color:#9ca3af;border:1px solid rgba(107,114,128,.35); }
.br-uncommon { background:rgba(34,197,94,.12);color:#86efac;border:1px solid rgba(34,197,94,.3); }
.br-rare     { background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.4); }
.br-epic     { background:rgba(168,85,247,.15);color:#c084fc;border:1px solid rgba(168,85,247,.4); }
.br-legendary{ background:rgba(245,158,11,.14);color:#fcd34d;border:1px solid rgba(245,158,11,.38); }
.br-mystic   { background:rgba(20,184,166,.13);color:#5eead4;border:1px solid rgba(20,184,166,.35); }
.br-divine   { background:rgba(251,191,36,.11);color:#fde68a;border:1px solid rgba(251,191,36,.3); }
.br-celestial{ background:rgba(99,102,241,.14);color:#a5b4fc;border:1px solid rgba(99,102,241,.38); }
.br-eldritch { background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.3); }
.br-mythic   { background:rgba(217,70,239,.16);color:#e879f9;border:1px solid rgba(217,70,239,.4); }
.br-mythical { background:rgba(220,38,38,.16);color:#f87171;border:1px solid rgba(220,38,38,.4); }
 
/* ── Mission brief ── */
.bbl-brief { background:linear-gradient(135deg,#0f0e17 0%,#13101d 100%); border-left:4px solid #27bcdd; border-radius:0 10px 10px 0; padding:20px 24px; margin:28px 0; font-style:italic; color:#b8c0cc !important; font-size:1rem; line-height:1.7; }
 
/* ── Tier cards ── */
.bbl-tier { display:grid;grid-template-columns:110px 1fr;background:#0f0f1a;border:1px solid rgba(255,255,255,0.06);border-radius:10px;overflow:hidden;margin:14px 0;transition:border-color .2s; }
.bbl-tier:hover { border-color:rgba(39,188,221,.2); }
.bbl-tier.meta  { border-color:rgba(39,188,221,.35)!important;background:#0c1a22!important; }
.bbl-tier-badge { background:#09090f;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 10px;gap:8px;border-right:1px solid rgba(255,255,255,.05); }
.bbl-tier-body  { padding:18px 20px; }
.bbl-tier-name  { font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:#ffffff!important;margin-bottom:2px;line-height:1.3; }
.bbl-tier-price { font-family:'Syne',sans-serif;font-size:1.35rem;font-weight:700;color:#27bcdd!important;margin:6px 0 4px; }
.bbl-tier-specs { font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.05em;color:#6b7280;margin-bottom:10px;line-height:1.6; }
.bbl-tier-desc  { font-size:.88rem;color:#9ca3af;line-height:1.6;margin:0; }
.bbl-meta-badge { font-family:'Share Tech Mono',monospace;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:4px;background:rgba(39,188,221,.12);color:#27bcdd;border:1px solid rgba(39,188,221,.3);display:inline-block;vertical-align:middle;margin-left:6px; }
 
/* ── Two-col / cost / info grid ── */
.bbl-twocol   { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0; }
.bbl-procon   { background:#0f0f1a;border-radius:8px;padding:18px 20px; }
.bbl-procon-label { font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:12px;font-weight:700; }
.bbl-procon-label.pros { color:#4ade80; }
.bbl-procon-label.cons { color:#f87171; }
.bbl-procon ul { margin:0 0 0 14px;padding:0; }
.bbl-procon li { font-size:.87rem;color:#9ca3af;margin-bottom:7px; }
.bbl-cost     { background:#0f0f1a;border-radius:8px;padding:18px 22px;margin:16px 0; }
.bbl-cost-row { display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.87rem; }
.bbl-cost-row:last-child { border-bottom:none; }
.bbl-cost-label { color:#9ca3af; }
.bbl-cost-val   { font-family:'Share Tech Mono',monospace;color:#d1d5db; }
.bbl-cost-row.total .bbl-cost-label { color:#fff;font-weight:600; }
.bbl-cost-row.total .bbl-cost-val   { color:#27bcdd;font-size:1rem; }
.bbl-infogrid  { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0; }
.bbl-infocard  { background:#0f0f1a;border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:16px 18px; }
.bbl-infocard-label { font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#27bcdd;opacity:.75;margin-bottom:8px;display:block; }
.bbl-infocard-name  { font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:#fff!important;margin-bottom:6px; }
.bbl-infocard p     { font-size:.85rem;color:#9ca3af;margin:0;line-height:1.55; }
 
/* ── CTA block ── */
.bbl-cta { text-align:center;background:linear-gradient(135deg,#0d1c28 0%,#0d0c12 100%);border:1px solid rgba(39,188,221,.3);border-radius:14px;padding:40px 28px;margin:52px 0;position:relative;overflow:hidden; }
.bbl-cta::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#27bcdd,transparent); }
.bbl-cta-h { font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:700;color:#fff!important;margin:0 0 10px; }
.bbl-cta p { color:#9ca3af;margin-bottom:24px;font-size:.95rem; }
.bbl-cta-btn { display:inline-block;background:#27bcdd;color:#0d0c12!important;font-family:'Syne',sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;padding:14px 32px;border-radius:6px;text-decoration:none!important;transition:opacity .2s;margin:4px; }
.bbl-cta-btn:hover { opacity:.85; }
.bbl-cta-btn.ghost { background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.2); }
.bbl-cta-btn.ghost:hover { border-color:rgba(255,255,255,.4); }
 
/* ── FAQ ── */
.bbl-faq { background:#111019;border:1px solid rgba(39,188,221,.15);border-radius:12px;padding:28px 28px 14px;margin:48px 0; }
.bbl-faq-label { font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#27bcdd;opacity:.7;margin-bottom:20px;display:block; }
.bbl-faq details { border-bottom:1px solid rgba(255,255,255,.06);padding:14px 0; }
.bbl-faq details:last-child { border-bottom:none; }
.bbl-faq summary { font-family:'Poppins',sans-serif;font-weight:600;color:#fff!important;cursor:pointer;list-style:none;padding-left:20px;position:relative;font-size:.92rem;line-height:1.5; }
.bbl-faq summary::-webkit-details-marker { display:none; }
.bbl-faq summary::before { content:'▶';position:absolute;left:0;color:#27bcdd;font-size:.5rem;top:5px;transition:transform .2s ease; }
.bbl-faq details[open]>summary::before { transform:rotate(90deg); }
.bbl-faq details p { margin:12px 0 4px 20px;color:#9ca3af;font-size:.88rem;line-height:1.7; }
 
/* ── VS Module ── */
.bbl-vs { margin:52px 0; }
.bbl-vs-header { text-align:center;margin-bottom:4px; }
.bbl-vs-eyebrow { font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#27bcdd;opacity:.65;display:block;margin-bottom:6px; }
.bbl-vs-title   { font-family:'Syne',sans-serif;font-size:1.25rem;font-weight:700;color:#fff!important;margin:0 0 20px; }
 
/* VS Tab buttons */
.bbl-vs-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  background: #080810;
  border: 1px solid rgba(39,188,221,0.18);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: wrap;
}
.bbl-vs-tab {
  padding: 10px 20px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9ca3af;
  background: #111019;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}
.bbl-vs-tab:hover {
  color: #ffffff;
  background: #1a1928;
  border-color: rgba(39,188,221,0.3);
}
.bbl-vs-tab.bbl-active {
  color: #0d0c12;
  background: #27bcdd;
  border-color: #27bcdd;
  box-shadow: 0 0 16px rgba(39,188,221,0.35);
}
.bbl-vs-tab.bbl-active::after { display: none; }
 
/* VS body and panels */
.bbl-vs-body    { background:#080810;border:1px solid rgba(39,188,221,.18);border-top:none;border-radius:0 0 12px 12px; }
.bbl-vs-panel   { display:none;padding:20px;gap:14px; }
.bbl-vs-panel.bbl-active { display:flex;flex-wrap:wrap; }
 
/* VS Cards */
.bbl-vc         { flex:1;min-width:170px;background:#0f0f1a;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:20px 18px; }
.bbl-vc.bbl-vc-win { background:#0c1a22;border-color:rgba(39,188,221,.28); }
.bbl-vc-tierrow { display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap; }
.bbl-vc-win-badge { font-family:'Share Tech Mono',monospace;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:4px;background:rgba(39,188,221,.12);color:#27bcdd;border:1px solid rgba(39,188,221,.3); }
.bbl-vc-name    { font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:#fff!important;margin-bottom:4px;line-height:1.3; }
.bbl-vc-price   { font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:700;color:#27bcdd!important;margin:8px 0 3px; }
.bbl-vc-pjn     { font-family:'Share Tech Mono',monospace;font-size:.58rem;color:#6b7280;margin-bottom:14px; }
.bbl-stat       { margin-bottom:10px; }
.bbl-stat-label { font-family:'Share Tech Mono',monospace;font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;display:flex;justify-content:space-between;margin-bottom:4px; }
.bbl-stat-label span { color:#d1d5db; }
.bbl-stat-bg    { height:5px;background:#1e1e2e;border-radius:3px;overflow:hidden; }
.bbl-stat-fill  { height:100%;border-radius:3px; }
.bbl-verdict    { margin-top:14px;padding:10px 12px;border-radius:6px;font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.03em;border:1px solid transparent;line-height:1.5; }
.bbl-verdict-win { background:rgba(39,188,221,.08);border-color:rgba(39,188,221,.28);color:#27bcdd; }
.bbl-verdict-neu { background:rgba(100,100,120,.08);border-color:rgba(100,100,120,.2);color:#9ca3af; }
.bbl-vs-div     { display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;flex-shrink:0; }
.bbl-vs-div::before,.bbl-vs-div::after { content:'';flex:1;width:1px;background:linear-gradient(to bottom,transparent,rgba(39,188,221,.35),transparent); }
.bbl-vs-circle  { width:38px;height:38px;border-radius:50%;background:#27bcdd;color:#0d0c12;font-family:'Syne',sans-serif;font-weight:900;font-size:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:10px 0; }
 
/* ── Mobile ── */
@media(max-width:640px) {
  .bbl-vs-tabs { gap:6px;padding:10px 12px; }
  .bbl-vs-tab  { padding:8px 14px;font-size:0.62rem; }
  .bbl-tier { grid-template-columns:1fr; }
  .bbl-tier-badge { flex-direction:row;justify-content:flex-start;padding:12px 16px 0;border-right:none;border-bottom:1px solid rgba(255,255,255,.05); }
  .bbl-twocol,.bbl-infogrid { grid-template-columns:1fr; }
  .bbl-briefing { grid-template-columns:1fr; }
  .bbl-vs-panel.bbl-active { flex-direction:column; }
  .bbl-vc { min-width:unset; }
  .bbl-vs-div { flex-direction:row;width:100%;height:40px; }
  .bbl-vs-div::before,.bbl-vs-div::after { height:1px;width:100%;flex:1; }
  .bbl-vs-circle { margin:0 10px; }
  .bbl-hero-title { font-size:1.8rem !important; }
  .bbl-stats { gap:8px; }
  .bbl-stat-box { min-width:80px;padding:12px; }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;            /* Below modals/drawers (those should be 9999+) */
  pointer-events: none;
  user-select: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.07) 3px,
    rgba(0, 0, 0, 0.07) 4px
  );
}