/* flip.css v6: polimento (feedback mestre 04/07): página TODA aproveitada com
   divisão sólida full-bleed (zero card flutuando), título de categoria só na
   1ª página (overlay com cor por contraste), fontes oficiais da marca
   (Akrobat títulos / Quicksand texto: Kalkan), degradê em todo bloco de cor
   (nunca chapado) + marca-d'água de runas (assets do kit da marca), cinza mais
   presente, sem logo no rodapé. Ref: FlipHTML5 Kalkan 2025.
   Preço: .ptag só com body.price-on (?price_enabled=1). */

@font-face { font-family: 'Akrobat'; src: url('assets/fonts/Akrobat-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Akrobat'; src: url('assets/fonts/Akrobat-ExtraBold.otf') format('opentype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('assets/fonts/Quicksand-var.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Bai Jamjuree'; src: url('assets/fonts/BaiJamjuree-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bai Jamjuree'; src: url('assets/fonts/BaiJamjuree-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: #0e0e12; font: 500 14.5px/1.5 'Quicksand', system-ui, sans-serif; color: #33333a; overflow: hidden; }

/* ── palco / livro 3D ────────────────────────────────────────────────── */
#stage { position: absolute; inset: 0 0 48px; display: flex; align-items: center; justify-content: center;
  perspective: 3000px; }
#book3d {
  position: relative;
  --bw: min(96vw, calc((100vh - 118px) * 2.828), 1840px);
  width: var(--bw); height: calc(var(--bw) / 2.828);
  transform-style: preserve-3d;
  transition: transform .8s ease;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.5)); /* blur menor: repaint do livro inteiro a cada virada */
}
.sheet { position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-style: preserve-3d; transform-origin: left center;
  transition: transform .85s cubic-bezier(.35,.06,.22,1); }
.sheet.flipped { transform: rotateY(-180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden; background: #fff; }
.face.front { border-radius: 0 6px 6px 0; }
.face.back { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }
/* vinco central */
.face.front::after, .face.back::after { content: ''; position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 5; }
.face.front::after { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.16), transparent); }
.face.back::after { right: 0; background: linear-gradient(-90deg, rgba(0,0,0,.16), transparent); }

/* ── página (dentro da face) ─────────────────────────────────────────── */
.page { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
/* LIVRO e MOBILE renderizam o MESMO canvas 1123x794 da versão flat/PDF,
   apenas ESCALADO (--pgs vem do flip.js). Fonte px projetada pra 1123px
   nunca mais estoura em página menor: o que passa no flat passa no livro. */
#book3d .page { inset: auto; top: 0; left: 0; width: 1123px; height: 794px;
  transform: scale(var(--pgs, .655)); transform-origin: top left; }

/* capa / sobre / contracapa / filler */
.cover { background: radial-gradient(90% 80% at 68% 22%, #1d1d25, #0b0b0f); align-items: center; justify-content: center; }
.cover::before { content: ''; position: absolute; inset: 0; background: url('assets/runes-tile-light.png?v=runa4') 0 0/1220px; opacity: .5; }
.cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-fallback { text-align: center; position: relative; }
.cover-logo { max-width: 330px; max-height: 130px; filter: drop-shadow(0 8px 28px rgba(231,0,38,.4)); }
/* [14/07] marca SEM logo em assets: capa tipográfica com o nome (não inventa logo) */
.cover-brand { font: 800 64px/1.05 'Akrobat', sans-serif; color: #fff; letter-spacing: .16em;
  text-transform: uppercase; text-align: center; max-width: 82%; margin: 0 auto;
  text-shadow: 0 10px 30px rgba(0,0,0,.55); }
body.brand-lian-li .cover-logo { filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); max-width: 380px; }
body.brand-deepcool .cover-logo { filter: none; max-width: 400px; }
body.brand-gamdias .cover-logo { filter: drop-shadow(0 10px 34px rgba(201,162,77,.35)); }
.cover-title { margin-top: 22px; font: 800 40px/1.1 'Akrobat', sans-serif; color: #fff; letter-spacing: .12em; text-transform: uppercase; }
.cover-rule { width: 110px; height: 4px; margin: 15px auto; background: var(--red); box-shadow: 0 0 15px var(--red); }
.cover-sub { color: #98989f; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }

.about { background: linear-gradient(165deg, color-mix(in srgb, var(--red), white 6%), color-mix(in srgb, var(--red), black 22%)); align-items: center; justify-content: center; }
.about::before { content: ''; position: absolute; inset: 0; background: url('assets/runes-tile-light.png?v=runa4') 0 0/1220px; }
.about-in { max-width: 74%; text-align: center; color: #fff; position: relative; }
.about-in h2 { font: 800 34px/1.15 'Akrobat', sans-serif; margin-bottom: 18px; letter-spacing: .06em; text-transform: uppercase; }
.about-in p { font-size: 13.5px; line-height: 1.85; }
.back-logo { max-width: 300px; margin-bottom: 22px; }
.back-slogan { font: 800 34px/1.25 'Akrobat', sans-serif; color: #fff; letter-spacing: .05em; text-transform: uppercase; }
.back-sub { margin-top: 20px; font-size: 10.5px; color: rgba(255,255,255,.78); letter-spacing: .2em; text-transform: uppercase; }
.filler { background: linear-gradient(165deg, #e6e6ea, #d4d4db); align-items: center; justify-content: center; }
.filler::before { content: ''; position: absolute; inset: 0; background: url('assets/runes-tile-dark.png?v=runa4') 0 0/1220px; }
.filler img { max-width: 120px; opacity: .14; position: relative; }

/* ── página de produto: full-bleed, divisão sólida ───────────────────── */
.paper { padding: 0; }
.pg-body { flex: 1 1 auto; min-height: 0; display: flex; }
.pg-body > * { flex: 1 1 auto; min-height: 0; min-width: 0; }

/* título de categoria: SÓ na 1ª página da categoria, overlay no canto */
.pg-head { position: absolute; top: 20px; left: 26px; z-index: 6; display: flex; align-items: baseline; gap: 11px; pointer-events: none;
  max-width: 46%; } /* não invade a fatia vizinha (título branco sumia em bloco claro) */
.pg-num { font: 800 29px/1 'Akrobat', sans-serif; color: var(--red); letter-spacing: .04em; }
.pg-cat { font: 800 27px/1 'Akrobat', sans-serif; letter-spacing: .04em; color: #1c1c22; text-transform: uppercase; }
.pg-head.inv .pg-cat, .pg-head.inv .pg-num { color: #fff; }

/* nº de página discreto (sem logo: pedido do mestre) */
.pf-num { position: absolute; right: 14px; bottom: 10px; z-index: 6; font-size: 9px; color: rgba(0,0,0,.34);
  font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.pf-num.inv { color: rgba(255,255,255,.5); }

/* ── slots: blocos sólidos encostados, degradê + runa (nunca chapado) ── */
.slot { position: relative; overflow: hidden; display: flex; min-height: 0; min-width: 0; }
.slot.c-w { background: linear-gradient(165deg, #ffffff 30%, #ededf0); }
.slot.c-g { background: linear-gradient(165deg, #ececf0, #dedee4); } /* clareado 05/07 (mestre: tava escuro demais) */
.slot.c-g::before, .slot.c-w::before { content: ''; position: absolute; inset: 0; background: url('assets/runes-tile-dark.png?v=runa4') 0 0/1000px; pointer-events: none; }
.slot.c-r { background: linear-gradient(165deg, color-mix(in srgb, var(--red), white 7%), color-mix(in srgb, var(--red), black 20%)); }
.slot.c-d { background: linear-gradient(165deg, #23232b, #101014); }
.slot.c-r::before, .slot.c-d::before { content: ''; position: absolute; inset: 0; background: url('assets/runes-tile-light.png?v=runa4') 0 0/1000px; pointer-events: none; }
.slot.c-d::before { opacity: .45; } /* no escuro a runa marca menos (ref) */
.slot > * { position: relative; }
.slot.c-r .s-name, .slot.c-r .s-code, .slot.c-r .s-sum, .slot.c-r .s-mini,
.slot.c-r .speclist li, .slot.c-r .speclist b,
.slot.c-d .s-name, .slot.c-d .s-code, .slot.c-d .s-sum, .slot.c-d .s-mini { color: #fff; }
.slot.c-r .newb { background: #fff; color: var(--red); }
.slot.c-d .newb { background: var(--red); color: #fff; }

/* célula de grid NUNCA estica além do quadro (imagem larga de teclado e
   mousepad vazava pra fora da página: min-width:auto do grid) */
.solo-b > *, .solo-c > *, .hn-hero, .hn-side, .h4-hero, .h4-grid, .m6-heroes, .m6-grid { min-width: 0; min-height: 0; }
.s-img { display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; overflow: hidden; }
/* sem drop-shadow: o alpha lossy do webp virava um contorno retangular
   perto dos cantos (feedback do mestre). width/height 100% + contain =
   produto SEMPRE no maior tamanho que o quadro permite */
.s-img img { width: 100%; height: 100%; object-fit: contain; }
/* [16/07 mestre "Surara com um S"] produto SEM foto (só no rascunho ?all=1):
   o placeholder era a inicial solta e parecia página quebrada — virou box
   fantasma explícito de "aguardando foto" */
.noimg { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-width: 60%; min-height: 55%; border: 2px dashed rgba(0,0,0,.18); border-radius: 12px;
  font: 800 34px 'Akrobat', sans-serif; color: rgba(0,0,0,.22); }
.noimg::after { content: 'aguardando foto'; font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.slot.c-r .noimg, .slot.c-d .noimg { color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.25); }
/* [16/07 mestre "MagicWand descendo da faixa"] teclado com apoio de pulso
   trima quase quadrado (aspect ~1.3 vs ~3 dos normais) e enchia o box do
   mini até encostar no texto: teclado ALTO ganha teto de altura */
.s-img.tallkb img { max-height: 76%; }

.s-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.s-name { font: 800 23px/1.04 'Akrobat', sans-serif; color: var(--red); letter-spacing: .03em; text-transform: uppercase; }
/* barrinha de contrapeso acima do nome, na cor do título (padrão do embed
   Onde Comprar) */
.s-name::before { content: ''; display: block; width: 46px; height: 4px; border-radius: 2px; background: currentColor; margin: 0 0 9px; }
.s-name.sm::before { width: 34px; height: 3px; margin-bottom: 6px; }
.s-name.xs::before { width: 26px; height: 3px; margin-bottom: 5px; }
.solo-a .s-ctr .s-name::before { margin-left: auto; margin-right: auto; }
.s-name.white { color: #fff; }
.s-name.lg { font-size: 32px; }
.s-name.xl { font-size: 46px; }
.s-name.sm { font-size: 19px; }
.s-name.xs { font-size: 15.5px; }
.s-code { font-size: .56em; letter-spacing: .06em; opacity: .92; white-space: nowrap; }
/* clamp: texto nunca estoura o slot (slots menores usam short_description) */
.s-sum { color: #45454d; font-size: 14.5px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.s-mini { color: #4d4d56; font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.slot.c-r .s-sum, .slot.c-d .s-sum { color: rgba(255,255,255,.95); }
.slot.c-r .s-mini, .slot.c-d .s-mini { color: rgba(255,255,255,.92); }
/* [15/07 mestre] texto NUNCA cruza o limite do card/página:
   1. palavra comprida quebra (caso "NANOTECNOLÓGICA" clipada no solo);
   2. speclist que não coube é aparada por INTEIRO por item no cart.js
      (specTrim) e, sem JS, clipa aqui em vez de vazar. */
.page { overflow-wrap: break-word; }
.s-name, .s-sum, .s-mini, .ed-body p { hyphens: auto; }
.speclist { overflow: hidden; min-height: 0; }

.speclist { list-style: none; display: grid; gap: 2px; margin-top: 6px; }
.speclist.two { grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.speclist li { font-size: 13px; color: #5b5b64; border-bottom: 1px dashed #d0d0d8; padding: 3px 0; }
.speclist b { color: #2e2e35; font-weight: 700; }
.slot.c-r .speclist li { border-color: rgba(255,255,255,.35); }

.newb { position: absolute; top: 12px; left: 14px; z-index: 6; background: var(--red); color: #fff; /* [12/07 mestre] tag SEMPRE canto sup ESQUERDO, toda marca (chip fica no direito) */
  font: 800 11.5px 'Akrobat', sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; }
/* Best Seller: chip escuro (novidade tem prioridade quando coincidem) */
.newb.best { background: #17171e; color: #fff; }
.slot.c-d .newb.best { background: #fff; color: #17171e; }
/* Esgotado: cinza neutro em qualquer fundo (só existe com semestoque=1) */
.newb.oos { background: #6b6b76; color: #fff; }
.slot.c-r .newb.oos, .slot.c-d .newb.oos { background: rgba(255,255,255,.88); color: #44444e; }
/* nome clicável → site da marca: herda a cor do slot, sublinha só no hover */
.s-name a { color: inherit; text-decoration: none; }
.s-name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.nctag { display: inline-block; align-self: flex-start; background: rgba(0,0,0,.25); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .03em; }
.slot.c-w .nctag, .slot.c-g .nctag, .solo-a .nctag, .solo-b .sb-txt .nctag { background: var(--red); }

/* ── preço (reabilitado 06/07) ──────────────────────────────────────────
   NA MESMA LINHA DO NOME (mestre 06/07): nome à esquerda, box de preço à
   direita, mesma base. A box escala em `em` → acompanha o tamanho do nome e
   fica uniforme. Cor da BOX = cor do TÍTULO do slot; TEXTO = cor do FUNDO.
   SÓ aparece no vendedor (#s → body.seller-mode) e no flat/PDF; site (#p) não. */
/* box centralizada na VERTICAL entre a base do nome e a barrinha de cima
   (align-items:center); preço do MESMO tamanho do nome (font-size:1em → val
   acompanha a altura da letra do nome). Mestre 06/07. */
.s-name .s-row { display: flex; align-items: center; justify-content: space-between; gap: 2px 12px; flex-wrap: wrap; }
.s-nm { min-width: 0; }
.ptag { display: none; align-items: baseline; flex: 0 0 auto; white-space: nowrap;
  font-size: 1em; line-height: 1; letter-spacing: 0; text-transform: none;
  font-family: 'Akrobat', sans-serif; box-shadow: 0 2px 7px rgba(0,0,0,.28);
  padding: .12em .55em .16em; border-radius: 999px;
  background: var(--red); color: #fff; }          /* slot claro: box=título(vermelho), texto=fundo(claro) */
body.seller-mode .ptag, body.flat .ptag { display: inline-flex; }
.slot.c-r .ptag { background: #fff; color: var(--red); }   /* slot vermelho: box=branco, texto=vermelho */
.slot.c-d .ptag { background: #fff; color: #17171e; }      /* slot escuro:  box=branco, texto=escuro */
.ptag .cur { font-size: .62em; font-weight: 700; margin-right: .22em; opacity: .92; }
.ptag .val { font-weight: 800; }
.ptag .ast { font-size: .62em; font-weight: 700; align-self: flex-start; opacity: .8; }
/* [11/07 R11] linha de preço+cart ABAIXO do nome (cards pequenos, todas as
   marcas; o Red sobrescreve com as escalas dele mais abaixo no arquivo) */
.p-buy { display: flex; align-items: stretch; gap: 8px; margin-top: 5px; font-size: 16px; }
.p-buy:empty { display: none; }
.p-buy .ptag { margin: 0; font-size: 1em; }
.p-buy .cartc { margin-left: 0; font-size: .82em; }

/* indicadores de variante (Redragon): COR = círculo grande · SWITCH = CHIP
   rotulado (ícone MX + nome), forma diferente da cor (mestre 07/07). */
.pdots { display: flex; gap: 10px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.pdot { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff;
  border: 2px solid rgba(0,0,0,.16); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.slot.c-r .pdot, .slot.c-d .pdot { border-color: rgba(255,255,255,.45); }
.swtag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px 4px 5px;
  border-radius: 999px; background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,255,255,.15); }
.slot.c-g .swtag, .slot.c-w .swtag { background: rgba(0,0,0,.055); border-color: rgba(0,0,0,.13); }
.swico { width: 37px; height: 37px; flex: 0 0 auto; }
.swlbl { display: flex; flex-direction: column; line-height: 1.05; color: #2a2a30;
  font: 800 15px/1.05 'Akrobat', sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.slot.c-r .swlbl, .slot.c-d .swlbl { color: #fff; }
.swk { font-size: 8.5px; font-weight: 700; letter-spacing: .13em; opacity: .58; }
/* minis: menor mas ainda legível */
.slot.mini .pdots, .slot.oct .pdots, .slot.col .pdots, .slot.quad .pdots { margin-top: 6px; gap: 7px; }
.slot.mini .pdot, .slot.oct .pdot, .slot.col .pdot, .slot.quad .pdot { width: 30px; height: 30px; }
.slot.mini .swico, .slot.oct .swico, .slot.col .swico, .slot.quad .swico { width: 24px; height: 24px; }
.slot.mini .swlbl, .slot.oct .swlbl, .slot.col .swlbl, .slot.quad .swlbl { font-size: 12px; }
.slot.mini .swtag, .slot.oct .swtag, .slot.col .swtag, .slot.quad .swtag { padding: 3px 10px 3px 4px; }

/* disclaimer "consulte seu vendedor" — sutil (mestre 06/07: a vida não é um
   morango). Na CONTRACAPA (fundo já vermelho) vai caixa escura translúcida;
   online, sobre o fundo escuro do palco, vai a pílula na cor da marca. */
.pricenote { display: none; margin: 26px auto 0; max-width: 640px; background: rgba(0,0,0,.34);
  color: #fff; border-radius: 14px; padding: 12px 22px; text-align: center;
  font: 600 13px/1.45 'Quicksand', sans-serif; letter-spacing: .01em;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.18); }
body.seller-mode .pricenote, body.flat .pricenote { display: block; }
.pricenote .ast, #pricenote .ast { font-weight: 800; }
/* [r4] o #pricenote online virou texto inline DENTRO do #nav (uma linha só:
   pager · configurar · aviso); estilos na seção "modos de visualização".
   O .pricenote da CONTRACAPA (PDF) segue acima, intocado. */

/* ── layouts full-bleed (divisão sólida, zero gap) ───────────────────── */
/* solo A: centrado, branco (ref p5) */
.solo-a { display: flex; }
.solo-a .slot { flex: 1; flex-direction: column; padding: 26px 46px 28px; gap: 8px; }
.solo-a .s-img.big { flex: 1 1 80%; }
.solo-a .s-ctr { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.solo-a .s-ctr .nctag { align-self: center; }
.solo-a .s-sum { font-size: 14px; max-width: 76%; -webkit-line-clamp: 4; }

/* solo B: texto esq branco / painel vermelho dir: metades sólidas (ref p6) */
.solo-b { display: grid; grid-template-columns: 42% 1fr; }
.solo-b .sb-txt { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 34px 34px 34px 40px; overflow: hidden;
  background: linear-gradient(165deg, #ffffff, #efeff2); }
.solo-b .sb-txt::before { content: ''; position: absolute; inset: 0; background: url('assets/runes-tile-dark.png?v=runa4') 0 0/1000px; pointer-events: none; }
.solo-b .sb-txt > * { position: relative; }
.solo-b .sb-txt .s-sum { font-size: 13px; -webkit-line-clamp: 5; }
.solo-b .sb-img { display: flex; padding: 34px; }
.solo-b .s-img.big { flex: 1; }

/* solo C: página vermelha inteira (ref p7) · solo D: página ESCURA inteira */
.pg-body.k-solo.st-c, .pg-body.k-solo.st-d { padding: 0; }
.solo-c { display: grid; grid-template-columns: 40% 1fr; position: relative; }
.pg-body.k-solo.st-c .solo-c { background: linear-gradient(165deg, color-mix(in srgb, var(--red), white 7%), color-mix(in srgb, var(--red), black 20%)); }
.pg-body.k-solo.st-d .solo-c { background: linear-gradient(165deg, #23232b, #101014); }
.solo-c::before { content: ''; position: absolute; inset: 0; background: url('assets/runes-tile-light.png?v=runa4') 0 0/1000px; pointer-events: none; }
.solo-c > * { position: relative; }
.solo-c .sc-txt { display: flex; flex-direction: column; justify-content: center; gap: 9px; color: #fff; padding: 34px 8px 34px 40px; overflow: hidden; }
.solo-c .sc-txt .s-sum { color: rgba(255,255,255,.95); font-size: 13px; -webkit-line-clamp: 5; }
.solo-c .sc-txt .speclist li { color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.35); }
.solo-c .sc-txt .speclist b { color: #fff; }
.solo-c .s-img.big { min-height: 0; padding: 40px 34px 34px 12px; }
.pg-body.k-solo.st-d .nctag { background: var(--red); }

/* duoh v2: página deitada: 2 linhas; cada linha tem faixa de título
   (nome + chips + resumo em UMA linha) e a IMAGEM em LARGURA TOTAL embaixo
   (teclado a ~1060px de largura em vez de espremido numa coluna) */
.duoh { display: grid; grid-template-rows: 1fr 1fr; }
.duoh .slot { flex-direction: column; padding: 14px 28px 12px; gap: 6px; }
.duoh .dh-head { flex: 0 0 auto; width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; position: relative; z-index: 2; }
.duoh .dh-head h3 { min-width: 0; }
.duoh .dh-head .chips { margin: 0; }
/* [05/07] a foto NÃO sobe mais atrás da faixa do título: combo (teclado+
   mouse) é full-bleed à esquerda e o nome caía EM CIMA da imagem (Smarthink/
   Executivo). Teclado solo 5:1 continua em largura total mesmo sem o lift. */
.duoh .slot > .s-sum { flex: 0 0 auto; -webkit-line-clamp: 3; position: relative; z-index: 2; }
.duoh .slot .s-img { flex: 1 1 auto; width: 100%; }
.pg-body.has-head .duoh .slot:first-child { padding-top: 48px; }

/* duo: metade + metade sólidas (ref p8): meia página POR PRODUTO */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo .slot { flex-direction: column; padding: 24px 30px 24px; gap: 9px; }
.duo .s-img { flex: 0 0 62%; } /* [12/07] basis FIXA global: textos do duo na MESMA altura (caso Strider) */
.duo .s-sum { -webkit-line-clamp: 7; }
.duo .s-txt { justify-content: flex-start; }

/* heroN: herói esq (fundo forte, 50% EXATOS da página) + 2-3 empilhados dir */
.heroN { display: grid; grid-template-columns: 50% 1fr; }
.hn-hero { display: flex; }
.hn-hero .slot { flex: 1; flex-direction: column; padding: 22px 26px 22px; gap: 8px; }
.hn-hero .s-img { flex: 1 1 72%; }
.hn-side { display: grid; grid-auto-rows: 1fr; }
.hn-side .slot.mini { flex-direction: row; padding: 14px 22px; gap: 14px; align-items: center; }
.hn-side .slot.mini .s-img { flex: 0 0 42%; align-self: stretch; }
.hn-side .slot.mini .s-mini { font-size: 14.5px; line-height: 1.5; } /* faixa larga aguenta texto maior */
.hn-side .slot.mini .s-name.sm { font-size: 20px; }

/* hero4: herói alto esq (fundo forte, 50% da página) + 2×2 dir */
.hero4 { display: grid; grid-template-columns: 50% 1fr; }
.h4-hero { display: flex; }
.h4-hero .slot { flex: 1; flex-direction: column; padding: 22px 26px 22px; gap: 8px; }
.h4-hero .s-img { flex: 1 1 72%; }
.h4-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* mix6: 2 semi-heróis esq + 4 minis 2×2 dir (ref p3): SÓ cauda de categoria */
.mix6 { display: grid; grid-template-columns: 52% 1fr; }
.m6-heroes { display: grid; grid-template-rows: 1fr 1fr; }
.m6-heroes .slot.semi { flex-direction: row; padding: 16px 20px; gap: 14px; }
.m6-heroes .slot.semi .s-img { flex: 0 0 48%; }
.m6-heroes .slot.semi .s-sum { -webkit-line-clamp: 5; }
.m6-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* grid4: 2×2: 4 produtos GRANDES por página (?pp=4) */
.grid4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.grid4 .slot.quad { flex-direction: column; padding: 16px 22px 16px; gap: 7px; }
.grid4 .slot.quad .s-img { flex: 1 1 66%; }
.grid4 .s-sum { -webkit-line-clamp: 3; font-size: 13px; }

/* grid8: 4×2 compacto (versão full / ?pp=8) */
.grid8 { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; }
.grid8 .slot.oct { flex-direction: column; padding: 13px 15px; gap: 5px; }
.grid8 .slot.oct .s-img { flex: 1 1 63%; }
.grid8 .s-mini { -webkit-line-clamp: 3; font-size: 11.5px; }
.grid8 .s-txt { justify-content: flex-start; gap: 3px; }

/* minis em coluna (imagem em cima) */
.slot.mini.col { flex-direction: column; padding: 13px 16px; gap: 6px; }
.slot.mini.col .s-img { flex: 1 1 62%; }
.slot.mini .s-txt { justify-content: flex-start; }

/* 1ª página da categoria: folga pro título overlay (só onde ele fica) */
.pg-body.has-head .solo-a .slot { padding-top: 62px; }
.pg-body.has-head .solo-b .sb-txt,
.pg-body.has-head .solo-c .sc-txt { padding-top: 64px; }
.pg-body.has-head .duo .slot { padding-top: 58px; }
.pg-body.has-head .hn-hero .slot,
.pg-body.has-head .h4-hero .slot { padding-top: 58px; }
.pg-body.has-head .m6-heroes .slot.semi:first-child { padding-top: 56px; }
.pg-body.has-head .grid4 .slot.quad:first-child { padding-top: 54px; }
.pg-body.has-head .grid8 .slot.oct:first-child { padding-top: 52px; }

/* ── navegação ───────────────────────────────────────────────────────── */
/* [r6] ancorada 15px ABAIXO da borda inferior do livro (mesma distância da
   barra de categorias em cima; livro centrado no palco com inset bottom 48).
   top em vez de bottom: alinha pela borda de cima, independe da altura. */
#nav { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  --bw: min(96vw, calc((100vh - 118px) * 2.828), 1840px);
  top: min(calc(100vh - 58px), calc((100vh - 48px + (var(--bw) / 2.828)) / 2 + 25px));
  display: flex; align-items: center; gap: 13px; background: rgba(14,14,19,.92);
  border: 1px solid #2a2a33; border-radius: 999px; padding: 6px 13px; backdrop-filter: blur(8px); }
#nav button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #34343e;
  background: #17171e; color: #e9e9f0; font-size: 18px; line-height: 1; cursor: pointer; }
#nav button:hover { border-color: var(--llacc, var(--red)); color: #fff; } /* [12/07] era #ff6a70 fixo (vermelho vazando em toda marca) */
#nav button:disabled { opacity: .3; cursor: default; }
#pcount { font-size: 12px; color: #a9a9b6; font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
#verlink { color: #a9a9b6; font-size: 11.5px; text-decoration: none; letter-spacing: .06em;
  border-left: 1px solid #2a2a33; padding-left: 12px; }
#verlink:hover { color: #fff; }
/* [r10] #vstamp removido do DOM — build agora é title do #pcount */

/* ── flat: páginas sequenciais (render de PDF / impressão) ───────────── */
body.flat { overflow: auto; background: #26262c; }
#flatbook { margin: 0 auto; width: 1123px; }
.flatpage { position: relative; width: 1123px; height: 794px; overflow: hidden; background: #fff;
  page-break-after: always; break-after: page; margin: 0 auto; }
.flatpage .page { position: absolute; inset: 0; }
@page { size: A4 landscape; margin: 0; }
@media print {
  body.flat { background: #fff; }
  .flatpage { margin: 0; }
}

/* ── mobile: páginas empilhadas, mesmo canvas escalado ───────────────── */
@media (max-width: 700px) {
  body { overflow: auto; }
  #stage { position: static; perspective: none; display: block; }
  #book3d { width: 100%; height: auto; transform: none !important; filter: none; }
  .sheet { position: static; width: 100%; height: auto; transform: none !important; }
  .face { position: relative; height: var(--mph, 70.7vw); transform: none; border-radius: 0; overflow: hidden;
    margin-bottom: 10px; } /* respiro entre páginas no mobile (mestre) */
  .face.back { transform: none; } /* rotateY do desktop vencia por especificidade:
    ficava backface invisível OCUPANDO a altura = "página em branco" entre páginas */
  .face::after { display: none; }
  #nav { display: none; }
}

/* chips de spec (Iconify) GRANDES, máx 3, NUNCA quebram linha */
.chips { display: flex; flex-wrap: nowrap; gap: 8px 18px; margin: 8px 0 4px; overflow: hidden; }
.chip { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  font-size: 11px; font-weight: 600; font-style: italic; letter-spacing: .05em; text-transform: uppercase;
  color: #46464f; flex: 0 1 auto; min-width: 0; max-width: 110px; line-height: 1.25; }
.chip svg { width: 34px; height: 34px; flex: 0 0 auto; }
.chip i { font-style: inherit; }
.duoh .chip svg, .hn-side .chip svg { width: 28px; height: 28px; }
.slot.c-r .chip, .slot.c-d .chip, .solo-c .sc-txt .chip { color: rgba(255,255,255,.94); }
.solo-a .s-ctr .chips { justify-content: center; }

/* ── modos de visualização: cliente (p=) limpo · vendedor (s=) com menu ── */
#verlink { display: none; }
body.seller-mode #verlink { display: inline; }

/* botão de configuração/PDF + aviso de preço: DENTRO do #nav (r4 — mestre:
   "2 linhas diferentes com coisas" = esquisito; agora é UMA linha só:
   pager · configurar · aviso). Escondidos do cliente (=p). */
#cfgbtn { display: none; }
body.seller-mode #cfgbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--red); color: #fff; text-decoration: none;
  font: 800 12px/1 'Akrobat', sans-serif; letter-spacing: .07em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 999px; margin-left: 3px; white-space: nowrap;
  transition: filter .15s; }
body.seller-mode #cfgbtn:hover { filter: brightness(1.14); }
#pricenote { display: none; }
body.seller-mode #pricenote { display: inline; color: #8b8b96; font-size: 10.5px; line-height: 1.25;
  max-width: 250px; border-left: 1px solid #2a2a33; padding-left: 12px; }
body.seller-mode #pricenote .ast { color: var(--red); font-weight: 800; }
/* no vendedor, o pager some no mobile mas o acesso ao hub fica (embaixo,
   fixo — o palco mobile é fluxo estático, a âncora do livro não vale) */
@media (max-width: 700px) {
  body.seller-mode #nav { display: flex; top: auto; bottom: 12px; }
  body.seller-mode #nav button, body.seller-mode #pcount,
  body.seller-mode #pricenote { display: none; }
}

/* ── tema KEYTIME (ref FlipHTML5 qvjyv/dwxq): roxo #8800fa, chumbo #2d2d2d,
   fonte arredondada (Quicksand), nomes em caixa normal com separador |,
   canto arredondado assimétrico nos blocos de cor, marca-d'água do símbolo
   do logo no lugar das runas ─────────────────────────────────────────── */
body.brand-keytime { font-family: 'Bai Jamjuree', system-ui, sans-serif; font-weight: 400; }
body.brand-keytime .s-name, body.brand-keytime .pg-cat, body.brand-keytime .pg-num,
body.brand-keytime .cover-title, body.brand-keytime .about-in h2,
body.brand-keytime .back-slogan, body.brand-keytime .newb, body.brand-keytime .noimg {
  font-family: 'Bai Jamjuree', sans-serif; font-weight: 700; }
body.brand-keytime .s-name { letter-spacing: .02em; } /* maiúsculo como o resto (ordem do mestre) */
body.brand-keytime .s-code { font-weight: 600; opacity: .75; }
body.brand-keytime .pg-cat { letter-spacing: .08em; }
body.brand-keytime .newb { letter-spacing: .06em; border-radius: 0 10px 0 10px; }

body.brand-keytime .slot.c-w { background: linear-gradient(165deg, #ffffff 30%, #efecf3); }
body.brand-keytime .slot.c-g { background: linear-gradient(165deg, #eae7ef, #d9d5e0); }
body.brand-keytime .slot.c-r { background: linear-gradient(165deg, #9414ff, #7500d8); border-radius: 0 0 52px 0; }
body.brand-keytime .slot.c-d { background: linear-gradient(165deg, #35353b, #232327); border-radius: 0 0 52px 0; }
/* metade 50/50 é bloco FULL: canto arredondado só em bloco menor (mestre) */
body.brand-keytime .duo .slot.c-r, body.brand-keytime .duo .slot.c-d,
body.brand-keytime .duoh .slot.c-r, body.brand-keytime .duoh .slot.c-d { border-radius: 0; }
body.brand-keytime .slot.c-w::before, body.brand-keytime .slot.c-g::before {
  background: url('assets/kt-outline-g.png') no-repeat center / auto 76%; opacity: .13; }
body.brand-keytime .slot.c-r::before, body.brand-keytime .slot.c-d::before {
  background: url('assets/kt-outline-w.png') no-repeat center / auto 76%; opacity: .18; border-radius: inherit; }
body.brand-keytime .pg-body.k-solo.st-c .solo-c { background: linear-gradient(165deg, #9414ff, #7500d8); }
body.brand-keytime .pg-body.k-solo.st-d .solo-c { background: linear-gradient(165deg, #35353b, #232327); }
body.brand-keytime .solo-c::before { background: url('assets/kt-outline-w.png') no-repeat center / auto 82%; opacity: .16; }
body.brand-keytime .solo-b .sb-txt::before { background: url('assets/kt-outline-g.png') no-repeat center / auto 60%; opacity: .1; }

body.brand-keytime .cover { background: radial-gradient(90% 80% at 68% 22%, #3a3a41, #232327); }
body.brand-keytime .cover::before { background: url('assets/kt-outline-w.png') no-repeat right -10% center / auto 110%; opacity: .12; }
body.brand-keytime .cover-logo { filter: drop-shadow(0 8px 28px rgba(136,0,250,.45)); }
body.brand-keytime .cover-title { letter-spacing: .06em; text-transform: none; }
body.brand-keytime .about { background: linear-gradient(165deg, #9414ff, #6d00c9); }
body.brand-keytime .about::before { background: url('assets/kt-outline-w.png') no-repeat left -14% bottom -20% / auto 105%; opacity: .18; }
body.brand-keytime .back-slogan { text-transform: none; letter-spacing: .01em; }
body.brand-keytime .back-logo { filter: brightness(0) invert(1); } /* full white no roxo */
body.brand-keytime .filler { background: linear-gradient(165deg, #eae7ef, #d9d5e0); }
body.brand-keytime .filler::before { background: url('assets/kt-outline-g.png') no-repeat center / auto 80%; opacity: .12; }

/* ── diagnóstico de peso do PDF: &nowm=1 mata marcas-d'água, &nograd=1
   troca degradês por cor sólida ─────────────────────────────────────── */
body.nowm .slot::before, body.nowm .page::before, body.nowm .cover::before,
body.nowm .about::before, body.nowm .filler::before, body.nowm .solo-c::before,
body.nowm .solo-b .sb-txt::before { display: none !important; }
body.nograd .slot.c-w { background: #fafafa; }
body.nograd .slot.c-g { background: #e7e7ec; }
body.nograd .slot.c-r { background: var(--red); }
body.nograd .slot.c-d { background: #2b2b31; }
body.nograd .pg-body.k-solo.st-c .solo-c { background: var(--red); }
body.nograd .pg-body.k-solo.st-d .solo-c { background: #2b2b31; }

/* ═══════════════ REDRAGON — dark-tech (Brand DNA 04/07) ═══════════════
   Preto profundo dominante + vermelho #E00E31 herói + Poppins caps.
   SEM ícones (regra do mestre). Vinheta cinematográfica por página. */
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

body.brand-redragon .page { font-family: 'Poppins', sans-serif; }
body.brand-redragon .page.paper { background: #0b0a0d; }
/* vinheta: escurece bordas por cima dos slots (pointer-events livre) */
body.brand-redragon .page.paper::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: radial-gradient(120% 120% at 50% 46%, transparent 66%, rgba(0,0,0,.30)); }

/* slots: 4 tons do abismo (w=grafite g=fundo r=vermelho d=preto absoluto) */
body.brand-redragon .slot.c-w { background: linear-gradient(165deg, #1c1b21, #131217); }
body.brand-redragon .slot.c-g { background: linear-gradient(165deg, #14131a, #0e0d12); }
/* [11/07 R8 mestre] vermelho PROFUNDO (o tom do card do "Fizz Laranja" tava
   mais certo que o topo claro do gradiente antigo no herói do Clear Black) */
body.brand-redragon .slot.c-r { background: linear-gradient(165deg, #c40c2b, #75041e); }
body.brand-redragon .slot.c-d { background: linear-gradient(165deg, #17161d, #0d0c11);
  box-shadow: inset 0 0 0 1px rgba(224,14,49,.16); } /* clareado 07/07: era quase preto puro (produto escuro sumia + fere DNA "sem full-black") */
/* dragão-marca-d'água: UM por slot, canto, tênue */
/* [10/07 v3 mestre] "outline muito grosso": redragon-white.png é uma SILHUETA
   CHEIA. Trocado pelo OUTLINE fino (redragon-outline-w.png). */
body.brand-redragon .slot.c-w::before, body.brand-redragon .slot.c-g::before,
body.brand-redragon .slot.c-d::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: none; /* dragao removido R7 */ opacity: .09; }
body.brand-redragon .slot.c-r::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: none; /* dragao removido R7 */ opacity: .14; }

/* texto: tudo claro; nome VERMELHO vivo sobre escuro, branco sobre vermelho */
body.brand-redragon .slot .s-name { color: #ff2e4d; }
body.brand-redragon .slot.c-r .s-name { color: #fff; }
body.brand-redragon .slot .s-name .s-code { color: rgba(255,255,255,.42); }
body.brand-redragon .slot .s-sum, body.brand-redragon .slot .s-mini { color: #c5c7c4; }
body.brand-redragon .slot.c-r .s-sum, body.brand-redragon .slot.c-r .s-mini { color: rgba(255,255,255,.92); }
/* [10/07 v2 mestre] hairline bem fina separando boxes adjacentes (2 kumaras
   cinzas iguais lado a lado blendavam sem divisa) */
body.brand-redragon .slot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
body.brand-redragon .slot.c-r { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* [10/07 v3 mestre] REDESIGN do card Red: sem barra sobre o nome, sem header de
   categoria; tag (Novidade/Best/Magnético) ACIMA do nome à esquerda; nome sobe;
   preço + cart ABAIXO do nome à esquerda; switch SOBRE a foto (canto sup dir). */
body.brand-redragon .s-name::before { display: none; }
.pg-head { display: none !important; } /* [12/07 mestre] categoria do topo REMOVIDA (toda marca) — canto esq é da TAG */
/* [10/07 R5 mestre] tags em 2 LINHAS: badge numa linha, magnético na outra */
body.brand-redragon .p-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 7px; }
body.brand-redragon .newb { position: static; top: auto; right: auto; box-shadow: none; }
body.brand-redragon .newb.mag { background: linear-gradient(135deg, #7b2ff7, #c81e8f); color: #fff; }
/* [11/07 R10c mestre] preço e cart na MESMA LINHA (acima do nome), MESMA
   altura: font-size único por porte (cart é em-based) + stretch nas pílulas */
body.brand-redragon .p-buy { display: flex; align-items: stretch; gap: 8px; margin: 0 0 6px; }
body.brand-redragon .p-buy:empty { display: none; }
body.brand-redragon .p-buy .ptag { margin: 0; font-size: 1em; }
body.brand-redragon .p-buy .cartc { margin-left: 0; font-size: .82em; }
body.brand-redragon .pdots { margin-top: 10px; }
/* [10/07 R5 mestre] preço era NANO (herdava a fonte base do slot): tamanho
   próprio, escalado pelo porte do nome (xl/lg herói > padrão > sm/xs mini) */
body.brand-redragon .p-buy { font-size: 19px; }
body.brand-redragon .p-buy.xl { font-size: 27px; }
body.brand-redragon .p-buy.lg { font-size: 23px; }
body.brand-redragon .p-buy.sm { font-size: 17px; }
body.brand-redragon .p-buy.xs { font-size: 15px; }
/* [10/07 R5 mestre] código estourava o slot colado no nome (K568RGB-2 (PT-BROW…):
   vira linha própria abaixo do nome */
body.brand-redragon .s-name .s-code { display: block; margin-top: 3px; }
/* [10/07 R5 mestre] "encaixe da foto não tá certo / sobra espaço": a foto ganha
   fatia maior do slot em todo layout (só Red) */
/* [11/07 R8c] basis FIXA (sem grow): card com menos texto deixava a imagem
   crescer e o nome descia — altura do texto agora é igual nos 2 lados.
   [R8e mestre] "sobe o texto de todos os duovs" (duo + heróis de coluna):
   basis menor e fixa + texto ancorado no topo da área */
body.brand-redragon .duo .s-img { flex: 0 0 62%; }
body.brand-redragon .hn-hero .s-img, body.brand-redragon .h4-hero .s-img { flex: 0 0 64%; }
body.brand-redragon .hn-hero .s-txt, body.brand-redragon .h4-hero .s-txt { justify-content: flex-start; }
body.brand-redragon .hn-side .slot.mini .s-img { flex: 0 0 50%; }
body.brand-redragon .m6-heroes .slot.semi .s-img { flex: 0 0 54%; }
body.brand-redragon .grid4 .slot.quad .s-img { flex: 1 1 72%; }
/* [11/07 R8h mestre — p11] basis FIXA nos minis de coluna/grid8: a altura do
   texto+cart é regulada pelo card MAIS CHEIO (com "também em") — todos abrem
   o texto na mesma linha */
body.brand-redragon .grid8 .slot.oct .s-img { flex: 0 0 62%; }
body.brand-redragon .slot.mini.col .s-img { flex: 0 0 58%; }

/* ── [11/07 R6 mestre] cabeçalho de HERÓI (duoh): tag no topo-esq coladinha no
   início da página; nome em 1 LINHA com preço+cart do lado; "também disponível"
   no fim da MESMA linha; código+switch+cor logo abaixo; foto ganha o resto ── */
body.brand-redragon .duoh .slot { padding-top: 16px; }
body.brand-redragon .pg-body.has-head .duoh .slot:first-child { padding-top: 16px; }
body.brand-redragon .hh-row { display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; min-width: 0; }
body.brand-redragon .hh-row .s-name { min-width: 0; flex: 0 1 auto; }
body.brand-redragon .s-name.one, body.brand-redragon .s-name.one .s-nm {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
body.brand-redragon .hh-buy { display: inline-flex; align-items: stretch; gap: 8px; flex: 0 0 auto; font-size: 23px; }
body.brand-redragon .hh-buy .ptag { margin: 0; font-size: 1em; }
body.brand-redragon .hh-buy .cartc { margin-left: 0; font-size: .82em; }
body.brand-redragon .hh-row .vpanel { margin: 0 0 0 auto; display: flex; align-items: center;
  gap: 10px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
body.brand-redragon .hh-row .vpanel .vlabel { margin: 0; white-space: nowrap; }
body.brand-redragon .hh-row .vchips { flex-wrap: nowrap; }
body.brand-redragon .hh-row .vcico { width: 28px; height: 28px; }
body.brand-redragon .hh-row .vcico.vcsw .swkc { width: 22px; height: 22px; }
body.brand-redragon .hh-row .vclbl { font-size: 11px; }
body.brand-redragon .hh-sub { display: flex; align-items: center; gap: 12px; margin-top: 7px;
  position: relative; z-index: 2; }
body.brand-redragon .hh-sub .s-code { font: 700 12.5px/1 'Poppins', sans-serif;
  letter-spacing: .06em; color: rgba(255,255,255,.55); }
body.brand-redragon .hh-sub .pdots { margin-top: 0; }
body.brand-redragon .hh-sub .pdot { width: 30px; height: 30px; }
/* chip de switch INLINE (abaixo do nome no herói) — mesma pílula do sw-over */
.swtag.sw-line { position: static; margin: 0; font-size: 12px; padding: 4px 12px 4px 5px;
  background: rgba(9,9,13,.82); border-color: rgba(255,255,255,.28); }
.swtag.sw-line .swico { width: 26px; height: 26px; }
.swtag.sw-line .swlbl { font-size: 12px; color: #fff; }
.swtag.sw-line .swk { font-size: 8px; }
.swtag.sw-line.mag, .swtag.sw-over.mag { background: linear-gradient(135deg, rgba(123,47,247,.92), rgba(200,30,143,.92)); border-color: transparent; }
/* tooltip Hall Effect no HOVER de qualquer chip magnético (substitui o mag-why)
   [15/07] o balão saiu do ::after (era clipado pelo slot — e o "fix" de
   overflow:visible fazia texto vazar da página) e virou camada no <body>,
   posicionada pelo cart.js: .pm-tipfly nunca é clipada por ninguém. */
.swtag.has-tip { position: relative; cursor: help; }
.swtag.sw-over.has-tip { position: absolute; } /* sw-over já é absoluto; não rebaixar */
.pm-tipfly { position: fixed; z-index: 9000; width: min(340px, 70vw); padding: 10px 13px;
  border-radius: 9px; background: rgba(12,10,16,.97); border: 1px solid rgba(160,60,220,.55);
  color: #e9dcf6; font: 600 11.5px/1.45 'Quicksand', sans-serif; white-space: normal;
  text-transform: none; letter-spacing: 0; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  pointer-events: none; }
/* bolinha de cor SEM foto do site: swatch por nome de cor (mesma linguagem) */
.pdot-flat { display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #26252d, #17161c); }
.pdot-flat .vdot { width: 62%; height: 62%; }

/* ── [11/07 R7 mestre] ─────────────────────────────────────────────────── */
/* tag + seletor de quantidade ACIMA do nome (linha .p-top, todo card Red) */
body.brand-redragon .p-top { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
body.brand-redragon .p-top .newb { position: static; box-shadow: none; }
/* duoh: Novidade colada no topo, tag→nome mais junto, texto sobe, foto cresce */
body.brand-redragon .duoh .slot { padding: 8px 22px 10px; gap: 4px; }
body.brand-redragon .pg-body.has-head .duoh .slot:first-child { padding-top: 8px; }
body.brand-redragon .duoh .p-tags { margin-bottom: 3px; }
body.brand-redragon .duoh .hh-sub { margin-top: 5px; }
body.brand-redragon .duoh .slot > .s-sum { -webkit-line-clamp: 2; }
/* mostrador de switch MAIOR (geral) */
body.brand-redragon .swtag.sw-over { font-size: 14px; padding: 6px 15px 6px 7px; }
body.brand-redragon .sw-over .swico { width: 34px; height: 34px; }
body.brand-redragon .sw-over .swlbl { font-size: 14px; }
body.brand-redragon .sw-over .swk { font-size: 9.5px; }
/* [11/07 R8f mestre] mini = MESMO tamanho do herói da página; pequeno SÓ no grid8 */
body.brand-redragon .slot.oct .sw-over .swico { width: 24px; height: 24px; }
body.brand-redragon .slot.oct .sw-over .swlbl { font-size: 11px; }
/* herói full-page (solo): switch BEM maior + tag/cart no canto sup esquerdo */
body.brand-redragon .solo-a .swtag.sw-over, body.brand-redragon .solo-b .swtag.sw-over,
body.brand-redragon .solo-c .swtag.sw-over { font-size: 16px; padding: 8px 18px 8px 8px; }
body.brand-redragon .solo-a .sw-over .swico, body.brand-redragon .solo-b .sw-over .swico,
body.brand-redragon .solo-c .sw-over .swico { width: 44px; height: 44px; }
body.brand-redragon .solo-a .sw-over .swlbl, body.brand-redragon .solo-b .sw-over .swlbl,
body.brand-redragon .solo-c .sw-over .swlbl { font-size: 16px; }
body.brand-redragon .solo-a .s-ctr { position: static; } /* p-top ancora no slot */
/* [11/07 R8c mestre] TAG É SEMPRE canto superior esquerdo do card (todo slot;
   solo-b/c já nascem no topo-esq do texto e duoh usa .p-tags no fluxo).
   Gotcha: .slot>* é position:relative — o s-txt viraria a âncora do absolute e
   a tag caía EM CIMA do nome (caso Dharma) → s-txt static no Red (os ::before
   de fundo já são background:none, nada pra sobrepor). */
body.brand-redragon .slot .s-txt, body.brand-redragon .slot .s-ctr { position: static; }
body.brand-redragon .slot .p-top { position: absolute; top: 10px; left: 12px; z-index: 6; margin: 0; }
/* mini de LINHA: chip de switch também mora no topo-esq → desce quando tem tag */
body.brand-redragon .hn-side .slot.mini:has(.p-top) .swtag.sw-over,
body.brand-redragon .m6-heroes .slot.semi:has(.p-top) .swtag.sw-over { top: 48px; }
/* [11/07 R8c mestre] duo: altura dos TEXTOS sempre no mesmo lugar (o card sem
   "também disponível" centralizava e o nome descia) */
body.brand-redragon .duo .s-txt { justify-content: flex-start; }
/* [11/07 R8c mestre] speclist do main hero (solo-a): bloco centrado, texto à esq */
body.brand-redragon .solo-a .speclist { max-width: 700px; margin: 12px auto 0; text-align: left; }
/* ── [11/07 R8d mestre] ── */
/* seletor de quantidade ACIMA do nome, escalando com o porte do card (em-based) */
/* [R10c] .p-cart aposentado — preço+cart moram juntos no .p-buy */
/* [11/07 R8f mestre — Sindri/solo-a] título à ESQUERDA com o seletor de
   quantidade GRANDE na direita da mesma linha (segue a escala do nome xl);
   preço/infos abaixo à esquerda */
body.brand-redragon .solo-a .s-ctr { display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; align-content: flex-start; text-align: left; }
body.brand-redragon .solo-a .s-ctr .s-name { order: 1; flex: 0 1 auto; min-width: 0; }
body.brand-redragon .solo-a .s-ctr .p-buy { order: 2; margin: 0 0 0 auto; flex: 0 0 auto; font-size: 27px; }
body.brand-redragon .solo-a .s-ctr .sa-info, body.brand-redragon .solo-a .s-ctr > .s-sum { order: 4; flex: 1 1 100%; }
body.brand-redragon .solo-a .s-ctr .vpanel { order: 5; flex: 1 1 100%; }
/* margem do chip nos heróis de página cheia: 10px ficava colado comparado
   aos cards menores → 18/20 */
body.brand-redragon .solo-a .swtag.sw-over, body.brand-redragon .solo-b .swtag.sw-over,
body.brand-redragon .solo-c .swtag.sw-over { top: 18px; right: 20px; }
/* [11/07 R8g mestre] "sobe o texto e imagem do Sindri": menos teto, teclado
   ancorado no topo da célula, texto sobe junto */
body.brand-redragon .solo-a .slot { padding-top: 12px; }
body.brand-redragon .solo-a .s-img.big { flex: 1 1 74%; }
body.brand-redragon .solo-a .s-img.big img { object-position: center top; }
/* [11/07 R8h mestre — p5 corrige o R8g] bloco de texto CENTRALIZADO (vertical)
   à esquerda; "também em" embaixo à ESQUERDA e maior */
body.brand-redragon .hn-side .slot.mini { align-items: center; }
body.brand-redragon .hn-side .slot.mini .s-txt { justify-content: center; }
body.brand-redragon .hn-side .slot.mini .vstrip.vmini { position: absolute; left: 22px; right: auto; bottom: 10px; margin: 0; z-index: 6; }
body.brand-redragon .hn-side .slot.mini .vmk { font-size: 10.5px; }
body.brand-redragon .hn-side .slot.mini .vmico { width: 36px; height: 36px; }
body.brand-redragon .hn-side .slot.mini .vmico.vcsw .swkc { width: 27px; height: 27px; }
/* tag do hero full tava NANICA */
body.brand-redragon .solo-a .p-top .newb, body.brand-redragon .solo-b .p-top .newb,
body.brand-redragon .solo-c .p-top .newb { font-size: 14px; padding: 8px 16px; }
/* solo-a: descrição à esquerda | separador vertical | specsheet à direita */
body.brand-redragon .solo-a .sa-info { display: flex; align-items: flex-start; gap: 28px;
  max-width: 1020px; margin: 8px auto 0; text-align: left; }
body.brand-redragon .solo-a .sa-info .s-sum { flex: 1 1 46%; }
body.brand-redragon .solo-a .sa-info .speclist { flex: 1 1 54%; margin: 0; max-width: none;
  border-left: 1px solid rgba(255,255,255,.22); padding-left: 28px; }
/* duoh: chip inline maior */
body.brand-redragon .swtag.sw-line { font-size: 14px; padding: 6px 15px 6px 7px; }
body.brand-redragon .swtag.sw-line .swico { width: 36px; height: 36px; }
body.brand-redragon .swtag.sw-line .swlbl { font-size: 14.5px; }
body.brand-redragon .swtag.sw-line .swk { font-size: 9.5px; }
/* quad: texto no pé, foto manda no espaço */
body.brand-redragon .grid4 .slot.quad { padding: 12px 18px 14px; gap: 5px; }
body.brand-redragon .grid4 .slot.quad .s-img { flex: 1 1 78%; }
body.brand-redragon .grid4 .s-txt { justify-content: flex-end; }
/* [15/07 mestre "textos ultrapassam o limite da página"] o overflow:visible
   daqui (fix de tooltip 12/07) DESLIGAVA o clipping de TODO slot: texto
   vazava por cima do vizinho e da borda da página. A tooltip agora voa em
   camada no <body> (cart.js + .pm-tipfly), então o clipping base dos slots
   (regras .slot/.s-img lá em cima) volta a valer. */

/* ── [11/07 R9 mestre] ── */
/* 🚩 report de imagem: só no seller-view; fantasma no canto inf-dir da FOTO */
.imgrep { display: none; }
body.seller-mode:not(.flat) .imgrep, body.staff:not(.flat) .imgrep { display: flex; position: absolute; right: 8px; bottom: 8px; /* [12/07] staff logado vê em TODA marca */
  z-index: 7; width: 30px; height: 30px; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.25); border-radius: 8px; cursor: pointer;
  background: rgba(10,10,14,.55); color: rgba(255,255,255,.55); font-size: 15px; line-height: 1;
  opacity: .35; transition: opacity .2s, background .2s, color .2s; backdrop-filter: blur(2px); }
.s-img:hover .imgrep, .imgrep:hover { opacity: 1; }
.imgrep:hover { background: #e00e31; color: #fff; border-color: transparent; }
.imgrep.done { opacity: 1; background: #e00e31; color: #fff; border-color: transparent; }
.imgrep.done::after { content: ' ✓'; font-size: 11px; }
/* modo ?flags=1: não-reportado vira fantasma (layout preservado, foco no 🚩) */
body.brand-redragon .slot.ghost > * { opacity: .08; filter: grayscale(1); }
body.brand-redragon .slot.ghost .imgrep { display: none !important; }
/* chip de SENSOR (mouse): mesma pílula do switch, ícone de mira */
.swtag.sensor .snico { width: 26px; height: 26px; display: inline-flex; align-items: center;
  justify-content: center; color: #ffb84d; flex: 0 0 auto; }
.swtag.sensor .snico svg { width: 22px; height: 22px; }
body.brand-redragon .swtag.sensor.sw-over .snico { width: 30px; height: 30px; }

/* [11/07 R8 mestre — página 3, cirúrgico] o teclado do duoh SOBE na faixa
   vazia à direita do chip de switch (chip fica à esq; hh-sub tem z-index 2 e
   segue clicável por cima) e o resumo é CENTRALIZADO.
   [R9b] o puxão virou classe .pull (só foto larga, aspecto>=2.6 — foto alta
   clipava o título, caso p28/29) + header blindado com z-index. */
body.brand-redragon .duoh .s-img.pull { margin-top: -48px; }
body.brand-redragon .duoh .p-tags, body.brand-redragon .duoh .hh-row,
body.brand-redragon .duoh .hh-sub { position: relative; z-index: 3; }
body.brand-redragon .duoh .slot > .s-sum { text-align: center; margin-left: auto; margin-right: auto; }
/* [11/07 R8 mestre] mini de LINHA com foto na esquerda (m6 semi): chip à esq */
body.brand-redragon .m6-heroes .slot.semi .swtag.sw-over { left: 10px; right: auto; top: 10px; }
/* [11/07 R8e mestre — p10] hn-side mini INVERTIDO: texto/nome à ESQUERDA,
   imagem à DIREITA; switch no topo-dir do card com margem CURTA; "também
   disponível" no canto INFERIOR direito; bolinha de cor no INÍCIO da imagem */
body.brand-redragon .hn-side .slot.mini { flex-direction: row-reverse; }
body.brand-redragon .hn-side .slot.mini .swtag.sw-over { left: auto; right: 10px; top: 10px; }
body.brand-redragon .hn-side .slot.mini .vstrip.vmini { position: absolute; right: 12px; bottom: 8px; margin: 0; z-index: 6; }
body.brand-redragon .hn-side .slot.mini .pdots { position: absolute; top: 10px; left: calc(50% + 16px); margin: 0; z-index: 6; }
/* tooltip também no chip de switch do "também disponível em"
   [15/07] idem: balão via .pm-tipfly no <body> (cart.js), nada de ::after */
.vchip.has-tip { position: relative; cursor: help; }
/* [16/07] overflow:visible do vpanel REMOVIDO: era pra tooltip do vchip, que
   agora voa no <body> (.pm-tipfly); visible deixava conteúdo vazar do painel */
/* switch sobreposto na foto */
.s-img { position: relative; }
.swtag.sw-over { position: absolute; top: 10px; right: 10px; z-index: 5; margin: 0;
  font-size: 12px; padding: 4px 11px 4px 4px;
  background: rgba(9,9,13,.82); border-color: rgba(255,255,255,.28); backdrop-filter: blur(3px); }
/* trava o tamanho do chip: .s-img img{width:100%} inflava a keycap do switch */
.sw-over .swico { width: 24px; height: 24px; }
.sw-over .swlbl { font-size: 11px; }
.sw-over .swk { font-size: 8px; }
.swtag.sw-over.mag { background: linear-gradient(135deg, rgba(123,47,247,.92), rgba(200,30,143,.92)); border-color: transparent; }
/* [11/07 R8e] chip ancora no CARD: 10px uniforme pra toda parede (regra base) */
/* explicação do magnético (heroes) */
body.brand-redragon .mag-why { margin-top: 9px; padding: 8px 12px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(123,47,247,.16), rgba(200,30,143,.12));
  border: 1px solid rgba(160,60,220,.35); color: #e9dcf6;
  font: 600 11.5px/1.4 'Quicksand', sans-serif; max-width: 88%; }
body.brand-redragon .mag-why b { color: #fff; }
/* speclist: BRAND-WIDE (não só .slot) — o sb-txt do solo-b não é slot e as
   specs caíam no cinza do tema claro sobre fundo escuro (caso Zeus X, hot) */
body.brand-redragon .speclist li { color: #c5c7c4; border-color: rgba(255,255,255,.16); }
body.brand-redragon .speclist b { color: #fff; }

/* cabeçalho de categoria: número gigante vermelho + nome branco caps */
body.brand-redragon .pg-head .pg-num { color: #e00e31; }
body.brand-redragon .pg-head.on-red .pg-num { color: #fff; } /* nº vermelho sumia no slot vermelho */
body.brand-redragon .pg-head .pg-cat { color: #fff; text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; }
body.brand-redragon .pg-head::after { background: #e00e31; }
body.brand-redragon .pf-num { color: rgba(255,255,255,.4); }

/* selos sobre o abismo */
body.brand-redragon .newb { background: #e00e31; color: #fff; border-radius: 3px; letter-spacing: .08em; }
body.brand-redragon .newb.best { background: #fff; color: #0a0a0d; }
body.brand-redragon .newb.oos { background: #3a3a42; color: #d6d6da; }
body.brand-redragon .nctag { background: #e00e31; color: #fff; }

/* capa: breu + glow vermelho + dragão */
body.brand-redragon .cover { background:
  radial-gradient(70% 55% at 50% 88%, rgba(224,14,49,.28), transparent 70%),
  radial-gradient(90% 80% at 68% 22%, #131118, #080707); }
body.brand-redragon .cover::before { content: ''; position: absolute; inset: 0;
  background: none; /* dragao removido R7 */ opacity: .08; }
body.brand-redragon .cover-title { font-family: 'Poppins', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em; }
body.brand-redragon .cover-rule { background: #e00e31; }
/* [10/07] logo horizontal oficial (dragão + REDRAGON, 4:1): mais respiro */
body.brand-redragon .cover-logo { max-width: 440px; max-height: 150px; }
body.brand-redragon .back-logo { max-width: 360px; }

/* sobre / contracapa / filler: mesmo universo */
body.brand-redragon .about { background:
  radial-gradient(80% 70% at 82% 100%, rgba(224,14,49,.20), transparent 65%),
  linear-gradient(165deg, #100f14, #080707); }
body.brand-redragon .about::before { content: ''; position: absolute; inset: 0;
  background: none; /* dragao removido R7 */ opacity: .05; }
body.brand-redragon .about h2 { color: #e00e31; font-family: 'Poppins', sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; }
body.brand-redragon .about p { color: #c5c7c4; }
body.brand-redragon .back-slogan { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; }
body.brand-redragon .back-sub { color: rgba(255,255,255,.4); }
body.brand-redragon .filler { background: linear-gradient(165deg, #121116, #0a090c); }

/* "Também disponível em" — swatches + switch, zero ícone */
.vstrip { margin-top: 9px; position: relative; z-index: 2; }
.vlabel { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red); margin-bottom: 5px; }
.vtoks { display: flex; flex-wrap: wrap; gap: 5px; }
.vtok { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px;
  border: 1px solid rgba(0,0,0,.16); border-radius: 20px; font-size: 9.5px; color: #3a3a42;
  background: rgba(255,255,255,.5); }
.vtok b { font-weight: 600; }
.vtok.vmore { padding: 2px 8px; }
.vdot { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22); }
/* [10/07 v2] compacto EXPLÍCITO: rótulo curto + ícones (foto da outra cor /
   keycap do outro switch), no lugar do "+N versões" vago */
.vstrip.vmini { display: flex; align-items: center; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
.vmk { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); flex: 0 0 auto; }
.vmicons { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.vmico { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
img.vmico { object-fit: contain; background: #fff; padding: 2px; border: 2px solid rgba(0,0,0,.16); }
.vmico.vcflat, .vmico.vcsw { background: linear-gradient(160deg, #26252d, #17161c); }
.vmico.vcsw .swkc { width: 20px; height: 20px; object-fit: contain; }
.vmico.vcflat .vdot { width: 15px; height: 15px; }
.slot.oct .vmico, .slot.col .vmico, .grid8 .vmico { width: 22px; height: 22px; }
body.brand-redragon img.vmico { border-color: rgba(255,255,255,.32); }
body.brand-redragon .slot.c-r .vmk { color: #fff; }
body.brand-redragon .vtok { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #e6e6ea; }
body.brand-redragon .vdot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
body.brand-redragon .slot.c-r .vtok { border-color: rgba(255,255,255,.3); background: rgba(0,0,0,.18); color: #fff; }
body.brand-redragon .vstrip.vmini { color: rgba(255,255,255,.5); }
body.brand-redragon .slot .s-name::before { background: #e00e31; }
body.brand-redragon .slot.c-r .s-name::before { background: #fff; }
/* Akrobat explícito da base perde pra Poppins na Red */
body.brand-redragon .s-name, body.brand-redragon .pg-num, body.brand-redragon .pg-cat,
body.brand-redragon .about-in h2 { font-family: 'Poppins', sans-serif; }
/* foto opaca (sem versão transparente no Drive) = product box com moldura */
body.brand-redragon .s-img img.opq { background: #fff; padding: 10px; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  max-width: 88%; max-height: 92%; width: auto; height: auto; object-fit: contain; margin: auto; }
/* solos no abismo: A = grafite; B = painel texto grafite; C/D já são r/d */
body.brand-redragon .solo-a .slot.c-w { background: linear-gradient(165deg, #1c1b21, #121116); }
body.brand-redragon .solo-b .sb-txt { background: linear-gradient(165deg, #17161c, #100f14); }
body.brand-redragon .solo-b .sb-txt::before { background: none; /* dragao removido R7 */ opacity: .04; }
body.brand-redragon .pg-body.k-solo.st-c .solo-c { background: linear-gradient(165deg, #e00e31, #83051e); }
body.brand-redragon .pg-body.k-solo.st-d .solo-c { background: linear-gradient(165deg, #0a090c, #050406); box-shadow: inset 0 0 0 1px rgba(224,14,49,.16); }
body.brand-redragon .solo-b .sb-txt .s-name, body.brand-redragon .solo-a .s-name { color: #ff2e4d; }
body.brand-redragon .pg-body.k-solo .speclist li { color: #c5c7c4; }
body.brand-redragon .pg-body.k-solo.st-a .s-sum, body.brand-redragon .solo-b .sb-txt .s-sum { color: #c5c7c4; }

/* ── RED v2 (feedback mestre 06/07) ──────────────────────────────────────
   1 preto NUNCA full-black (site não usa; chapado = amador): base levantada
   2 dragão só OUTLINE (esquema keytime) — some o sólido e as runas
   3 vermelho ÚNICO = o do background (#e00e31) em fonte também
   4 contraste: em bloco vermelho TUDO branco; cinzas mais presentes */
body.brand-redragon .page.paper { background: #121117; }
body.brand-redragon .page.paper::after { background: radial-gradient(115% 115% at 50% 46%, transparent 64%, rgba(0,0,0,.30)); }
body.brand-redragon .slot.c-w { background: linear-gradient(165deg, #201f27, #16151b); }
body.brand-redragon .slot.c-g { background: linear-gradient(165deg, #191820, #121118); }
body.brand-redragon .slot.c-d { background: linear-gradient(165deg, #100f15, #0c0b10);
  box-shadow: inset 0 0 0 1px rgba(224,14,49,.18); }
body.brand-redragon .slot.c-w::before, body.brand-redragon .slot.c-g::before,
body.brand-redragon .slot.c-d::before {
  background: none; /* dragao removido R7 */ opacity: .055; }
body.brand-redragon .slot.c-r::before {
  background: none; /* dragao removido R7 */ opacity: .13; }
body.brand-redragon .cover { background:
  radial-gradient(70% 55% at 50% 88%, rgba(224,14,49,.30), transparent 70%),
  radial-gradient(90% 80% at 68% 22%, #1a1820, #100f14); }
body.brand-redragon .cover::before { background: none; /* dragao removido R7 */ opacity: .09; }
body.brand-redragon .about { background:
  radial-gradient(80% 70% at 82% 100%, rgba(224,14,49,.22), transparent 65%),
  linear-gradient(165deg, #17161d, #100f14); }
body.brand-redragon .about::before { background: none; /* dragao removido R7 */ opacity: .09; }
body.brand-redragon .filler { background: linear-gradient(165deg, #191820, #121117); }
body.brand-redragon .filler::before { background: none; /* dragao removido R7 */ opacity: .07; }
body.brand-redragon .solo-a .slot.c-w { background: linear-gradient(165deg, #201f27, #15141a); }
body.brand-redragon .solo-b .sb-txt { background: linear-gradient(165deg, #1c1b22, #141318); }
body.brand-redragon .solo-b .sb-txt::before { background: none; /* dragao removido R7 */ opacity: .07; }
body.brand-redragon .pg-body.k-solo.st-d .solo-c { background: linear-gradient(165deg, #100f15, #0c0b10); box-shadow: inset 0 0 0 1px rgba(224,14,49,.18); }
/* [10/07] solo-c herdava a runa GENÉRICA da Kalkan (nenhum override Red) — troca
   pelo dragão como o resto (ordem do mestre: zero runa no Redragon) */
body.brand-redragon .solo-c::before { background: none; /* dragao removido R7 */ opacity: .07; }
/* [HARD RULE contraste 10/07] slots "claros" (c-w/c-g) na Red são REpintados
   escuros → o tratamento claro do chip de switch (fundo quase transparente +
   texto escuro) virava cinza-no-cinza, invisível (caso Crystal/Fizz sunrise).
   Regra: chip de switch/variante SEMPRE pílula escura + texto branco, em
   QUALQUER cor de slot. "Tem que ser visível." */
body.brand-redragon .swtag,
body.brand-redragon .slot.c-g .swtag, body.brand-redragon .slot.c-w .swtag {
  background: rgba(8,8,12,.66); border-color: rgba(255,255,255,.26); }
body.brand-redragon .swlbl,
body.brand-redragon .slot.c-g .swlbl, body.brand-redragon .slot.c-w .swlbl { color: #fff; }
body.brand-redragon .swk { opacity: .72; }
body.brand-redragon .vchip { background: rgba(8,8,12,.66); border-color: rgba(255,255,255,.26); }
body.brand-redragon .pdot { border-color: rgba(255,255,255,.42); }
/* [10/07 v2 mestre] dragão do HERÓI (heroN 50%, hero4) estava "super embaixo e
   ultra pequeno": maior e centralizado na vertical */
body.brand-redragon .hn-hero .slot::before,
body.brand-redragon .h4-hero .slot::before {
  background-size: 98% auto; background-position: right -4% center; opacity: .085; }
body.brand-redragon .hn-hero .slot.c-r::before,
body.brand-redragon .h4-hero .slot.c-r::before { opacity: .14; }

/* vermelho único (Michelle): fonte = fundo = #e00e31 */
body.brand-redragon .slot .s-name, body.brand-redragon .solo-b .sb-txt .s-name,
body.brand-redragon .solo-a .s-name { color: #e00e31; }
body.brand-redragon .slot.c-r .s-name { color: #fff; }
body.brand-redragon .slot .s-name .s-code { color: rgba(255,255,255,.55); }
body.brand-redragon .vstrip.vmini { color: rgba(255,255,255,.66); }

/* ── painel "Também disponível em" v3 (mestre 08/07): MESMO container das
   bolinhas/switch do produto (.swtag): pílula com foto/bolinha redonda pra
   cor e quadradinho colorido pro switch ── */
.vpanel { margin-top: 14px; position: relative; z-index: 2; }
/* [12/07 mestre v3] vlabel INTELIGENTE: segue a COR DE FUNDO da box de preço
   do contexto (roxo-no-roxo do Solid morreu aqui): slot claro = box na cor
   da marca; slot colorido/escuro = box branca */
.slot, .solo-b .sb-txt { --ptbg: var(--red); }
.slot.c-r, .slot.c-d, .solo-c { --ptbg: #fff; }
.vpanel .vlabel { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ptbg, var(--red)); margin-bottom: 8px; }
.vchips { display: flex; gap: 9px; flex-wrap: wrap; }
.vchip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 5px;
  border-radius: 999px; background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,255,255,.15); }
.vcico { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; }
img.vcico { object-fit: contain; background: #fff; padding: 2px; border: 2px solid rgba(0,0,0,.16); }
.vcico.vcflat { background: linear-gradient(160deg, #26252d, #17161c); }
.vcico.vcflat .vdot { width: 20px; height: 20px; }
.vcico.vcsw { background: linear-gradient(160deg, #26252d, #17161c); }
.vcico.vcsw i { width: 18px; height: 18px; border-radius: 4px; background: var(--swc, #8d8d95);
  box-shadow: 0 0 12px color-mix(in srgb, var(--swc, #8d8d95), transparent 40%), inset 0 -3px 0 rgba(0,0,0,.3); }
/* [10/07] switch da variante = MESMA keycap do produto (arte única, maior) */
.vcico.vcsw .swkc { width: 27px; height: 27px; object-fit: contain; }
.duo .vcico.vcsw .swkc, .grid4 .vcico.vcsw .swkc { width: 22px; height: 22px; }
.vclbl { display: flex; flex-direction: column; line-height: 1.1; color: #fff;
  font: 800 12.5px/1.1 'Akrobat', sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.vck { font-size: 8px; font-weight: 700; letter-spacing: .13em; opacity: .55; }
.vclbl i { font-style: normal; font: 600 8.5px/1.2 'Quicksand', sans-serif; text-transform: none;
  letter-spacing: 0; color: rgba(255,255,255,.78); margin-top: 1px; }
body.brand-redragon .slot.c-r .vpanel .vlabel { color: #fff; }
/* célula apertada (duo/grade 4): painel encolhe */
.duo .vcico, .grid4 .vcico { width: 28px; height: 28px; }
.duo .vclbl, .grid4 .vclbl { font-size: 11px; }
.grid4 .vchips, .duo .vchips { gap: 7px; }

/* ── [CARRINHO 08/07] pedido do vendedor (teste controlado: Kalkan/hot) ──
   Controle +/− na .s-row (à direita do nome, junto do preço). Escala em em
   como a .ptag; herda a cor do título do slot (currentColor) → funciona em
   slot claro e escuro. SÓ no seller-mode, nunca no flat/PDF. */
/* pílula segmentada ÚNICA (r3 — círculos soltos ficavam "estranhos"):
   [ − | 🛒 n | + ] em outline discreto na cor do título; com item no pedido
   preenche invertendo igual à .ptag (box=cor do título, texto=cor do fundo). */
.cartc { display: none; align-items: stretch; margin-left: .4em; flex: 0 0 auto; user-select: none;
  font-size: max(.6em, 15px); line-height: 1; border-radius: 999px; overflow: hidden;
  border: .085em solid color-mix(in srgb, currentColor, transparent 35%); color: inherit; }
body.seller-mode:not(.flat) .cartc { display: inline-flex; }
.cartc button { width: 1.75em; border: 0; background: transparent; color: inherit;
  font: 800 1.02em/1 'Akrobat', sans-serif; cursor: pointer; padding: .3em 0 .38em;
  opacity: .7; transition: opacity .15s, background .15s; }
.cartc button:hover { opacity: 1; background: color-mix(in srgb, currentColor, transparent 88%); }
.cartc .cq { display: inline-flex; align-items: center; gap: .24em; min-width: 2.4em; padding: 0 .3em;
  justify-content: center; font: 800 .9em/1 'Akrobat', sans-serif;
  border-left: 1px solid color-mix(in srgb, currentColor, transparent 70%);
  border-right: 1px solid color-mix(in srgb, currentColor, transparent 70%); }
.cartc .cq svg { width: 1em; height: 1em; flex: 0 0 auto; }
.cartc.has { border-color: transparent; background: var(--red); color: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.28); }
.slot.c-r .cartc.has { background: #fff; color: var(--red); }
.slot.c-d .cartc.has { background: #fff; color: #17171e; }
/* [10/07 v2] Red: slots c-w/c-g são ESCUROS → pílula vermelha sumia. Pílula
   branca em QUALQUER slot (o vermelho no cinza-escuro era ruim de ver). */
body.brand-redragon .cartc.has { background: #fff; color: var(--red); }
.cartc.has .cq { border-color: color-mix(in srgb, currentColor, transparent 78%); }
/* [10/07 v3 mestre] estado VAZIO herdava o vermelho do título → vermelho no
   preto, difícil de ver. Red: pílula vazia = outline claro + ícone claro. */
body.brand-redragon .cartc:not(.has) { color: #dcdce2; border-color: rgba(255,255,255,.4); }
body.brand-redragon .cartc:not(.has) button { opacity: .85; }

/* barra fixa do pedido: direita, ALINHADA na mesma linha do #nav (r6 —
   mesma âncora de 15px abaixo do livro) */
#cartbar { position: fixed; right: 18px; z-index: 60;
  --bw: min(96vw, calc((100vh - 118px) * 2.828), 1840px);
  top: min(calc(100vh - 58px), calc((100vh - 48px + (var(--bw) / 2.828)) / 2 + 25px));
  display: flex; align-items: center; gap: 13px;
  background: rgba(16,16,20,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid #2b2b33; border-radius: 999px;
  padding: 9px 10px 9px 20px; box-shadow: 0 10px 32px rgba(0,0,0,.5);
  font: 600 13px/1.2 'Quicksand', system-ui, sans-serif; color: #e8e8ee; }
#cartbar[hidden], body:not(.seller-mode) #cartbar { display: none; }
#cartinfo b { color: #fff; }
#cartclear { background: none; border: 0; padding: 0; color: #8b8b96; font: inherit;
  font-size: 11.5px; cursor: pointer; text-decoration: underline; }
#cartclear:hover { color: #fff; }
#cartform { display: contents; }
#cartgo { background: var(--red); color: #fff; border: 0; border-radius: 999px;
  padding: 11px 20px; font: 800 12.5px/1 'Akrobat', sans-serif; letter-spacing: .07em;
  text-transform: uppercase; cursor: pointer; transition: filter .15s; white-space: nowrap; }
#cartgo:hover { filter: brightness(1.16); }
#cartgo:disabled { opacity: .55; cursor: wait; }
@media (max-width: 700px) { #cartbar { right: 10px; top: auto; bottom: 10px; padding-left: 14px; gap: 9px; } }

/* popup do pedido ("dropdown invertido" estilo carrinho do iFood): filho da
   barra → hover contínuo; sobe com fade, lista rolável, total + aviso no pé */
#cartbar { flex-wrap: nowrap; }
#cartinfo { cursor: pointer; }
#cartpop { position: absolute; right: 0; bottom: calc(100% + 14px); width: 404px;
  background: rgba(16,16,20,.94); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  border: 1px solid #2b2b33; border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 6px 0 0; cursor: default;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; }
#cartpop.on { opacity: 1; transform: none; pointer-events: auto; }
#cartpop::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; } /* ponte do hover até a barra */
.cp-list { max-height: 46vh; overflow: auto; padding: 4px 16px; overscroll-behavior: contain; }
.cp-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #1c1c22; }
.cp-row:last-child { border-bottom: 0; }
.cp-img { width: 46px; height: 46px; flex: none; background: #fff; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cp-img img { max-width: 40px; max-height: 40px; object-fit: contain; }
.cp-nm { flex: 1; min-width: 0; font: 700 12.5px/1.3 'Quicksand', sans-serif; color: #e8e8ee;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-nm i { font-style: normal; color: #8b8b96; font-weight: 600; font-size: 11px; }
.cp-nm em { display: block; font-style: normal; color: #8b8b96; font-weight: 600; font-size: 10.5px; margin-top: 2px; }
/* stepper editável (r3): −/＋ e o número DIGITÁVEL no meio */
.cp-step { display: inline-flex; align-items: center; flex: none; background: #1a1a20;
  border: 1px solid #2b2b33; border-radius: 999px; overflow: hidden; }
.cp-step button { width: 26px; height: 27px; border: 0; background: transparent; color: #e8e8ee;
  font: 800 14px/1 'Akrobat', sans-serif; cursor: pointer; opacity: .7; transition: opacity .12s, background .12s; }
.cp-step button:hover { opacity: 1; background: rgba(255,255,255,.07); }
.cp-step input { width: 34px; border: 0; background: transparent; color: #fff; text-align: center;
  font: 800 12.5px 'Quicksand', sans-serif; outline: none; appearance: textfield; -moz-appearance: textfield; }
.cp-step input::-webkit-outer-spin-button, .cp-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-step input:focus { color: #ffd7d7; }
.cp-v { flex: none; min-width: 74px; text-align: right; font: 700 12.5px 'Quicksand', sans-serif; color: #e8e8ee; }
.cp-del { flex: none; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent;
  color: #6b6b76; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: color .13s, background .13s; }
.cp-del svg { width: 15px; height: 15px; }
.cp-del:hover { color: #ff6a70; background: rgba(255,255,255,.06); }
.cp-total { display: flex; justify-content: space-between; align-items: center; margin-top: 2px;
  padding: 12px 16px 10px; border-top: 1px solid #2b2b33; font: 700 13px 'Quicksand', sans-serif; color: #c9c9d2; }
.cp-total b { font: 800 17px 'Akrobat', sans-serif; color: #fff; letter-spacing: .02em; }
.cp-total i, .cp-note i { font-style: normal; color: var(--red); font-weight: 800; }
.cp-note { padding: 2px 16px 13px; color: #7d7d88; font: 600 10.5px/1.45 'Quicksand', sans-serif; }
@media (max-width: 700px) { #cartpop { width: min(92vw, 372px); } }

/* abas de categoria (r3, geometria r5): mesma LARGURA do livro (replica o
   --bw do #book3d, só usa vw/vh) e coladas ~10px acima da borda superior
   dele (o livro é centrado no palco; era daí o vão de ~200px). Distribuem
   o espaço inteiro (space-between). SÓ vendedor online. */
#cattabs { position: fixed; z-index: 28; left: 50%; transform: translateX(-50%);
  --bw: min(96vw, calc((100vh - 118px) * 2.828), 1840px);
  width: var(--bw);
  top: max(6px, calc((100vh - 48px - (var(--bw) / 2.828)) / 2 - 72px));
  /* [11/07 R7 mestre] categorias em 2 LINHAS CHEIAS: grid de ceil(n/2) colunas
     (inline style do PHP) espalha o total na largura toda da apresentação. */
  display: none; gap: 5px; grid-auto-flow: row;
  transition: opacity .45s ease; }
body.seller-mode #cattabs { display: grid; }
#cattabs a { text-decoration: none; color: #a7a7b2; background: rgba(16,16,20,.72);
  border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 8px 6px 9px;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
  font: 800 10px/1 'Akrobat', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  transition: color .3s, border-color .3s, background .3s, opacity .35s; backdrop-filter: blur(3px); }
#cattabs a:hover { color: #fff; border-color: color-mix(in srgb, var(--red), transparent 30%); }
#cattabs a.on { color: #fff; background: var(--red); border-color: transparent; }
/* modo discreto (r5/r8): já NASCE com .dim (cart.js) e o hover no bloco
   restaura sozinho (:not(:hover)) — abas quase apagadas, só a categoria
   atual mantém o outline na cor da marca. */
#cattabs.dim:not(:hover) a { opacity: .26; background: rgba(16,16,20,.25); border-color: transparent; }
#cattabs.dim:not(:hover) a.on { opacity: .85; background: transparent; color: #e8e8ee;
  border-color: color-mix(in srgb, var(--red), transparent 20%); }
/* capa/contracapa (r8): some por completo — nada está "clicado" ali e a
   página é solta; nem hover traz de volta */
#cattabs.off { opacity: 0 !important; pointer-events: none; }
@media (max-width: 700px) { #cattabs { display: none !important; } }

/* [12/07 mestre — engine pré-live] chip PLAIN (sem ícone: kicker+valor) */
.swtag.plain { padding: 8px 16px !important; align-items: center; }
/* !important de propósito: os overrides de contexto (.sw-over do Red, minis)
   têm padding ASSIMÉTRICO herdado do chip com ícone (5-7px esq / 13-18px dir)
   e empurravam o texto do plain pra esquerda — chip sem ícone é terminal. */
.swtag.plain .swlbl { font-size: 15px; line-height: 1.1; }
.swtag.plain .swk { font-size: 9px; }
/* [12/07 mestre] solo-b/solo-c: a TAG vai pro canto sup ESQUERDO da página
   (empilhava em cima do preço no meio do bloco de texto — caso Crescent 68) */
.solo-b, .solo-c { position: relative; }
body.brand-redragon .solo-b .p-top, body.brand-redragon .solo-c .p-top {
  position: absolute; top: 16px; left: 22px; z-index: 7; margin: 0; }
/* [12/07] swap de variante (Kalkan): chip clicável + estado ativo */
.vchip.vswap { cursor: pointer; transition: border-color .2s, background .2s; }
.vchip.vswap:hover { border-color: var(--red); }
.vchip.vswap.on { background: var(--red); border-color: transparent; }
.vchip.vswap.on .vclbl, .vchip.vswap.on .vck { color: #fff; }
.vmico.vswap { cursor: pointer; }
.vmico.vswap:hover { outline: 2px solid var(--red); outline-offset: 1px; }
.vmico.vswap.on { outline: 2px solid var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red), transparent 60%); }
/* [12/07 mestre] chip plain CENTRADO (kicker e valor de larguras diferentes
   ficavam alinhados à esquerda = torto) */
.swtag.plain .swlbl { align-items: center; text-align: center; }
/* Keytime/kalkan duo: foto sobe (usa o espaço da categoria removida), texto respira */
body.brand-keytime .duo .slot, body.brand-kalkan .duo .slot { padding-top: 14px; }
body.brand-keytime .duo .s-img, body.brand-kalkan .duo .s-img { flex: 0 0 56%; }
body.brand-keytime .duo .slot { padding-bottom: 22px; }
body.brand-keytime .duo .s-sum { -webkit-line-clamp: 5; }
/* [12/07] chip plain: pill escuro com texto claro SEMPRE (era ilegível no
   solo-c vermelho e transparente demais sobre foto — casos Hakon/Avalon Curve) */
.swtag.plain { background: rgba(12, 12, 16, .82) !important; border-color: rgba(255,255,255,.28) !important; }
.swtag.plain .swlbl { color: #fff !important; }
.swtag.plain .swk { opacity: .62; }
/* [12/07] Kalkan: gabinete alto colidia com o chip no mini-coluna: foto abre
   espaço pro chip (34px de teto) */
body.brand-kalkan .slot.mini.col .s-img, body.brand-kalkan .h4-grid .s-img,
body.brand-kalkan .m6-grid .s-img, body.brand-kalkan .grid4 .s-img { padding-top: 34px; }

/* ═══ [12/07 — MARCAS NOVAS: vibe por capa + acento; motor claro base] ═══ */
/* LIAN LI: premium alumínio — capa grafite metálica, logo branca, acento preto */
body.brand-lian-li .cover { background:
  linear-gradient(160deg, #2b2e33 0%, #1a1c20 45%, #101114 100%); }
body.brand-lian-li .cover::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.05) 50%, transparent 58%); }
body.brand-lian-li .cover-title { letter-spacing: .22em; font-weight: 300; text-transform: uppercase; }
body.brand-lian-li .cover-rule { background: #9aa3ad; }
body.brand-lian-li .slot .s-name { letter-spacing: .05em; }
body.brand-lian-li .back { background: linear-gradient(160deg, #23262b, #101114); }
/* DEEPCOOL: tech gelo — capa clara com respiro, wordmark preta+teal, acento teal */
body.brand-deepcool .cover { background:
  radial-gradient(90% 70% at 70% 20%, rgba(0,167,168,.14), transparent 60%),
  linear-gradient(165deg, #ffffff, #eef4f4 70%, #dfeeee); }
body.brand-deepcool .cover-title, body.brand-deepcool .cover-sub { color: #14282a; }
body.brand-deepcool .cover-rule { background: #00a7a8; }
body.brand-deepcool .back { background: linear-gradient(160deg, #0f3436, #0a1f20); }
/* GAMDIAS: mitologia grega — capa preta com glow dourado, logo gold, acento vermelho */
body.brand-gamdias .cover { background:
  radial-gradient(70% 55% at 50% 80%, rgba(201,162,77,.22), transparent 70%),
  radial-gradient(90% 80% at 60% 15%, #17151a, #0a090c); }
body.brand-gamdias .cover-title { color: #e7cf9c; letter-spacing: .18em; text-transform: uppercase; }
body.brand-gamdias .cover-rule { background: #c9a24d; }
body.brand-gamdias .cover .cover-logo { max-height: 300px; width: auto; }
body.brand-gamdias .back { background: radial-gradient(90% 80% at 50% 20%, #17151a, #0a090c); }

/* ═══ [14/07 — 4 MARCAS por faturamento: hiksemi, xp-pen, r by redragon,
   macrovip] vibe por capa + acento, mesmo motor das 3 de 12/07 ═══ */
/* HIKSEMI: storage da família Hikvision — preto com corte vermelho da marca */
body.brand-hiksemi .cover { background:
  linear-gradient(115deg, rgba(225,0,18,.15), transparent 55%),
  linear-gradient(160deg, #1c1214 0%, #121013 55%, #0b0a0c 100%); }
body.brand-hiksemi .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-hiksemi .cover-rule { background: #e10012; }
body.brand-hiksemi .back { background: linear-gradient(160deg, #1c1214, #0b0a0c); }
body.brand-hiksemi .about { background: linear-gradient(160deg, #201316, #0e0b0c); }
/* XP-PEN: marca de criação, wordmark p&b — grafite limpo, acento prata,
   Novidade grafite (mesma doutrina zero-vermelho do Lian Li) */
body.brand-xp-pen .cover { background:
  linear-gradient(160deg, #26282e 0%, #17181d 50%, #0f1013 100%); }
body.brand-xp-pen .cover::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 44%, rgba(255,255,255,.045) 50%, transparent 56%); }
body.brand-xp-pen .cover-title { letter-spacing: .2em; font-weight: 300; text-transform: uppercase; }
body.brand-xp-pen .cover-rule { background: #b9c2cc; }
/* [14/07 mestre] glow VERMELHO era o drop-shadow default (era Redragon):
   marca p&b leva sombra neutra */
body.brand-xp-pen .cover .cover-logo { max-height: 300px; width: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.55)); }
body.brand-xp-pen .back { background: linear-gradient(160deg, #202228, #0f1013); }
body.brand-xp-pen .about { background: linear-gradient(160deg, #23252b, #101114); }
body.brand-xp-pen .newb { background: #3a4046; color: #fff; }
body.brand-xp-pen .newb.best { background: #17171e; color: #fff; }
/* R BY REDRAGON: linha office — DNA Redragon, preto + vermelho */
body.brand-r-by-redragon .cover { background:
  radial-gradient(70% 60% at 50% 75%, rgba(224,14,49,.14), transparent 70%),
  radial-gradient(90% 80% at 60% 20%, #221016, #0b0a0d); }
body.brand-r-by-redragon .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-r-by-redragon .cover-rule { background: #E00E31; }
body.brand-r-by-redragon .cover .cover-logo { max-height: 320px; width: auto; }
body.brand-r-by-redragon .back { background: radial-gradient(90% 80% at 60% 20%, #221016, #0b0a0d); }
body.brand-r-by-redragon .about { background: linear-gradient(160deg, #221016, #0d0a0c); }
/* MACROVIP: verde da própria logo sobre grafite escuro */
body.brand-macrovip .cover { background:
  radial-gradient(80% 65% at 65% 20%, rgba(64,160,96,.16), transparent 65%),
  linear-gradient(160deg, #10231a 0%, #0d1512 55%, #090c0a 100%); }
body.brand-macrovip .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-macrovip .cover-rule { background: #40a060; }
body.brand-macrovip .cover-logo { filter: drop-shadow(0 10px 30px rgba(0,0,0,.55)); }
body.brand-macrovip .back { background: linear-gradient(160deg, #0f1f17, #090c0a); }
body.brand-macrovip .about { background: linear-gradient(160deg, #12291e, #0a0f0c); }
body.brand-macrovip .newb { background: #40a060; color: #0a1710; }
/* runa Kalkan fora das 4 (mesma doutrina das 3 de 12/07) */
body.brand-hiksemi .about::before,  body.brand-xp-pen .about::before,  body.brand-r-by-redragon .about::before,  body.brand-macrovip .about::before,
body.brand-hiksemi .back::before,   body.brand-xp-pen .back::before,   body.brand-r-by-redragon .back::before,   body.brand-macrovip .back::before,
body.brand-hiksemi .filler::before, body.brand-xp-pen .filler::before, body.brand-r-by-redragon .filler::before, body.brand-macrovip .filler::before,
body.brand-hiksemi .slot::before,   body.brand-xp-pen .slot::before,   body.brand-r-by-redragon .slot::before,   body.brand-macrovip .slot::before,
body.brand-hiksemi .solo-b .sb-txt::before, body.brand-xp-pen .solo-b .sb-txt::before, body.brand-r-by-redragon .solo-b .sb-txt::before, body.brand-macrovip .solo-b .sb-txt::before,
body.brand-hiksemi .solo-c::before, body.brand-xp-pen .solo-c::before, body.brand-r-by-redragon .solo-c::before, body.brand-macrovip .solo-c::before,
body.brand-hiksemi .cover::before,  body.brand-r-by-redragon .cover::before,  body.brand-macrovip .cover::before { background: none; }

/* ═══ [15/07 — 16 MARCAS por faturamento com estoque: akko trust cougar
   t-dagger zomoplus nzxt ocypus grizzly maono creative scythe monsgeek lamzu
   cudy ingrem fsp] cores sampleadas das logos oficiais; mesmo motor das 4 de
   14/07. nzxt clareado do indigo #51007A p/ leitura no escuro ═══ */
body.brand-akko .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(111,92,174,.15), transparent 66%),
  linear-gradient(160deg, #1a1726 0%, #111018 55%, #09090c 100%); }
body.brand-akko .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-akko .cover-rule { background: #6f5cae; }
body.brand-akko .back { background: linear-gradient(160deg, #15131e, #090a0c); }
body.brand-akko .about { background: linear-gradient(160deg, #191624, #0b0c0e); }
body.brand-akko .newb { background: #6f5cae; color: #fff; }
body.brand-trust .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(224,32,27,.15), transparent 66%),
  linear-gradient(160deg, #2a0f12 0%, #190c0e 55%, #09090c 100%); }
body.brand-trust .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-trust .cover-rule { background: #e0201b; }
body.brand-trust .back { background: linear-gradient(160deg, #200d0f, #090a0c); }
body.brand-trust .about { background: linear-gradient(160deg, #260f12, #0b0c0e); }
body.brand-trust .newb { background: #e0201b; color: #fff; }
body.brand-cougar .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(228,108,0,.15), transparent 66%),
  linear-gradient(160deg, #2a190e 0%, #19110c 55%, #09090c 100%); }
body.brand-cougar .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-cougar .cover-rule { background: #e46c00; }
body.brand-cougar .back { background: linear-gradient(160deg, #21150d, #090a0c); }
body.brand-cougar .about { background: linear-gradient(160deg, #27180f, #0b0c0e); }
body.brand-cougar .newb { background: #e46c00; color: #fff; }
body.brand-t-dagger .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(57,213,45,.15), transparent 66%),
  linear-gradient(160deg, #122814 0%, #0d180f 55%, #09090c 100%); }
body.brand-t-dagger .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-t-dagger .cover-rule { background: #39d52d; }
body.brand-t-dagger .back { background: linear-gradient(160deg, #101f11, #090a0c); }
body.brand-t-dagger .about { background: linear-gradient(160deg, #122514, #0b0c0e); }
body.brand-t-dagger .newb { background: #39d52d; color: #0c0c0e; }
body.brand-zomoplus .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(195,202,210,.15), transparent 66%),
  linear-gradient(160deg, #26272b 0%, #17171b 55%, #09090c 100%); }
body.brand-zomoplus .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-zomoplus .cover-rule { background: #c3cad2; }
body.brand-zomoplus .back { background: linear-gradient(160deg, #1d1e22, #090a0c); }
body.brand-zomoplus .about { background: linear-gradient(160deg, #232428, #0b0c0e); }
body.brand-zomoplus .newb { background: #c3cad2; color: #0c0c0e; }
body.brand-nzxt .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(123,51,201,.15), transparent 66%),
  linear-gradient(160deg, #1c112a 0%, #120d1a 55%, #09090c 100%); }
body.brand-nzxt .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-nzxt .cover-rule { background: #7b33c9; }
body.brand-nzxt .back { background: linear-gradient(160deg, #160f21, #090a0c); }
body.brand-nzxt .about { background: linear-gradient(160deg, #1a1227, #0b0c0e); }
body.brand-nzxt .newb { background: #7b33c9; color: #fff; }
body.brand-ocypus .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(232,176,88,.15), transparent 66%),
  linear-gradient(160deg, #2b231a 0%, #1a1612 55%, #09090c 100%); }
body.brand-ocypus .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-ocypus .cover-rule { background: #e8b058; }
body.brand-ocypus .back { background: linear-gradient(160deg, #211c15, #090a0c); }
body.brand-ocypus .about { background: linear-gradient(160deg, #27211a, #0b0c0e); }
body.brand-ocypus .newb { background: #e8b058; color: #0c0c0e; }
body.brand-grizzly .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(224,64,32,.15), transparent 66%),
  linear-gradient(160deg, #2a1312 0%, #190e0e 55%, #09090c 100%); }
body.brand-grizzly .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-grizzly .cover-rule { background: #e04020; }
body.brand-grizzly .back { background: linear-gradient(160deg, #201010, #090a0c); }
body.brand-grizzly .about { background: linear-gradient(160deg, #261313, #0b0c0e); }
body.brand-grizzly .newb { background: #e04020; color: #fff; }
body.brand-maono .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(242,175,13,.15), transparent 66%),
  linear-gradient(160deg, #2c2310 0%, #1a160d 55%, #09090c 100%); }
body.brand-maono .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-maono .cover-rule { background: #f2af0d; }
body.brand-maono .back { background: linear-gradient(160deg, #221b0e, #090a0c); }
body.brand-maono .about { background: linear-gradient(160deg, #282011, #0b0c0e); }
body.brand-maono .newb { background: #f2af0d; color: #0c0c0e; }
body.brand-creative .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(195,202,210,.15), transparent 66%),
  linear-gradient(160deg, #26272b 0%, #17171b 55%, #09090c 100%); }
body.brand-creative .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-creative .cover-rule { background: #c3cad2; }
body.brand-creative .back { background: linear-gradient(160deg, #1d1e22, #090a0c); }
body.brand-creative .about { background: linear-gradient(160deg, #232428, #0b0c0e); }
body.brand-creative .newb { background: #c3cad2; color: #0c0c0e; }
body.brand-scythe .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(156,0,0,.15), transparent 66%),
  linear-gradient(160deg, #200a0e 0%, #14090c 55%, #09090c 100%); }
body.brand-scythe .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-scythe .cover-rule { background: #9c0000; }
body.brand-scythe .back { background: linear-gradient(160deg, #1a0a0d, #090a0c); }
body.brand-scythe .about { background: linear-gradient(160deg, #1e0b0f, #0b0c0e); }
body.brand-scythe .newb { background: #9c0000; color: #fff; }
body.brand-monsgeek .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(195,202,210,.15), transparent 66%),
  linear-gradient(160deg, #26272b 0%, #17171b 55%, #09090c 100%); }
body.brand-monsgeek .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-monsgeek .cover-rule { background: #c3cad2; }
body.brand-monsgeek .back { background: linear-gradient(160deg, #1d1e22, #090a0c); }
body.brand-monsgeek .about { background: linear-gradient(160deg, #232428, #0b0c0e); }
body.brand-monsgeek .newb { background: #c3cad2; color: #0c0c0e; }
body.brand-lamzu .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(3,154,255,.15), transparent 66%),
  linear-gradient(160deg, #0b2031 0%, #0a141e 55%, #09090c 100%); }
body.brand-lamzu .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-lamzu .cover-rule { background: #039aff; }
body.brand-lamzu .back { background: linear-gradient(160deg, #0a1926, #090a0c); }
body.brand-lamzu .about { background: linear-gradient(160deg, #0c1e2e, #0b0c0e); }
body.brand-lamzu .newb { background: #039aff; color: #0c0c0e; }
body.brand-cudy .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(51,79,180,.15), transparent 66%),
  linear-gradient(160deg, #111527 0%, #0d0f19 55%, #09090c 100%); }
body.brand-cudy .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-cudy .cover-rule { background: #334fb4; }
body.brand-cudy .back { background: linear-gradient(160deg, #0f121f, #090a0c); }
body.brand-cudy .about { background: linear-gradient(160deg, #121525, #0b0c0e); }
body.brand-cudy .newb { background: #334fb4; color: #fff; }
body.brand-ingrem .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(16,132,116,.15), transparent 66%),
  linear-gradient(160deg, #0d1d1e 0%, #0a1314 55%, #09090c 100%); }
body.brand-ingrem .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-ingrem .cover-rule { background: #108474; }
body.brand-ingrem .back { background: linear-gradient(160deg, #0c1718, #090a0c); }
body.brand-ingrem .about { background: linear-gradient(160deg, #0d1b1d, #0b0c0e); }
body.brand-ingrem .newb { background: #108474; color: #fff; }
body.brand-fsp .cover { background:
  radial-gradient(80% 65% at 62% 20%, rgba(0,102,204,.15), transparent 66%),
  linear-gradient(160deg, #0a192a 0%, #09101a 55%, #09090c 100%); }
body.brand-fsp .cover-title { letter-spacing: .18em; text-transform: uppercase; }
body.brand-fsp .cover-rule { background: #0066cc; }
body.brand-fsp .back { background: linear-gradient(160deg, #0a1421, #090a0c); }
body.brand-fsp .about { background: linear-gradient(160deg, #0b1827, #0b0c0e); }
body.brand-fsp .newb { background: #0066cc; color: #fff; }
/* runa Kalkan fora das 16 (mesma doutrina das marcas anteriores) */
  body.brand-akko .cover::before, body.brand-akko .about::before, body.brand-akko .back::before, body.brand-akko .filler::before,
  body.brand-akko .slot::before, body.brand-akko .solo-b .sb-txt::before, body.brand-akko .solo-c::before, body.brand-trust .cover::before,
  body.brand-trust .about::before, body.brand-trust .back::before, body.brand-trust .filler::before, body.brand-trust .slot::before,
  body.brand-trust .solo-b .sb-txt::before, body.brand-trust .solo-c::before, body.brand-cougar .cover::before, body.brand-cougar .about::before,
  body.brand-cougar .back::before, body.brand-cougar .filler::before, body.brand-cougar .slot::before, body.brand-cougar .solo-b .sb-txt::before,
  body.brand-cougar .solo-c::before, body.brand-t-dagger .cover::before, body.brand-t-dagger .about::before, body.brand-t-dagger .back::before,
  body.brand-t-dagger .filler::before, body.brand-t-dagger .slot::before, body.brand-t-dagger .solo-b .sb-txt::before, body.brand-t-dagger .solo-c::before,
  body.brand-zomoplus .cover::before, body.brand-zomoplus .about::before, body.brand-zomoplus .back::before, body.brand-zomoplus .filler::before,
  body.brand-zomoplus .slot::before, body.brand-zomoplus .solo-b .sb-txt::before, body.brand-zomoplus .solo-c::before, body.brand-nzxt .cover::before,
  body.brand-nzxt .about::before, body.brand-nzxt .back::before, body.brand-nzxt .filler::before, body.brand-nzxt .slot::before,
  body.brand-nzxt .solo-b .sb-txt::before, body.brand-nzxt .solo-c::before, body.brand-ocypus .cover::before, body.brand-ocypus .about::before,
  body.brand-ocypus .back::before, body.brand-ocypus .filler::before, body.brand-ocypus .slot::before, body.brand-ocypus .solo-b .sb-txt::before,
  body.brand-ocypus .solo-c::before, body.brand-grizzly .cover::before, body.brand-grizzly .about::before, body.brand-grizzly .back::before,
  body.brand-grizzly .filler::before, body.brand-grizzly .slot::before, body.brand-grizzly .solo-b .sb-txt::before, body.brand-grizzly .solo-c::before,
  body.brand-maono .cover::before, body.brand-maono .about::before, body.brand-maono .back::before, body.brand-maono .filler::before,
  body.brand-maono .slot::before, body.brand-maono .solo-b .sb-txt::before, body.brand-maono .solo-c::before, body.brand-creative .cover::before,
  body.brand-creative .about::before, body.brand-creative .back::before, body.brand-creative .filler::before, body.brand-creative .slot::before,
  body.brand-creative .solo-b .sb-txt::before, body.brand-creative .solo-c::before, body.brand-scythe .cover::before, body.brand-scythe .about::before,
  body.brand-scythe .back::before, body.brand-scythe .filler::before, body.brand-scythe .slot::before, body.brand-scythe .solo-b .sb-txt::before,
  body.brand-scythe .solo-c::before, body.brand-monsgeek .cover::before, body.brand-monsgeek .about::before, body.brand-monsgeek .back::before,
  body.brand-monsgeek .filler::before, body.brand-monsgeek .slot::before, body.brand-monsgeek .solo-b .sb-txt::before, body.brand-monsgeek .solo-c::before,
  body.brand-lamzu .cover::before, body.brand-lamzu .about::before, body.brand-lamzu .back::before, body.brand-lamzu .filler::before,
  body.brand-lamzu .slot::before, body.brand-lamzu .solo-b .sb-txt::before, body.brand-lamzu .solo-c::before, body.brand-cudy .cover::before,
  body.brand-cudy .about::before, body.brand-cudy .back::before, body.brand-cudy .filler::before, body.brand-cudy .slot::before,
  body.brand-cudy .solo-b .sb-txt::before, body.brand-cudy .solo-c::before, body.brand-ingrem .cover::before, body.brand-ingrem .about::before,
  body.brand-ingrem .back::before, body.brand-ingrem .filler::before, body.brand-ingrem .slot::before, body.brand-ingrem .solo-b .sb-txt::before,
  body.brand-ingrem .solo-c::before, body.brand-fsp .cover::before, body.brand-fsp .about::before, body.brand-fsp .back::before,
  body.brand-fsp .filler::before, body.brand-fsp .slot::before, body.brand-fsp .solo-b .sb-txt::before, body.brand-fsp .solo-c::before { background: none; }

/* ═══ [12/07 mestre] MIOLO das 3 marcas novas: cada marca é OUTRA marca ═══
   Runa é assinatura da KALKAN: some das 3 (capa, sobre, contracapa, filler,
   slots e solos). Paleta do miolo alinha com a capa aprovada. */
body.brand-lian-li .about::before,  body.brand-deepcool .about::before,  body.brand-gamdias .about::before,
body.brand-lian-li .back::before,   body.brand-deepcool .back::before,   body.brand-gamdias .back::before,
body.brand-lian-li .filler::before, body.brand-deepcool .filler::before, body.brand-gamdias .filler::before,
body.brand-lian-li .slot::before,   body.brand-deepcool .slot::before,   body.brand-gamdias .slot::before,
body.brand-lian-li .solo-b .sb-txt::before, body.brand-deepcool .solo-b .sb-txt::before, body.brand-gamdias .solo-b .sb-txt::before,
body.brand-lian-li .solo-c::before, body.brand-deepcool .solo-c::before, body.brand-gamdias .solo-c::before { background: none; }
body.brand-deepcool .cover::before, body.brand-gamdias .cover::before { background: none; }

/* LIAN LI: grafite/prata minimal. [12/07 mestre, 2ª rodada] ZERO vermelho de
   tema ("tem coisa hardcoded em vermelho até nos Lian Li"): o acento é
   ALUMÍNIO. Vermelho que sobrar em foto é do produto (collabs), não nosso. */
body.brand-lian-li { --llacc: #8f98a3; }
body.brand-lian-li .s-name::before { background: var(--llacc); }
body.brand-lian-li .newb { background: #3a4046; color: #fff; } /* Novidade grafite (sem vermelho) */
body.brand-lian-li .newb.best { background: #17171e; color: #fff; }
body.brand-lian-li .slot.c-d .newb.best { background: #fff; color: #17171e; }
body.brand-lian-li .vchip.vswap:hover { border-color: var(--llacc); }
body.brand-lian-li .vchip.vswap.on { background: var(--llacc); }
body.brand-lian-li .about { background: linear-gradient(160deg, #23262b, #101114); }

/* GAMDIAS: preto + DOURADO no miolo (capa já era; --red virou #c9a24d).
   Bloco de destaque c-r = bronze escuro com nome dourado (ouro chapado com
   texto branco reprovava contraste) */
body.brand-gamdias .slot.c-r { background: linear-gradient(165deg, #2c2517, #14100a); }
body.brand-gamdias .slot.c-r .s-name { color: #e7cf9c; }
body.brand-gamdias .slot.c-d .s-name { color: #e7cf9c; }
body.brand-gamdias .slot.c-w .s-name, body.brand-gamdias .slot.c-g .s-name { color: #6f5518; }
body.brand-gamdias .newb { background: #c9a24d; color: #17130a; }
body.brand-gamdias .slot.c-r .newb, body.brand-gamdias .slot.c-d .newb { background: #e7cf9c; color: #17130a; }
body.brand-gamdias .newb.best { background: #17171e; color: #e7cf9c; }
body.brand-gamdias .about { background: linear-gradient(160deg, #241e10, #0e0b06); }
body.brand-gamdias .solo-c { background: linear-gradient(165deg, #2c2517, #14100a); }
/* [12/07 QA] speclist no slot ESCURO ficava invisível (default cinza-escuro):
   mesmo tratamento que o c-r já tinha (flip.css ~104) */
.slot.c-d .speclist li { color: #c9c9d2; }
.slot.c-d .speclist b { color: #fff; }

/* ═══ [12/07 mestre] CATÁLOGO SOLID (marca virtual, todas as live) ═══
   Identidade irmã da Keytime: Bai Jamjuree + roxo. Zero runa. Marca em
   kicker pequeno sobre o nome (s-mk). */
body.brand-solid { font-family: 'Bai Jamjuree', system-ui, sans-serif; }
body.brand-solid .s-name, body.brand-solid .cover-title,
body.brand-solid .about-in h2, body.brand-solid .back-slogan,
body.brand-solid .newb, body.brand-solid .noimg { font-family: 'Bai Jamjuree', sans-serif; }
body.brand-solid .cover::before,  body.brand-solid .about::before,
body.brand-solid .back::before,   body.brand-solid .filler::before,
body.brand-solid .slot::before,   body.brand-solid .solo-b .sb-txt::before,
body.brand-solid .solo-c::before { background: none; }
body.brand-solid .cover { background: radial-gradient(110% 120% at 50% -20%, #3a1a66, #16101f 70%); }
body.brand-solid .cover-logo { filter: drop-shadow(0 8px 28px rgba(136,0,250,.5)); max-width: 380px; }
body.brand-solid .back { background: radial-gradient(110% 120% at 50% -20%, #3a1a66, #16101f 70%); }
body.brand-solid .about { background: linear-gradient(165deg, #5e13a8, #2c0a52); }
body.brand-solid .slot.c-r { background: linear-gradient(165deg, #8800fa, #5c00b8); }
body.brand-solid .slot.c-d { background: linear-gradient(165deg, #2b2436, #171220); }
body.brand-solid .slot.c-w .s-name, body.brand-solid .slot.c-g .s-name { color: #5c00b8; }
/* kicker de marca (modo solid): pequenininho, em cima do nome */
.s-mk { display: block; font: 700 9.5px/1 'Bai Jamjuree', sans-serif; letter-spacing: .22em;
  text-transform: uppercase; opacity: .58; margin: 0 0 5px; }
.slot.c-r .s-mk, .slot.c-d .s-mk { color: #fff; opacity: .66; }

/* ═══ [12/07 mestre] SUMÁRIO de categorias (página toc, todo catálogo 4+) ═══ */
.toc { background: linear-gradient(165deg, #f2f2f5, #e2e2e8); align-items: center; justify-content: center; }
.toc-in { width: 84%; position: relative; }
.toc-in h2 { font: 800 30px/1.1 'Akrobat', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #1c1c22; margin: 0 0 10px; }
body.brand-solid .toc-in h2, body.brand-keytime .toc-in h2 { font-family: 'Bai Jamjuree', sans-serif; }
.toc-rule { width: 92px; height: 4px; background: var(--red); margin-bottom: 22px; }
.toc-g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 44px; }
.toc-g.dense { grid-template-columns: repeat(3, 1fr); gap: 5px 30px; }
.tc-row { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: #26262e;
  font: 700 13.5px/1.3 inherit; border-bottom: 1px dotted rgba(0,0,0,.22); padding-bottom: 4px; }
.toc-g.dense .tc-row { font-size: 11.5px; }
.tc-n { flex: 1; letter-spacing: .02em; }
.tc-n i { font-style: normal; font-weight: 400; font-size: .82em; color: #8b8b96; margin-left: 7px; }
.tc-p { font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
body.brand-lian-li .tc-p { color: #566069; } /* aço escuro: alumínio puro não lê no fundo claro */
body.brand-lian-li .toc-rule { background: var(--llacc); }
body.brand-lian-li .vchip.vswap.on .vclbl, body.brand-lian-li .vchip.vswap.on .vck { color: #14161a; }
a.tc-row:hover .tc-n { color: var(--red); }
/* tema escuro (solid): página do sumário acompanha */
body.brand-solid .toc { background: linear-gradient(165deg, #241b33, #151020); }
body.brand-solid .toc-in h2 { color: #fff; }
body.brand-solid .tc-row { color: #ddd6ea; border-bottom-color: rgba(255,255,255,.16); }
body.brand-solid .tc-n i { color: #8f87a3; }
body.brand-solid .tc-p { color: #b76bff; }


/* ═══ [12/07 mestre] menu de MOTIVO do flag (staff). [15/07] +produto/nome/
   spec errados; voa no <body> (position:fixed via cart.js) porque o clipping
   dos slots voltou e cortaria o dropdown dentro de card pequeno. ═══ */
.repmenu { position: fixed; z-index: 9000; min-width: 192px;
  background: #16161c; border: 1px solid rgba(255,255,255,.18); border-radius: 10px;
  padding: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.repmenu button { display: block; width: 100%; text-align: left; background: none; border: 0;
  color: #e6e6ee; font: 600 12px/1.3 system-ui, sans-serif; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.repmenu button:hover { background: rgba(255,255,255,.09); }
.repmenu button.rm-undo { color: #9a9aa6; border-top: 1px solid rgba(255,255,255,.12); border-radius: 0 0 7px 7px; margin-top: 4px; }
.repmenu .rm-k { display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #8b8b96; padding: 4px 10px 2px; }
.imgrep.done[data-fix="done"] { background: #1f7a3d; border-color: transparent; } /* verde: auto-fix rodou */
.imgrep.done[data-fix="fix_failed"] { background: #6b4a00; border-color: transparent; } /* âmbar: precisa de humano */