/* =====================================================================
   Mecânica Águia — Responsividade

   A tipografia e os espaçamentos grandes são fluidos (clamp) em style.css,
   então aqui ficam apenas as mudanças de LAYOUT — o ponto em que cada
   componente deixa de funcionar, não a largura de um aparelho específico.

   Pontos de quebra:
   1100  colunas do conteúdo ainda cabem lado a lado
    992  grades de 4/3 colunas passam a 2
    860  navegação vira gaveta + barra de ações fixa no rodapé
    720  blocos de duas colunas passam a uma
    600  grades passam a coluna única
    400  ajustes finos de telas muito estreitas
   ===================================================================== */

/* O slogan ao lado do logotipo só cabe quando sobra espaço para os cinco
   itens do menu mais os dois botões — abaixo disso ele encavalava o menu. */
@media (min-width: 1400px) {
  .brand__tag { display: block; }
}

/* ---------- <= 1100px ---------- */
@media (max-width: 1100px) {
  .split { gap: var(--sp-6); }
}

/* ---------- <= 992px ---------- */
@media (max-width: 992px) {
  /* barra de confiança passa a 2 colunas: a altura reservada aumenta */
  :root { --trustbar-h: 116px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .trustbar ul { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: -1; }
  .electric-visual { max-width: 680px; margin: 0 auto; }
  .hero__inner { max-width: none; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-contact { position: relative; top: 0; }
  .service-route { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-5); }
  .service-route::before { display: none; }
  .service-route .step { padding-top: 4.5rem; }
  .service-route .step::after { content: ''; position: absolute; top: 28px; left: 50%; right: -50%; height: 2px; background: var(--red-soft); }
  .service-route .step:nth-child(even)::after { display: none; }
}

@media (max-width: 600px) {
  .split--reverse .electric-visual { order: 1; margin-top: var(--sp-6); padding: 0 0 .5rem .5rem; }
  .electric-visual::before { inset: 1rem 1rem 0 0; }
  .electric-visual__frame { min-height: 330px; }
  .split__media .electric-visual__photo,
  .electric-visual__frame::after { width: calc(100% - .75rem); height: 330px; }
  .electric-visual__bolt { top: -16px; width: 56px; height: 56px; border-width: 5px; }
  .electric-visual__bolt svg { width: 24px; }
  .electric-visual__status { right: -.25rem; top: 1rem; padding: .65rem .75rem; }
  .electric-visual figcaption { display: none; }
  .workshop-proof { padding: 1.3rem .75rem 3.5rem 0; }
  .workshop-proof::before { inset: 0 0 1.5rem 1rem; }
  .workshop-proof__label { left: -.35rem; top: .3rem; }
  .workshop-proof__stamp { width: 98px; height: 98px; right: -.2rem; border-width: 5px; }
  .workshop-proof figcaption { max-width: calc(100% - 6.5rem); font-size: .68rem; }
  .facade-proof { padding: .75rem 0 0 .5rem; }
  .facade-proof::before { inset: 0 .75rem 3rem 0; }
  .facade-proof__address { left: .6rem; bottom: .6rem; min-width: 190px; padding: .6rem .75rem; }
  .facade-proof__pin { width: 29px; height: 29px; border-width: 4px; }
  .facade-proof__pin i { inset: 7px; }
  .facade-proof__route { margin-left: .75rem; padding: .7rem .8rem; }
  .facade-proof figcaption { margin-left: .75rem; }
}

/* ---------- <= 860px : navegação em gaveta + barra de ações ---------- */
@media (max-width: 860px) {
  :root {
    --header-h: 64px;
    --topbar-h: 0px;
    /* Altura reservada pela barra de ações fixa. O valor sem `env()` vem
       primeiro: se o navegador não entender safe-area, a variável continua
       válida — se ela ficasse inválida, o aviso flutuante e o espaço do
       rodapé perderiam a referência e cairiam por cima da barra. */
    --mobile-bar-h: 70px;
    --mobile-bar-h: calc(70px + var(--safe-b));
  }

  /* No celular o telefone já está na barra inferior. */
  .topbar { display: none; }

  .nav-toggle { display: inline-flex; }

  /* `backdrop-filter` transforma o elemento em bloco contentor dos
     descendentes `position: fixed`. Com ele, a gaveta (que é fixed e mora
     dentro do cabeçalho) passava a ser posicionada em relação ao CABEÇALHO,
     não à tela — com a página rolada, ela ia parar fora da viewport e só o
     véu escuro aparecia. Aqui o cabeçalho é opaco o bastante sem o desfoque. */
  .header { backdrop-filter: none; background: rgba(255, 255, 255, 0.98); }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 110;
    width: min(390px, 92vw);
    height: 100dvh;
    max-height: none;
    background: #fff;
    border-radius: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 calc(var(--sp-4) + var(--safe-b));
    box-shadow: var(--shadow-lg);
    transform: translateX(102%);
    /* Fechado: fora da tela e fora da ordem de tabulação. A visibilidade volta
       no mesmo instante em que a gaveta começa a abrir (para o foco poder
       entrar) e só some depois que ela termina de sair. */
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s var(--ease), visibility 0s;
  }

  /* Cabeçalho próprio da gaveta: o botão de fechar precisa estar DENTRO
     dela, senão fica coberto pelo próprio painel. */
  .nav__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 78px;
    padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  .nav__head-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--ink);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    letter-spacing: 0;
    text-transform: none;
  }
  .nav__head-title::before { content: ''; width: 142px; height: 48px; flex: none; background: url('../assets/images/logo-mecanica-aguia-400.png') left center / contain no-repeat; }
  .nav__head-title::after { content: none; }
  .nav__head-title { font-size: 0; }
  .nav-close {
    width: var(--tap);
    height: var(--tap);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
  }
  .nav-close:hover { border-color: var(--red); color: var(--red); }

  .nav__list { flex-direction: column; align-items: stretch; gap: .5rem; padding: var(--sp-4); }
  .nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding: .6rem 2.4rem .6rem .65rem;
    font-size: var(--fs-base);
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
  }
  .nav__link::before { content: ''; width: 34px; height: 34px; flex: none; border-radius: 9px; background-color: var(--red-soft); background-position: center; background-repeat: no-repeat; background-size: 18px; }
  .nav__link::after { content: '›'; position: absolute; right: .85rem; color: #aab3bf; font-size: 1.3rem; font-weight: 400; }
  .nav__link[href$='index.html']::before, .nav__link[href='#localizacao']::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c61a20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10M9 20v-6h6v6'/%3E%3C/svg%3E"); }
  .nav__link[href*='servicos']::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c61a20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a5 5 0 0 0-6.6 6.6L3 18l3 3 5.1-5.1a5 5 0 0 0 6.6-6.6l-3 3-3-3 3-3Z'/%3E%3C/svg%3E"); }
  .nav__link[href*='sobre']::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c61a20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V8l8-5 8 5v13M8 21v-6h8v6M8 10h.01M12 10h.01M16 10h.01'/%3E%3C/svg%3E"); }
  .nav__link[href*='contato']::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c61a20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z'/%3E%3C/svg%3E"); }
  .nav__link[href*='localizacao']::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c61a20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
  .nav__link[aria-current='page'] { color: var(--red); border-color: var(--red); background: var(--red-soft); font-weight: 800; }
  .nav__link[aria-current='page']::before { background-color: #fff; box-shadow: inset 0 0 0 1px rgba(198,26,32,.28); }
  .nav__link[aria-current='page']::after { display: none; }
  .nav__cta { margin-top: auto; padding: var(--sp-4) var(--sp-4) 0; border-top: 1px solid var(--line); }
  .nav__cta::before { content: 'Fale com a oficina'; display: block; margin-bottom: .65rem; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .nav__cta .btn { width: 100%; }

  /* Contato e horário no fim da gaveta: mantém o contexto sem sair do menu */
  .nav__contact {
    display: block;
    padding: .6rem var(--sp-4) 0;
  }
  .nav__contact a { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px; font-size: 0; font-weight: 800; }
  .nav__contact a::before { content: '☎  Ligar agora  '; color: var(--ink); font-size: var(--fs-sm); }
  .nav__contact a span { font-size: var(--fs-sm); }
  .nav__contact p { margin: .7rem 0 0; color: var(--muted); text-align: center; font-size: .68rem; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    /* fica acima da página e abaixo do cabeçalho aberto (que sobe para 130) */
    z-index: 120;
    background: rgba(10, 13, 18, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .brand img { width: 158px; }
  .brand__tag { display: none; }

  /* Ações principais sempre ao alcance do polegar.
     Substitui o botão flutuante, que ficava sobre o conteúdo. */
  .mobile-bar { display: block; }
  .wa-float { display: none; }

  /* Links de lista (rodapé, trilha, telefone do topo) são alvos isolados:
     ganham altura de toque. Links dentro de texto corrido continuam inline,
     como manda a WCAG 2.5.8. */
  .footer li a,
  .breadcrumb a,
  .topbar a,
  /* “Ver serviços de freios →”: é uma chamada de ação, não um link no meio
     de uma frase — por isso ganha altura de toque */
  .info-card p > a:not(.btn) {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer li { margin-bottom: 0; }
  .footer address { margin-bottom: var(--sp-2); }
}

/* ---------- Tela baixa: celular deitado ou teclado aberto ----------
   Nessas situações sobram ~350px de altura e a barra de ações fixa tomaria
   quase 20% da tela — além de ficar colada ao teclado virtual, convidando ao
   toque errado. Ela dá lugar ao botão flutuante, bem menor. O orçamento
   continua acessível pelo cabeçalho, que acompanha a rolagem. */
@media (max-width: 860px) and (max-height: 430px) {
  :root { --mobile-bar-h: 0px; }
  .mobile-bar { display: none; }
  /* só o ícone: com a tela deitada, uma pílula com rótulo cobriria os campos */
  .wa-float { display: inline-flex; padding: 0.85rem; border-radius: 50%; }
  .wa-float span { display: none; }
  .wa-float .icon { width: 24px; height: 24px; }
}

/* ---------- >= 861px : onde o botão flutuante aparece ---------- */
@media (min-width: 861px) {
  /* o botão flutuante fica no canto inferior direito e cobria a última
     linha do rodapé: o texto recua para não passar por baixo dele */
  .footer__bottom { padding-right: 200px; }
}

/* ---------- <= 720px ---------- */
@media (max-width: 720px) {
  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__list { gap: var(--sp-4); justify-content: center; }
  /* o endereço completo tomaria duas linhas: ele está no rodapé e no mapa.
     O telefone (segunda lista) continua visível. */
  .topbar__inner > .topbar__list:first-child > li:first-child { display: none; }
  :root { --topbar-h: 38px; }

  .hero__media img { object-position: 68% center; }
  .hero__inner { padding: var(--sp-7) 0 var(--sp-8); }
  .hero__actions .btn { flex: 1 1 100%; }
  /* os três destaques são curtos: cabem em duas colunas */
  .hero__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); gap: var(--sp-4); }
  .hero__fact strong { font-size: var(--fs-lg); }
  .hero__fact span { font-size: var(--fs-xs); }

  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .symptom-copy { flex: none; width: 100%; }
  .cta-band__actions { flex: none; width: 100%; }
  .cta-band__actions .btn { flex: none; width: 100%; }
  .history-visual { padding-left: 1.5rem; }
  .history-visual__seal { right: -.5rem; width: 120px; height: 120px; border-width: 6px; }
  .history-visual__seal strong { font-size: 2.15rem; }

  /* As duas listas de links são curtas e cabem lado a lado: empilhá-las
     acrescentava ~400px de rolagem em todas as páginas. */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-4); }
  .footer__grid > *:first-child,
  .footer__grid > *:last-child { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; }

  .map-open { top: 10px; right: 10px; padding: 0.5rem 0.8rem; font-size: 0.75rem; }
  .form-card { padding: var(--sp-5); }
  .section-head p { font-size: var(--fs-base); }

  /* Chamada principal de fim de seção ocupa a largura toda */
  .text-center > .btn--lg { width: 100%; }
}

/* ---------- <= 600px ---------- */
@media (max-width: 600px) {
  /* a barra de confiança fica alta demais para caber na primeira tela:
     o hero passa a ocupar a tela cheia e ela aparece na primeira rolagem */
  :root { --trustbar-h: 0px; }
  .hero { min-height: max(480px, calc(100svh - var(--header-h) - var(--topbar-h))); }

  /* abaixo disso o horário e o telefone não cabem na mesma linha: fica só o
     telefone. O horário continua no menu, na seção de localização e no rodapé.
     (a lista base já define display nos <li>, por isso o seletor é composto) */
  .topbar__list li.topbar__hours { display: none; }

  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .category-picker { grid-template-columns: 1fr; gap: var(--sp-4); margin-inline: 0; padding: var(--sp-4); }
  .category-picker__intro small { display: none; }

  /* Blocos só de texto curto (os “sinais” em serviços): duas colunas
     enquanto couberem, uma abaixo disso. Empilhados eram 1.500px. */
  .grid--compact { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--sp-3); }
  .grid--compact .info-card { padding: var(--sp-4); }
  .grid--compact .info-card h3 { font-size: var(--fs-base); }
  .grid--compact .info-card p { font-size: var(--fs-xs); }

  /* Blocos curtos continuam lado a lado enquanto couberem: empilhá-los
     dobraria a altura da página sem ganho de leitura. */
  .steps { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--sp-4); }
  .service-route { grid-template-columns: 1fr; gap: 0; }
  .service-route::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(var(--red), #e8b1b3 70%, var(--ink)); }
  .service-route::before { display: block; }
  .service-route .step { min-height: 112px; padding: .35rem 0 1.5rem 5rem; text-align: left; }
  .service-route .step::after { display: none; }
  .step__icon { left: 0; transform: none; }
  .service-route .step p { margin-inline: 0; }
  .card__media::after { display: none; }
  .symptom-panel { display: grid; grid-template-columns: 1fr 1fr; }
  .symptom-chip { padding-inline: .55rem; }
  .cta-band__inner { padding: var(--sp-7) 0; gap: var(--sp-5); }
  .symptom-panel { margin-top: var(--sp-4); }
  .symptom-display { min-height: 58px; }
  .history-visual__timeline { width: 54%; }
  .history-visual figcaption { margin-right: 7rem; font-size: .7rem; }
  .faq-contact { padding: var(--sp-6); }
  .map-destination__badge { left: 22px; bottom: 22px; min-width: 0; right: 22px; }
  .trustbar ul { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3) var(--sp-4); }
  .trustbar li { align-items: flex-start; font-size: var(--fs-xs); }
  .trustbar .icon { width: 18px; height: 18px; margin-top: 1px; }
  .field-row { grid-template-columns: 1fr; }

  .faq__q { font-size: var(--fs-base); gap: var(--sp-3); padding: var(--sp-4) 0; }
  .faq__a { padding-bottom: var(--sp-4); }
  /* linhas da tabela de horários mais justas */
  .hours th, .hours td { padding: var(--sp-2) 0; }

  .cart-panel { width: 100%; }
  .cart-panel__body { padding: var(--sp-4); }
  .cart-panel__head { padding: var(--sp-4); }
  .cart-panel__foot { padding: var(--sp-4); padding-bottom: calc(var(--sp-4) + var(--safe-b)); }

  .header__actions .cart-button { width: var(--tap); padding: 0; }
  .cart-button__label { display: none; }
  .cart-button__count { position: absolute; top: -4px; right: -4px; }

  /* ---- Card de serviço: vira item de lista ----
     Empilhado, cada card ocupava 481px de altura — 15 deles faziam a página
     de serviços passar de 8.000px. Como linha de lista (miniatura à esquerda,
     conteúdo à direita) o card cai para cerca de 190px sem perder nada:
     categoria, nome, descrição, preço e o botão de adicionar continuam ali. */
  .card {
    display: grid;
    grid-template-columns: 108px 1fr;
    align-items: start;
  }
  .card:hover { transform: none; }
  /* Miniatura quadrada: esticada na altura do card, a versão de 480px teria de
     ser ampliada e sairia borrada. Quadrada, ela fica nítida até em telas 3x. */
  .card__media {
    aspect-ratio: 1;
    margin: var(--sp-3) 0 var(--sp-3) var(--sp-3);
    border-radius: var(--radius-sm);
  }
  .card:hover .card__media img { transform: none; }
  /* a etiqueta sobre a miniatura ficaria ilegível: a categoria vai para o texto */
  .card__tag { display: none; }
  .card__cat {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 2px;
  }
  .card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4) var(--sp-3); }
  .card__body h3 { font-size: var(--fs-base); margin-bottom: var(--sp-1); }
  .card__body p { margin-bottom: var(--sp-2); }
  .card__foot { padding-top: var(--sp-2); gap: var(--sp-2); }
  .card__price { font-size: var(--fs-xs); line-height: 1.35; }
  .card__price small { line-height: 1.3; }

  /* ---- Destaques da home: 4 serviços em vez de 8 ----
     Em uma coluna, os 8 destaques viravam uma tira de ~1.500px entre o hero e
     o resto da home. Ficam os 4 primeiros; logo abaixo já existe o botão
     “Ver a lista completa de serviços”, que leva ao catálogo inteiro. */
  #featured-services .card:nth-child(n + 5) { display: none; }

  /* ---- Cartões informativos: ícone na mesma linha do título ---- */
  .info-card:has(.icon-box) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 var(--sp-3);
  }
  .info-card:has(.icon-box) .icon-box { width: 38px; height: 38px; margin-bottom: 0; }
  .info-card:has(.icon-box) .icon { width: 19px; height: 19px; }
  .info-card:has(.icon-box) h3 { margin-bottom: 0; }
  .info-card:has(.icon-box) > :not(.icon-box):not(h3) { grid-column: 2; }
  .info-card:has(.icon-box) > :not(.icon-box):not(h3):first-of-type { margin-top: var(--sp-3); }

  /* ---- Abas (mapa / Street View) ---- */
  .tabs__list {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .tabs__btn {
    flex: 1;
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 700;
  }
  .tabs__btn[aria-selected='true'] { color: var(--red); border-bottom-color: var(--red); }
  /* aqui o `hidden` volta a valer: uma aba por vez */
  .tabs__pane[hidden] { display: none; }
  .tabs .map-embed { min-height: 300px; }

  /* Filtros de categoria: uma faixa deslizante em vez de um bloco de pills
     ocupando meia tela. Rolagem horizontal aqui é intencional. */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* sangra até a borda da tela para indicar que há mais conteúdo */
    margin-inline: 0;
    padding: 5px;
    border-inline: 0;
    border-radius: 0;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; min-width: max-content; scroll-snap-align: start; }
  .catalog-nav { margin-inline: calc(var(--gutter) * -1); padding: var(--sp-4) var(--gutter); border-radius: 0; }
  .catalog-nav__intro { display: block; }
  .catalog-nav__intro small { display: block; margin-top: .2rem; }
}

/* ---------- <= 400px ---------- */
@media (max-width: 400px) {
  .brand img { width: 136px; }

  /* miniatura menor devolve ~24px de largura ao texto do card */
  .card { grid-template-columns: 84px 1fr; }
  .card__cat { font-size: 0.65rem; letter-spacing: 0.05em; }
  .card__body { padding: var(--sp-3); }
  .card__foot { gap: var(--sp-2); }
  .cart-item { grid-template-columns: 52px 1fr; }
  .cart-item__thumb { width: 52px; height: 52px; }
  .mobile-bar__item { font-size: 0.7rem; }
}

/* ---------- Telas grandes ---------- */
@media (min-width: 1600px) {
  :root { --container: 1280px; --fs-4xl: 3.4rem; }
}

/* ---------- Impressão ---------- */
@media print {
  .header, .topbar, .wa-float, .mobile-bar, .cart-panel, .cart-overlay,
  .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; padding-bottom: 0; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.75em; }
}

/* Correção final da interface móvel: mantém estas regras acima de qualquer
   estilo anterior ou versão armazenada pelo navegador. */
@media (max-width: 860px) {
  html body .topbar { display: none !important; }

  .mobile-bar__list {
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: stretch !important;
  }

  .mobile-bar__list > li { width: 100%; }
  .mobile-bar__list > li:nth-child(2) { grid-column: 2; }

  .mobile-bar__item,
  .mobile-bar__item--wa {
    width: 100% !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 7px 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
  }

  .mobile-bar__list > li:first-child .mobile-bar__item { color: #d11b22 !important; }
  .mobile-bar__item--wa { color: #128c4a !important; }
  .mobile-bar__list > li:last-child .mobile-bar__item { color: #171c23 !important; }

  /* Ícones simples de contorno, como na referência. */
  .mobile-bar__item .icon {
    width: 23px !important;
    height: 23px !important;
    padding: 0;
    border-radius: 0;
    color: currentColor !important;
    background: transparent !important;
  }
  .mobile-bar__list > li:first-child .mobile-bar__item { color: #171c23 !important; }
  .mobile-bar__item--wa .icon {
    width: 22px !important;
    height: 22px !important;
    padding: 0;
    color: #128c4a !important;
    background: transparent !important;
    border-radius: 0;
  }
}