/*
 * Panamericana — Topo V5 (isolado)
 * Estilos do cabeçalho limitados a #pan-topo.
 * Estilos do painel antigo .wtc limitados à presença do novo cabeçalho.
 * Não altera header.css, css.css, mid.php nem estilos do Magento.
 */
#pan-topo {
  --pan-laranja: #ef6518;
  --pan-laranja-escuro: #d4490b;
  --pan-texto: #1d2939;
  --pan-suave: #667085;
  --pan-borda: #e8eaf0;
  --pan-fundo: #fff;
  --pan-superficie: #f8f9fb;
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  z-index: 40;
  color: var(--pan-texto);
  background: var(--pan-fundo);
  border-top: 4px solid var(--pan-laranja);
  border-bottom: 1px solid var(--pan-borda);
  box-shadow: 0 8px 28px rgba(29, 41, 57, .07);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: 1.45;
}
#pan-topo, #pan-topo *, #pan-topo *::before, #pan-topo *::after { box-sizing: border-box; }
#pan-topo .pan-topo__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#pan-topo a { color: inherit; text-decoration: none; background: transparent; }
#pan-topo a:focus-visible, #pan-topo button:focus-visible, #pan-topo input:focus-visible { outline: 3px solid #fb9f62; outline-offset: 3px; }
#pan-topo button { font-family: inherit; cursor: pointer; }
#pan-topo svg { display: block; flex: none; width: 19px; height: 19px; }
/* V5: ocupa quase toda a largura disponível, com margem lateral controlada.
 * Antes o limite de 1480px deixava ~220px vazios em cada lado no desktop 1920px. */
#pan-topo .pan-topo__container {
  width: calc(100% - clamp(40px, 4vw, 96px));
  max-width: 1920px;
  margin: 0 auto;
}

/* Tarja utilitária */
#pan-topo .pan-topo__barra-superior { background: #fff8f3; border-bottom: 1px solid #fff0e7; }
#pan-topo .pan-topo__barra-conteudo { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 33px; font-size: 11px; font-weight: 600; letter-spacing: .015em; color: #7a4632; }
#pan-topo .pan-topo__mensagem { display: inline-flex; gap: 8px; align-items: center; }
#pan-topo .pan-topo__ponto, #pan-topo .pan-topo__status { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pan-laranja); }
#pan-topo .pan-topo__telefone { display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }
#pan-topo .pan-topo__telefone svg { width: 13px; height: 13px; }
#pan-topo .pan-topo__telefone:hover { color: var(--pan-laranja-escuro); }

/* Faixa principal: logomarca, pesquisa e atalhos */
#pan-topo .pan-topo__principal { background: #fff; }
#pan-topo .pan-topo__linha-principal {
  display: grid;
  grid-template-columns: minmax(445px, 480px) minmax(215px, 1fr) auto;
  gap: clamp(24px, 2.3vw, 44px);
  align-items: center;
  min-width: 0;
  min-height: 103px;
}
#pan-topo .pan-topo__identidade { display: flex; align-items: center; gap: 88px; min-width: 0; }
#pan-topo .pan-topo__cobertura {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 7px 3px 7px 18px;
  border-left: 1px solid #e6e9ef;
  border-radius: 9px;
  color: #465165;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.28;
}
#pan-topo .pan-topo__cobertura svg { width: 21px; height: 21px; color: var(--pan-laranja); }
#pan-topo .pan-topo__cobertura span { display: block; max-width: 118px; }
#pan-topo .pan-topo__cobertura strong { display: block; font-size: 12px; font-weight: 800; color: #1d2939; white-space: nowrap; }
#pan-topo .pan-topo__cobertura:hover { color: var(--pan-laranja-escuro); background: #fff6f0; }
#pan-topo .pan-topo__cobertura:hover strong { color: var(--pan-laranja-escuro); }
#pan-topo .pan-topo__marca {
  display: block;
  position: relative;
  overflow: hidden;
  width: 186px;
  height: 62px;
  flex: none;
}
#pan-topo .pan-topo__marca-sprite {
  position: absolute;
  top: 1px;
  left: 0;
  display: block;
  width: 248px;
  height: 80px;
  background-image: url('https://panamericanamg.com.br/imgs/pan-sprites.webp');
  background-position: -1973px -5px;
  background-repeat: no-repeat;
  transform: scale(.75);
  transform-origin: top left;
}
#pan-topo .pan-topo__pesquisa {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 5px 6px 5px 17px;
  background: #fff;
  border: 1.5px solid #e5e7ec;
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(16, 24, 40, .055);
  transition: border-color .18s ease, box-shadow .18s ease;
}
#pan-topo .pan-topo__pesquisa:focus-within { border-color: #ed8e4c; box-shadow: 0 0 0 4px rgba(239, 101, 24, .09); }
#pan-topo .pan-topo__pesquisa-icone { width: 21px; height: 21px; color: #98a2b3; }
#pan-topo .pan-topo__pesquisa input[type="search"] {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pan-texto);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: normal;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
#pan-topo .pan-topo__pesquisa input[type="search"]::placeholder { color: #8490a0; opacity: 1; }
#pan-topo .pan-topo__pesquisa input[type="search"]:focus-visible { outline: none; }
#pan-topo .pan-topo__buscar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  width: auto;
  height: 40px;
  margin: 0;
  padding: 0 17px;
  border: 0;
  border-radius: 10px;
  background: var(--pan-laranja);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  box-shadow: none;
  appearance: none;
}
#pan-topo .pan-topo__buscar svg { width: 16px; height: 16px; }
#pan-topo .pan-topo__buscar:hover { background: var(--pan-laranja-escuro); }
#pan-topo .pan-topo__atalhos { display: flex; align-items: center; justify-content: flex-end; gap: 15px; flex-wrap: nowrap; }
#pan-topo .pan-topo__atalho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 43px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #435063;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
#pan-topo .pan-topo__atalho svg { width: 18px; height: 18px; color: var(--pan-laranja); }
#pan-topo .pan-topo__atalho:hover, #pan-topo .pan-topo__atalho[aria-current="page"] { background: #fff6f0; border-color: #ffe4d3; color: var(--pan-laranja-escuro); }
#pan-topo .pan-topo__catalogo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 43px;
  padding: 0 15px;
  color: #fff;
  background: var(--pan-laranja);
  border: 1px solid var(--pan-laranja);
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 9px rgba(239, 101, 24, .12);
}
#pan-topo .pan-topo__catalogo:hover { background: var(--pan-laranja-escuro); border-color: var(--pan-laranja-escuro); color: #fff; }
#pan-topo .pan-topo__catalogo svg { width: 15px; height: 15px; }
#pan-topo .pan-topo__menu-botao { display: none; }

/* Navegação desktop */
#pan-topo .pan-topo__navegacao { display: block; width: 100%; border-top: 1px solid #eef0f3; background: #fafbfc; }
#pan-topo .pan-topo__nav-linha { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 53px; }
#pan-topo .pan-topo__links { display: flex; align-items: stretch; gap: clamp(8px, 2vw, 31px); min-width: 0; }
#pan-topo .pan-topo__links a { display: inline-flex; align-items: center; position: relative; min-height: 53px; padding: 0 5px; font-size: 13px; font-weight: 700; color: #485568; white-space: nowrap; line-height: 1.3; }
#pan-topo .pan-topo__links a::after { content: ''; position: absolute; right: 5px; bottom: 0; left: 5px; height: 3px; border-radius: 3px 3px 0 0; background: var(--pan-laranja); transform: scaleX(0); transform-origin: center; transition: transform .16s ease; }
#pan-topo .pan-topo__links a:hover, #pan-topo .pan-topo__links a[aria-current="page"] { color: var(--pan-laranja-escuro); }
#pan-topo .pan-topo__links a:hover::after, #pan-topo .pan-topo__links a[aria-current="page"]::after { transform: scaleX(1); }
#pan-topo .pan-topo__links .pan-topo__link-mobile { display: none; }
#pan-topo .pan-topo__nav-contato { display: inline-flex; gap: 9px; align-items: center; white-space: nowrap; color: #667085; font-size: 12px; font-weight: 700; }
#pan-topo .pan-topo__nav-contato:hover { color: var(--pan-laranja-escuro); }
#pan-topo .pan-topo__nav-contato svg { width: 14px; height: 14px; }

@media (max-width: 1200px) and (min-width: 901px) {
  #pan-topo .pan-topo__linha-principal { grid-template-columns: minmax(350px, 370px) minmax(160px, 1fr) auto; gap: 10px; }
  #pan-topo .pan-topo__identidade { gap: 36px; }
  #pan-topo .pan-topo__marca { width: 170px; }
  #pan-topo .pan-topo__cobertura { font-size: 10px; gap: 4px; padding-left: 11px; }
  #pan-topo .pan-topo__cobertura strong { font-size: 11px; }
  #pan-topo .pan-topo__cobertura svg { width: 18px; height: 18px; }
  #pan-topo .pan-topo__marca-sprite { transform: scale(.685); }
  #pan-topo .pan-topo__atalhos { gap: 2px; }
  #pan-topo .pan-topo__atalho { padding: 0 6px; font-size: 12px; gap: 5px; }
  #pan-topo .pan-topo__catalogo { padding: 0 10px; }
  #pan-topo .pan-topo__links { gap: 13px; }
}
@media (max-width: 900px) {
  #pan-topo { margin-bottom: 12px; }
  #pan-topo .pan-topo__container { width: min(100% - 32px, 100%); }
  #pan-topo .pan-topo__linha-principal { grid-template-columns: minmax(0, 1fr) 44px; column-gap: 12px; row-gap: 8px; min-height: 0; padding-top: 11px; padding-bottom: 13px; }
  #pan-topo .pan-topo__identidade { grid-column: 1; grid-row: 1; gap: 24px; }
  #pan-topo .pan-topo__marca { width: 160px; height: 57px; }
  #pan-topo .pan-topo__marca-sprite { transform: scale(.64); }
  #pan-topo .pan-topo__pesquisa { grid-column: 1 / -1; grid-row: 2; height: 48px; }
  #pan-topo .pan-topo__atalhos { display: none; }
  #pan-topo .pan-topo__menu-botao { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; grid-column: 2; grid-row: 1; border: 1px solid #ffd2b5; border-radius: 12px; background: #fff6f0; color: var(--pan-laranja-escuro); box-shadow: none; }
  #pan-topo .pan-topo__menu-botao svg { width: 23px; height: 23px; }
  #pan-topo .pan-topo__menu-fechar { display: none; }
  #pan-topo .pan-topo__menu-botao[aria-expanded="true"] .pan-topo__menu-fechar { display: block; }
  #pan-topo .pan-topo__menu-botao[aria-expanded="true"] .pan-topo__menu-abrir { display: none; }
  #pan-topo .pan-topo__navegacao { display: none; background: #fff; border-top: 1px solid #eaedf2; }
  #pan-topo .pan-topo__navegacao[data-aberto="true"] { display: block; }
  #pan-topo .pan-topo__nav-linha { display: block; padding-top: 8px; padding-bottom: 14px; }
  #pan-topo .pan-topo__links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px 8px; }
  #pan-topo .pan-topo__links a, #pan-topo .pan-topo__links .pan-topo__link-mobile { display: flex; align-items: center; min-height: 42px; padding: 10px 11px; border-radius: 9px; background: #f8f9fb; font-size: 13px; font-weight: 700; white-space: normal; }
  #pan-topo .pan-topo__links a::after { display: none; }
  #pan-topo .pan-topo__links a:hover, #pan-topo .pan-topo__links a[aria-current="page"] { background: #fff1e8; }
  #pan-topo .pan-topo__nav-contato { margin-top: 12px; padding: 12px 11px 4px; white-space: normal; }
}
@media (max-width: 640px) {
  /* Coloca cobertura numa linha separada antes que a logo encoste no texto. */
  #pan-topo .pan-topo__identidade { flex-direction: column; align-items: flex-start; gap: 13px; }
  #pan-topo .pan-topo__cobertura { border-left: 0; padding: 0 0 0 4px; }
}
@media (max-width: 520px) {
  #pan-topo .pan-topo__barra-conteudo { justify-content: center; min-height: 28px; font-size: 10px; }
  #pan-topo .pan-topo__telefone { display: none; }
  #pan-topo .pan-topo__linha-principal { padding-top: 8px; }
  #pan-topo .pan-topo__identidade { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 6px; }
  #pan-topo .pan-topo__cobertura { gap: 5px; padding: 0 0 0 2px; font-size: 10px; }
  #pan-topo .pan-topo__cobertura svg { width: 15px; height: 15px; }
  #pan-topo .pan-topo__cobertura span { max-width: none; }
  #pan-topo .pan-topo__cobertura strong { display: inline; font-size: 10px; }
  #pan-topo .pan-topo__marca { height: 51px; width: 147px; }
  #pan-topo .pan-topo__marca-sprite { transform: scale(.59); }
  #pan-topo .pan-topo__pesquisa { height: 46px; padding: 4px 4px 4px 12px; }
  #pan-topo .pan-topo__pesquisa input[type="search"] { font-size: 13px; padding: 0 8px; }
  #pan-topo .pan-topo__buscar { height: 36px; padding: 0 11px; font-size: 12px; }
  #pan-topo .pan-topo__buscar svg { display: none; }
}
@media (max-width: 350px) {
  #pan-topo .pan-topo__container { width: calc(100% - 20px); }
  #pan-topo .pan-topo__links { grid-template-columns: 1fr; }
  #pan-topo .pan-topo__pesquisa input[type="search"] { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #pan-topo * { transition: none !important; }
}


/* --------------------------------------------------------------
 * Atendimento legado do /mid.php: aba acima de todo o cabeçalho.
 * Só ativa quando o #pan-topo novo é instalado (classe definida pelo JS).
 * NÃO cria outro painel nem muda links / telefone / WhatsApp.
 * -------------------------------------------------------------- */
body.pan-topo-disponivel .wtc {
  position: fixed !important;
  z-index: 2147483002 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box;
  width: min(370px, 100vw) !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: 58px 24px 28px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #fff !important;
  border: 0 !important;
  border-left: 3px solid #ef6518 !important;
  border-radius: 18px 0 0 18px !important;
  box-shadow: -15px 0 55px rgba(16,24,40,.22) !important;
  color: #465165 !important;
  font: 14px/1.45 Arial, Helvetica, sans-serif !important;
  text-align: left !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 4px !important;
}
body.pan-topo-disponivel .wtc,
body.pan-topo-disponivel .wtc * { box-sizing: border-box; }
body.pan-topo-disponivel .wtc > br { display: none !important; }
body.pan-topo-disponivel .wtc > b:first-of-type {
  display: block; margin: 4px 0 9px; color: #1d2939;
  font: 700 19px/1.3 Arial, Helvetica, sans-serif; letter-spacing: 0;
}
body.pan-topo-disponivel .wtc > p {
  margin: 4px 0 15px !important; color: #667085 !important;
  font: 400 12px/1.5 Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
}
body.pan-topo-disponivel .wtc > article {
  display: block; width: 100% !important; margin: 7px 0 3px;
  padding: 10px 12px !important; background: #595959;
  color: #fff; font: 700 13px/1.35 Arial, Helvetica, sans-serif;
  border-radius: 12px !important;
}
body.pan-topo-disponivel .wtc > article[style*="green"] { background: #078628 !important; }
body.pan-topo-disponivel .wtc > a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 49px;
  margin: 0 !important;
  padding: 12px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #eef0f3 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #465165 !important;
  text-decoration: none !important;
  font: 500 14px/1.3 Arial, Helvetica, sans-serif !important;
}
body.pan-topo-disponivel .wtc > a:hover {
  background: #fff7f1 !important; color: #d4490b !important;
  border-radius: 9px !important;
}
/* mid.php utiliza links vazios com textos de CSS ::before. */
body.pan-topo-disponivel .wtc #tfixo::before { content: 'Fixo'; }
body.pan-topo-disponivel .wtc #tcelular::before { content: 'Celular'; }
body.pan-topo-disponivel .wtc #tdesc::before { content: 'Destaque'; }
body.pan-topo-disponivel .wtc #ttodos::before { content: 'Todos'; }
body.pan-topo-disponivel .wtc #tdesc { justify-content: space-between !important; }
body.pan-topo-disponivel .wtc #tdesc img { width: 45px; height: 45px; object-fit: cover; border-radius: 50%; }
body.pan-topo-disponivel .wtc > p:last-of-type { margin: 20px 0 0 !important; text-align: center; font-weight: 700 !important; }
body.pan-topo-disponivel .wtc > b:last-child { text-align: center; }
body.pan-topo-disponivel .wtc .pan-topo-atendimento-fechar {
  position: absolute; top: 14px; right: 16px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #fff6f0; color: #c34d10; border: 1px solid #ffdec9;
  border-radius: 10px; font: 700 23px/1 Arial, sans-serif;
  cursor: pointer; z-index: 1;
}
body.pan-topo-disponivel .wtc .pan-topo-atendimento-fechar:hover { background: #ffe8da; }
body.pan-topo-disponivel .pan-topo-atendimento-fundo {
  position: fixed; inset: 0; z-index: 2147483001;
  background: rgba(14, 22, 34, .49); cursor: pointer;
}
body.pan-topo-disponivel .pan-topo-atendimento-fundo[hidden] { display: none !important; }
body.pan-topo-atendimento-aberto .wt.whats { visibility: hidden; }
@media (max-width: 520px) {
  body.pan-topo-disponivel .wtc { width: min(360px, 100vw) !important; border-radius: 0 !important; padding: 58px 21px 22px !important; }
}