/* ==========================================================================
   GStarz — galeria de mídia da Steam, card de compra e player.
   --------------------------------------------------------------------------
   Vive fora do core.css por dois motivos:

   1. O core.css bateu no teto de 64 KB que a CentralCart aceita por arquivo.
      Passando disso o arquivo simplesmente para de sincronizar, sem erro
      nenhum no log do watcher — o servidor continua servindo a versão
      anterior. Foi assim que os estilos do volume e da qualidade não subiram.

   2. Só a página de produto de JOGO usa esses estilos, e o package.html só
      inclui este arquivo lá. Quem abre carrinho, checkout ou key aleatória
      não baixa nada disso.
   ========================================================================== */

/* ============================================================
   Galeria de mídia da Steam (trailer + prints) — package.html
   Só existe em produto de jogo; ver scripts/steam-gallery.js.
   Sem dependência de plugin: o palco é 16:9 fixo (aspect-ratio)
   para a página não "pular" enquanto a mídia carrega.
   ============================================================ */

#steam-gallery {
  width: 100%;
  min-width: 0;
}

/* Reserva o espaço antes da resposta chegar. Sem isto o conteúdo
   abaixo sobe e desce quando a galeria monta (layout shift). */
#steam-gallery:not(.sg-pronto)::before {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  border: 1px solid #161325;
  background: linear-gradient(100deg, #14121d 30%, #1b1828 50%, #14121d 70%);
  background-size: 220% 100%;
  animation: sg-brilho 1.4s ease-in-out infinite;
}

@keyframes sg-brilho {
  from { background-position: 180% 0; }
  to   { background-position: -40% 0; }
}

.sg-palco {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid #161325;
  background: #0b0912;
}

.sg-foto,
.sg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sg-video { opacity: 0; pointer-events: none; }

.sg-modo-video.sg-tocando .sg-video { opacity: 1; pointer-events: auto; }
.sg-modo-video.sg-tocando .sg-foto  { opacity: 0; }

/* Botão grande de play sobre o poster do trailer. */
.sg-capa {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 5, 12, 0.35);
  border: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.sg-modo-video:not(.sg-tocando) .sg-capa { display: flex; }
.sg-capa:hover { background: rgba(6, 5, 12, 0.15); }

.sg-capa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding-left: 4px;
  border-radius: 9999px;
  color: #fff;
  background: rgba(147, 51, 234, 0.9);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s;
}

.sg-capa:hover .sg-capa-btn { transform: scale(1.08); }
.sg-capa-btn svg { width: 26px; height: 26px; }

/* Spinner enquanto o hls.js e o manifesto carregam (só no 1º play). */
.sg-carregando { display: none; }

.sg-ocupado .sg-carregando {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #a855f7;
  border-radius: 9999px;
  animation: sg-girar 0.7s linear infinite;
}

.sg-ocupado .sg-capa-btn { opacity: 0; }

@keyframes sg-girar { to { transform: rotate(360deg); } }

.sg-controles {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: none;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: linear-gradient(to top, rgba(6, 5, 12, 0.92), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.sg-modo-video.sg-tocando .sg-controles { display: flex; }
.sg-palco:hover .sg-controles,
.sg-palco:focus-within .sg-controles { opacity: 1; }

.sg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.375rem;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
}

.sg-btn:hover { background: rgba(255, 255, 255, 0.14); }

.sg-tempo {
  flex: none;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: #d4d4d8;
}

.sg-linha {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  min-width: 40px;
  /* A barra visível tem 4px, mas 4px é fino demais para acertar com o mouse
     e quase impossível com o dedo. As bordas transparentes esticam a área
     clicável para 18px sem engordar o traço: `content-box` impede que elas
     comam a altura, e `background-clip` mantém a cor só no miolo. */
  box-sizing: content-box;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  background-color: rgba(255, 255, 255, 0.22);
  background-clip: padding-box;
  border-radius: 9999px;
  cursor: pointer;
  /* Sem isto, arrastar a barra no celular rola a página junto. */
  touch-action: none;
}

.sg-progresso {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: 9999px;
  background: #a855f7;
}

/* Bolinha na ponta do progresso: mostra onde o arrasto vai pegar. Aparece
   ao passar o mouse na barra e fica fixa enquanto arrasta. */
.sg-progresso::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem -0.375rem 0 0;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}

.sg-linha:hover .sg-progresso::after,
.sg-linha-ativa .sg-progresso::after {
  opacity: 1;
  transform: scale(1);
}

/* ── Faixa de miniaturas ─────────────────────────────────── */
.sg-faixa {
  position: relative;
  margin-top: 0.625rem;
}

.sg-trilho {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px;
}

.sg-trilho::-webkit-scrollbar { display: none; }

.sg-mini {
  position: relative;
  flex: 0 0 auto;
  width: 6.5rem;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: #14121d;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, border-color 0.15s;
}

.sg-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-mini:hover { opacity: 0.85; }
.sg-mini-ativa { opacity: 1; border-color: #a855f7; }

.sg-mini-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(6, 5, 12, 0.35);
}

.sg-mini-play svg { width: 15px; height: 15px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }

.sg-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -0.875rem;
  border: 1px solid #241f38;
  border-radius: 9999px;
  color: #fff;
  background: rgba(12, 10, 22, 0.9);
  cursor: pointer;
}

.sg-nav-antes  { left: -0.5rem; }
.sg-nav-depois { right: -0.5rem; }
.sg-nav-antes svg { transform: rotate(180deg); }
.sg-faixa:hover .sg-nav { display: flex; }

@media (max-width: 640px) {
  .sg-nav { display: none !important; }
  .sg-mini { width: 5.25rem; }
  .sg-controles { opacity: 1; }
}

/* Gêneros preenchidos pela mesma resposta da API. */


/* ============================================================
   Card de compra dos jogos: nota do Metacritic e diálogo de
   requisitos de sistema. Preenchidos pelo steam-gallery.js com
   a mesma resposta da galeria.
   ============================================================ */

.sg-nota-boa   { background: rgba(34, 197, 94, 0.15);  color: #4ade80; }
.sg-nota-media { background: rgba(234, 179, 8, 0.15);  color: #facc15; }
.sg-nota-ruim  { background: rgba(239, 68, 68, 0.15);  color: #f87171; }

/* ============================================================
   Chip "Tipo de acesso" do card de compra.

   Retângulo de cantos arredondados (10px) — NÃO cápsula. Fundo
   quase preto com veio roxo e borda roxa fechada. O logo da
   Steam fica num círculo roxo cheio, em 14px: abaixo disso a
   marca (que já é um círculo com anel e detalhe interno) vira
   um borrão e parece um ícone quebrado.
   ============================================================ */

/* ============================================================
   Chips de "Gêneros" e "Tipo de acesso" no card de compra.

   Visual limpo, monocromático: fundo escuro, borda discreta,
   ícone em linha e texto claro. Nada de roxo aqui — o roxo do
   tema fica para o que é ação (botão de compra, desconto), e
   estes chips são informação, não chamada para clique.
   ============================================================ */

.sg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  /* flex: none impede que o container espreme o chip: era isso que
     amassava o ícone da Steam em telas mais estreitas. */
  flex: none;
  max-width: 100%;
  padding: 0.3125rem 0.5625rem;
  border: 1px solid #262433;
  border-radius: 0.5rem;
  background: #17151f;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: #e5e7eb;
  white-space: nowrap;
}

/* O ícone fica um tom abaixo do texto para não competir com ele. */
.sg-chip svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: #9ca3af;
}

/* O de acesso é o mesmo chip, só um pouco maior e em roxo: é a
   informação que mais pesa na decisão de compra, então ela puxa
   a cor do tema enquanto os gêneros ficam neutros. */
.sg-chip-acesso {
  padding: 0.4375rem 0.625rem;
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(147, 51, 234, 0.12);
  font-size: 0.875rem;
  /* Roxo claro em vez de branco: o texto passa a fazer parte do chip em vez
     de brigar com ele. Para testar em cinza, troque por #d1d5db. */
  color: #d8b4fe;
  /* A caixa inteira explica o tipo de acesso ao passar o mouse — o cursor
     avisa que há explicação ali. */
  cursor: help;
}

.sg-chip-acesso svg { width: 15px; height: 15px; color: #c084fc; }

.sg-chip-acesso .sg-chip-ajuda {
  border-color: rgba(168, 85, 247, 0.4);
  color: #c4b5fd;
}

.sg-chip-acesso .sg-chip-ajuda:hover { border-color: #a855f7; color: #fff; }

.sg-chip-ajuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-left: 0.125rem;
  padding: 0;
  border: 1px solid #35323f;
  border-radius: 9999px;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #9ca3af;
  cursor: help;
  transition: border-color 0.15s, color 0.15s;
}

.sg-chip-ajuda:hover { border-color: #6b7280; color: #fff; }

/* ============================================================
   Balão de explicação do "Tipo de acesso".

   Substitui o `title` do navegador, que demora ~1s para abrir,
   usa a fonte do sistema e não combina com o site.

   Fica ancorado na LINHA (gêneros + tipo de acesso), não no
   chip: preso ao chip ele estourava para fora do card, e o card
   tem overflow-hidden, então o texto era cortado. Ancorado na
   linha, ele ocupa a largura toda e cabe sempre.
   ============================================================ */

.sg-dica-area {
  position: relative;
}

.sg-dica-balao {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 30;
  padding: 0.5625rem 0.75rem;
  border: 1px solid #2a2438;
  border-radius: 0.5rem;
  background: #0C0A16;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #d1d5db;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}

.sg-dica-area.sg-dica-on .sg-dica-balao {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sg-dica { cursor: help; }

.sg-dica:focus-visible {
  outline: 1px solid rgba(168, 85, 247, 0.6);
  outline-offset: 2px;
}

/* ============================================================
   Linhas de informação do card (Entrega, Estoque, Lançamento,
   Metacritic). Rótulo com ícone à esquerda, valor à direita.

   Ícone e rótulo ficam em cinza baixo de propósito: quem o
   cliente lê é o valor. O ícone dá varredura rápida sem virar
   ruído.
   ============================================================ */

.sg-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* hidden do Tailwind precisa vencer o display:flex acima, senão
   a linha de Metacritic apareceria mesmo em jogo sem nota. */
.sg-info.hidden { display: none; }

.sg-info + .sg-info { margin-top: 0.625rem; }

.sg-info-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #8b8a99;
}

.sg-info-rotulo svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: #56546a;
}

.sg-info-valor {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e5e7eb;
  text-align: right;
}

.sg-info-roxo { color: #c084fc; }

/* Estoque baixo. Âmbar em vez de vermelho: é um aviso, não um erro. */
.sg-info-alerta { color: #fbbf24; }

.sg-info-nota {
  padding: 0.125rem 0.4375rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* ============================================================
   Abas acima do player: "Visão geral" e "Requisitos de Sistema".
   ============================================================ */

.sg-abas {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #1c1a26;
  overflow-x: auto;
  scrollbar-width: none;
}

.sg-abas::-webkit-scrollbar { display: none; }

.sg-aba {
  position: relative;
  flex: none;
  padding: 0 0 0.75rem;
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: #8b8a99;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s;
}

.sg-aba:hover { color: #d1d5db; }

/* O sublinhado é um pseudo-elemento e não um border-bottom para o texto não
   se deslocar meio pixel ao alternar de aba. */
.sg-aba::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: #a855f7;
  opacity: 0;
  transition: opacity 0.15s;
}

.sg-aba-ativa { color: #fff; }
.sg-aba-ativa::after { opacity: 1; }

/* ============================================================
   Requisitos de sistema: dois cards lado a lado (mínimo e
   recomendado), um embaixo do outro no celular.
   ============================================================ */

.sg-req-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 720px) {
  .sg-req-grid { grid-template-columns: 1fr; }
}

.sg-req-bloco {
  padding: 1.125rem;
  border: 1px solid #1c1a26;
  border-radius: 0.75rem;
  background: #100e18;
}

.sg-req-titulo {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a855f7;
}

/* O aviso de 64 bits que a Steam manda solto, sem rótulo. */
.sg-req-nota {
  margin-bottom: 0.875rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #6f6d80;
}

.sg-req-lista {
  display: grid;
  /* Teto fixo na coluna dos rótulos. Com "auto" o rótulo mais longo
     ("Outras observações") esticava a coluna inteira e espremia TODOS os
     valores, que passavam a quebrar linha à toa. */
  grid-template-columns: minmax(0, 6.5rem) 1fr;
  gap: 0.75rem 0.875rem;
  margin: 0;
}

/* Item de texto corrido: rótulo em cima, valor embaixo, largura inteira. */
dt.sg-req-largo {
  grid-column: 1 / -1;
  margin-top: 0.375rem;
}

dd.sg-req-largo {
  grid-column: 1 / -1;
  margin-top: -0.5rem;
  line-height: 1.55;
}

.sg-req-rotulo {
  margin: 0;
  font-size: 0.8125rem;
  color: #8b8a99;
}

.sg-req-valor {
  margin: 0;
  font-size: 0.8125rem;
  color: #e5e7eb;
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .sg-req-lista { grid-template-columns: 1fr; gap: 0.125rem; }
  .sg-req-valor { margin-bottom: 0.5rem; }
}

/* ============================================================
   Card de garantias abaixo do botão de compra (compra segura,
   entrega automática, formas de pagamento).

   Antes eram três cards separados, cada um com padding dentro
   de padding. Agora é um card só com divisórias: mesma
   informação em bem menos altura.
   ============================================================ */

.sg-garantia {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}

.sg-garantia + .sg-garantia {
  border-top: 1px solid #161325;
}

.sg-garantia-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-top: 0.0625rem;
  border-radius: 0.5rem;
}

.sg-garantia-icone svg { width: 16px; height: 16px; }

.sg-garantia-verde { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.sg-garantia-roxo  { background: rgba(147, 51, 234, 0.14); color: #c084fc; }

.sg-garantia-titulo {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
}

.sg-garantia-texto {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #8b8a99;
}

/* A linha das formas de pagamento não tem ícone à esquerda, então empilha. */
.sg-garantia-pagamentos { display: block; }

.sg-pagamentos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

/* Fundo claro atrás do ícone: as bandeiras oficiais são coloridas e
   pensadas para fundo branco; no escuro elas sumiriam. */
.sg-pagamento {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 1.75rem;
  border: 1px solid #232030;
  border-radius: 0.375rem;
  background: #fff;
}

/* Tamanho fixo, não `width:auto`: com auto o ícone nasce com largura zero e,
   junto com loading="lazy", o navegador nunca chegava a baixá-lo. */
.sg-pagamento img {
  width: 1.5rem;
  height: 1rem;
  object-fit: contain;
}

/* ============================================================
   Volume e seletor de qualidade do player.
   ============================================================ */

.sg-som {
  display: flex;
  align-items: center;
  flex: none;
}

/* A barrinha nasce fechada e abre ao passar o mouse no grupo do som: aberta
   o tempo todo, ela roubaria espaço da barra de progresso em telas menores. */
.sg-vol {
  position: relative;
  width: 0;
  height: 4px;
  box-sizing: content-box;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  background-color: rgba(255, 255, 255, 0.22);
  background-clip: padding-box;
  border-radius: 9999px;
  opacity: 0;
  cursor: pointer;
  touch-action: none;
  transition: width 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
}

.sg-som:hover .sg-vol,
.sg-som:focus-within .sg-vol,
.sg-vol:active {
  width: 3.5rem;
  margin-left: 0.375rem;
  margin-right: 0.125rem;
  opacity: 1;
}

.sg-vol-nivel {
  width: 70%;
  height: 100%;
  border-radius: 9999px;
  background: #fff;
}

/* No celular não existe controle de volume por software (o iOS ignora
   video.volume), então lá fica só o botão de mudo. */
@media (max-width: 640px) {
  .sg-som:hover .sg-vol,
  .sg-som:focus-within .sg-vol { width: 0; margin: 0; opacity: 0; }
}

.sg-qualidade {
  position: relative;
  flex: none;
}

.sg-qualidade.hidden { display: none; }

/* Faixa em uso ao lado da engrenagem: em automático o visitante não teria
   como saber em que qualidade está assistindo.

   Fica EM LINHA, dentro do botão. Como selo absoluto por cima ele cobria a
   engrenagem inteira — o texto ("1080p") é mais largo que o botão de 32px. */
.sg-qualidade .sg-btn {
  width: auto;
  min-width: 2rem;
  gap: 0.25rem;
  padding: 0 0.375rem;
}

.sg-etiqueta {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #d8b4fe;
  pointer-events: none;
}

/* Em tela estreita o rótulo sai e fica só a engrenagem: a barra de controles
   precisa do espaço para a barra de progresso. */
@media (max-width: 520px) {
  .sg-etiqueta { display: none; }
  .sg-qualidade .sg-btn { width: 2rem; padding: 0; }
}

.sg-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  z-index: 20;
  min-width: 7rem;
  padding: 0.25rem;
  border: 1px solid #2a2438;
  border-radius: 0.5rem;
  background: rgba(12, 10, 22, 0.97);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

.sg-menu.hidden { display: none; }

.sg-menu-item {
  display: block;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  font-size: 0.75rem;
  text-align: left;
  color: #d1d5db;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.sg-menu-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.sg-menu-ativo {
  color: #fff;
  font-weight: 600;
  background: rgba(147, 51, 234, 0.25);
}

/* ============================================================
   "Seu computador" — comparação com os requisitos do jogo.
   Fica acima dos cards de mínimo/recomendado, na aba.
   ============================================================ */

.sg-pc {
  margin-bottom: 1rem;
  padding: 1.125rem;
  border: 1px solid #241f38;
  border-radius: 0.75rem;
  background: #14111f;
}

.sg-pc.hidden { display: none; }

.sg-pc-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.sg-pc-titulo {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d1d5db;
}

.sg-pc-selo {
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.sg-pc-lista {
  display: grid;
  gap: 0.625rem;
}

.sg-pc-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.sg-pc-rotulo {
  flex: none;
  font-size: 0.8125rem;
  color: #8b8a99;
}

.sg-pc-valor {
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Verde: passa do recomendado. Azul: passa do mínimo. Âmbar: fica abaixo.
   Cinza: não deu para comparar — e isso é dito, não escondido. */
.sg-pc-otimo  { color: #4ade80; background: rgba(34, 197, 94, 0.14); }
.sg-pc-bom    { color: #60a5fa; background: rgba(59, 130, 246, 0.14); }
.sg-pc-ruim   { color: #fbbf24; background: rgba(245, 158, 11, 0.14); }
.sg-pc-neutro { color: #9ca3af; background: rgba(156, 163, 175, 0.12); }

/* No valor da linha a cor entra sem fundo, senão viram vários blocos. */
.sg-pc-valor.sg-pc-otimo,
.sg-pc-valor.sg-pc-bom,
.sg-pc-valor.sg-pc-ruim,
.sg-pc-valor.sg-pc-neutro { background: transparent; }

.sg-pc-valor.sg-pc-neutro { font-weight: 500; color: #d1d5db; }

.sg-pc-nota {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 400;
  color: #6f6d80;
}

.sg-pc-aviso {
  margin: 0.875rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid #1c1a26;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #6f6d80;
}

/* Correção manual da placa de vídeo. */
.sg-pc-troca {
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid #1c1a26;
}

.sg-pc-troca-texto {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #8b8a99;
}



/* ── Seletor de placa de vídeo ────────────────────────────────
   Feito à mão porque o <select> nativo usa o estilo do sistema
   operacional (fundo branco, fonte do Windows) e destoava da
   página. Com 62 modelos, busca e agrupamento por fabricante
   valem mais que a aparência.
   ──────────────────────────────────────────────────────────── */

.sg-drop {
  position: relative;
}

.sg-drop-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  height: 2.375rem;
  padding: 0 0.375rem 0 0.75rem;
  border: 1px solid #241f38;
  border-radius: 0.5rem;
  background: #0f0d18;
  font-size: 0.8125rem;
  color: #e5e7eb;
  cursor: pointer;
  transition: border-color 0.15s;
}

.sg-drop-botao:hover { border-color: #35304a; }
.sg-drop-aberto .sg-drop-botao { border-color: rgba(168, 85, 247, 0.6); }

.sg-drop-rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A seta é a mesma das miniaturas, girada para baixo. */
.sg-drop-seta {
  display: flex;
  flex: none;
  color: #6f6d80;
  transform: rotate(90deg);
  transition: transform 0.18s;
}

.sg-drop-seta svg { width: 16px; height: 16px; }
.sg-drop-aberto .sg-drop-seta { transform: rotate(-90deg); }

.sg-drop-painel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 40;
  padding: 0.5rem;
  border: 1px solid #2a2438;
  border-radius: 0.625rem;
  background: #0C0A16;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}

.sg-drop-painel.hidden { display: none; }

.sg-drop-busca {
  width: 100%;
  height: 2rem;
  margin-bottom: 0.375rem;
  padding: 0 0.625rem;
  border: 1px solid #241f38;
  border-radius: 0.375rem;
  background: #14111f;
  font-size: 0.8125rem;
  color: #e5e7eb;
}

.sg-drop-busca::placeholder { color: #56546a; }
.sg-drop-busca:focus { outline: none; border-color: rgba(168, 85, 247, 0.5); }

.sg-drop-lista {
  max-height: 15rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a2438 transparent;
}

.sg-drop-lista::-webkit-scrollbar { width: 6px; }
.sg-drop-lista::-webkit-scrollbar-thumb { background: #2a2438; border-radius: 9999px; }

.sg-drop-grupo.hidden { display: none; }

.sg-drop-grupo-titulo {
  padding: 0.5rem 0.5rem 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #56546a;
}

.sg-drop-item {
  display: block;
  width: 100%;
  padding: 0.4375rem 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  font-size: 0.8125rem;
  text-align: left;
  color: #d1d5db;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.sg-drop-item.hidden { display: none; }
.sg-drop-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.sg-drop-ativo {
  background: rgba(147, 51, 234, 0.22);
  color: #fff;
  font-weight: 600;
}

.sg-drop-auto {
  margin-bottom: 0.25rem;
  color: #a855f7;
}

/* ── "Avise-me quando disponível" ──────────────────────────────────────────
   Só a página de produto tem esses botões, então o estilo mora aqui e não no
   core.css — que, de quebra, está a 1,7 KB do teto de 64 KB da CentralCart.

   O estado "já pedido" precisa parecer inerte: um botão roxo cheio continua
   convidando ao clique mesmo com `disabled`, e quem clicasse de novo acharia
   que o primeiro pedido não pegou. */
.aviso-botao { cursor: pointer; }

/* Pedido já feito é estado, não convite — então some o roxo de ação, que é a
   cor do "Comprar agora" e do "Avise-me" ainda por clicar.

   Chapado e sem borda, escolhido comparando as opções lado a lado no card de
   verdade. Sem contorno porque o card já tem o dele: duas bordas a três
   pixels uma da outra brigam, e era isso que deixava a versão vazada com cara
   de remendo.

   A borda transparente fica declarada para o botão não encolher 2px na troca
   de estado — o "Avise-me" tem borda, este não. */
.aviso-botao.aviso-feito {
  background: #191527;
  border: 1px solid transparent;
  color: #d7d2e6;
}

/* Vermelho só no texto, e o fundo continua neutro.
   É o tratamento que o "Sair da conta" já usa na navbar (`text-red-400` com
   `hover:bg-[#161325]`): a cor marca a ação, sem pintar o botão inteiro.
   Fundo vermelho chapado com borda vermelha é alarme de erro — e cancelar um
   aviso não é erro nem perigo, é só sair da lista. */
.aviso-botao.aviso-feito:hover {
  background: #1f1a30;
  color: #f87171;
}

.aviso-botao:disabled { opacity: 0.6; cursor: wait; }