/* =========================================================================
   CasaPri — listagem/busca (issue #15, parent #1)
   Grade de product-card + contagem + ordenação + paginação + estado vazio.
   ========================================================================= */

/* ---- breadcrumb (Home > Categoria) ---- */
.casapri-archive__breadcrumb {
    margin: 0 0 1.25rem;
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--body);
}
.casapri-archive__breadcrumb .woocommerce-breadcrumb a {
    color: var(--body);
    text-decoration: none;
}
.casapri-archive__breadcrumb .woocommerce-breadcrumb a:hover {
    color: var(--ink);
    text-decoration: underline;
}

/*
 * Cabeçalho único da página de listagem/categoria — mesmo componente pra
 * todas (só eyebrow opcional + título; sem descrição de propósito por
 * enquanto — Pedro: sem padronizar todas as categorias, melhor não mostrar
 * do que mostrar torto), nunca dependente de a Pri ter escolhido uma foto
 * pra aquela categoria (a antiga capa com imagem sumiu, ver comentário em
 * archive-product.php). Fundo --surface "estoura" até a borda do container
 * (margem negativa cancelando o padding lateral de .casapri-site) pra ler
 * como uma faixa de verdade, não uma caixa cinza flutuando no meio da
 * página — mas sem ir até a borda da viewport: isso é reservado pro hero
 * da home, aqui o pedido foi bonito e discreto, não banner.
 */
.casapri-archive__pagehead {
    background: var(--surface);
    margin: 0 -1.25rem 2.5rem;
    padding: 2.5rem 1.25rem;
}
.casapri-archive__pagehead-inner {
    max-width: 46rem;
}
/* Mesmo rótulo pequeno em maiúsculas usado em .casapri-eyebrow (theme.css),
   mas com --champagne-texto em vez de --champagne puro: eyebrow aqui fica
   sobre --surface (quase branco), e champagne bruto em texto reprova
   contraste em fundo claro (1,86:1 — ver nota em theme.css); champagne-texto
   é o mesmo dourado escurecido até 5,25:1 (AA), papel "texto sobre claro". */
.casapri-archive__eyebrow {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: .72rem;
    color: var(--champagne-texto);
    margin: 0 0 .6rem;
}
.casapri-archive__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--ink);
    margin: 0;
}
/* fio champagne sob o título — mesma assinatura de marca do título da PDP
   e do cross-sell "Complete o ambiente" (product.css), reaproveitada aqui
   pra qualquer página de listagem/categoria carregar a mesma identidade. */
.casapri-archive__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background: var(--champagne);
    margin-top: 1rem;
}
@media (max-width: 767px) {
    .casapri-archive__pagehead { padding: 1.85rem 1.1rem; margin-bottom: 1.75rem; }
    .casapri-archive__title { font-size: 1.55rem; }
}

/* ---- botão "Filtrar" (só mobile/tablet) ----
   Pedro: produto tem que aparecer de primeira, filtro escondido atrás de um
   botão — abaixo de 992px a barra de categorias/filtros (.casapri-archive__sidebar)
   deixa de aparecer sempre e vira um painel colapsado, aberto por este botão
   (archive-filtro-toggle.js troca a classe is-aberto). */
.casapri-archive__filtro-toggle {
    display: none;
}
@media (max-width: 991px) {
    .casapri-archive__filtro-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        width: 100%;
        min-height: 48px;
        margin: 0 0 1.5rem;
        padding: .75rem 1rem;
        background: var(--white);
        border: 1px solid var(--ink);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--ink);
        cursor: pointer;
    }
    .casapri-archive__filtro-toggle-contagem {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 .35rem;
        border-radius: 999px;
        background: var(--champagne);
        color: var(--ink);
        font-size: .72rem;
        font-weight: 600;
    }
}

/* ---- layout com coluna de filtros (desktop) ----
   Abaixo de 992px a barra de categorias/filtros some por padrão (painel
   colapsado atrás do botão acima) e os produtos aparecem primeiro — `order`
   troca a posição visual sem depender da ordem do DOM (que continua com a
   sidebar primeiro, a ordem certa pro desktop e pra quem navega sem CSS). */
.casapri-archive__layout {
    display: block;
}
@media (max-width: 991px) {
    .casapri-archive__layout {
        display: flex;
        flex-direction: column;
    }
    .casapri-archive__content { order: 1; }
    .casapri-archive__sidebar {
        order: 2;
        display: none;
        margin-top: 1.75rem;
        padding-top: 1.75rem;
        border-top: 1px solid var(--border);
    }
    .casapri-archive__sidebar.is-aberto { display: block; }
}
@media (min-width: 992px) {
    .casapri-archive__layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }
    .casapri-archive__sidebar .casapri-archive__filtros {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        border-bottom: 0;
        padding-bottom: 0;
    }
    .casapri-archive__sidebar .casapri-archive__filtro-campo select,
    .casapri-archive__sidebar .casapri-archive__filtro-preco input[type="number"] {
        width: 100%;
    }
    .casapri-archive__sidebar .casapri-archive__filtro-acoes {
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
    }
    .casapri-archive__sidebar .casapri-archive__filtro-aplicar { width: 100%; }
}

/* ---- navegação de categorias/subcategorias na própria listagem ----
   Topo sempre visível; filhas da categoria de topo ativa aparecem
   recuadas, com a atual (topo ou filha) destacada. */
.casapri-archive__categorias {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.casapri-archive__categorias ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.casapri-archive__categorias > ul > li { margin-bottom: .3rem; }
.casapri-archive__categorias a {
    display: block;
    padding: .35rem 0;
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--body);
    text-decoration: none;
}
.casapri-archive__categorias a:hover { color: var(--ink); }
.casapri-archive__categorias > ul > li.is-atual > a {
    color: var(--ink);
    font-weight: 500;
}
.casapri-archive__categorias-filhas {
    margin: .1rem 0 .4rem .9rem;
    border-left: 1px solid var(--border);
}
.casapri-archive__categorias-filhas li { margin: 0; }
.casapri-archive__categorias-filhas a {
    padding: .3rem 0 .3rem .9rem;
    font-size: .85rem;
}
.casapri-archive__categorias-filhas li.is-atual > a {
    color: var(--ink);
    font-weight: 500;
    border-left: 2px solid var(--champagne);
    margin-left: -1px;
}

/* ---- facetas (issue #16): linha, acabamento, cor, preço, promoção, disponível ---- */
.casapri-archive__filtros {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .9rem 1.1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.casapri-archive__filtro-campo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.casapri-archive__filtro-campo label {
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--body);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.casapri-archive__filtro-campo select,
.casapri-archive__filtro-campo input[type="number"] {
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    padding: .45rem .6rem;
    min-height: 44px;
}
.casapri-archive__filtro-preco {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.casapri-archive__filtro-preco input[type="number"] {
    width: 6.5rem;
}
/* Coluna de checkboxes: usada tanto por Linha/Acabamento/Cor (múltipla
   seleção — Baymard: exigir 1 valor só por faceta é atrito que faz gente
   desistir do filtro a partir de ~5 opções) quanto por Promoção/Disponível.
   .casapri-archive__filtro-titulo só existe nas facetas de taxonomia
   (rótulo acima da lista); promoção/disponível não têm porque cada label é
   autoexplicativo sozinho. */
.casapri-archive__filtro-campo--checkbox {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}
.casapri-archive__filtro-titulo {
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--body);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.casapri-archive__filtro-campo--checkbox label {
    display: flex;
    align-items: center;
    gap: .4rem;
    text-transform: none;
    letter-spacing: normal;
    font-size: .85rem;
    color: var(--ink);
}
.casapri-archive__filtro-acoes {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-left: auto;
}
.casapri-archive__filtro-aplicar {
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--white);
    background: var(--ink);
    border: 1px solid var(--ink);
    padding: .5rem 1.1rem;
    min-height: 44px;
    cursor: pointer;
    transition: background .15s ease;
}
.casapri-archive__filtro-aplicar:hover { background: var(--champagne); border-color: var(--champagne); color: var(--ink); }
.casapri-archive__filtro-limpar {
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--body);
    text-decoration: underline;
}
.casapri-archive__filtro-limpar:hover { color: var(--ink); }

@media (max-width: 767px) {
    .casapri-archive__filtros { flex-direction: column; align-items: stretch; }
    .casapri-archive__filtro-campo select,
    .casapri-archive__filtro-preco input[type="number"] { width: 100%; }
    .casapri-archive__filtro-acoes { margin-left: 0; justify-content: space-between; }
}

/* ---- resumo de filtros aplicados (Baymard: 20% dos sites não mostram) ----
   Um chip por VALOR, não por faceta — Cor com 2 valores selecionados vira
   2 chips removíveis independentemente. Cada chip é um link real que já
   sai com aquele valor removido (ver $casapri_url_sem_valor_da_faceta). */
.casapri-archive__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}
.casapri-archive__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-body);
    font-size: .8rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .35rem .5rem .35rem .9rem;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.casapri-archive__chip:hover {
    border-color: var(--champagne-2);
    background: var(--white);
    color: var(--ink);
}
.casapri-archive__chip-remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--border);
    font-size: .9rem;
    line-height: 1;
    color: var(--body);
}
.casapri-archive__chip:hover .casapri-archive__chip-remover {
    background: var(--champagne);
    color: var(--ink);
}

/* ---- contagem + ordenação ---- */
.casapri-archive__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.casapri-archive__count {
    font-family: var(--font-body);
    color: var(--body);
    font-size: .9rem;
    margin: 0;
}
.casapri-archive__ordenacao {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.casapri-archive__ordenacao-label {
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--body);
}
.casapri-archive__ordenacao-select {
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    padding: .45rem .6rem;
    min-height: 44px;
}
.casapri-archive__ordenacao-botao {
    font-family: var(--font-body);
    font-size: .85rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    padding: .45rem .8rem;
    cursor: pointer;
}

/* ---- grade ----
   3 por linha (não 4): abre espaço pra coluna de filtros no desktop
   (.casapri-archive__layout acima), sem precisar de breakpoint próprio —
   já é a mesma contagem usada de 768px até o desktop cheio. */
.casapri-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
}
/*
 * O <li> da grade também carrega a classe "product" (wc_product_class()),
 * que o CSS nativo do WooCommerce (woocommerce-layout.css) estiliza com
 * float:left + width:22.05% + margin em %, pensado pro layout antigo em
 * float. display:grid no pai já ignora o float, mas a largura fixa em %
 * continua valendo por cima do grid — o item encolhe pra 22% da coluna
 * em vez de esticar, e o resultado é a grade "espremida" com imagem
 * minúscula e swatches empilhados. A especificidade do seletor nativo é
 * .woocommerce + ul.products + li.product = 3 classes/2 elementos; este
 * seletor iguala isso incluindo ".woocommerce" e a classe da própria
 * grade, então sempre vence independente da ordem de carregamento do CSS.
 */
.woocommerce ul.products.casapri-archive__grid li.product,
.woocommerce-page ul.products.casapri-archive__grid li.product {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    /* display:flex aqui e não só em .casapri-product-card-item porque o
       seletor nativo tem especificidade maior; é ele que faz o card esticar
       até o fim da linha da grade (alturas iguais entre vizinhos). */
    display: flex;
}
/*
 * woocommerce-layout.css põe um clearfix (::before/::after com content:" ")
 * em ul.products, herança do layout antigo em float. Num container grid esses
 * pseudo-elementos viram itens de grade: o ::before ocupava a primeira célula
 * e a fileira de abertura da loja aparecia com um buraco antes do primeiro
 * produto. Não há float aqui, então o clearfix é puro resíduo.
 */
/* Especificidade casada com a do seletor nativo (.woocommerce ul.products::before),
   pelo mesmo motivo do bloco de float acima: um seletor de uma classe só perde. */
.woocommerce ul.products.casapri-archive__grid::before,
.woocommerce ul.products.casapri-archive__grid::after,
.woocommerce-page ul.products.casapri-archive__grid::before,
.woocommerce-page ul.products.casapri-archive__grid::after {
    content: none;
    display: none;
}

@media (max-width: 767px) {
    .casapri-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .9rem; }
}

/* ---- "carregar mais" (Baymard #501): botão, não paginação numerada/scroll infinito ---- */
.casapri-archive__carregar-mais-wrap {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}
.casapri-archive__carregar-mais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 48px;
    padding: .8rem 2rem;
    border: 1px solid var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--ink);
    background: var(--white);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.casapri-archive__carregar-mais:hover {
    background: var(--ink);
    color: var(--white);
}
.casapri-archive__carregar-mais.is-carregando {
    opacity: .65;
    cursor: wait;
}

/* ---- estado vazio: nunca uma página em branco ---- */
.casapri-archive__vazio {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1px solid var(--border);
    background: var(--surface);
}
.casapri-archive__vazio-texto {
    font-family: var(--font-body);
    color: var(--body);
    font-size: 1rem;
    margin: 0 0 1rem;
}
.casapri-archive__link-saida {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
    background: var(--ink);
    padding: .8rem 1.6rem;
    transition: background .15s ease;
}
.casapri-archive__link-saida:hover { background: var(--champagne); color: var(--ink); }