/* CN Store: versão limpa para celular (até 640px). Não mexe no PC.
   Para desligar tudo de uma vez: remova a linha do cn-mobile.css no layouts/layout.html. */
.cn-sub-short { display: none; } /* só aparece no celular */

/* Redes sociais flutuantes no lado DIREITO (PC e celular), acima do botão do chat.
   Para subir/descer: mude o "bottom" (PC aqui; celular mais abaixo). */
body .cn-socials { left: auto !important; right: 14px !important; bottom: 88px !important; }

@media (max-width: 640px) {

  /* ---------- Base ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: clip; -webkit-tap-highlight-color: transparent; }

  /* ---------- Fundo: mais calmo e mais leve ---------- */
  /* altura estável (a barra do navegador do celular não faz o fundo "pular") */
  body #cn-fundo-feixes { height: 100lvh !important; }
  /* sem granulado nem mistura de cores no celular: era isso que deixava o fundo "sujo" */
  body #cn-fundo-feixes::before { display: none !important; }
  body #cn-fundo-feixes::after {
    background: rgba(3, 2, 8, .58) !important;
  }

  /* ---------- Cards: sem blur pesado (mais fluido) e fundo mais firme para ler ---------- */
  body .cn-cat, body .cn-arr, body .cn-rev, body .cn-final, body .cn-hero-chip,
  body .cn-panel, body .cn-card-main, body .cn-step, body .cn-flow-card, body .cn-perk {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: rgba(10, 6, 20, .9) !important;
  }

  /* ---------- Navbar mais enxuta ---------- */
  #top-announce { font-size: .72rem !important; padding: .35rem .6rem !important; line-height: 1.25; }
  body > header { padding: .4rem .5rem 0 !important; }
  body > header > .container { padding: .4rem .6rem !important; border-radius: .9rem !important; }
  body > header img[alt="CN Store"] { width: 2.5rem !important; height: 2.5rem !important; }
  /* Termos já está dentro da página FAQ: sai da barra para ela não ficar cheia */
  body > header a[href="/faq#termos"] { display: none !important; }

  /* ---------- Botões flutuantes: menores, um embaixo do outro (coluna) ---------- */
  body .cn-socials {
    flex-direction: column !important;
    gap: 8px !important;
    right: 10px !important;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    opacity: .94;
  }
  body .cn-social { width: 36px !important; height: 36px !important; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
  body .cn-social svg { width: 17px !important; height: 17px !important; }

  /* ---------- Home: hero ---------- */
  body .cn-hero { padding: 1.1rem 0 .6rem !important; }
  body .cn-hero-inner { gap: .65rem !important; }
  body .krow-eyebrow { font-size: .62rem !important; padding: .2rem .7rem !important; }
  body .cn-hero-sub { font-size: .9rem !important; line-height: 1.5 !important; }

  /* botões do hero e do final: um embaixo do outro, largura total, fáceis de tocar */
  body .cn-hero-actions { width: 100%; flex-direction: column; align-items: stretch; gap: .5rem !important; }
  body .cn-hero-actions > a { width: 100%; justify-content: center; height: 2.9rem !important; }
  body .cn-hero-actions > a.btn-secondary { height: 2.5rem !important; }

  /* selos de confiança: uma linha só, discretos (o "5 min" já está no texto acima) */
  body .cn-hero-trust { gap: .3rem 1rem !important; font-size: .76rem !important; }
  body .cn-hero-trust li:nth-child(3) { display: none; }

  /* ---------- Home: seções mais próximas e títulos menores ---------- */
  body #categories { padding-top: .25rem !important; }
  body #cn-arrivals-section { padding-top: 1.25rem !important; }
  body #home-reviews { padding-top: 1rem !important; }
  body .cn-sec-head { margin-bottom: .6rem !important; }
  body .cn-sec-title { font-size: 1.15rem !important; }
  body .cn-rev-total { display: none; } /* "+260 clientes" já aparece no topo */

  /* avaliações: texto e print com altura controlada */
  body .cn-rev p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden; font-size: .85rem; line-height: 1.45;
  }
  body .cn-rev-photo { max-height: 9rem; overflow: hidden; }
  body .cn-rev-photo img { width: 100%; max-height: 9rem; object-fit: cover; object-position: top; }

  /* chamada final: só título + botões */
  body section:has(> .cn-final) { padding-top: 1.25rem !important; padding-bottom: 5rem !important; } /* espaço para os botões flutuantes */
  body .cn-final { padding: 1.25rem 1rem !important; gap: .6rem !important; }
  body .cn-final h2 { font-size: 1.3rem !important; }
  body .cn-final p { display: none; }
}

/* quem pede menos movimento no celular recebe menos efeito */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  body .cn-hero-title, body .cn-hero-sub, body .cn-hero-actions, body .cn-hero-trust li { animation: none !important; }
}

/* =====================================================================
   Página de contas (Fortnite / Valorant) no celular e tablet (até 1023px)
   O tema já tinha uma "gaveta" de filtros (botão Filtros abre por baixo),
   mas uma regra do cn-checker.css (position: sticky) anulava a gaveta e
   deixava o painel de filtros inteiro ANTES das contas, empurrando tudo
   para baixo. Aqui a gaveta volta a funcionar. PC (1024px+) não muda.
   ===================================================================== */
@media (max-width: 1023px) {
  body #cn-accounts-app .cn-filters {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: auto;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #0d0819 !important;
  }
  /* a gaveta precisa ficar acima da navbar e dos botões flutuantes */
  body.cn-filters-open > header { z-index: 0 !important; }
  body.cn-filters-open > main:not(#cn-fundo-feixes) { z-index: 2000 !important; }
}

@media (max-width: 640px) {
  /* topo da página de contas mais compacto: as contas aparecem logo */
  body #cn-accounts-app { padding-top: .9rem !important; padding-bottom: 1.5rem !important; }
  body #cn-accounts-app > .flex { margin-bottom: .7rem !important; gap: .6rem !important; }
  body #cn-accounts-app > .flex h3 { font-size: 1.3rem !important; }
  body #cn-accounts-app > .flex a[href="/avaliacoes"] { font-size: .72rem; gap: .3rem; }
  body #cn-accounts-app .cn-filters-toggle { margin-bottom: .6rem; }

  /* ---------- Home: categorias maiores, uma embaixo da outra ---------- */
  body #categories .krow-cat-grid {
    grid-template-columns: 1fr !important;
    gap: .8rem !important;
  }
  body #categories .krow-cat:nth-child(3) { grid-column: auto !important; }
  body #categories .krow-cat-art,
  body #categories .krow-cat:nth-child(3) .krow-cat-art {
    /* as artes são 16:9: com essa proporção a foto aparece inteira, sem corte */
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    background-size: cover !important;
    background-position: center !important;
  }
  body #categories .krow-cat-body { padding: .7rem .9rem .9rem !important; gap: .45rem !important; }
  body #categories .krow-cat-eyebrow { display: inline-flex !important; font-size: .62rem !important; }
  body #categories .krow-cat-body h3 { font-size: 1.5rem !important; text-align: left; }
  body #categories .krow-cat-list { display: none !important; }
  body #categories .krow-cat-foot {
    flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
    gap: .75rem !important; margin-top: .2rem !important; padding-top: .6rem !important;
  }
  body #categories .krow-cat-foot > div { display: block !important; }
  body #categories .krow-cat-foot small { font-size: .58rem !important; }
  body #categories .krow-cat-foot strong { font-size: .9rem !important; }
  body #categories .krow-cat-foot .cn-cat-go {
    height: 2.3rem !important; padding: 0 1rem !important; font-size: .78rem !important; white-space: nowrap;
  }
  body #categories .krow-cat-foot .cn-cat-go svg { display: inline-block !important; }

  /* ---------- Texto de entrada curto no celular ---------- */
  body .cn-hero-sub .cn-sub-full { display: none; }
  body .cn-hero-sub .cn-sub-short { display: inline; }
}