/* =====================================================================
   Keep Game — Camada de otimização MOBILE / TABLET
   Carregado com media="(max-width: 991.98px)" → telas ≥992px (desktop)
   NUNCA aplicam estas regras. A versão desktop permanece intocada.
   Usa !important onde precisa vencer o <style> inline da página.
   ===================================================================== */

/* ---------------------------------------------------------------
   Barra promocional — compacta, sem espaçadores laterais
   --------------------------------------------------------------- */
@media (max-width: 575.98px) {
  #promo-bar .container > div:first-child,
  #promo-bar .container > div:last-child { flex: 0 0 auto !important; }
  #promo-bar .container > div:first-child { display: none !important; }
  #promo-bar .container { justify-content: center !important; gap: .5rem !important; }
  #promo-bar span { font-size: .66rem !important; line-height: 1.25; }
}

/* ---------------------------------------------------------------
   Navbar — marca menor, menu em largura cheia, alvos de toque
   --------------------------------------------------------------- */
.navbar .navbar-brand { font-size: 1.15rem !important; }
.navbar .navbar-brand img { max-height: 32px !important; }

/* carrinho que vive dentro do collapse: oculto no mobile (já temos o botão fixo) */
.nav-cart-desktop { display: none !important; }

/* botão de carrinho exclusivo do mobile */
.nav-cart-mobile { padding: .4rem .65rem !important; }

.navbar-collapse .navbar-nav { padding: .35rem 0 .25rem; gap: .15rem; }
.navbar-collapse .nav-item { width: 100%; }
.navbar-collapse .nav-item .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-collapse .nav-link { padding: .6rem .25rem !important; font-size: 1.02rem; }
.navbar-collapse .dropdown-menu { width: 100%; }

/* ---------------------------------------------------------------
   Barra de categorias — chips em rolagem horizontal (sem quebrar)
   --------------------------------------------------------------- */
.cat-bar {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: .4rem !important;
  padding-bottom: 3px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cat-bar::-webkit-scrollbar { display: none; }
.cat-bar .cat-select,
.cat-bar .cat-quick { flex: 0 0 auto; }
.cat-bar .cat-select { max-width: 58vw; }
.cat-bar .cat-sep { display: none !important; }

/* ---------------------------------------------------------------
   Hero — altura/espacamento reduzidos, texto fluido
   --------------------------------------------------------------- */
.hero-row { padding: 34px 0 26px !important; }
.hero-title { font-size: 1.95rem !important; line-height: 1.12 !important; }
.hero-title br { display: none; }                 /* deixa o titulo fluir natural */
.hero-sub { font-size: .9rem !important; margin-bottom: 1.25rem !important; line-height: 1.6 !important; }
.hero-badge-promo { font-size: .62rem !important; padding: 5px 11px !important; line-height: 1.3; }
.hero-trust { gap: 9px 16px !important; }
.hero-trust-item { font-size: .74rem !important; }
.hero-search-input { font-size: .9rem !important; padding: 12px 14px !important; }
.hero-search-btn { padding: 0 16px !important; }

/* barra de stats — compacta e sem os separadores soltos */
.hero-stats { padding: 10px 0 !important; }
.hero-stats .d-flex { gap: .45rem 1.1rem !important; }
.hero-stat { font-size: .72rem !important; }
.hero-stat[style*="1e1e1e"] { display: none !important; }   /* esconde os | que ficariam soltos no wrap */

/* ---------------------------------------------------------------
   Cards de produto — imagem proporcional + CTA sempre visivel
   --------------------------------------------------------------- */
.img-produto { height: 150px !important; padding: 10px !important; }
.card-custom .card-body { padding: .65rem .55rem !important; }
.card-title { font-size: .78rem !important; margin-bottom: .55rem !important; line-height: 1.3 !important; }
.card-custom .fs-5 { font-size: 1.02rem !important; }

/* sem :hover no touch → revela o botão "Ver produto" permanentemente */
.card-hover-btn {
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  margin-top: 10px !important;
}
.card-hover-btn .btn { padding: .5rem !important; font-size: .82rem !important; }

/* ---------------------------------------------------------------
   Telas pequenas (celular) — gutters e títulos de seção
   --------------------------------------------------------------- */
@media (max-width: 575.98px) {
  #produtos.container, main#produtos { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  #produtos .row.g-3 { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
  .section-cat-title { font-size: .92rem !important; }
  .section-cat-bar { height: 18px !important; }
}

/* ---------------------------------------------------------------
   Footer — respiros menores
   --------------------------------------------------------------- */
footer .container.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
footer .row.g-5 { --bs-gutter-y: 1.75rem; }