/* =====================================================================
   AHC SPORTS - AJUSTES MOBILE (estilo Mercado Livre + identidade AHC)
   Só vale em telas de até 767px. O desktop não muda.
   Partes: 1 Cabeçalho | 2 Banner | 3 Título | 4 Grade | 5 Banners pequenos
           6 Menu lateral | 7 Subcategorias | 8 Carrinho | 9 Página do produto
           10 Botões flutuantes (WhatsApp e chat) | 11 Finalizar compra (checkout)
   Onde aparece !important é porque o tema trava aquela propriedade.
   ===================================================================== */
@media (max-width: 767px) {

  /* ===================================================================
     PARTE 1 - CABEÇALHO
     Barra branca FIXA no topo (logo + carrinho + menu) e, logo abaixo,
     uma faixa azul AHC com a busca grande e dois atalhos.
     =================================================================== */

  /* Empilha as partes e reserva 56px no topo para a barra fixa */
  #cabecalho .main-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 56px 0 0 !important;
    width: 100% !important;
  }

  /* Barra branca do logo: fixa no topo, fica visível ao rolar a página.
     O carrinho e o menu (já fixos) aparecem por cima dela. */
  #cabecalho .main-header .span3 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
    z-index: 1 !important;
  }
  /* ".logo" pega o <h1> da home e o <h2> das outras páginas */
  #cabecalho .logo {
    display: block !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #cabecalho .logo a {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Logo de 40px de altura, centralizado na barra */
  #cabecalho .logo img {
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: 40px !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Faixa azul AHC que guarda a busca e os atalhos */
  #cabecalho .conteudo-actions {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px 12px !important;
    background: #2850d1 !important;
    box-sizing: border-box !important;
  }

  /* Busca em cima (linha inteira), atalhos embaixo lado a lado */
  #cabecalho .actions-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Caixa de busca: branca, cantos de 6px, 44px de altura */
  #cabecalho .actions-menu .busca {
    order: -1 !important;
    flex: 0 0 100% !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
  }
  /* Esconde o círculo azul com a lupa que ficava à esquerda */
  #cabecalho .actions-menu .busca > i {
    display: none !important;
  }
  #cabecalho .actions-menu .busca #form-buscar {
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
  }
  /* Campo de texto: 16px evita o zoom do iPhone; sem caixa alta */
  #cabecalho .actions-menu .busca #auto-complete {
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 46px 0 14px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    text-transform: none !important;
    color: #333 !important;
    box-sizing: border-box !important;
  }
  /* Botão da busca (seta) em azul AHC */
  #cabecalho .actions-menu .busca .botao-busca {
    top: 2px !important;
    right: 4px !important;
    height: 40px !important;
    color: #2850d1 !important;
  }

  /* Atalhos "Dúvidas?" e "Conta": dois botões de largura igual */
  #cabecalho .actions-menu > li.visible-phone,
  #cabecalho .actions-menu > li.menu-login {
    flex: 1 1 calc(50% - 4px) !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  #cabecalho .actions-menu > li.visible-phone > a,
  #cabecalho .actions-menu > li.menu-login > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 36px !important;
    padding: 0 8px !important;
    background: rgba(255, 255, 255, 0.16) !important;   /* branco translúcido sobre o azul */
    border-radius: 18px !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    overflow: hidden !important;
  }
  /* Ícones sem o círculo azul de antes */
  #cabecalho .actions-menu > li > a i {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
  #cabecalho .actions-menu > li > a div {
    display: block !important;
    text-align: left !important;
    color: #fff !important;
  }
  #cabecalho .actions-menu > li.menu-login > a br {
    display: none !important;
  }

  /* ===================================================================
     PARTE 2 - BANNER
     Todos os banners com a mesma altura (1/3 da largura da tela), sem
     faixa branca embaixo, e as bolinhas em cima do banner.
     =================================================================== */

  .secao-banners .banner.cheio .flexslider {
    position: relative;
    margin: 0;
    background: #fff;
  }
  /* 33.33vw = 1/3 da largura da tela. A imagem preenche o espaço; se o
     banner tiver outra proporção, as laterais podem ser cortadas.
     Para não cortar nada, troque "cover" por "contain". */
  .secao-banners .banner.cheio .flexslider .slides li img {
    display: block;
    width: 100%;
    height: 33.33vw;
    object-fit: cover;
    object-position: center;
  }
  /* Bolinhas sobrepostas ao banner, na parte de baixo */
  .secao-banners .banner.cheio .flexslider .flex-control-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    text-align: center;
    z-index: 5;
  }
  .secao-banners .banner.cheio .flexslider .flex-control-nav li {
    display: inline-block;
    margin: 0 3px;
  }
  .secao-banners .banner.cheio .flexslider .flex-control-nav li a {
    display: block;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
    text-indent: -9999px;
    overflow: hidden;
  }
  /* Bolinha ativa: mais larga e branca */
  .secao-banners .banner.cheio .flexslider .flex-control-nav li a.flex-active {
    width: 18px;
    border-radius: 4px;
    background: #fff;
  }

  /* ===================================================================
     PARTE 3 - TÍTULO "MAIS VENDIDOS"
     Alinhado à esquerda, 20px, azul-marinho AHC, sem o vazio em cima.
     =================================================================== */

  #listagemProdutos .titulo-categoria {
    margin: 14px 0 4px !important;
    padding: 0 12px !important;
    text-align: left !important;
    border: 0 !important;
  }
  #listagemProdutos .titulo-categoria strong {
    display: block;
    position: static;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.2;
    text-align: left !important;
    text-transform: none;
    color: #070f48;
  }

  /* ===================================================================
     PARTE 4 - GRADE DE PRODUTOS (estilo Mercado Livre)
     Duas colunas, fundo cinza, cards brancos com foto grande.
     =================================================================== */

  /* Fundo cinza claro atrás dos cards */
  #listagemProdutos {
    background: #ebebeb;
    padding: 8px 4px;
    margin: 0;
  }

  /* Listas: sem bolinha. O padding:0 !important tira as margens de 20px
     que o tema colocava nas laterais e deixavam os cards estreitos. */
  #listagemProdutos ul[data-produtos-linha],
  #listagemProdutos .listagem-linha {
    list-style: none;
    margin: 0;
    padding: 0 !important;
    float: none;
    width: 100%;
  }

  /* Grade de 2 colunas: os cards quebram de linha a cada 2 */
  #listagemProdutos .listagem-linha > ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Cada produto ocupa 50% da largura, com 4px de respiro em volta */
  #listagemProdutos .listagem-linha > ul > li {
    display: flex;
    float: none;
    width: 50%;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
  }

  /* O card: branco, cantos arredondados, sombra leve */
  #listagemProdutos .listagem-item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    box-sizing: border-box;
  }

  /* O link que torna o card clicável vinha com fundo branco e cobria
     imagem, nome e preço. Fica transparente e continua clicável. */
  #listagemProdutos .listagem-item .produto-sobrepor {
    background: transparent !important;
  }

  /* Foto: quadrada (padding-top:100% cria o quadrado) e ocupando o card
     inteiro, como no Mercado Livre. padding-bottom:0 remove o espaço
     extra que o tema colocava embaixo. */
  #listagemProdutos .listagem-item .imagem-produto {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 100%;
    padding-bottom: 0 !important;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  #listagemProdutos .listagem-item .imagem-produto img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Bloco de texto abaixo da foto */
  #listagemProdutos .listagem-item .info-produto {
    flex: 1;
    padding: 10px 12px 14px;
    text-align: left;
  }

  /* Nome: cinza-escuro, sem negrito, no máximo 2 linhas */
  #listagemProdutos .listagem-item .nome-produto {
    display: block;
    max-height: 2.7em;
    overflow: hidden;
    font-size: 14px !important;
    line-height: 1.35;
    font-weight: 400;
    color: #333;
    text-decoration: none;
  }

  /* Área do preço alinhada à esquerda */
  #listagemProdutos .listagem-item .preco-produto {
    margin-top: 8px;
    text-align: left !important;
  }
  /* Preço: grande e escuro, sem negrito pesado */
  #listagemProdutos .listagem-item .preco-promocional,
  #listagemProdutos .listagem-item .preco-venda {
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: #333 !important;
  }
  /* "Preço sob consulta": menor e cinza */
  #listagemProdutos .listagem-item .preco-produto > .titulo {
    display: block;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #666 !important;
    text-align: left !important;
  }
  /* "A partir de" em cima do valor, pequeno e cinza */
  #listagemProdutos .listagem-item .preco-a-partir {
    display: block;
    text-align: left;
  }
  #listagemProdutos .listagem-item .preco-a-partir > span {
    display: block;
    font-size: 12px !important;
    color: #999 !important;
  }
  /* Parcelamento em verde, como no Mercado Livre */
  #listagemProdutos .listagem-item .preco-parcela {
    display: block;
    margin-top: 2px;
    font-size: 13px !important;
    line-height: 1.3;
    color: #00a650 !important;
  }
  #listagemProdutos .listagem-item .preco-parcela strong {
    color: #00a650;
    font-weight: 400;
  }

  /* Some com o botão "Ver mais": o card inteiro já é clicável */
  #listagemProdutos .listagem-item .acoes-produto-responsiva {
    display: none;
  }

  /* ===================================================================
     PARTE 5 - BANNERS PEQUENOS DO FIM DA GRADE
     Fileira que se arrasta para o lado: cada banner ocupa 46% da
     largura (aparecem 2 inteiros e um pedaço do próximo).
     =================================================================== */

  #listagemProdutos .banner.mini-banner {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    margin: 8px 0 0 !important;
    padding: 0 4px 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  #listagemProdutos .banner.mini-banner .modulo {
    flex: 0 0 46% !important;
    float: none !important;
    width: 46% !important;
    margin: 0 !important;
  }
  #listagemProdutos .banner.mini-banner .modulo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
  }

  /* ===================================================================
     PARTE 6 - MENU LATERAL (o que abre no botão de 3 barras)
     Só as 10 categorias principais, em linhas de 52px com uma seta.
     As subcategorias aparecem na página de cada categoria (Parte 7).
     Para VOLTAR a mostrar todas as subcategorias no menu, apague a
     regra ".nivel-dois, .nivel-tres { display: none }" logo abaixo.
     =================================================================== */

  .menu.superior .nivel-dois,
  .menu.superior .nivel-tres {
    display: none !important;
  }
  .menu.superior .nivel-um > li {
    margin: 0 !important;
    border-bottom: 1px solid #ececec !important;
  }
  .menu.superior .nivel-um > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    color: #333 !important;
    text-decoration: none !important;
  }
  .menu.superior .nivel-um > li > a strong {
    color: #333 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    text-transform: none !important;
  }
  /* Seta azul AHC à direita de cada categoria */
  .menu.superior .nivel-um > li > a::after {
    content: "\203A";
    font-size: 24px;
    line-height: 1;
    color: #2850d1;
  }
  .menu.superior .nivel-um > li > a i {
    display: none !important;
  }

  /* ===================================================================
     PARTE 7 - SUBCATEGORIAS NA PÁGINA DE CATEGORIA
     Fileira de botões arredondados que se arrasta para o lado, logo
     abaixo do botão "Filtros". Só aparece com o painel de filtros
     FECHADO (:not(.open)); ao tocar em "Filtros" o tema abre o painel
     dele normalmente. Só afeta páginas de categoria.
     =================================================================== */

  .secao-principal .coluna.span3:not(.open) {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
  }
  .secao-principal .coluna.span3:not(.open) > * {
    display: none !important;
  }
  .secao-principal .coluna.span3:not(.open) > .menu.lateral:not(.outras) {
    display: block !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: #fff !important;
    border: 0 !important;
  }
  .coluna .menu.lateral:not(.outras) > ul.nivel-um {
    display: block !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .coluna .menu.lateral:not(.outras) > ul.nivel-um > li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  /* Esconde o título da categoria-mãe (já aparece na página) */
  .coluna .menu.lateral:not(.outras) > ul.nivel-um > li > a {
    display: none !important;
  }
  /* A fileira: não quebra linha, arrasta para o lado */
  .coluna .menu.lateral:not(.outras) ul.nivel-dois {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    padding: 2px 12px !important;
    list-style: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch;
  }
  .coluna .menu.lateral:not(.outras) ul.nivel-dois > li {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  /* Cada subcategoria vira um botão arredondado azul claro */
  .coluna .menu.lateral:not(.outras) ul.nivel-dois > li > a {
    display: block !important;
    padding: 8px 14px !important;
    background: #eef1fb !important;
    color: #2850d1 !important;
    border: 1px solid #d5dcf5 !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  .coluna .menu.lateral:not(.outras) ul.nivel-tres,
  .coluna .menu.lateral:not(.outras) ul.nivel-dois > li > a i {
    display: none !important;
  }

  /* ===================================================================
     PARTE 8 - CARRINHO (página /carrinho, estilo Mercado Livre)
     Tudo começa com body.pagina-carrinho, então só vale no carrinho.
     Fundo cinza; item, frete e total viram cards brancos; botões grandes.
     =================================================================== */

  /* Fundo cinza e menos margem lateral */
  body.pagina-carrinho:not(.carrinho-checkout) #corpo .conteiner {
    background: #ebebeb !important;
    padding: 10px 8px 16px !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .finalizar-compra {
    margin: 0 !important;
  }

  /* Título "Carrinho" menor, com a frase de apoio embaixo */
  body.pagina-carrinho:not(.carrinho-checkout) .cabecalho-interno h1 {
    margin: 4px 4px 10px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    color: #070f48 !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .cabecalho-interno h1 small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #666 !important;
  }

  /* Tira a caixa com sombra do tema (cada bloco vira seu próprio card) */
  body.pagina-carrinho:not(.carrinho-checkout) .caixa-sombreada {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ITEM DO CARRINHO: uma linha compacta em vez de 5 blocos empilhados.
     Foto à esquerda; nome, quantidade + preço e lixeira à direita. */
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr[data-produto-id] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
    min-height: 96px !important;
    margin: 0 0 8px !important;
    padding: 12px 12px 12px 96px !important;   /* 96px à esquerda = espaço da foto */
    background: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr[data-produto-id] > td {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }
  /* Cada célula vai para o seu lugar na grade acima */
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr[data-produto-id] > td:nth-child(1) {
    position: absolute !important;   /* foto fixa no canto esquerdo */
    top: 12px !important;
    left: 12px !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr[data-produto-id] > td:nth-child(2) {
    width: 100% !important;          /* nome ocupa a linha de cima */
    margin-bottom: 6px !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr[data-produto-id] > td:nth-child(3) {
    flex: 1 1 auto !important;       /* quantidade à esquerda */
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr[data-produto-id] > td:nth-child(4) {
    text-align: right !important;    /* preço à direita */
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr[data-produto-id] > td:nth-child(5) {
    width: 100% !important;          /* lixeira embaixo, à direita */
    margin-top: 6px !important;
    text-align: right !important;
  }

  /* Foto quadrada de 72px */
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .conteiner-imagem .imagem img {
    display: block;
    width: 72px !important;
    height: 72px !important;
    object-fit: contain;
  }
  /* Nome do produto: 14px cinza-escuro; SKU e estoque escondidos */
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .produto-info a {
    font-size: 14px !important;
    line-height: 1.3;
    color: #333 !important;
    text-decoration: none;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .produto-info ul {
    display: none !important;
  }

  /* Quantidade: "− 1 +" compacto, com os sinais em azul AHC */
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .quantidade {
    display: flex !important;
    align-items: center;
    gap: 6px;
    height: auto !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .quantidade a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 16px !important;
    color: #2850d1 !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .quantidade .input-mini {
    width: 44px !important;
    height: 34px !important;
    padding: 0 !important;
    text-align: center;
    font-size: 15px !important;
  }

  /* Preço do item e lixeira */
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .col-item-unit-price .preco-promocional {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #333 !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .excluir a {
    display: inline-block;
    font-size: 18px !important;
    color: #999 !important;
  }

  /* FRETE e TOTAL: cada um vira um card branco */
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr.bg-dark {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 14px 12px !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  }
  /* Linhas escondidas continuam escondidas (o Subtotal repete o Total) */
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr.bg-dark.hidden,
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr.hidden-phone {
    display: none !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr.bg-dark > td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  /* Botão "Calcular" do frete em azul AHC */
  body.pagina-carrinho:not(.carrinho-checkout) #btn-frete {
    background: #2850d1 !important;
    color: #fff !important;
  }

  /* Total: rótulo à esquerda, valor grande à direita; parcelas em verde */
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .total {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    font-size: 16px !important;
    color: #333 !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .total .valor-total {
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #333 !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .valores-descontos .parcelas {
    margin-top: 4px;
    font-size: 13px !important;
    color: #00a650 !important;
    text-align: right;
  }

  /* BOTÕES: "Finalizar compra" em cima (azul cheio, 48px), "Continuar
     comprando" embaixo (só contorno). column-reverse inverte a ordem. */
  body.pagina-carrinho:not(.carrinho-checkout) .acao-editar .span12 {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .acao-editar .botao {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    border-radius: 6px !important;
    font-size: 16px !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .acao-editar .botao.principal {
    height: 48px !important;
    background: #2850d1 !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700 !important;
  }
  body.pagina-carrinho:not(.carrinho-checkout) .acao-editar a.botao {
    height: 44px !important;
    line-height: 30px !important;
    background: #fff !important;
    color: #2850d1 !important;
    border: 1px solid #2850d1 !important;
  }

  /* ===================================================================
     PARTE 9 - PÁGINA DO PRODUTO (estilo Mercado Livre)
     Tudo começa com body.pagina-produto, então só vale na página de
     produto. Fundo cinza; título, foto, compra e descrição viram cards
     brancos; preço grande; botão "Comprar" azul AHC de largura total.
     =================================================================== */

  /* Fundo cinza. box-sizing/width evitam que o padding estoure a tela. */
  body.pagina-produto #corpo .conteiner {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    background: #ebebeb !important;
    padding: 8px 8px 16px !important;
  }
  body.pagina-produto .secao-principal,
  body.pagina-produto .produto {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  body.pagina-produto .produto .row-fluid,
  body.pagina-produto .produto .row-fluid > .span12 {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Card do título: nome em 20px, código e marca pequenos e cinza */
  body.pagina-produto .produto .info-principal-produto {
    margin: 0 0 8px !important;
    padding: 14px 12px !important;
    background: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  }
  body.pagina-produto .produto h1.nome-produto {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    color: #333 !important;
  }
  body.pagina-produto .produto .codigo-produto {
    display: flex !important;
    justify-content: space-between !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #777 !important;
  }
  body.pagina-produto .produto .codigo-produto * {
    font-size: 13px !important;
  }

  /* Cards da foto e da compra: brancos, cantos arredondados, sombra leve */
  body.pagina-produto .produto > .row-fluid > .span7,
  body.pagina-produto .produto > .row-fluid > .span5 {
    margin: 0 0 8px !important;
    background: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  }
  body.pagina-produto .produto .span5 .principal {
    padding: 14px 12px !important;
  }

  /* Área da compra: preço grande à esquerda, parcelas em verde */
  body.pagina-produto .produto .acoes-produto {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.pagina-produto .produto .acoes-produto .preco-produto {
    text-align: left !important;
  }
  body.pagina-produto .produto .acoes-produto .preco-promocional,
  body.pagina-produto .produto .acoes-produto .preco-venda {
    font-size: 30px !important;
    line-height: 1.15 !important;
    font-weight: 400 !important;
    color: #333 !important;
  }
  body.pagina-produto .produto .acoes-produto .preco-parcela {
    font-size: 14px !important;
    color: #00a650 !important;
  }

  /* Botão "Comprar": azul AHC, largura total, 48px (o tema usava verde-água) */
  body.pagina-produto .produto .comprar {
    height: auto !important;
    margin-top: 12px !important;
    padding: 0 !important;
  }
  body.pagina-produto .produto .qtde-adicionar-carrinho {
    width: 100% !important;
    height: auto !important;
  }
  body.pagina-produto .produto .comprar .botao.principal {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    margin: 10px 0 0 !important;
    line-height: 34px !important;
    background: #2850d1 !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Frete e tabela de parcelas com um respiro a mais */
  body.pagina-produto .produto .cep {
    margin-top: 12px !important;
    padding: 12px !important;
    border-top: 1px solid #eee !important;
  }
  body.pagina-produto .produto .parcelas-produto {
    margin-top: 12px !important;
    border-radius: 6px !important;
  }

  /* Descrição do produto: card branco, letra de 15px e linha de 1.5 */
  body.pagina-produto .produto .abas-custom {
    margin: 0 0 8px !important;
    padding: 14px 12px !important;
    background: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #333 !important;
  }

  /* ===================================================================
     PARTE 10 - BOTÕES FLUTUANTES (WhatsApp e chat)
     O botão azul do chat (Jivochat) fica colado no canto de baixo e
     ficava por cima do botão verde do WhatsApp. O WhatsApp sobe 100px
     e fica logo acima do chat, sem se sobrepor. O chat em si não é
     mexido (a posição e o aparecer/sumir dele são controlados pelo
     próprio Jivochat). Para subir ou descer o WhatsApp, mude o "100px".
     =================================================================== */

  .floating-whatsapp {
    bottom: 100px !important;
    right: 15px !important;
  }

  /* ===================================================================
     PARTE 11 - FINALIZAR COMPRA / CHECKOUT (estilo Mercado Livre)
     Tudo começa com body.carrinho-checkout, então só vale nessa página.
     Só muda o VISUAL: nenhum campo, botão ou opção é removido ou movido
     de função. Fundo cinza; cada bloco (resumo, dados, entrega,
     pagamento) vira um card branco com título forte; opções em lista
     limpa; botões grandes.
     =================================================================== */

  /* Fundo cinza e menos margem lateral (o padding não pode estourar a tela) */
  body.carrinho-checkout #corpo .conteiner {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 8px 16px !important;
    background: #ebebeb !important;
  }
  body.carrinho-checkout .campos-pedido {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* As 3 colunas do tema ficam uma embaixo da outra, em largura total */
  body.carrinho-checkout #formularioCheckout > .row-fluid > [class*="span"] {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* CARDS: resumo, dados, entrega, mensagem e pagamento */
  body.carrinho-checkout .caixa-sombreada {
    margin: 0 0 8px !important;
    padding: 14px 12px !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    box-sizing: border-box !important;
  }
  body.carrinho-checkout fieldset {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  /* Quando há dois blocos no mesmo card, uma linha fina separa */
  body.carrinho-checkout fieldset + fieldset {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #eee !important;
  }

  /* TÍTULOS das seções: escuros e fortes, sem os ícones azuis */
  body.carrinho-checkout legend.titulo {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #333 !important;
  }
  body.carrinho-checkout legend.titulo i {
    display: none !important;
  }

  /* --------------------------------------------------------------
     RESUMO DO PEDIDO (a tabela vira lista)
     -------------------------------------------------------------- */
  body.carrinho-checkout .resumo-compra .tabela-carrinho,
  body.carrinho-checkout .resumo-compra .tabela-carrinho tbody {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
  }
  body.carrinho-checkout .resumo-compra .tabela-carrinho thead {
    display: none !important;
  }
  /* Cada produto: nome e quantidade à esquerda, preço à direita */
  body.carrinho-checkout .resumo-compra tbody tr:not(.bg-dark) {
    display: block !important;
    position: relative !important;
    padding: 10px 110px 10px 0 !important;   /* 110px à direita = espaço do preço */
    border: 0 !important;
    border-bottom: 1px solid #eee !important;
    background: transparent !important;
  }
  body.carrinho-checkout .resumo-compra tbody tr:not(.bg-dark) > td {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }
  body.carrinho-checkout .resumo-compra td.conteiner-preco {
    position: absolute !important;   /* preço centralizado na direita */
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    text-align: right !important;
  }
  body.carrinho-checkout .resumo-compra .produto-info {
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: #333 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body.carrinho-checkout .resumo-compra .produto-info ul {
    display: none !important;      /* esconde o SKU */
  }
  body.carrinho-checkout .resumo-compra td.conteiner-qtd div {
    font-size: 13px !important;
    color: #777 !important;
    background: transparent !important;
    padding: 0 !important;
  }
  body.carrinho-checkout .resumo-compra td.conteiner-qtd div::before {
    content: "Quantidade: ";
  }
  body.carrinho-checkout .resumo-compra .conteiner-preco .preco-promocional {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #333 !important;
    white-space: nowrap !important;
  }
  /* O tema empurra os valores 9px para a direita e o último algarismo
     era cortado. Zera esse recuo e deixa o valor sempre em uma linha. */
  body.carrinho-checkout .resumo-compra .padding-preco > div,
  body.carrinho-checkout .resumo-compra .preco-produto {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
  body.carrinho-checkout .resumo-compra td.conteiner-qtd,
  body.carrinho-checkout .resumo-compra td.conteiner-qtd div {
    text-align: left !important;
  }

  /* Subtotal, Frete, Desconto e Total: "nome ........ valor" */
  body.carrinho-checkout .resumo-compra tr.bg-dark:not(.hide) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.carrinho-checkout .resumo-compra tr.bg-dark > td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  /* A primeira célula dessas linhas é só espaço vazio */
  body.carrinho-checkout .resumo-compra tr.bg-dark > td:first-child {
    display: none !important;
  }
  body.carrinho-checkout .resumo-compra tr.bg-dark > td.text-right {
    text-align: left !important;
    font-size: 15px !important;
    color: #555 !important;
  }
  body.carrinho-checkout .resumo-compra tr.bg-dark .padding-preco strong {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #333 !important;
  }
  /* Total: título e valor grandes, com uma linha em cima */
  body.carrinho-checkout .resumo-compra tr.tr-checkout-total:not(.hide) {
    margin-top: 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid #eee !important;
  }
  body.carrinho-checkout .resumo-compra tr.tr-checkout-total > td.padding-preco {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    width: 100% !important;
  }
  body.carrinho-checkout .resumo-compra tr.tr-checkout-total .visible-phone {
    display: inline !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
  }
  body.carrinho-checkout .resumo-compra tr.tr-checkout-total .preco-carrinho-total {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #333 !important;
  }

  /* --------------------------------------------------------------
     DADOS CADASTRAIS: rótulo pequeno em cima, valor embaixo
     -------------------------------------------------------------- */
  body.carrinho-checkout ul.caixa-info {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.carrinho-checkout ul.caixa-info li {
    position: relative !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f1f1 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    color: #333 !important;
    background: transparent !important;
  }
  body.carrinho-checkout ul.caixa-info li strong {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #777 !important;
  }
  body.carrinho-checkout a.cliente-editar-dados-link {
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    float: none !important;
    font-size: 13px !important;
    color: #2850d1 !important;
  }

  /* --------------------------------------------------------------
     LISTAS DE ESCOLHA: endereços, opções de entrega e de pagamento
     Cada opção vira uma caixa com borda fina; o botão de rádio fica
     à esquerda, em azul AHC.
     -------------------------------------------------------------- */
  body.carrinho-checkout .accordion-group {
    margin: 8px 0 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }
  body.carrinho-checkout .accordion-heading {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
  }
  body.carrinho-checkout .accordion-heading .radio-conteiner {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.carrinho-checkout input[type="radio"],
  body.carrinho-checkout input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    accent-color: #2850d1;
  }
  body.carrinho-checkout .accordion-heading .forma-conteiner {
    display: flex !important;
    flex: 1 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    color: #333 !important;
  }
  body.carrinho-checkout .accordion-heading .forma-conteiner .helper {
    display: none !important;
  }
  body.carrinho-checkout .accordion-heading .forma-conteiner .envio-preco,
  body.carrinho-checkout .accordion-heading .forma-conteiner .envio-nome {
    font-size: 15px !important;
    color: #333 !important;
  }
  body.carrinho-checkout .accordion-inner {
    padding: 0 64px 12px 44px !important;   /* 64px na direita: espaço do link "Editar" */
    border: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #555 !important;
  }
  body.carrinho-checkout .warning-text {
    margin: 8px 0 0 !important;
    font-size: 12px !important;
    color: #777 !important;
  }
  /* Opções de pagamento: logos menores; os campos abrem por baixo */
  body.carrinho-checkout .li-box-payment .accordion-heading img {
    max-height: 26px !important;
    width: auto !important;
    max-width: 120px !important;
  }
  body.carrinho-checkout .li-box-payment .accordion-inner {
    padding: 12px !important;
    border-top: 1px solid #eee !important;
    font-size: 14px !important;
  }
  body.carrinho-checkout .li-box-payment .pagamento-valor {
    margin: 4px 0 0 !important;
    font-size: 15px !important;
    color: #333 !important;
  }
  /* Esconde só o desenho do cartão (a prévia); os campos continuam */
  body.carrinho-checkout .cartao-placeholder-card {
    display: none !important;
  }

  /* --------------------------------------------------------------
     CAMPOS DE TEXTO: 44px de altura, cantos de 6px, letra 16px
     (16px evita o zoom automático do iPhone)
     -------------------------------------------------------------- */
  body.carrinho-checkout .control-group {
    margin: 0 0 12px !important;
  }
  body.carrinho-checkout .control-label {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #555 !important;
  }
  body.carrinho-checkout .controls {
    margin: 0 !important;
  }
  body.carrinho-checkout input[type="text"],
  body.carrinho-checkout input[type="tel"],
  body.carrinho-checkout input[type="email"],
  body.carrinho-checkout select,
  body.carrinho-checkout textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 16px !important;
    color: #333 !important;
    box-sizing: border-box !important;
  }
  body.carrinho-checkout textarea {
    height: auto !important;
    min-height: 90px !important;
    padding: 10px 12px !important;
  }
  /* Campos que ficavam lado a lado passam a ocupar a linha toda */
  body.carrinho-checkout #userNewAddressInfo [class*="span"],
  body.carrinho-checkout .cartao-cadastrar-novo [class*="span"] {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  /* Botão "Alterar entrega" / "Alterar forma de pagamento" */
  body.carrinho-checkout .btn.btn-small {
    border: 1px solid #2850d1 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #2850d1 !important;
    box-shadow: none !important;
  }

  /* Aceite da política: caixa + texto alinhados */
  body.carrinho-checkout .control-group.checkbox label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #555 !important;
  }

  /* --------------------------------------------------------------
     BOTÕES: "Finalizar compra" em cima (azul cheio, 48px) e
     "Continuar comprando" embaixo (só contorno)
     -------------------------------------------------------------- */
  body.carrinho-checkout .acao-editar {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }
  body.carrinho-checkout .acao-editar .botao {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  body.carrinho-checkout .acao-editar .botao.principal {
    height: 48px !important;
    background: #2850d1 !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700 !important;
  }
  body.carrinho-checkout .acao-editar a.botao {
    height: 44px !important;
    line-height: 30px !important;
    background: #fff !important;
    color: #2850d1 !important;
    border: 1px solid #2850d1 !important;
  }
}

/* =========================================================
   TEMA AHC SPORTS (DESKTOP) – colar no FINAL do Editar CSS, depois dos ajustes mobile
   Tudo que muda cabeçalho, menu, cards e botões vale só em telas de 768px pra cima,
   então não briga com o CSS do celular (que vale até 767px).
   ========================================================= */
/* =========================================================
   SÓ COMPUTADOR (768px pra cima)
   ========================================================= */
@media (min-width:768px){

  /* ---------- Cabeçalho ---------- */
  #cabecalho{background:#fff!important;border-bottom:1px solid #e6e8eb}
  #cabecalho{position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(7,15,72,.06)}
  #cabecalho .main-header{padding:6px 0}

  /* Busca em formato de pílula, como na Centauro */
  #cabecalho .busca{border:0!important;background:none!important}
  #cabecalho .busca #auto-complete{
    height:44px!important;border:0!important;border-radius:999px!important;
    background:#f4f5f7!important;padding:0 52px 0 58px!important;
    font-size:14px!important;color:#1a1d21!important;box-shadow:none!important;
  }
  #cabecalho .busca #auto-complete:focus{outline:2px solid #1846D4!important;background:#fff!important}
  #cabecalho .busca button,#cabecalho .busca .botao{background:none!important;border:0!important;color:#070F48!important;box-shadow:none!important}

  /* ---------- Menu de categorias ---------- */
  #cabecalho .menu.superior{background:#fff!important;border-top:1px solid #e6e8eb}
  #cabecalho .menu.superior .nivel-um{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}
  #cabecalho .menu.superior .nivel-um>li{border:0!important;background:none!important;float:none}
  #cabecalho .menu.superior .nivel-um>li>a{
    color:#070F48!important;font-weight:700!important;font-size:14px!important;
    text-transform:none!important;padding:14px 12px!important;background:none!important;
    border:0!important;position:relative;text-shadow:none!important;
  }
  #cabecalho .menu.superior .nivel-um>li>a strong{
    color:#070F48!important;background:none!important;text-transform:none!important;
    font-weight:700!important;font-size:14px!important;border:0!important;box-shadow:none!important;
    padding:0!important;text-shadow:none!important;
  }
  #cabecalho .menu.superior .nivel-um>li>a{height:auto!important;line-height:1.2!important}
  #cabecalho .menu.superior .nivel-um>li>a::after{
    content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;
    background:#1846D4;transform:scaleX(0);transition:transform .2s;
  }
  #cabecalho .menu.superior .nivel-um>li:hover>a::after{transform:scaleX(1)}
  #cabecalho .menu.superior .nivel-um>li>a i,#cabecalho .menu.superior .nivel-um>li>a .fa{display:none}

  /* ---------- Faixa (banner tarja) EM CIMA do banner principal ---------- */
  .secao-banners>.conteiner{display:flex!important;flex-direction:column!important}
  .secao-banners .row-fluid.banner.hidden-phone{order:-1}
  .secao-banners .banner.tarja img{display:block;width:100%;height:auto}

  /* ---------- Títulos das vitrines ---------- */
  .titulo-categoria{
    text-align:left!important;border:0!important;max-width:1180px!important;
    margin:12px auto 16px!important;padding:0!important;   /* alinhado com a grade de produtos */
    font-size:24px!important;font-weight:800!important;color:#070F48!important;
    text-transform:none!important;letter-spacing:0!important;
  }
  .titulo-categoria i,.titulo-categoria .fa{display:none!important}

  /* ---------- Cards de produto ---------- */
  /* (não mexer em padding/fundo/transform do .listagem-item: o tema usa isso pra mostrar os produtos) */
  .listagem-item{border-color:transparent!important;border-radius:10px!important}
  .listagem-item:hover{box-shadow:0 8px 24px rgba(7,15,72,.10)!important}
  .listagem-item .imagem-produto{
    background:#f4f5f7!important;border-radius:10px;overflow:hidden;position:relative;
    margin-bottom:12px!important;
  }
  .listagem-item .imagem-produto img{
    mix-blend-mode:multiply;           /* o fundo branco da foto some no cinza */
    transform:scale(.88);transition:transform .3s ease;
  }
  .listagem-item:hover .imagem-produto img{transform:scale(.94)}
  .listagem-item .info-produto{text-align:left!important;padding:0 12px!important}
  .listagem-item .nome-produto{
    font-size:13px!important;line-height:1.35!important;font-weight:500!important;
    color:#2b2f34!important;text-transform:none!important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:35px;margin-bottom:8px!important;
  }
  .listagem-item .preco-produto{text-align:left!important}
  .listagem-item .preco-promocional,.listagem-item .preco-venda{
    font-size:20px!important;font-weight:800!important;color:#1a1d21!important;
  }
  .listagem-item .preco-venda-cheio,.listagem-item s,.listagem-item del{color:#6b7178!important;font-size:13px!important}
  .listagem-item .preco-parcela,.listagem-item .preco-a-partir>span{color:#6b7178!important;font-size:12px!important}
  .listagem-item .preco-parcela strong{color:#1a1d21!important;font-weight:600!important}

  /* ---------- Botões ---------- */
  .botao.principal,.botao-comprar,.acoes-produto .botao{
    background:#1846D4!important;border:0!important;border-radius:8px!important;
    text-shadow:none!important;box-shadow:none!important;font-weight:700!important;
    text-transform:none!important;
  }
  .botao.principal:hover,.botao-comprar:hover{background:#070F48!important}
}

/* =========================================================
   COMPUTADOR E CELULAR (peças novas do tema-ahc.js)
   ========================================================= */
/* Selo de desconto */
.ahc-off{
  position:absolute;top:10px;left:10px;z-index:2;background:#1846D4;color:#fff;
  font:700 12px/1 "PT Sans",sans-serif;padding:6px 8px;border-radius:4px;pointer-events:none;
}

/* Compre por categoria */
.ahc-cats{max-width:1200px;margin:28px auto 8px;padding:0 16px;box-sizing:border-box}
.ahc-cats h2{font:800 22px/1.2 "PT Sans",sans-serif;color:#070F48;margin:0 0 16px;text-align:left}
.ahc-cats-lista{display:flex;gap:18px;justify-content:space-between;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px}
.ahc-cats-lista::-webkit-scrollbar{display:none}
.ahc-cat{flex:0 0 auto;width:92px;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none!important}
.ahc-cat span.bola{
  width:80px;height:80px;border-radius:50%;background:#f4f5f7;
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;
}
.ahc-cat svg{width:40px;height:40px;fill:none;stroke:#070F48;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.ahc-cat:hover span.bola{background:#070F48;transform:translateY(-3px)}
.ahc-cat:hover svg{stroke:#fff}
.ahc-cat b{font:700 13px/1.2 "PT Sans",sans-serif;color:#1a1d21;text-align:center}
.ahc-cat:focus-visible{outline:2px solid #1846D4;outline-offset:4px;border-radius:8px}
@media (max-width:767px){
  .ahc-cats h2{font-size:18px}
  .ahc-cat{width:76px}.ahc-cat span.bola{width:64px;height:64px}.ahc-cat svg{width:32px;height:32px}
  .ahc-cat b{font-size:12px}
}