/* Casa da Borracha Autopeças - estrutura do layout da loja da Meridional com a identidade da
   prévia de 03/11/2026: amarelo #FCF004 (fachada), vermelho #ED3237 e grafite #363233 (logo),
   fontes Barlow e Barlow Condensed */
:root {
  --cb-amarelo: #FCF004;
  --cb-amarelo-escuro: #e8dc00;
  --cb-vermelho: #ED3237;
  --cb-vermelho-escuro: #c4232a;
  --cb-vermelho-fraco: #fde6e7;
  --cb-grafite: #363233;
  --cb-grafite-escuro: #262324;
  --cb-cinza: #8a8486;
  --cb-fundo: #f6f5f5;
}

* { font-family: 'Barlow', system-ui, sans-serif; }
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { font-family: bootstrap-icons !important; }
html { font-size: 14px; }
body { background: #fff; color: var(--cb-grafite-escuro); }
h1, h2, h3, h4, .titulo, .preco { font-family: 'Barlow Condensed', 'Barlow', sans-serif !important; }
a { color: var(--cb-vermelho); font-weight: 600; }
a:hover { color: var(--cb-vermelho-escuro); }
.text-cb { color: var(--cb-vermelho) !important; }
.bg-cb { background-color: var(--cb-vermelho) !important; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.form-control:focus, .form-select:focus { border-color: var(--cb-vermelho); box-shadow: 0 0 0 .2rem rgba(237, 50, 55, .2); }
.form-check-input:checked { background-color: var(--cb-vermelho); border-color: var(--cb-vermelho); }

/* faixa do topo */
nav.topo { background: var(--cb-grafite); }
nav.topo .nav-link { color: #e9e6e6; font-weight: 500 !important; font-size: 13px; padding: .55rem .9rem; }
nav.topo .nav-link strong { color: #fff; }
nav.topo .nav-link i { color: var(--cb-vermelho); }
nav.topo a.nav-link:hover, nav.topo a.nav-link:hover strong { color: var(--cb-amarelo); }

/* cabeçalho amarelo com o logo */
header.cabecalho { background: var(--cb-amarelo); }
header.cabecalho .navbar-brand img { height: 74px; width: auto; }
header.cabecalho .navbar-toggler { color: var(--cb-grafite); }
header.cabecalho .navbar-toggler:focus { box-shadow: none; }
header.cabecalho .nav-link { color: var(--cb-grafite); font-weight: 700 !important; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; padding: .5rem 1rem !important; }
header.cabecalho .nav-link:hover, header.cabecalho .nav-link:focus { color: #000; }
header.cabecalho .nav-link.ativo { border-bottom: 3px solid var(--cb-vermelho); }
header.cabecalho .nav-link .bi-chevron-down { font-size: 11px; }
header.cabecalho .dropdown-menu { border: 0; border-top: 4px solid var(--cb-vermelho); border-radius: 0 0 .5rem .5rem; box-shadow: 0 10px 24px rgba(0, 0, 0, .15); max-height: 70vh; overflow-y: auto; }
header.cabecalho .dropdown-item { color: var(--cb-grafite); font-weight: 600; padding: .5rem 1.2rem; }
header.cabecalho .dropdown-item:hover { background: var(--cb-vermelho-fraco); color: var(--cb-vermelho-escuro); }

/* barra da loja (a verde da Meridional) */
.barra-loja { background: var(--cb-grafite); border-top: 4px solid var(--cb-vermelho); border-bottom: 4px solid var(--cb-vermelho); }
.barra-loja .form-select, .barra-loja .form-control { border: 0; font-weight: 500; }
.barra-loja .btn-light { font-weight: 600; }
.barra-loja .busca-larga { width: 330px; }
.btn-conta { background: #4a4546; color: #fff; border: 0; font-weight: 600; }
.btn-conta:hover, .btn-conta:focus { background: #575152; color: #fff; }
.btn-carrinho { background: var(--cb-vermelho); color: #fff; border: 0; font-weight: 700; }
.btn-carrinho:hover, .btn-carrinho:focus { background: var(--cb-vermelho-escuro); color: #fff; }
.btn-carrinho .badge { background: #fff; color: var(--cb-vermelho); }
select.filtro { max-width: calc((100% - 12rem) / 6); text-overflow: ellipsis; font-size: 13px; }
.btn-veiculos { background: var(--cb-amarelo); color: var(--cb-grafite); white-space: nowrap; font-weight: 700; }
.btn-veiculos:hover { background: var(--cb-amarelo-escuro); color: var(--cb-grafite); }

/* fachada: banner no formato do logo e os segmentos */
.fachada { background: var(--cb-amarelo); }
.banner { background: var(--cb-grafite); border-radius: 999px; border: 6px solid #fff; outline: 5px solid var(--cb-vermelho); box-shadow: 0 0 0 11px #fff, 0 0 0 13px var(--cb-grafite); position: relative; overflow: hidden; margin: 0 14px; }
.banner::after { content: ''; position: absolute; right: -60px; top: -60px; width: 340px; height: 340px; border-radius: 50%; border: 36px solid rgba(237, 50, 55, .16); }
.banner .conteudo { position: relative; z-index: 1; }
.banner h1 { color: #fff; font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: .01em; }
.banner h1 em { color: var(--cb-vermelho); font-style: italic; font-family: inherit !important; }
.banner p { color: #d9d4d5; font-size: 17px; }
.banner .selos span { color: #fff; font-weight: 600; font-size: 14px; margin-right: 1.6rem; white-space: nowrap; display: inline-block; }
.banner .selos i { color: var(--cb-vermelho); margin-right: .35rem; }
#segmentos .nav-link { background: var(--cb-vermelho); color: #fff; border: 3px solid #fff; outline: 2px solid var(--cb-grafite); border-radius: 999px;
  font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; padding: .45rem 1.6rem; }
#segmentos .nav-link:hover { background: var(--cb-vermelho-escuro); }
#segmentos .nav-link.ativo { background: var(--cb-grafite); }
#segmentos .nav-link i { color: #fff; }

/* categorias do segmento */
#selecoes .nav-item { background: #fff; border: 1px solid #ebe8e8; border-radius: .6rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .05); }
#selecoes .nav-link { color: var(--cb-grafite); font-weight: 700 !important; font-size: 14px; white-space: nowrap; }
#selecoes i { color: var(--cb-vermelho); font-size: 20px; vertical-align: -3px; }
#selecoes .nav-item.ativo { background: var(--cb-vermelho); border-color: var(--cb-vermelho); }
#selecoes .ativo .nav-link, #selecoes .ativo i { color: #fff; }
.rotulo-segmento { background: transparent !important; border: 0 !important; box-shadow: none !important; flex: 0 0 auto !important; }
.rotulo-segmento .nav-link { color: var(--cb-grafite) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .05em; }

/* cards (mesma montagem do loja.erb da Meridional) */
#ver-produtos { background-color: var(--cb-fundo) !important; }
#ver-produtos .card { background-color: #fff !important; box-shadow: 0 2px 8px rgba(38, 35, 36, .06); }
#ver-produtos .bg-produtos { background: var(--cb-grafite); height: 140px; border-bottom: 5px solid var(--cb-amarelo); }
#ver-produtos .bg-produtos span { font-size: 11.5px; position: relative; top: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; display: inline-block; max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ver-produtos .m-produtos { margin-top: -100px; }
#ver-produtos .card-produtos { height: 200px; max-width: 225px; width: 100%; object-fit: contain; object-position: center; border-radius: .5rem; border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); background: #fff; }
#ver-produtos .card-title { font-size: 1.25rem !important; line-height: 1.2; font-weight: 600; }
#ver-produtos .card-title a { color: var(--cb-grafite); text-decoration: none; font-family: inherit; font-weight: inherit; }
#ver-produtos .card-title a:hover { color: var(--cb-vermelho); }
#ver-produtos .codigo { color: var(--cb-cinza); font-size: 12px; font-weight: 500; }
#ver-produtos h2.preco { color: var(--cb-grafite); font-weight: 700; font-size: 2.15rem; margin-bottom: .6rem; }
#ver-produtos h4.de { color: var(--cb-cinza); font-size: 1.1rem; margin: 0; }
.etiqueta-oferta { position: absolute; right: 12px; top: 12px; background: var(--cb-amarelo); color: var(--cb-grafite); font-weight: 800; font-size: 12px; padding: .15rem .55rem; border-radius: 1rem; z-index: 2; }
.titulo-secao { color: var(--cb-grafite); font-weight: 700; font-size: 2rem; }
.titulo-secao::after { content: ''; display: block; width: 56px; height: 4px; background: var(--cb-vermelho); margin-top: .35rem; border-radius: 2px; }

.btn-busca { font-size: 13px; line-height: 2.5; border-radius: .75em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.btn-cb { background: var(--cb-vermelho); border-color: var(--cb-vermelho); color: #fff; }
.btn-cb:hover, .btn-cb:focus { background: var(--cb-vermelho-escuro); border-color: var(--cb-vermelho-escuro); color: #fff; }
.btn-indisponivel, .btn-indisponivel:disabled { color: #fff; background-color: #9a9496; border-color: #9a9496; opacity: 1; }

.pagination .page-link { color: var(--cb-grafite); }
.pagination .page-item.active .page-link { background: var(--cb-vermelho); border-color: var(--cb-vermelho); color: #fff; }
.pagination .page-link:focus { box-shadow: 0 0 0 .2rem rgba(237, 50, 55, .2); }

.caixa-info { background: #fff; border: 1px solid #ebe8e8; border-radius: .75rem; }

/* produto */
.produto .trilha { font-size: 13px; }
.produto .trilha a { color: inherit; font-weight: 500; text-decoration: none; }
.produto .trilha a:hover { color: var(--cb-vermelho); }
.produto .trilha b { color: var(--cb-grafite); }
.produto h1 { color: var(--cb-grafite); font-weight: 700; font-size: 2.6rem; }
.produto .ficha { font-size: 15px; line-height: 1.9; }
.produto .ficha b { color: var(--cb-grafite); }
.produto .foto-grande { max-height: 460px; border-radius: .75rem; border: 1px solid #ebe8e8; background: #fff; }
.produto .miniatura { width: 72px; height: 72px; object-fit: cover; border-radius: .4rem; border: 1px solid #cfc9ca; opacity: .55; margin: .25rem; cursor: pointer; }
.produto .miniatura.ativa { border: 2px solid var(--cb-vermelho); opacity: 1; }
.produto .preco-grande { font-size: 3rem; font-weight: 700; color: var(--cb-grafite); }
.produto .de { color: var(--cb-cinza); font-size: 1.4rem; }
.produto .estoque { color: #2c7a3f; font-weight: 600; }
.produto .sem-estoque { color: var(--cb-cinza); font-weight: 600; }
.produto .dicas { font-size: 13.5px; }
.produto .dicas a { color: inherit; font-weight: 500; text-decoration: none; }
.produto .dicas a:hover { color: var(--cb-vermelho); }
.produto .descricao { font-size: 15px; }

/* carrinho */
.carrinho h1 { color: var(--cb-grafite); font-weight: 700; }
.carrinho h5.titulo { color: var(--cb-grafite); }
.carrinho .table th { color: var(--cb-grafite); }
.carrinho .foto-item { width: 110px; height: 100px; object-fit: cover; }
.carrinho .nome-item { color: var(--cb-grafite); font-size: 15px; text-decoration: none; }
.carrinho .nome-item:hover { color: var(--cb-vermelho); }
.carrinho .detalhe-item { font-size: 13px; }
.carrinho .valor-item { color: var(--cb-grafite); font-size: 1.5rem; font-weight: 700; }
.carrinho .excluir { font-size: 13px; }
.carrinho .qtd .btn { background: #9a9496; color: #fff; border: 0; border-radius: 0; width: 38px; font-size: 1.2rem; }
.carrinho .qtd .btn:hover { background: var(--cb-grafite); }
.carrinho .qtd input { width: 60px; border-radius: 0; text-align: center; font-size: 1.1rem; -moz-appearance: textfield; }
.carrinho .qtd input::-webkit-inner-spin-button { -webkit-appearance: none; }
.carrinho .linha-total td { font-size: 1.6rem; font-weight: 700; color: var(--cb-grafite); }
.carrinho .nao-sei-cep, .carrinho .aviso-pagamento { font-size: 13px; }
.carrinho .endereco-entrega { font-size: 13.5px; }
.frete-opcao { border: 1px solid #ebe8e8 !important; border-radius: .5rem; padding: .55rem .8rem; margin-bottom: .45rem; background: #fff; color: var(--cb-grafite-escuro); font-weight: 500; }
.frete-opcao.btn-light:hover { border-color: var(--cb-vermelho) !important; background: #fff; }
.frete-opcao.btn-secondary, .frete-opcao.btn-secondary:hover, .frete-opcao.btn-secondary:focus { border-color: var(--cb-vermelho) !important; background: var(--cb-vermelho-fraco); color: var(--cb-grafite-escuro); box-shadow: none; }
.frete-opcao.btn-secondary .marcador::before { content: "\f517"; color: var(--cb-vermelho); }

/* gaveta do carrinho (carrinho_detalhes) */
#carrinho { width: 25%; min-width: 350px; max-width: 100vw; background: #f8f8f8; border-left: 4px solid var(--cb-vermelho); z-index: 1100; box-shadow: -10px 0 30px rgba(0, 0, 0, .25); }
#carrinho .gaveta-topo .btn { background: transparent; border: 0; color: var(--cb-grafite); font-weight: 700; padding-left: 0; }
#carrinho .nome-item { color: var(--cb-grafite); }
#carrinho .nome-item:hover { color: var(--cb-vermelho); }
#toast .toast-body { background: var(--cb-grafite); color: #fff; border-left: 6px solid var(--cb-amarelo); font-weight: 600; }

/* rodapé */
footer .faixa { background: var(--cb-amarelo); border-radius: 1.2rem; border-left: 10px solid var(--cb-vermelho); color: var(--cb-grafite); }
footer .faixa img { height: 64px; width: auto; }
footer .faixa p { color: var(--cb-grafite); }
footer h6 { color: var(--cb-vermelho); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
footer .nav-item, footer a.nav-item { color: #4f4a4b; font-weight: 500; text-decoration: none; }
footer a.nav-item:hover { color: var(--cb-vermelho); }
footer .text-fraco { color: var(--cb-cinza); }
footer .assinatura { color: var(--cb-cinza); font-size: 13px; }

/* páginas do modelo (login, cadastro, pedidos) */
main.container > h1, main.container > h2 { color: var(--cb-grafite); }
.btn-dark { background: var(--cb-grafite); border-color: var(--cb-grafite); }
.btn-dark:hover { background: var(--cb-grafite-escuro); border-color: var(--cb-grafite-escuro); }

/* celular */
@media (max-width: 767px) {
  header.cabecalho .navbar-brand img { height: 58px; }
  .barra-loja .busca-larga { width: 100%; }
  select.filtro { max-width: none; width: 100% !important; margin: .25rem 0 !important; }
  .banner { border-radius: 1.6rem; padding: 1.2rem 1.4rem !important; border-width: 4px; outline-width: 3px; box-shadow: 0 0 0 7px #fff, 0 0 0 8px var(--cb-grafite); margin: 0 8px; }
  .banner::after { display: none; }
  .banner h1 { font-size: 30px; }
  .banner p { font-size: 15px; }
  .banner .selos span { margin: 0 1rem .3rem 0; font-size: 13px; white-space: normal; }
  #segmentos { flex-wrap: wrap; gap: .5rem !important; }
  #segmentos .nav-link { font-size: 12px; padding: .35rem .9rem; }
  #selecoes { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  #selecoes .nav-item { flex: 0 0 auto; }
  .rotulo-segmento { display: none; }
  #ver-produtos .bg-produtos { height: 100px; }
  #ver-produtos .m-produtos { margin-top: -70px; padding: 0 .9rem !important; }
  #ver-produtos .card-produtos { height: 140px; }
  #ver-produtos .card-title { font-size: 1.05rem !important; }
  #ver-produtos h2.preco { font-size: 1.6rem; }
  #ver-produtos .btn-busca { font-size: 11px; padding-left: .3rem; padding-right: .3rem; }
  .etiqueta-oferta { right: 6px; top: 6px; font-size: 11px; }
  #ver-produtos .bg-produtos span { font-size: 10px; margin-left: .6rem !important; top: 8px; }
  .produto h1 { font-size: 2rem; }
  .produto .preco-grande { font-size: 2.4rem; }
  .carrinho .foto-item { width: 80px; height: 74px; }
  #carrinho { width: 100%; min-width: 0; }
  footer .faixa { border-left-width: 6px; }
}