/* ============================================================
   Arte & Costura — Cartões de categoria
   Desenho aprovado em Figma (página "02 · Loja").

   Princípio: a cor da categoria aparece em DOIS sítios apenas —
   a régua curta sob o título, e o botão ao passar o rato. Tudo o
   resto é preto, branco e creme. Seis cores saturadas ao mesmo
   tempo numa grelha lêem-se como carnaval, não como sistema.
   ============================================================ */

/* ── Grelha ──────────────────────────────────────────────────── */
.ac-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1100px) {
    .ac-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    /* Duas colunas também no telemóvel: com 6 categorias dá 3 linhas certas. */
    .ac-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── Cartão ──────────────────────────────────────────────────── */
.ac-cat-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;                 /* altura igual dentro da linha */
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.ac-cat-card:hover,
.ac-cat-card:focus-visible {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
    border-color: #dcdcdc;
    text-decoration: none;
}

/* ── Título ──────────────────────────────────────────────────── */
.ac-cat-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #0f0f0f;
}

/* ── A marca da categoria: curta, não uma faixa ──────────────── */
.ac-cat-rule {
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--ac-cat-color, #17c8e8);
}

/* ── A caixa da imagem: quadrada, do tamanho da coluna ───────────
   Era um arco creme com a foto encolhida lá dentro, a 76% da largura. A
   mesma razão que o tirou do cartão de PRODUTO tira-o daqui: as imagens
   passaram a ser mockups 1:1 desenhados para serem vistos inteiros, e o
   arco cortava-lhes o topo enquanto a margem lhes roubava escala.

   `aspect-ratio` e não altura fixa, pelo mesmo motivo do cartão de
   produto: sem uma caixa definida em CSS, a imagem impõe a sua largura
   nativa como mínimo da coluna e rebenta a grelha.

   O creme fica — é o fundo da marca, e é ele que segura as categorias
   que ainda não têm fotografia. O que sai é a forma. */
.ac-cat-arch {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fdf4ec;
    border-radius: 10px;
    overflow: hidden;
}

.ac-cat-arch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Sem foto, a caixa fica sozinha — lê-se como intenção, não como buraco. */
.ac-cat-arch--empty { background: #fdf4ec; }

/* ── Contagem ────────────────────────────────────────────────── */
.ac-cat-count {
    margin: 0;
    font-size: 13px;
    color: #6b6b6b;
}

/* ── Botão: empurrado para a base, alinhado entre cartões ────── */
.ac-cat-btn {
    margin-top: auto;
    display: block;
    padding: 12px 16px;
    background: #0f0f0f;
    color: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    transition: background-color .18s ease;
}

/* A cor da categoria entra na interação — é aí que ela informa. */
.ac-cat-card:hover .ac-cat-btn,
.ac-cat-card:focus-visible .ac-cat-btn {
    background: var(--ac-cat-color, #17c8e8);
}

@media (max-width: 640px) {
    .ac-cat-card  { padding: 14px; gap: 10px; }
    .ac-cat-name  { font-size: 13px; }
    .ac-cat-rule  { width: 36px; }
    .ac-cat-arch  { border-radius: 8px; }
    .ac-cat-count { font-size: 11px; }
    .ac-cat-btn   { padding: 10px 12px; font-size: 11px; }
}

/* ── Cores por categoria (fallback; o valor real vem do term meta) ── */
.ac-cat-card.cat-papelaria             { --ac-cat-color: var(--cat-papelaria,      #17c8e8); }
.ac-cat-card.cat-textil                { --ac-cat-color: var(--cat-textil,         #ef5c1c); }
.ac-cat-card.cat-brindes               { --ac-cat-color: var(--cat-brindes,        #57e50b); }
.ac-cat-card.cat-tematicos             { --ac-cat-color: var(--cat-tematicos,      #e20075); }
.ac-cat-card.cat-servicos,
.ac-cat-card.cat-servicos-de-impressao { --ac-cat-color: var(--cat-servicos,       #fca800); }
.ac-cat-card.cat-sacos-de-papel        { --ac-cat-color: var(--cat-sacos-de-papel, #a100ff); }