/* ==========================================================================
   fix.css — overrides/ajustes pontuais do template (carregado após index.css)
   ========================================================================== */

/* Ícone do X (Twitter) no header: o SVG é branco e, em header de fundo claro,
   ficaria invisível. Usa máscara para colori-lo conforme --header-text-color
   (preto em header claro, branco em header escuro). O footer (fundo escuro)
   continua usando o SVG branco normal. */
header .icon__twitter {
    background: var(--header-text-color, #000) !important;
    -webkit-mask: url(../img/icons/twitterx-color.svg) no-repeat center / contain;
    mask: url(../img/icons/twitterx-color.svg) no-repeat center / contain;
}

/* Banner "Quer vender ...": ícone de moto quando a loja é só de motos
   (store_type = motorcycles). Sobrescreve a imagem de fundo do .icon-vender. */
.icon-vender.is-moto {
    background-image: url(../img/icons/icon-vender-moto.png);
    background-size: contain;
    background-position: center;
}

/* Página do veículo: ícone de moto (categoria e modelo) reutilizando o mesmo
   desenho do banner "Quer vender sua moto" (icon-vender-moto.png), colorido
   com a cor primária via mask. Gerado por vehicleMotorcycleIconSvg(). */
.car-detail--icons li .vehicle-moto-icon {
    display: inline-block;
    width: 32px;
    height: 35px;
    background-color: var(--main-primary-color);
    -webkit-mask: url(../img/icons/icon-vender-moto.png) no-repeat center / contain;
    mask: url(../img/icons/icon-vender-moto.png) no-repeat center / contain;
}

/* Logo da marca na régua de ícones do veículo (substitui o círculo com "M").
   Altura casada com a dos ícones SVG (min-height:35px); largura livre com teto,
   contain, para logos de qualquer proporção caberem sem distorcer. */
.car-detail--icons li .car-detail--brand-logo {
    width: auto;
    height: 35px;
    max-width: 60px;
    object-fit: contain;
}

/* ==========================================================================
   Sliders de Ano/Valor (jRange) nos filtros
   ========================================================================== */

/* Rótulo de valor que aparecia ACIMA da trilha (pointer-label). Os valores
   mín/máx já são exibidos embaixo pela escala, então este de cima ficava
   duplicado. Escondemos: como é position:absolute, o espaço acima da trilha
   vem do padding do .slider-container e é mantido — o layout não desloca. */
.search-component .slider-container .back-bar .pointer-label,
.slider-container .back-bar .pointer-label,
.theme-green .back-bar .pointer-label {
    display: none;
}
.search-component .slider-container .scale ins,
.slider-container .scale ins {
    color: var(--main-text-color, #fff);
    opacity: .65;
}

/* --- Marcas: ocupar toda a largura (em vez de espremidas à esquerda) ------ */
/* Sobrescreve as regras conflitantes do index.css (width:80vw, overflow scroll,
   grid-auto-flow:column) por um flex que distribui os ícones na largura cheia. */
#marcas {
    display: flex !important;
    flex-direction: row !important; /* sobrescreve o flex-direction:column do .field-group--left no mobile */
    flex-wrap: wrap;
    gap: 12px;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 8px 0;
    margin-bottom: 14px;
    justify-content: center;
}
#marcas .brand {
    flex: 1 1 90px;
    max-width: 150px;
    height: 56px; /* box uniforme em todas as larguras, independente do logo */
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ───────────────────────────────────────────────────────────────────────
   Logo de marca — classe REUTILIZÁVEL (.brand-logo)
   Uso em qualquer tela:
       <span class="brand-logo" style="--brand-logo-size:64px">
           <img src="/assets/img/brand/honda.png" alt="Honda">
       </span>
   - O box é um quadrado de --brand-logo-size (default 48px).
   - object-fit:contain mantém a proporção, centraliza, sem overflow nem
     upscale além do box.
   - Pressupõe imagens de origem padronizadas (ver spec docs/brand-logos.md):
     canvas QUADRADO, logo aparado (sem margem transparente) e centralizado,
     ocupando ~85% do canvas — é isso que garante tamanho ótico uniforme.
   Vale para TODAS as larguras (substitui a regra antiga que só existia em
   @media (min-width:48em) e deixava o mobile sem limite). */
.brand-logo {
    --brand-logo-size: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--brand-logo-size);
    height: var(--brand-logo-size);
    flex: none;
}
.brand-logo img,
#marcas .brand img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* No filtro o cell tem 56px de altura; limita o logo a 40px. */
#marcas .brand img { max-height: 40px; }

/* --- Campos dos filtros: grid alinhado (substitui o flex-wrap, que quebrava
   torto e em várias linhas) -------------------------------------------------- */

/* HOME: filtros em FLEX por PAPEL — adapta-se a qualquer combinação de filtros
   ligados/desligados (toggles da vitrine no Centralizador). Antes era um grid de
   6 colunas fixas dimensionadas p/ um conjunto específico: desligar um filtro
   deixava coluna-fantasma (vão) e desalinhava o "Buscar". Agora cada campo se
   dimensiona pelo papel (select/range/ação) e sobra/falta campo reflui sozinho,
   sem vão e sem overflow. Casa com as classes field--select/--range/--action do
   vehicle-filters.php. */
#filters2 {
    display: flex;
    /* flex-direction:row explícito: no mobile o index.css força column em .field-group;
       aqui mantemos row+wrap sempre (no mobile cada campo cresce p/ a linha toda). */
    flex-direction: row;
    flex-wrap: wrap;
    /* stretch: todos os campos com a MESMA altura → os labels (1ª linha de cada campo)
       alinham no topo. Antes era flex-end (alinhava o rodapé), e como o campo do slider
       é mais baixo que o do select, o label de Ano/Valor caía mais abaixo. */
    align-items: stretch;
    gap: 16px 22px;
    width: 100%;
    /* Respiro à direita: sem isto o botão "Buscar" (último item) encosta na borda do painel. */
    padding-right: 16px;
}
#filters2 > .field {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
}
/* Selects (Modelo, Tipo, Categoria, Combustível, Câmbio, Ordenar). */
#filters2 > .field--select { flex: 1 1 170px; min-width: 150px; }
/* Sliders (Ano, Valor): o min-width garante largura usável e força um wrap limpo
   em vez de espremer o jRange quando há muitos filtros ligados. */
#filters2 > .field--range { flex: 1 1 240px; min-width: 210px; }
/* Botão Buscar: largura natural, ancorado ao fim (não estica como uma coluna). */
#filters2 > .field--action { flex: 0 1 auto; }
#filters2 > .field--action .button { width: auto; min-width: 160px; }

/* Sliders (Ano/Valor): com os campos esticados (align-items:stretch) e o label no
   topo, o .slider-container cresce para ocupar a altura restante e CENTRALIZA o slider
   verticalmente → ele fica na altura do centro dos selects (Modelo/Ordenar, ~46px).
   Vale para a home (#filters2) e o estoque. */
#filters2 > .field--range .slider-container,
.search-component .field-group--left:not(#marcas) > .field--range .slider-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ESTOQUE: mesmo modelo FLEX por PAPEL da home (antes era um grid de 7 colunas
   fixas — mesma fragilidade: filtro opt-in desligado deixava coluna-fantasma).
   `:not(#marcas)` isola a faixa de marcas (grid auto-fit próprio, por ID). Os
   campos (.field--select/--range/--view) dimensionam-se pelo papel e refluem
   sozinhos; Aplicar/Limpar ficam sempre no fim via `order` (inclusive com wrap). */
.search-component .field-group--left:not(#marcas) {
    display: flex;
    flex-direction: row; /* idem home: sobrepõe o column mobile do index.css */
    flex-wrap: wrap;
    align-items: stretch; /* labels alinhados no topo (ver #filters2 acima) */
    gap: 14px 16px;
    width: 100%;
}
.search-component .field-group--left:not(#marcas) > .field {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
}
.search-component .field-group--left:not(#marcas) > .field--select { flex: 1 1 150px; min-width: 140px; }
.search-component .field-group--left:not(#marcas) > .field--range  { flex: 1 1 210px; min-width: 190px; }
/* Visualização (grade/lista): largura do conteúdo, não estica. */
.search-component .field-group--left:not(#marcas) > .field--view { flex: 0 0 auto; }
/* Aplicar/Limpar: largura natural, ancorados ao FIM da linha (order sobrevive ao wrap). */
.search-component .field-group--left:not(#marcas) > .field.button-group { flex: 0 0 auto; order: 1; }

/* Modelo é a 1ª coluna do grid e a caixa do select encostava na borda
   esquerda do container. Dá um respiro à esquerda em toda a linha de
   filtros (= ao gap entre colunas), mantendo tudo alinhado. */
.search-component .field-group--left,
#filters2 {
    padding-left: 16px;
    box-sizing: border-box;
}

/* Campos como itens de grid: ocupam a célula, sem flex/min-width herdado. */
.search-component .field {
    padding: 0;
    margin: 0;
    width: auto;
    min-width: 0;
}
/* Selects preenchem a largura do campo (flex) — senão ficam estreitos/desalinhados. */
.search-component .select-wrapper {
    width: 100%;
    min-width: 0;
}
.search-component .field .slider-container {
    width: 100%;
    max-width: 100%;
    padding: 12px 2px;
    box-sizing: border-box; /* a largura px que o jRange fixa passa a incluir o padding → não estoura */
}
.search-component .field .button {
    white-space: nowrap;
    width: 100%;
}
/* Grupo Aplicar/Limpar: botões lado a lado, sem esticar. */
.search-component .field.button-group {
    flex-direction: row !important;
    gap: 8px;
}
.search-component .field.button-group .button {
    width: auto;
}
/* Visualização (grid/lista) não estica na célula. */
.search-component .field--view {
    justify-self: start;
}

@media only screen and (max-width: 64em) {
    /* HOME (#filters2) é flex e reflui sozinho; só o grid do estoque precisa disto. */
    .search-component .field-group--left {
        grid-template-columns: 1fr 1fr;
    }
    /* Busca por texto (mobile): ocupa toda a largura, input cresce e botão fixo. */
    .search-component .search.hide-desk {
        display: flex;
        width: 100%;
        gap: 8px;
        align-items: stretch;
    }
    .search-component .search.hide-desk input[type="text"] {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        margin-bottom: 0;
    }
    .search-component .search.hide-desk .button {
        flex: 0 0 auto;
    }
}
@media only screen and (max-width: 40em) {
    .search-component .field-group--left {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   "Outros veículos" (carrossel related da página do veículo)
   ========================================================================== */

/* .slider-others também é .car-list (display:flex). Depois do slick init o
   .slick-list vira o único filho flex e NÃO estica para 100% (item flex mede pela
   largura do conteúdo no eixo principal) — então o slick media uma largura errada
   e gerava slides estreitos/desiguais ocupando só o terço inicial. Voltar para
   block faz o .slick-list ocupar a largura toda e o slick medir certo. */
.related .slider-others {
    display: block;
}
/* O slick (slide:"article") aplica a largura inline em cada .car-card/slide a
   partir de slidesToShow. NÃO sobrescrever essa largura — apenas tirar o teto de
   260px e a margem do card base, e usar padding p/ o respiro entre os cards. */
.related .slider-others .car-card {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px;
}
/* Respiro vertical p/ a sombra dos cards não ser cortada pelo overflow:hidden
   do .slick-list (topo/base). */
.related .slider-others .slick-list {
    padding: 12px 0;
}
/* Superfície do card (só no carrossel "Outros veículos", via flag 'surface' no
   partial): dá contraste com o fundo da página e aparência de card. O gap entre
   os cards vem do padding lateral no slide (.car-card), por isso a superfície vai
   num wrapper interno — assim borda/raio/sombra não são engolidos pelo gap. */
.related .slider-others .car-card__surface {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
    overflow: hidden; /* arredonda a imagem no topo do card */
}
/* A superfície é sempre clara (#fff), mas o texto do card usa --main-text-color,
   que em temas escuros é branco e some no fundo branco. Fixamos uma cor escura
   legível dentro da superfície (não afeta temas claros, onde já era escuro). */
.related .slider-others .car-card__surface .card-content h3,
.related .slider-others .car-card__surface .card-content span,
.related .slider-others .car-card__surface .card-content p,
.related .slider-others .car-card__surface .card-content__title {
    color: #222;
}
.related .slider-others .car-card figure {
    overflow: hidden;
}
.related .slider-others .car-card img {
    width: 100%;
    /* Mesma proporção da foto dos cards da home/estoque (4:3 + cover), em vez de
       uma altura fixa (210px) que achatava a foto no carrossel. A altura sai da
       largura do slide (definida inline pelo slick), então acompanha o card. */
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Página Sobre — filiais em colunas (até 3) quando há mais de uma filial
   ========================================================================== */
.about__branches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
}
.about__branches-grid .about__branch {
    margin-bottom: 0 !important;
    min-width: 0; /* permite o conteúdo encolher dentro da coluna do grid */
}
.about__branches-grid .iframe-container {
    margin: 16px 0 0;
}
.about__branches-grid .responsive-iframe {
    min-height: 200px;
}
@media only screen and (max-width: 64em) {
    .about__branches-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 40em) {
    .about__branches-grid { grid-template-columns: 1fr; }
}

/* Botão flutuante do WhatsApp (apenas mobile).
   Substitui a barra fixa do rodapé (.talk-floating) por um botão circular.
   O elemento .wpp-float é movido para o <body> via JS (ver footer) para que o
   position:fixed não fique preso a um containing-block ancestral. */
.wpp-float {
    display: none;
}

@media only screen and (max-width: 64em) {
    .wpp-float {
        position: fixed;
        bottom: 20px;
        right: 16px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background-color: #27ae60;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
        z-index: 9999;
    }

    .wpp-float img {
        width: 30px;
        height: 30px;
    }

    /* esconde a barra antiga do WhatsApp no mobile */
    .floating-social .talk-floating {
        display: none !important;
    }
}

/* ==========================================================================
   Rodapé — CTAs "Ficha Cadastral" / "Quer vender seu veículo":
   tornar TODA a área da imagem clicável (não só o texto). Stretched-link:
   o <a> ganha um ::after absoluto cobrindo a .section--left/--right inteira.
   A .wrap é position:relative por padrão e capturaria esse ::after; por isso
   volta a static dentro do rodapé, ancorando o ::after na seção (relative).
   ========================================================================== */
.footer .section--left .wrap,
.footer .section--right .wrap {
    position: static;
}
/* Com a .wrap estática o texto vira conteúdo in-flow e passa a ser pintado ANTES
   do overlay escuro (:before, absoluto), que o cobria deixando-o acinzentado.
   Reposiciona o conteúdo do <a> acima do overlay. */
.footer .section--left a > *,
.footer .section--right a > * {
    position: relative;
    z-index: 3;
}
.footer .section--left a::after,
.footer .section--right a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2; /* acima do overlay escuro (.section--left/--right:before) */
}

/* ==========================================================================
   Página do veículo — botões de ação (Proposta via WhatsApp / Simular
   Financiamento / Compartilhar): a .btn base tem height:46px fixo, então o
   texto mais longo quebrava em 2 linhas e era cortado ("Proposta via",
   "Simular"). Deixa a altura crescer (min-height) e centraliza o conteúdo.
   ========================================================================== */
.btn-veiculo .btn {
    height: auto;
    min-height: 46px;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   CARD DE VEÍCULO — redesign do componente compartilhado
   (home "Destaque", estoque em grade e carrossel "Outros veículos").
   Tudo dirigido por --main-primary-color / --main-text-color, pois o card é
   reaproveitado por todos os clientes. Carregado após index.css → vence.
   ========================================================================== */

/* Superfície: grade (home/estoque, exceto lista e carrossel) + a superfície
   própria do carrossel. Mesmo cartão visual nos dois contextos. */
.car-list:not(.jplist-list):not(.slider-others) .car-card,
.related .slider-others .car-card__surface {
    background: var(--card-bg-color, #fff);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .10); /* fallback p/ navegadores sem color-mix */
    /* A intensidade dirige opacidade E tamanho (offset/blur), pra o slider ter
       impacto visível. Blur baixo = sombra concentrada/definida. */
    box-shadow:
        0
        calc(2px + var(--card-shadow-intensity, 8) * 0.12px)
        calc(5px + var(--card-shadow-intensity, 8) * 0.22px)
        color-mix(in srgb, var(--card-shadow-color, #000) calc(var(--card-shadow-intensity, 8) * 1%), transparent);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.car-list:not(.jplist-list):not(.slider-others) .car-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}

/* Hover: elevação suave + sombra + borda na cor da marca. Substitui a sombra
   preta pesada legada e o overlay escuro com lupa. */
.car-list:not(.jplist-list):not(.slider-others) .car-card:hover,
.related .slider-others .car-card:hover .car-card__surface {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .18); /* fallback */
    box-shadow:
        0
        calc(6px + var(--card-shadow-intensity, 8) * 0.16px)
        calc(12px + var(--card-shadow-intensity, 8) * 0.3px)
        color-mix(in srgb, var(--card-shadow-color, #000) calc((var(--card-shadow-intensity, 8) + 10) * 1%), transparent);
    border-color: var(--main-primary-color);
}
.car-card:hover { box-shadow: none; }
.car-card figure::before,
.car-card figure::after { display: none !important; }

/* Carrossel "Outros veículos": o .car-card externo é apenas o slide (wrapper de
   posicionamento do slick). A base .car-card traz box-shadow + radius por padrão,
   o que desenhava uma moldura cinza MAIOR que o card atrás dele. Zera o visual do
   slide — quem desenha o cartão é o .car-card__surface interno. */
.related .slider-others .car-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Imagem: leve zoom no hover (afordância no lugar do overlay removido). */
.car-card figure { overflow: hidden; }
.car-card figure img { transition: transform .5s ease; }
.car-card:hover figure img { transform: scale(1.05); }

/* Conteúdo: hierarquia clara. */
.car-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    flex: 1;
}
.car-card .card-content h3 {
    font-size: 1.02rem;
    font-weight: 700;
    min-height: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.car-card:hover .card-content__title { color: var(--main-primary-color); }

/* Resumo (ano • km • combustível) discreto. */
.car-card .card-content > span,
.car-card .card-content span.show-grid {
    font-size: .82rem;
    font-weight: 500;
    color: #6b7280;
}

/* Preço: protagonista, com divisória fininha acima (vira o "rodapé" do card). */
.car-card .card-content p,
.related .slider-others .car-card__surface .card-content p {
    margin: 12px 0;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--main-primary-color);
}

/* Alinha preço + botões na base, mesmo com títulos de alturas diferentes. */
.car-card .card-content > div:last-child { margin-top: auto; }

/* CTA "+ detalhes": botão sólido na cor dos botões (fallback à cor da marca). */
.car-card .card-content .btn--secondary {
    background: var(--button-color, var(--main-primary-color));
    color: #fff;
    border: 1px solid var(--button-color, var(--main-primary-color));
    border-radius: 9px;
    font-weight: 700;
    height: 44px;
    line-height: 28px;
}
.car-card .card-content .btn--secondary:hover {
    background: var(--button-hover-color, var(--main-primary-color));
    border-color: var(--button-hover-color, var(--main-primary-color));
    color: #fff;
    filter: brightness(1.08);
}

/* Badges em pílula. */
.car-card__category,
.car-card__armored,
.car-card__branch {
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}
.car-card__category {
    top: 12px;
    left: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.car-card__armored {
    top: 12px;
    right: 12px;
    background: rgba(20, 20, 20, .8);
}
.car-card__branch {
    left: 12px;
    bottom: 12px;
    text-transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Símbolo da marca no card: INLINE, à direita da linha de infos (ano • km •
   combustível), no corpo do card. Antes era um selo sobre a foto, mas o quadro
   cortava o logo. Aqui a linha vira um flex com o texto à esquerda e o logo à
   direita, com altura contida (sem cortar). */
.car-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    /* Altura fixa = altura do logo (.car-card__brand-inline: 46px). Sem isto, cards
       SEM logo de marca (ex.: JETSKI e marcas fora de assets/img/brand) têm a linha
       ~26px mais baixa → o "+ detalhes" desalinha em relação aos cards COM logo. */
    min-height: 46px;
}
/* `.car-card img` (a FOTO) impõe, com !important, min/max-height E `margin:0 auto`.
   No logo isso o distorcia (altura) e o `margin:auto` engolia o espaço livre do flex,
   jogando-o para o meio ("muito à esquerda"). Especificidade maior + !important isolam
   o logo: altura própria, SEM margem (o space-between o joga rente à direita). */
.car-card .card-content .car-card__brand-inline {
    height: 46px !important;
    min-height: 0 !important;
    max-height: 46px !important;
    width: auto !important;
    max-width: 96px !important;
    margin: 0 !important;
    object-fit: contain !important; /* vence o object-fit:cover da FOTO (.car-card img) — cover recortava o logo */
    border-radius: 0 !important;
    flex: 0 0 auto;
}

/* Redes sociais no mobile: reexibe os ícones sociais do rodapé,
   que o template esconde via .hide-xl abaixo de 64em. */
@media only screen and (max-width: 64em) {
    .social-footer ul li.hide-xl {
        display: list-item !important;
        visibility: visible !important;
        width: auto !important;
    }
}

/* ===== Banner da vitrine ===== */
/* O banner de topo (skin complete) agora usa o componente banner_slider (.bnr), que
   dá a altura pela proporção (--bnr-aspect: 8/3) em banner-slider.css. As antigas
   regras .slides-header/.header--overlay (32vw fixo + gradiente) foram removidas com a
   migração; se ainda houver sites servindo markup antigo, ver git para o histórico. */

/* ===== Rodapé sem coluna de descrição (grupo/filial vazias): realinhamento ===== */
/* Sem a coluna de intro, o space-between espalha demais as colunas restantes.
   Alinha à esquerda com espaçamento consistente e joga a coluna social à direita. */
.footer__columns--no-intro { justify-content: flex-start; gap: 24px; }
.footer__columns--no-intro .social-footer { margin-left: auto; }
@media only screen and (max-width: 64em) {
    .footer__columns--no-intro { gap: 0; }
    .footer__columns--no-intro .social-footer { margin-left: 0; }
}

/* =========================================================================
   Header overlay (opt-in via Centralizador → theme_config.header_overlay).
   Ativado por body.has-overlay-header (guest.php): só na skin complete e em
   páginas que renderizam banner. Sem a classe, o header segue sólido normal.
   Nota de nomenclatura: <header> = barra de nav; .bnr = o componente banner_slider
   (contêiner do carrossel), NÃO o header de nav.
   ========================================================================= */
body.has-overlay-header header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}
body.has-overlay-header .header--color {
    background: transparent !important;
}
/* Gradiente escuro no topo do banner p/ legibilidade do menu sobre imagens claras.
   Ancorado no .bnr (position:relative). z-index 2: acima da imagem, abaixo das setas/
   dots do componente (z-index 3) e do header (z-index 50); não captura clique. */
body.has-overlay-header .bnr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
    z-index: 2;
    pointer-events: none;
}

/* Search component (home/estoque): não tinha padding próprio, então o conteúdo
   encostava nas bordas e o texto da última linha ficava cortado embaixo. Um pouco
   de respiro no topo e um pouco mais na base. */
.search-component {
    padding-top: 16px;
    padding-bottom: 28px;
}

/* Ícone do Threads (rede social nova). Diferente dos outros (background-image de cor
   fixa), usa MASK + currentColor: o glifo adota a cor do texto do rodapé/topo onde
   está, então fica visível em qualquer cor de fundo que o cliente escolher. */
.icon__threads {
    -webkit-mask: url(../img/icons/threads.svg) no-repeat center center;
            mask: url(../img/icons/threads.svg) no-repeat center center;
    -webkit-mask-size: 22px 22px;
            mask-size: 22px 22px;
    background-color: currentColor;
}

/* Tipografia escolhida pelo cliente (Identidade visual → fontes). As vars vêm do
   variaveis.css gerado; default Inter (nada muda até o cliente escolher). Corpo e
   títulos separados. @font-face das famílias em fonts.css. */
body { font-family: var(--site-font-body, Inter, sans-serif); }
h1, h2, h3, h4, h5,
.section-heading h2 { font-family: var(--site-font-heading, Inter, sans-serif); }

/* =========================================================================
   Header (skin complete) — redistribuição do espaçamento (desktop).
   -------------------------------------------------------------------------
   O layout original espalhava os itens com larguras em % que somavam >100%
   (logo 400px + .header__menu 80% + .header__bar-top 50%) sob
   justify-content:space-around. Resultado: todo mundo numa disputa de
   flex-shrink, com três defeitos visíveis:
     · a CAIXA do logo ficava travada em 400px mesmo com logo pequeno (150px
       no 299) → sobrava um vão enorme entre o logo e o menu;
     · o telefone era espremido (43px) e, sem white-space:nowrap, QUEBRAVA em
       duas linhas;
     · os vãos entre menu, busca e contatos ficavam irregulares.
   Aqui trocamos por um flex previsível com gap: a caixa do logo passa a
   "abraçar" a imagem (width:auto; o max-width:400px só protege logo sem
   logo_size + imagem enorme), o menu e os contatos ficam com largura natural
   e a BUSCA é o único elemento que cresce/encolhe para ocupar o espaço livre.
   O telefone nunca mais quebra (nowrap). Robusto de 1040px até full-width.
   Escopo: min-width:65em (= 1040px), exatamente onde busca/telefone/redes
   aparecem (hide-xl) e o menu já é horizontal; abaixo disso o header mobile
   (menu deslizante / hamburger) continua intacto. Só skin--complete (basic e
   classic têm header próprio; studio restiliza pelo seu CSS).
   ========================================================================= */
@media only screen and (min-width: 65em) {
    body.skin--complete .header__inner {
        justify-content: flex-start;
        gap: clamp(16px, 2.2vw, 52px);
        flex-wrap: nowrap;
    }
    /* Logo: a caixa passa a ter a largura da imagem (fim do vão de 400px). */
    body.skin--complete .header__logo {
        flex: 0 0 auto;
        width: auto;
        max-width: 400px;
    }
    /* Bloco menu ocupa o resto e distribui nav · busca · contatos. */
    body.skin--complete .header__menu {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        gap: clamp(20px, 3.2vw, 72px);
        justify-content: flex-end;
    }
    /* Nav: largura natural dos itens, sempre em UMA linha (não mais width:100%). */
    body.skin--complete .menu-navigation { width: auto; flex: 0 0 auto; }
    body.skin--complete .menu-navigation ul {
        width: auto;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin: 0;
    }
    body.skin--complete .menu-navigation li {
        margin: 0 0 0 clamp(8px, 1.2vw, 20px);
        white-space: nowrap;
    }
    body.skin--complete .menu-navigation li:first-child { margin-left: 0; }
    /* Busca: o único elemento elástico — cresce/encolhe para preencher o vão. */
    body.skin--complete header .search {
        flex: 1 1 auto;
        min-width: 90px;
        max-width: 420px;
        display: flex;
        align-items: center;
        margin: 0;
    }
    body.skin--complete header .search input[type="text"] {
        flex: 1 1 auto;
        min-width: 0;
        height: 46px; /* alinha com a altura do botão "Procurar" */
    }
    /* Telefone + redes: largura natural, sem espremer; telefone nunca quebra. */
    body.skin--complete .header__bar-top { width: auto; flex: 0 0 auto; }
    body.skin--complete .header__bar-top ul { gap: 8px; flex-wrap: nowrap; }
    body.skin--complete .header__bar-top ul li { margin-left: 0; }
    body.skin--complete .header__bar-top li a[href^="tel"] { white-space: nowrap; }
}