/* KIMERA-027 (LOTE 2+3): FAQ 3D fake (pergunta acima/resposta abaixo).
   Grade+Equipe capricho (sombra em camadas). 25 estilos de Titulos
   Decorados (corporativo refeito, neon sem fundo fixo). */
/* KIMERA-025: (A) anel da Equipe editavel (.ss-cbk-foto-wrap default).
   (D) logos em vaga fixa centralizada (.ss-cbk-logo-item 150x90). */
/* KIMERA-024 (FIX LOTE 1): selo do Grade usa classe ssx compartilhada
   (.ssx-blocos-ID-selo) para fundo editavel em conjunto. */
/* KIMERA-023 (LOTE 1): selo do icone do Grade (.ss-cbk-grade-selo) recebe
   o degrade (fundo editavel); .ss-cbk-grade-icone agora so cor/fonte. */
/* =================================================================
   SITES SIMPLES CMS - blocos.css
   Versao:    KIMERA-021
   Data:      13/06/2026
   Autor:     Arte nas Redes - artenasredes.com.br
   Projeto:   Sites Simples CMS - Flat File WYSIWYG
   Arquivo:   blocos.css
   Papel:     Estilo PUBLICO dos Custom Blocks (todos os 9 da beta:
              equipe, logos, galeria_cb, cardapio/Lista de Precos, video,
              mapa, faq, grade, agenda). Estrutura/layout/identidade visual;
              as CORES herdam o tema (var(--primary) etc.) e sao
              customizaveis por elemento/bloco via ssx (.ssx-blocos-...).
              Controles de admin (faixa +, lixeira, moldura) ficam no
              editor.css. Este arquivo vale no publico E no admin.
              KIMERA-017: Equipe/Galeria refinados; 5 novos blocos com
              identidade propria; tudo editavel pelo Kimera.
   ================================================================= */

/* Container comum de todo bloco */
.ss-cb {
    /* RESPIRO: o bloco nao deve estrangular o site. Margem vertical
       generosa (separa de secoes e de outros blocos) + margem lateral
       (afasta das bordas). Usamos MARGIN, nao padding, para o fundo
       (degrade) NAO pintar a area de respiro. */
    margin: 40px auto;
    max-width: 1140px;
    box-sizing: border-box;
}
.ss-cb-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px;
}
.ss-cb-title {
    text-align: center;
    font-size: 2rem;
    margin: 0 0 36px;
    color: var(--dark, #2c3e50);
}

/* ── BARRA DE CATEGORIAS DE PRODUTOS (sempre ativa com categorias) ── */
/* Mobile first. Funciona com e sem CWP. */
.ss-cwp-cats-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 0 14px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}
.ss-cwp-cats-bar::-webkit-scrollbar { display: none; }

.ss-cwp-cat-btn {
    flex-shrink: 0;
    background: #f0f0f0;
    color: var(--dark, #2C3E50);
    border: none;
    border-radius: 20px;
    padding: 10px 18px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.ss-cwp-cat-btn.active {
    background: var(--primary, #FF6B9D);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
@media (hover: hover) {
    .ss-cwp-cat-btn:hover {
        background: var(--primary, #FF6B9D);
        color: #fff;
    }
}

/* Pill de categoria no card de produto */
.ss-cwp-cat-pill {
    display: inline-block;
    background: var(--accent, #6C5CE7);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}