/* ============================================================================
   LOJAS NO RODAPÉ — faixa com largura PRÓPRIA + carrossel de cards.
   Par de partials/footer.php (bloco `.fbr`) e assets/js/footer-branches.js.
   Só existe no rodapé multi loja (`$isMultiBranch`); loja única segue igual.

   O PROBLEMA QUE ISTO RESOLVE: `.footer__columns` é `display:flex` SEM
   `flex-wrap`, e a coluna das lojas pedia `flex:1 1 100%`. Sem wrap ela não
   tinha para onde cair, então engolia o espaço livre e as vizinhas encolhiam
   até o mínimo — com 5 lojas o texto institucional ficou com 120px (uma
   palavra por linha, justificada) e o "Conecte-se" quebrou no meio.

   Duas peças: (a) teto de largura para a faixa, (b) `min-width:0` nas colunas.
   O (b) é o que menos se adivinha: item de flex tem `min-width:auto`, ou seja,
   NÃO encolhe abaixo do próprio conteúdo. Como o trilho das lojas mede a soma
   dos cards, sem o `min-width:0` ele continuaria ditando a largura mesmo com
   teto declarado, e o teto seria ignorado.
   ========================================================================== */

/* (b) deixa as colunas realmente encolherem; sem isto o resto não vale.

   ⚠️ Escopado em `--lojas` (a linha que TEM faixa de lojas), e não em
   `.footer__columns` inteiro: `min-width:0` também muda quanto as colunas podem
   encolher em rodapé de LOJA ÚNICA, que é o caso das 79 da frota hoje. Mexer na
   largura de todo mundo para resolver o rodapé de quem tem 5 lojas seria mudar a
   aparência de quem não pediu nada. */
.footer__columns--lojas > .footer__column { min-width: 0; }

/* (a) o espaço reservado: cabem 2 cards de 290px + o respiro, e nunca mais que
   metade da linha, para as outras duas colunas sobrarem legíveis.

   ⚠️ `flex-shrink: 0` é obrigatório aqui, e a primeira versão errou nisso. As
   colunas vizinhas herdam `width:100%` do estilo base, ou seja, base de flex do
   tamanho do container inteiro; com encolhimento proporcional à base, os 640px
   declarados aqui viravam 264px na prática (menos que UM card) enquanto as
   vizinhas ficavam com 725px cada. Quem limita a faixa é o `max-width`, não o
   encolhimento. */
.footer__branches {
    flex: 0 0 640px;
    max-width: 52%;
}

/* Em tela estreita o rodapé empilha: a faixa volta a ocupar a linha toda, e aí
   ela PODE encolher de novo (sem isso, 640px rígidos estouram a largura). */
@media (max-width: 64em) {
    .footer__branches { flex: 1 1 100%; max-width: 100%; }
}

/* O título e as setas dividem a mesma linha. O `h5` do rodapé traz
   `margin-bottom:21px` do estilo base; repetimos na nav para os dois ficarem
   assentados na mesma base. */
.fbr__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.fbr__nav { display: flex; gap: 6px; margin-bottom: 21px; }
.fbr__nav[hidden] { display: none; }

/* Setas discretas: herdam a cor do rodapé (funciona em rodapé claro ou escuro,
   que é configurável por cliente em `footer_bg_color`). */
.fbr__arrow {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    opacity: .75;
    transition: opacity .2s, background-color .2s;
}
.fbr__arrow:hover { opacity: 1; background: rgba(127, 127, 127, .25); }
.fbr__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Ponta do trilho: a seta fica visível (o lugar dela não pula) mas inerte. */
.fbr__arrow[disabled] { opacity: .25; cursor: default; background: transparent; }

/* O trilho. `scroll-snap` deixa o card parar alinhado tanto no clique da seta
   quanto no arrasto do dedo, então o carrossel funciona sem JS no celular. */
.fbr__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    /* A barra de rolagem some: a navegação é pelas setas e pelo arrasto, e uma
       barra clara atravessada no rodapé escuro fica com cara de defeito. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fbr__track::-webkit-scrollbar { display: none; }
.fbr__track:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Quem prefere menos movimento não leva o deslize suave. */
@media (prefers-reduced-motion: reduce) {
    .fbr__track { scroll-behavior: auto; }
}

/* O card. Fundo e borda translúcidos em vez de cor fixa: o rodapé muda de cor
   por cliente, e uma cor fixa brigaria com metade da frota. */
.fbr__card {
    flex: 0 0 290px;
    max-width: 290px;
    scroll-snap-align: start;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 10px;
    background: rgba(127, 127, 127, .12);
}
.fbr__card address { font-style: normal; }
.fbr__card .footer__contact { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   O MENU do rodapé, pelo mesmo motivo. Ele ganha uma entrada por loja, e a
   fileira é `flex-wrap: nowrap`: com 5 lojas passou de 1100px e empurrou a
   PÁGINA INTEIRA, criando rolagem horizontal em qualquer janela abaixo de
   ~1250px (não era o carrossel — medido escondendo um elemento por vez).
   Deixar quebrar em linhas resolve, e não muda nada em site de loja única,
   onde a fileira nunca chega perto da largura disponível.
   Escopo em `.footer` de propósito: `.menu-navigation` também é o menu do topo,
   que tem comportamento próprio no celular.

   ⚠️ A ESPECIFICIDADE aqui não é capricho. Quem impõe o `nowrap` é
   `body.skin--complete .menu-navigation ul:not(.submenu)` no fix.css, uma regra
   escrita para a BARRA DO TOPO ("sempre em UMA linha") que, por não citar o
   cabeçalho, alcança também o menu do rodapé. Com 3 classes + 1 tipo ela vencia
   um `.footer .menu-navigation > ul` simples, e a quebra de linha não
   acontecia acima de 64em — justo onde o estouro aparece. Repetimos o
   `:not(.submenu)` e prefixamos `body` para passar na frente sem mexer no topo.
   ------------------------------------------------------------------------ */
body .footer .menu-navigation > ul:not(.submenu) {
    flex-wrap: wrap;
    row-gap: 6px;
}
/* Em loja única a fileira tem 5 itens e nunca chega perto da largura disponível,
   então a quebra nunca dispara: a regra é inerte ali, e por isso pode ser global. */