/* ============================================================
   vinnydocs2 — folha de estilo única
   Paleta roxa: topo roxo-escuro, fundo lilás claro, cartões
   brancos e preço em magenta. O gradiente magenta -> roxo é a
   assinatura da marca.
   ============================================================ */
/* Tema CLARO — é também o padrão de todos os tokens. O escuro logo abaixo só troca o que precisa
   mudar; assim uma cor acrescentada aqui nunca fica sem definição lá. */
:root {
  /* Marca: iguais nos dois temas. O topo é roxo-escuro por identidade, não por tema. */
  --roxo-900: #1b1030;   /* topo e rodapé */
  --roxo-800: #2a1a4d;   /* faixa de categorias */
  --roxo: #8b3dff;       /* acento principal */
  --roxo-2: #6f1fe0;     /* acento em hover */
  --roxo-claro: #c9a3ff; /* acento sobre fundo escuro */
  --magenta: #ff2fc4;    /* par do gradiente */
  --grad: linear-gradient(135deg, #ff2fc4, #8b3dff);
  --preco: #d6199a;      /* preços e destaques de valor */
  --faixa: #150c26;      /* faixa fina do topo, mais escura que o cabeçalho */
  --linha-marca: #3a2560; /* separadores sobre as superfícies escuras da marca */
  /* Fundo do bloco de abertura. É um gradiente inteiro, e não uma cor, porque a luz vindo do
     canto é o que dá volume ao herói — trocar por uma cor chapada achata a página. */
  --heroi: radial-gradient(120% 140% at 100% 0%, #5a2a9c 0%, #2c1553 55%, #1b1030 100%);

  /* Superfícies e texto */
  --bg: #f6f3fc;
  --card: #ffffff;
  --card-vidro: #ffffffdd; /* etiqueta sobre imagem */
  --suave: #f2ecfb;        /* chip ligado, item de lista */
  --suave-2: #faf7ff;      /* hover, painéis mais claros */
  --suave-3: #f0eafa;      /* fim do gradiente das miniaturas */
  --neutro: #f2f3f7;       /* fundo de imagem, botão desativado */
  --neutro-2: #f7f8fa;     /* brilho do esqueleto de carregamento */
  --line: #e9e4f4;
  --borda-suave: #e2d3f8;  /* borda de painel destacado */
  --rosa-suave: #fdf3fb;
  --rosa-borda: #f4d9ee;
  --ink: #1e1730;
  --ink-2: #5d5478;
  --ink-3: #8b83a6;

  /* Estados: aviso, informação, sucesso, erro, StatTrak */
  --aviso-bg: #fff8e6;
  --aviso-borda: #f0d79a;
  --aviso-txt: #7a5300;
  --info-bg: #e8eefc;
  --info-borda: #cbd9f5;
  --info-txt: #2b4b8f;
  --ok-bg: #dcfce7;
  --ok-txt: #166534;
  --erro-bg: #fef2f2;
  --erro-borda: #dc2626;
  --st-bg: #ffe9d6;
  /* Escurecido de #c4520d: sobre o próprio fundo laranja da etiqueta aquele dava 3,92 de
     contraste, abaixo do mínimo de 4,5. Este dá 4,77 e continua sendo o laranja do StatTrak. */
  --st-txt: #b04709;

  /* Fundo de botão sólido (aplicar filtro, encomendar). Separado de --roxo-900 porque aquele é
     cor de cabeçalho: no tema escuro ele fica igual à página e o botão desaparece. */
  --acao: #1b1030;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(30, 16, 60, .06), 0 6px 18px rgba(30, 16, 60, .08);

  color-scheme: light;
}

/* Tema ESCURO.
   O roxo do topo é quase preto, então o fundo da página fica um degrau ACIMA dele: o cabeçalho
   continua se destacando em vez de se fundir com o conteúdo. Os cartões sobem mais um degrau. */
[data-tema="escuro"] {
  /* O magenta da marca fica em 3,75 de contraste sobre cartão escuro — ilegível para
     preço, que é o número mais importante da tela. Este tom sobe para 5,97 mantendo o
     mesmo magenta. O gradiente e o resto da identidade não mudam. */
  --preco: #ff4fbe;

  --bg: #120c1e;
  --card: #1c1430;
  --card-vidro: #1c1430e6;
  --suave: #272040;
  --suave-2: #221a38;
  --suave-3: #241c3c;
  --neutro: #262034;
  --neutro-2: #2e2745;
  --line: #322a4d;
  --borda-suave: #453a6b;
  --rosa-suave: #2a1730;
  --rosa-borda: #4a2545;
  --ink: #ece8f6;
  --ink-2: #b3aacb;
  --ink-3: #8d84a8;

  /* Fundo de estado escuro com texto claro: etiqueta clara sobre página escura fere a vista e
     destoa do resto do desenho. */
  --aviso-bg: #3a2c0e;
  --aviso-borda: #6b5316;
  --aviso-txt: #f0c874;
  --info-bg: #17264a;
  --info-borda: #2c4380;
  --info-txt: #a9c2f5;
  --ok-bg: #12331f;
  --ok-txt: #7fdca0;
  --erro-bg: #3a1717;
  --erro-borda: #e05252;
  --st-bg: #3d2413;
  --st-txt: #f0a06a;

  --acao: #6f1fe0;

  /* No escuro a sombra some; o que separa os cartões é a borda. */
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .28);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }
.wrap { width: min(1360px, 100% - 32px); margin-inline: auto; }
/* Filhos de grid/flex encolhem até o conteúdo por padrão e estouram a tela;
   min-width: 0 deixa eles caberem de verdade no espaço disponível.
   A BUSCA entrou aqui depois: entre 1025px e ~1250px a barra do topo ainda é uma linha só, e sem
   isto o campo travava em 294px (a largura mínima do input mais o botão), empurrando os botões da
   direita para fora da tela e fazendo a página rolar de lado. */
.hero-main, .hero-side, .results, .item-info, .item-gallery, .card, .footer-col,
.search { min-width: 0; }

/* ---------- Faixa de utilidades ---------- */
.utilbar { background: var(--faixa); color: #9aa3b8; font-size: 12px; }
.utilbar-inner { display: flex; align-items: center; gap: 14px; height: 32px; }
.util-sep { width: 1px; height: 12px; background: var(--linha-marca); }
.util-right { margin-left: auto; display: flex; gap: 18px; }
.util-right a:hover { color: var(--roxo-claro); }

/* ---------- Cabeçalho ---------- */
.topbar { background: var(--roxo-900); color: #fff; position: sticky; top: 0; z-index: 40; }
.topbar-inner { display: flex; align-items: center; gap: 22px; height: 66px; }

.logo { display: flex; align-items: center; flex: none; }
/* Wordmark em SVG: escala sem serrilhar e mantém o gradiente exato da marca. */
.logo-wordmark { height: 30px; width: auto; display: block; }
.logo-rodape { height: 26px; margin-bottom: 4px; }

.mainnav { display: flex; gap: 4px; flex: none; }
.mainnav a { padding: 8px 12px; border-radius: 8px; color: #cfd5e3; font-size: 15px; white-space: nowrap; }
.mainnav a:hover { color: #fff; background: #ffffff14; }
.mainnav a.active { color: #fff; background: var(--grad); font-weight: 600; }

.search { position: relative; flex: 1 1 auto; max-width: 560px; display: flex; }
.search input {
  flex: 1; height: 40px; border: 0; border-radius: 20px 0 0 20px;
  padding: 0 18px; font-size: 14px; outline: none; min-width: 0;
}
.search button { height: 40px; padding: 0 22px; border-radius: 0 20px 20px 0; background: var(--grad); color: #fff; font-weight: 700; }
.search button:hover { filter: brightness(1.08); }
.search-suggest {
  position: absolute; top: 46px; left: 0; right: 0; z-index: 50;
  background: var(--card); color: var(--ink); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(10, 16, 30, .25); overflow: hidden; padding: 6px;
}
.search-suggest button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 8px; text-align: left; }
.search-suggest button:hover { background: var(--suave); }
.search-suggest img { width: 46px; height: 34px; object-fit: contain; }
.search-suggest .s-name { flex: 1; font-size: 13px; }
.search-suggest .s-price { color: var(--preco); font-weight: 700; font-size: 12px; }

.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.icon-btn { position: relative; padding: 8px 12px; border-radius: 8px; background: #ffffff14; }
.icon-btn:hover { background: #ffffff24; }
.badge { background: var(--preco); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 700; margin-left: 2px; }
.ghost-btn { padding: 8px 18px; border-radius: 20px; border: 1px solid #ffffff40; color: #fff; font-size: 14px; }
.ghost-btn:hover { border-color: var(--roxo-claro); color: var(--roxo-claro); }

/* Perfil conectado (login com a Steam) */
.perfil { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #fff; }
.perfil img { width: 26px; height: 26px; border-radius: 50%; }
.perfil a { color: var(--roxo-claro); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.perfil a:hover { color: var(--magenta); }

/* ---------- Faixa de categorias ---------- */
.catbar { background: var(--roxo-800); }
.catbar-inner { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.catbar-inner::-webkit-scrollbar { display: none; }
.catbar-inner a { padding: 10px 14px; font-size: 13px; color: #c3cadb; white-space: nowrap; border-bottom: 2px solid transparent; }
.catbar-inner a:hover { color: #fff; }
.catbar-inner a.active { color: var(--roxo-claro); border-bottom-color: var(--magenta); }

/* ---------- Início: banner ---------- */
.hero { padding: 20px 0 0; }
.hero-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.hero-main {
  border-radius: 14px; padding: clamp(20px, 4vw, 34px) clamp(18px, 4vw, 38px);
  color: #fff; min-height: clamp(180px, 30vw, 250px);
  background: var(--heroi);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.hero-main h1 { margin: 0; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.2; letter-spacing: -.5px; }
/* O tom CLARO da marca, não o cheio. O destaque fica sobre o canto aceso do gradiente do herói,
   e ali o tom cheio dá entre 1,56:1 e 1,87:1 de contraste nas três lojas — abaixo do mínimo de
   3:1 até para texto grande. O claro sobe para 3,5:1–4,5:1 sem mudar a cor da marca. */
.hero-main h1 span { color: var(--roxo-claro); }
.hero-main p { margin: 0; color: #b9c1d6; max-width: 560px; font-size: 15px; }
.hero-cta { display: flex; gap: 10px; margin-top: 6px; }
.btn { padding: 11px 22px; border-radius: 22px; font-weight: 700; font-size: 14px; background: var(--grad); color: #fff; display: inline-block; }
.btn:hover { filter: brightness(1.08); }
.btn-outline { background: transparent; color: #fff; border: 1px solid #ffffff44; }
.btn-outline:hover { background: #ffffff14; border-color: #fff; }
.hero-stats { display: flex; gap: clamp(14px, 3vw, 26px); margin-top: 10px; flex-wrap: wrap; }
.hero-stats div { font-size: 12px; color: #98a1b8; }
.hero-stats b { display: block; font-size: 20px; color: #fff; }

.hero-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 12px; }
.hero-side .side-card { min-width: 0; }
.side-card { background: var(--card); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; }
.side-card .ic { font-size: 22px; }
.side-card h4 { margin: 0 0 2px; font-size: 14px; }
.side-card p { margin: 0; font-size: 12px; color: var(--ink-2); }

/* ---------- Atalhos de categoria ---------- */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px; margin-top: 18px; }
.cat-tile { background: var(--card); border-radius: 12px; padding: 16px 8px; text-align: center; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; }
.cat-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,26,40,.12); }
.cat-tile .emoji { font-size: 24px; }
.cat-tile .t { font-size: 13px; font-weight: 600; margin-top: 6px; }
.cat-tile .n { font-size: 11px; color: var(--ink-3); }

/* ---------- Seções ---------- */
.section { margin-top: 28px; }
.section-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; font-size: 21px; letter-spacing: -.3px; }
.section-head .sub { color: var(--ink-3); font-size: 13px; }
.section-head .more { margin-left: auto; color: var(--ink-2); font-size: 13px; }
.section-head .more:hover { color: var(--preco); }

/* ---------- Grade de itens ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  border-top: 3px solid transparent; transition: transform .12s, box-shadow .12s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,26,40,.14); }
.card-thumb { position: relative; background: linear-gradient(160deg, var(--suave-2), var(--suave-3)); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 10px; }
.card-thumb img { max-height: 100%; object-fit: contain; }
.card-tags { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--neutro); color: var(--ink-2); }
.tag-st { background: var(--st-bg); color: var(--st-txt); }
.tag-sv { background: var(--aviso-bg); color: var(--aviso-txt); }
.tag-wear { position: absolute; bottom: 8px; left: 8px; background: var(--card-vidro); }

.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-name { font-size: 13px; line-height: 1.35; height: 2.7em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; gap: 6px; }
.price { color: var(--preco); font-weight: 800; font-size: 16px; white-space: nowrap; }
.price small { font-weight: 500; font-size: 11px; color: var(--ink-3); display: block; }
.stock { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* ---------- Mercado ---------- */
.market { display: grid; grid-template-columns: 232px 1fr; gap: 18px; padding: 18px 0 40px; align-items: start; }
.filters { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 4px 14px 14px; position: sticky; top: 108px; max-height: calc(100vh - 130px); overflow-y: auto; }
.filter-group { border-bottom: 1px solid var(--line); padding: 12px 0; }
.filter-group:last-child { border-bottom: 0; }
.filter-group h4 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
.filter-group h4 button { font-size: 11px; color: var(--ink-3); }
.chiplist { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); border-radius: 14px; padding: 4px 10px; font-size: 12px; color: var(--ink-2); background: var(--suave-2); }
.chip:hover { border-color: var(--roxo); color: var(--ink); }
.chip.on { background: var(--suave); border-color: var(--roxo); color: var(--roxo-2); font-weight: 600; }
.filter-list { display: flex; flex-direction: column; max-height: 210px; overflow-y: auto; }
.filter-list button { text-align: left; padding: 5px 8px; border-radius: 6px; font-size: 13px; color: var(--ink-2); }
.filter-list button:hover { background: var(--suave); }
.filter-list button.on { background: var(--suave); color: var(--roxo-2); font-weight: 600; }
.range-row { display: flex; align-items: center; gap: 6px; }
.range-row input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; outline: none; }
.range-row input:focus { border-color: var(--roxo); }
.filter-apply { width: 100%; margin-top: 8px; padding: 8px; border-radius: 8px; background: var(--acao); color: #fff; font-size: 13px; }
.filter-apply:hover { background: var(--roxo-800); }

.results { min-width: 0; }
/* No celular a lateral de filtros vira um painel recolhível — ela é longa demais
   para ficar empurrando os resultados para baixo da dobra. */
.filtros-toggle {
  display: none; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: 16px; background: var(--acao); color: #fff; font-size: 13px;
}
.filtros-toggle:hover { background: var(--roxo-800); }
.toolbar { background: var(--card); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 12px; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .sorts { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.sort-btn { padding: 6px 12px; border-radius: 16px; font-size: 13px; color: var(--ink-2); }
.sort-btn:hover { background: var(--suave); }
.sort-btn.on { background: var(--grad); color: #fff; font-weight: 700; }
.toolbar .count { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 26px 0 10px; flex-wrap: wrap; }
.pagination button {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px;
  background: var(--card); box-shadow: var(--shadow); font-size: 13px;
  border: 1px solid transparent; transition: color .12s, border-color .12s;
}
.pagination button:hover:not(:disabled):not(.on) { color: var(--preco); border-color: var(--borda-suave); }

/* A página atual leva o gradiente da marca, igual à aba ativa do menu. Antes era o roxo do
   cabeçalho, que no tema escuro fica quase igual à página e fazia o botão sumir. O anel em volta
   separa a página atual das vizinhas mesmo para quem distingue mal as cores — o destaque não
   depende só do matiz. */
.pagination button.on {
  background: var(--grad); color: #fff; font-weight: 700; cursor: default;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--roxo);
}
.pagination button:disabled { opacity: .45; cursor: default; }
.pagination .reticencias { color: var(--ink-3); padding: 0 2px; }

.empty { background: var(--card); border-radius: 12px; padding: 60px 20px; text-align: center; color: var(--ink-3); box-shadow: var(--shadow); }
.card.is-skeleton .card-thumb { background: var(--suave-3); }
.card.is-skeleton .card-name, .card.is-skeleton .card-foot {
  background: linear-gradient(90deg, var(--neutro) 25%, var(--neutro-2) 50%, var(--neutro) 75%);
  background-size: 400% 100%; animation: sk 1.2s infinite; border-radius: 4px; color: transparent; height: 16px;
}
@keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- Página do item ---------- */
.item-page { padding: 18px 0 40px; }
.crumbs { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.crumbs a:hover { color: var(--preco); }
.item-top { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 20px; align-items: start; }
.item-gallery { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 18px; }
.item-gallery .big { background: linear-gradient(160deg, var(--suave-2), var(--suave-3)); border-radius: 10px; aspect-ratio: 4/3; display: grid; place-items: center; padding: 18px; }
.gallery-note { font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.item-info { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 20px 22px; }
.item-info h1 { margin: 0 0 6px; font-size: clamp(19px, 2.6vw, 24px); letter-spacing: -.3px; }
.item-sub { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); margin-bottom: 14px; flex-wrap: wrap; }
.price-box { background: var(--rosa-suave); border: 1px solid var(--rosa-borda); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.price-box .big-price { font-size: clamp(24px, 4vw, 30px); font-weight: 800; color: var(--preco); line-height: 1.1; }
.price-box .hint { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.opt-row { margin-bottom: 14px; }
.opt-row > label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.wear-opt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.wear-opt small { font-size: 10px; opacity: .75; }
.buy-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.btn-buy { padding: 12px 30px; border-radius: 24px; background: var(--grad); color: #fff; font-weight: 700; }
.btn-buy:hover { filter: brightness(1.08); }
.btn-cart { padding: 12px 30px; border-radius: 24px; background: var(--card); border: 1px solid var(--roxo); color: var(--roxo-2); font-weight: 700; }
.btn-cart:hover { background: var(--suave); }
.item-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.item-specs div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.item-specs span:first-child { color: var(--ink-3); }

.listings { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); margin-top: 18px; padding: 16px 20px 20px; }
.listings h3 { margin: 0 0 4px; font-size: 17px; }
.listings .note { font-size: 12px; color: var(--ink-3); margin: 0 0 12px; }
.listing-row { display: grid; grid-template-columns: 60px 1fr 150px 130px 110px; gap: 12px; align-items: center; padding: 10px 8px; border-top: 1px solid var(--line); font-size: 13px; }
.listing-row .fl { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.listing-row .pr { color: var(--preco); font-weight: 700; }
.listing-row .btn-small { padding: 6px 14px; border-radius: 16px; background: var(--acao); color: #fff; font-size: 12px; }
.listing-row .btn-small:hover { background: var(--preco); }
.floatbar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #4cc38a 0%, #b6d94c 25%, #ffc736 45%, #ff9a3c 62%, #ff4d2d 100%); position: relative; margin-top: 6px; }
.floatbar i { position: absolute; top: -3px; width: 2px; height: 12px; background: #1c2333; border-radius: 1px; }

/* ---------- Páginas de conteúdo ---------- */
.page-card { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: clamp(18px, 3vw, 28px) clamp(16px, 3vw, 32px); margin: 18px 0 40px; }
.page-card h1 { margin: 0 0 8px; font-size: 26px; }
.page-card h3 { margin: 22px 0 6px; font-size: 16px; }
.page-card p, .page-card li { color: var(--ink-2); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; }
.step { background: var(--suave-2); border-radius: 10px; padding: 16px; }
.step b { display: block; font-size: 22px; color: var(--roxo-2); }
.faq { border-top: 1px solid var(--line); padding: 12px 0; }
.faq b { display: block; margin-bottom: 4px; }

/* ---------- Venda: cotação pelo link de troca ---------- */
.quote-form { display: flex; gap: 10px; margin: 18px 0 8px; flex-wrap: wrap; }
.quote-form input {
  flex: 1; min-width: 260px; height: 42px; padding: 0 14px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 21px; outline: none;
}
.quote-form input:focus { border-color: var(--roxo); box-shadow: 0 0 0 3px var(--suave); }
.quote-form .btn { border: 0; height: 42px; }
.quote-help { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }
.quote-ou { color: var(--ink-3); font-size: 13px; align-self: center; }
.btn-steam { background: linear-gradient(135deg, #1b2838, #2a475e); color: #fff; }
.btn-steam:hover { filter: brightness(1.15); }

.quote-logado {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--suave); border: 1px solid var(--borda-suave); border-radius: 12px; padding: 14px 18px; margin: 18px 0 10px;
}
.quote-logado p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.quote-logado .btn { margin-left: auto; }
.quote-alternativa { margin-top: 6px; }
.quote-alternativa summary { font-size: 12px; color: var(--ink-3); cursor: pointer; }
.quote-alternativa summary:hover { color: var(--roxo-2); }

.quote-status { background: var(--suave-2); border-radius: 10px; padding: 18px 20px; margin-top: 18px; font-size: 14px; }
.quote-status.erro { background: var(--rosa-suave); border: 1px solid var(--rosa-borda); }
.quote-status p { margin: 6px 0 12px; }

.quote-head { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; }
.quote-head h3 { margin: 0; font-size: 17px; }
.quote-head button { margin-left: auto; }
.quote-list { border-top: 1px solid var(--line); }
.quote-row {
  display: grid; grid-template-columns: 20px 46px 1fr 120px 130px; gap: 12px; align-items: center;
  padding: 10px 6px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.quote-row:hover { background: var(--suave-2); }
.quote-row.off { opacity: .45; }
.quote-row img { width: 46px; height: 36px; object-fit: contain; }
.quote-row .fl { font-size: 12px; color: var(--ink-3); }
.quote-market, .quote-offer { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.quote-market { color: var(--ink-3); font-weight: 500; }
.quote-offer { color: var(--preco); }
.quote-market small, .quote-offer small { display: block; font-size: 10px; font-weight: 500; color: var(--ink-3); }

.quote-total {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: var(--suave-2); border: 1px solid var(--borda-suave); border-radius: 12px; padding: 16px 20px; margin-top: 18px;
}
.quote-total span { display: block; font-size: 12px; color: var(--ink-3); }
.quote-total b { font-size: 22px; color: var(--preco); }
.quote-total b.riscado { color: var(--ink-3); font-size: 17px; text-decoration: line-through; font-weight: 600; }
.quote-total .btn-whats { margin-left: auto; }

.btn-whats {
  display: inline-block; padding: 12px 24px; border-radius: 24px;
  background: #25d366; color: #08351b; font-weight: 700; font-size: 14px;
}
.btn-whats:hover { background: #1fb959; }
.btn-whats.desativado { background: var(--neutro); color: var(--ink-3); pointer-events: none; }

/* Overpay: padrão ou adesivo que a cotação automática não enxerga -> cotação manual. */
.quote-alerta {
  background: var(--aviso-bg); border: 1px solid var(--aviso-borda); border-radius: 12px;
  padding: 16px 20px; margin-top: 18px;
}
.quote-alerta b { color: var(--aviso-txt); }
.quote-alerta p { margin: 6px 0 12px; font-size: 13px; color: var(--ink-2); }
.tag-over { background: var(--aviso-bg); color: var(--aviso-txt); margin-left: 4px; }
.tag-trava { background: var(--info-bg); color: var(--info-txt); margin-left: 4px; }
.tag-liberado { background: var(--ok-bg); color: var(--ok-txt); margin-left: 4px; }

/* Aviso de leitura incompleta: some quando o site consegue abrir a janela de troca. */
.quote-aviso {
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-borda);
  border-left: 3px solid #d99b1a;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  font-size: 14px;
  line-height: 1.5;
}
.quote-aviso b { color: var(--aviso-txt); }
.quote-aviso p { margin: 4px 0 0; color: var(--aviso-txt); }
.tag-manual { background: var(--ok-bg); color: var(--ok-txt); margin-left: 4px; }

/* Busca para incluir na mão a skin que a Steam não devolveu */
.add-achado {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px;
  border-radius: 8px; font-size: 13px; text-align: left;
}
.add-achado:hover { background: var(--card); }
.add-achado img { width: 40px; height: 30px; object-fit: contain; }
.add-desgaste { margin: 2px 4px 2px 0; }

#colar-inventario, #colar-inventario-fixo, #colar-janela, #codigo-console {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-family: inherit; font-size: 12px; resize: vertical; outline: none; margin-bottom: 8px;
}
#colar-inventario:focus, #colar-inventario-fixo:focus, #colar-janela:focus { border-color: var(--roxo); }
#codigo-console { font-family: ui-monospace, Consolas, monospace; font-size: 11px; background: var(--suave-2); color: var(--ink-2); }
.quote-trava kbd {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: 11px;
}
.quote-trava a { color: var(--roxo-2); text-decoration: underline; text-underline-offset: 2px; }

/* Aviso de proteção de troca: a Steam demora a liberar no inventário público. */
.quote-trava {
  background: var(--info-bg); border: 1px solid var(--info-borda); border-radius: 12px;
  padding: 16px 20px; margin-top: 14px;
}
.quote-trava b { color: var(--info-txt); }
.quote-trava p { margin: 6px 0 12px; font-size: 13px; color: var(--ink-2); }
.link-fase {
  font-size: 11px; color: var(--roxo-2); padding: 2px 0; text-align: left;
  text-decoration: underline; text-underline-offset: 2px;
}
.link-fase:hover { color: var(--preco); }

.quote-fora {
  background: var(--suave-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; margin-top: 14px; font-size: 13px;
}
.quote-fora ul { margin: 6px 0 8px; padding-left: 18px; color: var(--ink-2); }
.quote-fora li { margin: 2px 0; }
.quote-fora span { color: var(--ink-3); }

/* Trazer o inventário colado — o caminho único da aba Vender e do Upgrade */
.quote-colar {
  background: linear-gradient(135deg, var(--suave-2), var(--rosa-suave)); border: 1px solid var(--borda-suave);
  border-radius: 12px; padding: 16px 20px; margin: 16px 0;
}
.quote-colar > b { color: var(--roxo-2); font-size: 15px; }
.quote-colar ol { margin: 10px 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.quote-colar li { margin: 6px 0; }
.quote-colar a { color: var(--roxo-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.quote-colar p { margin: 8px 0 12px; }
.quote-colar textarea { margin-bottom: 10px; }
.quote-colar input[type="url"] { width: 100%; margin: 6px 0 2px; }
.quote-colar input[type="url"].erro { border-color: var(--erro-borda); background: var(--erro-bg); }

/* ---------- Upgrade ---------- */
.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.up-lado { min-width: 0; }
.up-lado h2 { font-size: 16px; margin: 0 0 4px; color: var(--roxo-2); }
/* Gema tem contorno e brilho: Ruby e Esmeralda não podem se confundir com Fase 3. */
.tag-fase { margin-left: 6px; font-weight: 700; }
.tag-gema { box-shadow: inset 0 0 0 1px currentColor; letter-spacing: .2px; }

.up-so-gema {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2); margin: -4px 0 12px; cursor: pointer;
}
.up-so-gema input { width: 15px; height: 15px; accent-color: var(--roxo); }

.up-busca { display: flex; gap: 8px; margin: 16px 0 12px; }
.up-busca input { flex: 1; min-width: 0; }
.up-resultados { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.up-op {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; padding: 8px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); cursor: pointer;
}
.up-op:hover { border-color: var(--roxo); background: var(--suave-2); }
.up-op img { width: 46px; height: 36px; object-fit: contain; }
.up-op b { font-size: 13px; display: block; }
.up-op small { font-size: 11px; color: var(--ink-3); }
.up-op .price { color: var(--preco); font-size: 13px; white-space: nowrap; }

.up-list { margin-top: 4px; }
.up-row {
  display: grid; grid-template-columns: auto 46px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.up-row:hover { background: var(--suave-2); }
.up-row.off { opacity: .45; }
.up-row img { width: 46px; height: 36px; object-fit: contain; }
.up-row .fl { font-size: 12px; color: var(--ink-3); }
.up-vals { text-align: right; }
.up-vals b { color: var(--preco); font-variant-numeric: tabular-nums; }
.up-vals .fl { display: block; font-size: 11px; color: var(--ink-3); }

.up-saldo {
  margin-top: 24px; border: 1px solid var(--borda-suave); border-radius: 12px;
  padding: 16px 20px; background: var(--suave-2);
}
.up-linha { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--ink-2); }
.up-linha b { font-variant-numeric: tabular-nums; }
.up-total { border-top: 1px solid var(--borda-suave); margin-top: 6px; padding-top: 12px; font-size: 17px; font-weight: 700; color: var(--ink); }
.up-total b { font-size: 22px; }
.up-paga { color: var(--preco); }
.up-sobra { color: var(--ok-txt); }
.up-saldo .btn-whats { width: 100%; margin-top: 12px; text-align: center; }
.up-saldo .btn-whats[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(1); }

@media (max-width: 900px) {
  .up-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Pedido ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(12,16,26,.45); z-index: 60; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 61; background: var(--card); display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(10,16,30,.2); }
.drawer-head { display: flex; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; font-size: 17px; }
.drawer-close { margin-left: auto; font-size: 24px; line-height: 1; color: var(--ink-3); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 18px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 14px 18px; }
.cart-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item img { width: 60px; height: 45px; object-fit: contain; background: var(--neutro); border-radius: 6px; }
.cart-item .ci-name { font-size: 12px; line-height: 1.35; }
.cart-item .ci-price { color: var(--preco); font-weight: 700; font-size: 13px; }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button { width: 22px; height: 22px; border-radius: 5px; background: var(--suave); font-weight: 700; }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cart-total b { font-size: 20px; color: var(--preco); }
.cart-note { font-size: 12px; color: var(--ink-3); margin: 0 0 10px; }
.btn-checkout {
  display: block; width: 100%; padding: 12px; border-radius: 24px; text-align: center;
  background: #25d366; color: #08351b; font-weight: 700;
}
.btn-checkout:hover { background: #1fb959; }

/* ---------- Avisos ---------- */
.toast-stack { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--roxo-800); color: #fff; padding: 10px 18px; border-radius: 22px; font-size: 13px; box-shadow: 0 8px 24px rgba(10,16,30,.28); animation: up .2s ease-out; }
@keyframes up { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Rodapé ---------- */
.site-footer { background: var(--roxo-900); color: #99a2b8; margin-top: 30px; padding: 34px 0 0; font-size: 13px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, minmax(120px, 1fr)); gap: 24px; padding-bottom: 26px; }
.footer-col h4 { color: #fff; margin: 0 0 10px; font-size: 14px; }
.footer-col a { display: block; padding: 3px 0; }
.footer-col a:hover { color: var(--roxo-claro); }
.footer-brand p { max-width: 380px; margin: 10px 0; }
.footer-badges { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #c3cadb; }
.footer-legal { border-top: 1px solid var(--linha-marca); padding: 14px 0; font-size: 12px; color: #6d778f; }

/* ---------- Responsivo ----------
   As grades já são fluidas (auto-fill), então aqui ficam só as mudanças de
   ESTRUTURA: o que vira uma coluna, o que recolhe e o que muda de lugar.      */

/* Notebook menor: o banner e a lateral do item deixam de ser lado a lado. */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { grid-template-rows: none; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}

/* Tablet: busca ganha a linha inteira e a lateral de filtros vira painel. */
@media (max-width: 1024px) {
  .topbar-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 10px 14px; }
  .search { order: 3; max-width: none; flex-basis: 100%; }
  /* flex/min-width deixam o menu encolher: sem isso ele fica na largura do conteúdo
     e empurra a página, em vez de rolar sozinho. */
  .mainnav { font-size: 14px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
  .mainnav::-webkit-scrollbar { display: none; }

  .market { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; display: none; }
  .filters.aberto { display: block; }
  .filtros-toggle { display: inline-flex; }
  .filter-list { max-height: 240px; }

  .item-top { grid-template-columns: 1fr; }
  .item-gallery .big { max-width: 460px; margin-inline: auto; }
}

/* Celular grande / tablet em pé. */
@media (max-width: 780px) {
  .wrap { width: min(1360px, 100% - 24px); }
  .utilbar-inner { height: auto; padding: 6px 0; flex-wrap: wrap; gap: 6px 12px; }
  .util-sep, .util-right { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .listing-row { grid-template-columns: 52px 1fr; row-gap: 6px; }
  .listing-row .extra { display: none; }
  .listing-buy { grid-column: 1 / -1; justify-content: space-between; }

  .quote-row { grid-template-columns: 20px 40px 1fr auto; }
  .quote-row .quote-market { display: none; }
  .quote-total { gap: 14px; }
  .quote-total .btn-whats { margin-left: 0; flex-basis: 100%; text-align: center; }

  .item-specs { grid-template-columns: 1fr; }
  .buy-row .btn-buy, .buy-row .btn-cart { flex: 1; text-align: center; padding: 12px 16px; }
}

/* Celular. */
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .cat-tiles { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .card-name { font-size: 12px; }
  .price { font-size: 15px; }

  .logo-wordmark { height: 24px; }
  .topbar-inner { gap: 8px 10px; }
  .search input { height: 38px; font-size: 16px; } /* 16px evita o zoom automático no iOS */
  .search button { height: 38px; padding: 0 16px; }

  .section-head { flex-wrap: wrap; gap: 4px 10px; }
  .section-head h2 { font-size: 18px; }
  .section-head .more { margin-left: auto; }

  .toolbar { padding: 8px; gap: 8px; }
  .toolbar .count { flex-basis: 100%; margin-left: 0; }

  .drawer { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 18px; }
  .pagination button { min-width: 32px; height: 32px; }
  .crumbs { font-size: 11px; }
}

/* Faixa de float no card, quando o filtro está ativo — é o que justifica o preço mostrado. */
.card-float {
  display: inline-block; margin: 2px 0 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--suave); color: var(--roxo-2); font-size: 11px; font-variant-numeric: tabular-nums;
}

/* Seletor de faixa de float, dentro do grupo de Desgaste */
.float-filtro { margin-top: 12px; }
.float-filtro label { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.float-filtro select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); font-size: 13px; color: var(--ink); cursor: pointer;
}
.float-filtro select:focus { outline: none; border-color: var(--roxo); }
.float-custom { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.float-custom input { width: 100%; min-width: 0; padding: 6px 8px; font-size: 12px; }
.float-custom span { font-size: 12px; color: var(--ink-3); }
.float-custom.hidden { display: none; }

/* Fatias de float na tela do item: cada uma diz o "a partir de" dela antes do clique. */
.fatias {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px; margin: 12px 0 16px;
}
.fatia {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  padding: 9px 10px; text-align: left; line-height: 1.35; transition: border-color .12s, background .12s;
}
.fatia:hover { border-color: var(--roxo); background: var(--suave-2); }
.fatia.on { border-color: var(--roxo); background: var(--suave); box-shadow: inset 0 0 0 1px var(--roxo); }
.fatia b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.fatia span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.fatia.on span { color: var(--roxo-2); }


/* Versão do item: Normal / StatTrak™ / Souvenir.
   Cada uma carrega a cor que o jogo usa para ela, para o cliente reconhecer de relance qual está
   vendo — laranja é StatTrak, amarelo é Souvenir. A selecionada ganha o anel, como a página atual
   da paginação: o destaque não pode depender só do matiz. */
.versoes .chip { border-width: 1px; }
.versoes .versao-stattrak { color: var(--st-txt); border-color: var(--st-bg); }
.versoes .versao-souvenir { color: var(--aviso-txt); border-color: var(--aviso-borda); }
.versoes .chip.on { border-color: var(--roxo); box-shadow: inset 0 0 0 1px var(--roxo); font-weight: 700; }
.versoes .versao-stattrak.on { background: var(--st-bg); }
.versoes .versao-souvenir.on { background: var(--aviso-bg); }

/* Contato: WhatsApp e Instagram lado a lado, quebrando no celular. */
.contatos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-insta {
  display: inline-block; padding: 12px 22px; border-radius: 24px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #f9ce34, #ee2a7b 50%, #6228d7);
}
.btn-insta:hover { filter: brightness(1.08); }

/* Filtro de cor: amostra + nome, para não depender só do quadradinho. */
.cores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.cor-op {
  display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 8px;
  font-size: 12px; color: var(--ink-2); text-align: left; border: 1px solid transparent;
}
.cor-op:hover { background: var(--suave-2); }
.cor-op.on { background: var(--suave); border-color: var(--roxo); color: var(--ink); font-weight: 600; }
.cor-op i {
  width: 14px; height: 14px; border-radius: 4px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.filter-nota { font-size: 11px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.4; }

/* ---------- Kits: faca + luva ---------- */
.kit-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 16px 0 20px; }
.kit-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.cor-chip { display: inline-flex; align-items: center; gap: 6px; }
.cor-chip i { width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }

.kit-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.kit {
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.kit-topo { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.kit-cor { display: inline-flex; align-items: center; gap: 6px; text-transform: capitalize; }
.kit-cor i { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.kit-faixa { background: var(--suave); border-radius: 999px; padding: 2px 8px; }

.kit-pecas { display: flex; align-items: stretch; gap: 8px; }
.kit-peca {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-top-width: 3px; border-radius: 10px;
  padding: 8px; background: var(--suave-2); transition: border-color .12s;
}
.kit-peca:hover { border-color: var(--roxo); }
.kit-peca img { width: 100%; height: 66px; object-fit: contain; }
.kit-nome { font-size: 12px; line-height: 1.3; margin-top: 4px; }
.kit-meta { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kit-preco { font-size: 12px; font-weight: 700; color: var(--preco); margin-top: 2px; }
.kit-mais { align-self: center; color: var(--ink-3); font-size: 18px; font-weight: 700; }

.kit-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.kit-rodape .fl { display: block; font-size: 11px; color: var(--ink-3); }
.kit-rodape b { font-size: 18px; color: var(--preco); font-variant-numeric: tabular-nums; }
.kit-rodape .btn { padding: 8px 16px; font-size: 13px; }

@media (max-width: 520px) {
  .kit-grade { grid-template-columns: 1fr; }
}

/* "Conversar direto": atalho em destaque na aba Vender, para quem não quer colar nada.
   Verde do WhatsApp na borda em vez de no fundo — chama atenção sem competir com o roxo do site. */
.fale-comigo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 18px 0 6px; padding: 16px 20px; border-radius: 12px;
  background: var(--suave-2); border: 1px solid var(--line); border-left: 4px solid #25d366;
}
.fale-comigo b { font-size: 15px; }
.fale-comigo p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); max-width: 60ch; }
.fale-comigo .btn-whats { flex: none; white-space: nowrap; }

/* Faixa de encomenda: substitui a lista de anúncios inventados na tela do item. */
.faixa-encomenda {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
  border: 1px solid var(--borda-suave); border-radius: 12px; padding: 16px 18px;
  background: var(--suave-2);
}
.faixa-encomenda > img { width: 84px; height: 62px; object-fit: contain; }
.faixa-nome { font-size: 15px; font-weight: 600; }
.faixa-detalhe { font-size: 13px; color: var(--ink-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.faixa-nota { font-size: 11px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; }
.faixa-preco { text-align: right; }
.faixa-preco .fl { display: block; font-size: 11px; color: var(--ink-3); }
.faixa-preco b { display: block; font-size: 22px; color: var(--preco); font-variant-numeric: tabular-nums; }
.faixa-preco .btn { margin-top: 8px; padding: 9px 20px; font-size: 13px; }

@media (max-width: 640px) {
  .faixa-encomenda { grid-template-columns: 64px 1fr; }
  .faixa-encomenda > img { width: 64px; height: 48px; }
  .faixa-preco { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 12px; }
  .faixa-preco .btn { margin-top: 0; margin-left: auto; }
}

/* Fase do Doppler no pedido: é ela que separa uma Doppler de R$ 1.800 de uma de R$ 40 mil. */
.ci-fase {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px;
  background: var(--suave); color: var(--roxo-2); font-size: 10px; font-weight: 700;
  vertical-align: 1px;
}

/* Confirmação depois de enviar o pedido — melhor que um carrinho vazio, que pareceria erro. */
.pedido-enviado { text-align: center; padding: 34px 10px; }
.pedido-enviado .pe-ok { font-size: 34px; }
.pedido-enviado b { display: block; margin-top: 10px; font-size: 16px; }
.pedido-enviado p { margin: 8px 0 18px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.pedido-enviado .btn-whats { display: block; margin-bottom: 10px; }

/* Interruptores de idioma e moeda: mesma caixa dos outros botões do topo, com largura estável
   para "PT"/"EN" e "R$"/"US$" não fazerem a barra dançar a cada troca. */
.icon-btn.troca { font-size: 13px; font-weight: 700; letter-spacing: .3px; min-width: 42px; }

/* ---------- Caixinha de idioma e moeda ---------- */
.local { position: relative; }
.local-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 210px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.local-titulo {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.local-ops { display: flex; gap: 6px; }
.local-op {
  flex: 1; display: flex; align-items: center; gap: 8px; justify-content: flex-start;
  padding: 9px 12px; border-radius: 9px; border: 1px solid transparent;
  font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap;
}
.local-op:hover { background: var(--suave-2); color: var(--ink-2); }
/* A opção em uso ganha caixa e contraste: sem isso, "escolhido" e "só passando o mouse" ficam
   parecidos demais, e o cliente não sabe em que idioma está. */
.local-op.on { background: var(--suave); border-color: var(--line); color: var(--ink); }
.local-simbolo { font-size: 15px; line-height: 1; }

/* ============================================================
   ESTILO "ANGULAR" — o desenho da Spinelli
   ============================================================
   O padrão (vinnydocs2) é arredondado e macio: cantos de 10 a 14px, sombra sob os cartões, herói
   com brilho radial, aba ativa em pílula. Este é o oposto — canto reto, borda no lugar da sombra,
   herói chapado com barra de acento, aba ativa sublinhada, títulos em caixa alta e a grade mais
   densa. Só CSS: a marcação e o JavaScript são os mesmos das outras lojas.

   Duas lojas do mesmo dono não podem parecer o mesmo site com a cor trocada. Quem visita as duas
   percebe na hora — e aí as duas parecem menos sérias, não mais. */

[data-estilo="angular"] {
  --radius: 2px;
  /* Sem sombra: aqui quem separa as superfícies é a borda, nos dois temas. */
  --shadow: none;
}

/* ---- Cantos retos em tudo o que era arredondado ---- */
[data-estilo="angular"] .card,
[data-estilo="angular"] .side-card,
[data-estilo="angular"] .cat-tile,
[data-estilo="angular"] .page-card,
[data-estilo="angular"] .filters,
[data-estilo="angular"] .kit,
[data-estilo="angular"] .local-menu,
[data-estilo="angular"] .hero-main,
[data-estilo="angular"] .search-suggest { border-radius: 2px; }

[data-estilo="angular"] .btn,
[data-estilo="angular"] .btn-buy,
[data-estilo="angular"] .btn-cart,
[data-estilo="angular"] .btn-whats,
[data-estilo="angular"] .btn-checkout,
[data-estilo="angular"] .chip,
[data-estilo="angular"] .local-op,
[data-estilo="angular"] .icon-btn,
[data-estilo="angular"] .mainnav a { border-radius: 2px; }

[data-estilo="angular"] .search input { border-radius: 2px 0 0 2px; }
[data-estilo="angular"] .search button { border-radius: 0 2px 2px 0; }

/* ---- Aba ativa: sublinhado, não pílula ---- */
[data-estilo="angular"] .mainnav a {
  border-bottom: 2px solid transparent; border-radius: 0; padding-bottom: 6px;
}
[data-estilo="angular"] .mainnav a.active {
  background: none; border-bottom-color: var(--magenta); color: #fff;
}

/* ---- Herói: faixa chapada, largura inteira, com barra de acento ----
   Os três cartões de apoio saem da coluna da direita e viram uma faixa embaixo. É a mudança que
   mais se nota: a silhueta da página inicial deixa de ser "bloco grande + coluna" e vira
   "faixa + trilho". */
[data-estilo="angular"] .hero-grid { grid-template-columns: 1fr; }
[data-estilo="angular"] .hero-side {
  grid-template-rows: none;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
[data-estilo="angular"] .hero-main {
  border-left: 5px solid var(--magenta);
  background: linear-gradient(100deg, var(--roxo-900) 0%, var(--roxo-800) 62%, var(--roxo-2) 140%);
}
[data-estilo="angular"] .hero-main h1 { letter-spacing: -.2px; }
[data-estilo="angular"] .hero-stats b { font-family: "Segoe UI", Arial, sans-serif; letter-spacing: -.5px; }

/* ---- Títulos em caixa alta: a marca "fala" diferente ---- */
[data-estilo="angular"] .section-head h2,
[data-estilo="angular"] .page-card h1,
[data-estilo="angular"] .up-lado h2,
[data-estilo="angular"] .listings h3 {
  text-transform: uppercase; letter-spacing: .06em; font-size: 18px;
}
[data-estilo="angular"] .page-card h1 { font-size: 22px; }
/* Uma régua sob o cabeçalho da seção, no lugar do espaço em branco. */
[data-estilo="angular"] .section-head {
  border-bottom: 1px solid var(--line); padding-bottom: 8px; align-items: center;
}

/* ---- Cartões: borda em vez de sombra, e mais densos ---- */
[data-estilo="angular"] .grid { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 10px; }
[data-estilo="angular"] .card {
  border: 1px solid var(--line);
  /* A cor da raridade continua vindo do `border-top-color` que o cartão traz escrito nele; aqui só
     engrossamos a faixa, para ela virar um traço de verdade em vez de um fio. */
  border-top-width: 4px;
}
[data-estilo="angular"] .card:hover {
  transform: none; border-color: var(--roxo); box-shadow: 0 0 0 1px var(--roxo);
}
[data-estilo="angular"] .card-thumb { background: var(--suave-2); border-bottom: 1px solid var(--line); }
/* O preço ganha uma linha própria, separado do nome — fica mais fácil comparar de relance. */
[data-estilo="angular"] .card-foot { border-top: 1px solid var(--line); padding-top: 7px; }
[data-estilo="angular"] .tag { border-radius: 2px; }

/* ---- Atalhos de categoria: borda, e o acento preenche no hover ---- */
[data-estilo="angular"] .cat-tile { border: 1px solid var(--line); }
[data-estilo="angular"] .cat-tile:hover {
  transform: none; border-color: var(--roxo); background: var(--suave);
}

/* ---- Painéis: a borda faz o trabalho que a sombra fazia ---- */
[data-estilo="angular"] .side-card,
[data-estilo="angular"] .page-card,
[data-estilo="angular"] .filters,
[data-estilo="angular"] .kit { border: 1px solid var(--line); }

/* ---- Botões: caixa alta, como os títulos ---- */
[data-estilo="angular"] .btn,
[data-estilo="angular"] .btn-buy,
[data-estilo="angular"] .btn-cart {
  text-transform: uppercase; letter-spacing: .05em; font-size: 13px;
}

/* Os últimos arredondados: barra de ordenação, paginação, filtros e as fatias de float. Ficam
   juntos aqui porque são todos "o mesmo ajuste" — se um escapa, ele salta na tela no meio de uma
   página inteira de cantos retos. */
[data-estilo="angular"] .sort-btn,
[data-estilo="angular"] .filtros-toggle,
[data-estilo="angular"] .filter-apply,
[data-estilo="angular"] .pagination button,
[data-estilo="angular"] .fatia,
[data-estilo="angular"] .cor-op,
[data-estilo="angular"] .up-op,
[data-estilo="angular"] .add-achado,
[data-estilo="angular"] .quote-form input,
[data-estilo="angular"] .badge { border-radius: 2px; }

[data-estilo="angular"] .sort-btn.on { background: var(--roxo); }

/* ============================================================
   ESTILO "ESPORTIVO" — o desenho da Muleku Skins
   ============================================================
   O logo da Muleku é itálico pesado e metálico, com cara de marca de equipe. O desenho segue essa
   voz em vez de inventar outra: itálico nos títulos, nos botões e no preço; canto cortado na
   diagonal, que ecoa a inclinação da letra; herói espelhado, com os cartões de apoio à esquerda.

   É o terceiro desenho da casa — nem o arredondado macio do vinnydocs2, nem o reto da Spinelli. */

[data-estilo="esportivo"] { --radius: 4px; }

/* ---- Canto cortado: alto à direita, baixo à esquerda, como a inclinação do itálico ---- */
[data-estilo="esportivo"] .card,
[data-estilo="esportivo"] .cat-tile,
[data-estilo="esportivo"] .side-card,
[data-estilo="esportivo"] .page-card,
[data-estilo="esportivo"] .kit,
[data-estilo="esportivo"] .filters,
[data-estilo="esportivo"] .hero-main { border-radius: 3px 18px 3px 18px; }
[data-estilo="esportivo"] .local-menu { border-radius: 3px 14px 3px 14px; }

/* ---- Herói espelhado: os cartões de apoio vêm primeiro, à esquerda ----
   Muda a silhueta da página inicial sem mexer na marcação: o mesmo HTML das outras lojas. */
[data-estilo="esportivo"] .hero-grid { grid-template-columns: 300px 1fr; }
[data-estilo="esportivo"] .hero-side { order: 1; }
[data-estilo="esportivo"] .hero-main { order: 2; position: relative; overflow: hidden; }
/* Faixas diagonais bem discretas, do jeito que aparecem em kit de time. Ficam atrás do texto. */
[data-estilo="esportivo"] .hero-main::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, #ffffff0a 0 2px, transparent 2px 22px);
}
[data-estilo="esportivo"] .hero-main > * { position: relative; z-index: 1; }
[data-estilo="esportivo"] .hero-main h1 { font-style: italic; letter-spacing: -.8px; }
[data-estilo="esportivo"] .hero-stats b { font-style: italic; }

/* Abaixo de 1024px o herói empilha. Duas coisas precisam ser desfeitas aqui, e a segunda é fácil
   de esquecer: a regra de duas colunas acima é MAIS ESPECÍFICA que a do breakpoint geral
   (`[data-estilo]` + classe vence classe sozinha), então ela sobrevive ao empilhamento e a
   manchete fica espremida numa coluna de 300px. Repetir `1fr` aqui é o que devolve a largura. */
@media (max-width: 1024px) {
  [data-estilo="esportivo"] .hero-grid { grid-template-columns: 1fr; }
  /* E a ordem volta ao natural: empilhado, os três cartões de apoio antes da manchete fariam a
     página abrir pelo rodapé do argumento. */
  [data-estilo="esportivo"] .hero-side { order: 2; }
  [data-estilo="esportivo"] .hero-main { order: 1; }
}

/* ---- Navegação: itálico, com barra grossa embaixo da aba ativa ---- */
[data-estilo="esportivo"] .mainnav a { font-style: italic; font-weight: 600; }
[data-estilo="esportivo"] .mainnav a.active {
  background: none; font-weight: 900; color: #fff;
  box-shadow: inset 0 -4px 0 var(--magenta);
  border-radius: 0;
}

/* ---- Títulos e botões acompanham o itálico do logo ---- */
[data-estilo="esportivo"] .section-head {
  border-left: 4px solid var(--roxo); padding-left: 12px; align-items: center;
}
[data-estilo="esportivo"] .section-head h2,
[data-estilo="esportivo"] .page-card h1,
[data-estilo="esportivo"] .up-lado h2 { font-style: italic; font-weight: 800; }

[data-estilo="esportivo"] .btn,
[data-estilo="esportivo"] .btn-buy,
[data-estilo="esportivo"] .btn-cart,
[data-estilo="esportivo"] .btn-checkout {
  border-radius: 24px; font-style: italic; text-transform: uppercase; letter-spacing: .04em;
}

/* ---- Cartões: miniatura maior e faixa de raridade grossa ---- */
[data-estilo="esportivo"] .card { border-top-width: 5px; }
[data-estilo="esportivo"] .card:hover {
  transform: translateY(-4px);
  /* A sombra do hover puxa para o vermelho da marca em vez do cinza neutro. */
  box-shadow: 0 14px 30px rgba(225, 29, 46, .22);
}
[data-estilo="esportivo"] .card-thumb { aspect-ratio: 3 / 2; }
[data-estilo="esportivo"] .price { font-style: italic; font-size: 17px; }
[data-estilo="esportivo"] .card-name { font-weight: 600; }

/* ---- Atalhos de categoria: emoji maior, e o acento aparece no topo ao passar o mouse ---- */
[data-estilo="esportivo"] .cat-tile { border-top: 3px solid transparent; }
[data-estilo="esportivo"] .cat-tile:hover { border-top-color: var(--roxo); }
[data-estilo="esportivo"] .cat-tile .emoji { font-size: 28px; }