/* Catálogo público de produtos (/catalogo) — vitrine sem login.
   Escopo: tudo ancorado em #catalogoContainer / body.page-catalogo. */

/* O branch público do base.html imprime <main class="content"> com
   max-width:980px INLINE — vitrine precisa de largura; !important é o único
   jeito de vencer style inline. Não remover. */
body.page-catalogo main.content {
    max-width: 1360px !important;
    margin: 0 auto !important;
    padding: 0 1rem 2rem;
}
body.page-catalogo { background: #f1f4f8; }

/* ── Faixa de marca ─────────────────────────────────────────────── */
#catalogoContainer .cat-hero {
    background: linear-gradient(120deg, #011f59 0%, #0b3a8c 100%);
    color: #fff;
    border-radius: .75rem;
    margin-top: 1.25rem;
    box-shadow: 0 6px 24px rgba(1, 31, 89, .25);
}
#catalogoContainer .cat-hero-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}
#catalogoContainer .cat-hero-logo { height: 44px; }
#catalogoContainer .cat-hero-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0;
}
#catalogoContainer .cat-hero-sub {
    font-size: .82rem;
    opacity: .75;
    margin: 0;
}
#catalogoContainer .cat-hero-portal {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: .5rem;
    font-weight: 600;
    font-size: .85rem;
    padding: .45rem .9rem;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
#catalogoContainer .cat-hero-portal:hover,
#catalogoContainer .cat-hero-portal:focus-visible {
    background: #fff;
    color: #011f59;
    border-color: #fff;
}

/* ── Barra de filtros (sticky) ──────────────────────────────────── */
#catalogoContainer .cat-filtros-wrap {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 1rem -.25rem 1.25rem;
    padding: .25rem;
}
#catalogoContainer .cat-filtros {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .6rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: 2fr 1.4fr 1.4fr 1.4fr auto;
    gap: .75rem;
    align-items: end;
}
#catalogoContainer .cat-filtro-acoes {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* Wrapper dos selects (grupo/subgrupo): display:contents mantém os filhos
   como itens diretos do grid do form. x-show controla a visibilidade só no
   celular; no desktop o !important vence o style inline do x-show e os
   filtros NUNCA somem (regra x-show × display do CLAUDE.md — classe própria,
   nada de d-*). */
#catalogoContainer .cat-filtros-avancados { display: contents; }
@media (min-width: 576px) {
    #catalogoContainer .cat-filtros-avancados { display: contents !important; }
}
/* Botão "Filtros" e "Limpar filtros" do painel só existem no celular */
#catalogoContainer .cat-filtros-toggle { display: none; }
#catalogoContainer .cat-limpar-mobile { display: none; }

@media (max-width: 991.98px) {
    #catalogoContainer .cat-filtros { grid-template-columns: 1fr 1fr; }
    #catalogoContainer .cat-filtro-busca { grid-column: 1 / -1; }
    #catalogoContainer .cat-filtro-acoes { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ── Chips do filtro ativo ──────────────────────────────────────
   Vivem na barra sticky, abaixo do form. O container é flex por classe
   PRÓPRIA (sem !important) porque x-show esconde com display:none inline —
   utilitário d-flex do Bootstrap venceria o inline e o bloco nunca sumiria. */
#catalogoContainer .cat-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
    padding: .5rem .75rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .6rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
}
#catalogoContainer .cat-chips-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #7a8699;
    margin-right: .15rem;
}
#catalogoContainer .cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .22rem .5rem .22rem .55rem;
    border: 1px solid #cfdcf4;
    border-radius: 999px;
    background: #eef3fd;
    color: #0b3a8c;
    font-size: .72rem;
    line-height: 1.3;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#catalogoContainer .cat-chip:hover,
#catalogoContainer .cat-chip:focus-visible {
    background: #011f59;
    border-color: #011f59;
    color: #fff;
    outline: none;
}
#catalogoContainer .cat-chip-k {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .62rem;
    letter-spacing: .04em;
    opacity: .75;
}
#catalogoContainer .cat-chip-v {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16ch;
}
#catalogoContainer .cat-chip .fa { font-size: .62rem; opacity: .7; }
#catalogoContainer .cat-chip-limpar {
    background: transparent;
    border-color: transparent;
    color: #7a8699;
    font-weight: 600;
}
#catalogoContainer .cat-chip-limpar:hover,
#catalogoContainer .cat-chip-limpar:focus-visible {
    background: #f1f4f8;
    border-color: #dee2e6;
    color: #1f2a3d;
}

/* ── Grid de cards ──────────────────────────────────────────────── */
#catalogoContainer .cat-toolbar { margin-bottom: .5rem; }
#catalogoContainer .cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
}
#catalogoContainer .cat-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: .6rem;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    /* Rolagem infinita sem travar celular: card fora da viewport não é
       renderizado (layout/paint pulados); o intrinsic-size reserva a altura
       aproximada p/ a barra de rolagem não pular. */
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}
#catalogoContainer .cat-card:hover,
#catalogoContainer .cat-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
    border-color: #b9c6dd;
    outline: none;
}
#catalogoContainer .cat-thumb {
    aspect-ratio: 1 / 1;
    background: #f6f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #eef1f5;
}
#catalogoContainer .cat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .6rem;
    transition: transform .2s ease;
}
#catalogoContainer .cat-card:hover .cat-thumb img { transform: scale(1.05); }
#catalogoContainer .cat-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #b7c1cf;
    font-size: 2.4rem;
}
#catalogoContainer .cat-card-body {
    padding: .65rem .75rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1 1 auto;
}
#catalogoContainer .cat-card-title {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    color: #1f2a3d;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
}
#catalogoContainer .cat-card-cod {
    font-size: .72rem;
    color: #7a8699;
    font-family: var(--bs-font-monospace, monospace);
}
#catalogoContainer .cat-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: auto;
}
#catalogoContainer .cat-tag {
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: #eef1f5;
    color: #5b6779;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#catalogoContainer .cat-tag-grupo { background: #e2eafc; color: #0b3a8c; }
#catalogoContainer .cat-tag-familia { background: #dcf3ee; color: #0b6e5d; }

/* ── Loading / rolagem infinita / rodapé ────────────────────────── */
#catalogoContainer .cat-loading { text-align: center; padding: 4rem 0; }
#catalogoContainer .cat-resultado { min-height: 40vh; }
/* Sentinela da rolagem infinita: item do grid ocupando a linha inteira */
#catalogoContainer .cat-sentinela {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.25rem 0;
}
#catalogoContainer .cat-footer {
    text-align: center;
    padding: 2rem 0 .5rem;
    font-size: .78rem;
}
#catalogoContainer .cat-footer a { color: #7a8699; text-decoration: none; }
#catalogoContainer .cat-footer a:hover { color: #011f59; text-decoration: underline; }

/* ── Modal de detalhe ───────────────────────────────────────────── */
#catalogoContainer .cat-modal-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
#catalogoContainer .cat-modal-media {
    background: #f6f8fa;
    border: 1px solid #eef1f5;
    border-radius: .5rem;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#catalogoContainer .cat-modal-media img {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    padding: .75rem;
}
#catalogoContainer .cat-modal-media .cat-thumb-fallback { min-height: 280px; font-size: 3.5rem; }
#catalogoContainer .cat-modal-dl { margin: 0; }
#catalogoContainer .cat-modal-dl dt,
#catalogoContainer .cat-modal-dl-row dt {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #7a8699;
    font-weight: 600;
}
#catalogoContainer .cat-modal-dl dd,
#catalogoContainer .cat-modal-dl-row dd {
    font-size: .95rem;
    margin-bottom: .6rem;
    font-family: var(--bs-font-monospace, monospace);
}
@media (max-width: 767.98px) {
    #catalogoContainer .cat-modal-grid { grid-template-columns: 1fr; }
}

/* ── Mobile P1+P2 ───────────────────────────────────────────────
   P1 anti-zoom (16px) já vem do global do base.html com !important.
   P2 click-fix global (.btn i { pointer-events:none }) idem; aqui só o
   refinamento de alvo de toque e a densidade do grid no celular. */
@media (max-width: 575.98px) {
    /* ── Hero: linha 1 = logo + título; linha 2 = botão do portal inteiro ── */
    #catalogoContainer .cat-hero { margin-top: .75rem; border-radius: .6rem; }
    #catalogoContainer .cat-hero-inner { padding: .75rem .9rem; flex-wrap: wrap; gap: .5rem .75rem; }
    #catalogoContainer .cat-hero-logo { height: 30px; }
    #catalogoContainer .cat-hero-title { font-size: 1.05rem; }
    #catalogoContainer .cat-hero-sub { display: none; }
    #catalogoContainer .cat-hero-portal {
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: center;
        min-height: 40px; /* botão com texto: só min-height, nunca min-width */
        font-size: .82rem;
    }

    /* ── Barra de filtros: UMA linha [busca | filtros | buscar] ─────────
       Os selects (wrapper display:contents) e o Limpar abrem abaixo em
       linha cheia quando o toggle expande. Sem label da busca (o
       placeholder diz tudo) — a barra sticky não pode comer a tela. */
    #catalogoContainer .cat-filtros {
        grid-template-columns: 1fr auto auto;
        padding: .5rem .6rem;
        gap: .5rem;
        align-items: center;
    }
    /* linha 1 fixa: [busca | toggle | buscar]; o painel expandido ocupa as
       linhas seguintes (grid-row explícito senão o auto-placement joga o
       botão de buscar para depois do painel) */
    #catalogoContainer .cat-label-busca { display: none; }
    #catalogoContainer .cat-filtro-busca { grid-column: 1; grid-row: 1; }
    #catalogoContainer .cat-filtros-avancados .cat-filtro { grid-column: 1 / -1; }
    #catalogoContainer .cat-filtros-toggle { grid-column: 2; grid-row: 1; }
    #catalogoContainer .cat-filtro-acoes { grid-column: 3; grid-row: 1; gap: .4rem; }
    /* Limpar da linha some; a versão linha-cheia vive no painel expandido */
    #catalogoContainer .cat-filtro-acoes .btn[type="button"] { display: none; }
    #catalogoContainer .cat-limpar-mobile { display: block; }
    #catalogoContainer .cat-limpar-mobile .btn { min-height: 40px; }

    /* Botões icon-only da barra (texto escondido): 40px quadrado */
    #catalogoContainer .cat-btn-label { display: none; }
    #catalogoContainer .cat-filtros-toggle,
    #catalogoContainer .cat-filtro-acoes .btn {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        padding: 0 .5rem;
    }

    /* Inputs da barra confortáveis de tocar (16px anti-zoom já vem do base) */
    #catalogoContainer .cat-filtros .form-control,
    #catalogoContainer .cat-filtros .form-select,
    #catalogoContainer .cat-filtros .input-group-text { min-height: 40px; }

    /* ── Grid e cards compactos ──────────────────────────────────────── */
    #catalogoContainer .cat-grid { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
    #catalogoContainer .cat-card { contain-intrinsic-size: auto 240px; border-radius: .5rem; }
    #catalogoContainer .cat-card-title { font-size: .78rem; min-height: 2em; }
    #catalogoContainer .cat-card-cod { font-size: .66rem; }
    #catalogoContainer .cat-card-body { padding: .45rem .55rem .55rem; gap: .25rem; }
    #catalogoContainer .cat-thumb img { padding: .35rem; }
    /* badge de subgrupo some no celular: card fica 1 linha de tag só */
    #catalogoContainer .cat-tag-sub { display: none; }
    #catalogoContainer .cat-tag { font-size: .6rem; padding: .14rem .45rem; }

    /* Chips: alvo de toque confortável sem virar botão gigante. Têm texto,
       então SÓ min-height (nunca min-width/quadrado). */
    #catalogoContainer .cat-chips { padding: .4rem .5rem; gap: .3rem; margin-top: .4rem; }
    #catalogoContainer .cat-chips-label { display: none; }
    #catalogoContainer .cat-chip { min-height: 32px; padding: .25rem .55rem; }
    #catalogoContainer .cat-chip-v { max-width: 11ch; }

    #catalogoContainer .cat-toolbar { margin: .1rem 0 .4rem; }
    #catalogoContainer .cat-toolbar .small { font-size: .74rem; }
}