/* C-ERP para WordPress — herda fonte e cores do tema; a cor dos botões vem
   da cor principal do tema (ou da escolhida em Configurações › C-ERP). */
:root {
  --cerp-cor: var(--wp--preset--color--primary, var(--wp--preset--color--accent, var(--wp--preset--color--vivid-cyan-blue, #1f6feb)));
  --cerp-texto-cor: #fff;
  --cerp-borda: rgba(127, 127, 127, .28);
  --cerp-fundo-suave: rgba(127, 127, 127, .08);
  --cerp-raio: 10px;
  --cerp-zap: #1fa855;
}
.cerp-catalogo, .cerp-cotacao, .cerp-contato, .cerp-inscricao, .cerp-destaques, .cerp-produto, .cerp-gaveta, .cerp-pagina-cot { box-sizing: border-box; font-size: 1rem; }
.cerp-catalogo *, .cerp-cotacao *, .cerp-contato *, .cerp-inscricao *, .cerp-gaveta *, .cerp-destaques * { box-sizing: border-box; }
.cerp-isca { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* 2.2.2: o que o script esconde com "hidden" fica escondido mesmo quando uma regra dá display ao elemento (o "Ver mais 0 itens") */
.cerp-catalogo [hidden], .cerp-gaveta [hidden], .cerp-cotacao [hidden], .cerp-contato [hidden], .cerp-inscricao [hidden], .cerp-destaques [hidden], .cerp-produto [hidden], [class^="cerp-"][hidden], [class*=" cerp-"][hidden] { display: none !important; }
/* 2.2.2: só para leitor de tela, sem depender da classe do tema */
.cerp-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }

/* botões */
.cerp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 42px; padding: .55em 1.1em; border: 1px solid var(--cerp-cor); border-radius: var(--cerp-raio); background: var(--cerp-cor); color: var(--cerp-texto-cor); font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: filter .15s, background .15s; }
.cerp-btn:hover { filter: brightness(1.08); color: var(--cerp-texto-cor); }
.cerp-btn:focus-visible, .cerp-catalogo button:focus-visible, .cerp-gaveta button:focus-visible { outline: 3px solid var(--cerp-cor); outline-offset: 2px; }
.cerp-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cerp-btn-leve { background: transparent; color: var(--cerp-cor); }
.cerp-btn-leve:hover { background: var(--cerp-fundo-suave); color: var(--cerp-cor); }
.cerp-zap { background: var(--cerp-zap); border-color: var(--cerp-zap); }

/* catálogo */
.cerp-cat-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.cerp-busca { flex: 1 1 280px; }
.cerp-busca input, .cerp-gaveta-busca input, .cerp-cot-busca input, .cerp-campo input, .cerp-campo textarea { width: 100%; min-height: 44px; padding: .6em .8em; border: 1px solid var(--cerp-borda); border-radius: var(--cerp-raio); background: transparent; color: inherit; font: inherit; }
.cerp-conta { font-size: .9em; opacity: .75; }
.cerp-abrir-filtros { display: none; }
.cerp-cat-corpo { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
.cerp-sem-filtros .cerp-cat-corpo { grid-template-columns: 1fr; }
.cerp-sem-filtros .cerp-filtros, .cerp-sem-filtros .cerp-abrir-filtros { display: none !important; }
.cerp-filtros { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1.1rem; }
.cerp-filtro h3 { margin: 0 0 .4rem; font-size: .8em; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.cerp-cats { display: flex; flex-direction: column; gap: 2px; }
.cerp-cats button { display: flex; justify-content: space-between; gap: .5rem; width: 100%; padding: .45em .6em; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cerp-cats button:hover { background: var(--cerp-fundo-suave); }
.cerp-cats button.cerp-on { background: var(--cerp-cor); color: var(--cerp-texto-cor); font-weight: 600; }
.cerp-cat-fixa .cerp-filtro:first-child { display: none; }
.cerp-marca-fixa .cerp-filtro-marcas { display: none !important; }
.cerp-n { opacity: .65; font-size: .85em; font-variant-numeric: tabular-nums; }
.cerp-apls, .cerp-marcas, .cerp-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.cerp-chip { display: inline-flex; align-items: center; gap: .3em; padding: .2em .65em; border: 1px solid var(--cerp-borda); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .82em; line-height: 1.6; }
button.cerp-chip { cursor: pointer; }
button.cerp-chip.cerp-on { border-color: var(--cerp-cor); background: var(--cerp-cor); color: var(--cerp-texto-cor); }
.cerp-limpar { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--cerp-cor); font: inherit; font-size: .9em; text-decoration: underline; cursor: pointer; }

.cerp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.cerp-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cerp-borda); border-radius: var(--cerp-raio); background: var(--wp--preset--color--base, transparent); }
.cerp-card.cerp-no-orcamento { border-color: var(--cerp-cor); box-shadow: 0 0 0 1px var(--cerp-cor); }
.cerp-card-foto { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.cerp-card-foto img { width: 100%; height: 100%; object-fit: contain; }
.cerp-selo { position: absolute; top: .5rem; left: .5rem; z-index: 1; max-width: calc(100% - 1rem); overflow: hidden; padding: .15em .55em; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: .72em; white-space: nowrap; text-overflow: ellipsis; }
.cerp-produto .cerp-selo { position: static; display: inline-block; margin: 0 0 .5rem; background: var(--cerp-fundo-suave); color: inherit; }
.cerp-semfoto { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: #8a8f98; font-size: .8em; }
.cerp-semfoto svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cerp-card-corpo { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: .85rem; }
.cerp-card h3 { margin: 0; font-size: 1em; line-height: 1.3; }
.cerp-card h3 a { color: inherit; text-decoration: none; }
.cerp-card h3 a:hover { text-decoration: underline; }
.cerp-ficha { display: grid; gap: .15rem; margin: 0; font-size: .85em; }
.cerp-ficha div { display: flex; gap: .4em; }
.cerp-ficha dt { margin: 0; opacity: .65; }
.cerp-ficha dt::after { content: ':'; }
.cerp-ficha dd { margin: 0; }
.cerp-preco { margin: 0; font-weight: 700; }
.cerp-preco del { opacity: .55; font-weight: 400; }
.cerp-preco ins { text-decoration: none; }
.cerp-card-acao { margin-top: auto; padding-top: .25rem; }
.cerp-card-acao .cerp-btn { width: 100%; }
.cerp-step { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--cerp-cor); border-radius: var(--cerp-raio); }
.cerp-card-acao .cerp-step { width: 100%; }
.cerp-step button { min-width: 42px; border: 0; background: var(--cerp-fundo-suave); color: inherit; font: inherit; font-size: 1.15em; cursor: pointer; }
.cerp-step input { width: 100%; min-width: 3.5em; min-height: 40px; border: 0; background: transparent; color: inherit; font: inherit; text-align: center; -moz-appearance: textfield; }
.cerp-step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cerp-mais { display: block; margin: 1.25rem auto 0; }
.cerp-vazio { grid-column: 1 / -1; padding: 1.5rem; border: 1px dashed var(--cerp-borda); border-radius: var(--cerp-raio); text-align: center; }
.cerp-vazio b { display: block; margin-bottom: .35rem; }
.cerp-carregando { grid-column: 1 / -1; opacity: .6; }
.cerp-aviso { padding: .75rem 1rem; border-left: 4px solid #dba617; background: #fcf9e8; }

/* página do produto */
.cerp-produto { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; }
.cerp-produto-foto { flex: 0 1 360px; max-width: 100%; border-radius: var(--cerp-raio); }
.cerp-produto-info { display: flex; flex: 1 1 280px; flex-direction: column; align-items: flex-start; gap: .75rem; }
.summary .cerp-ficha { margin: 1rem 0; }

/* "Meu orçamento" */
.cerp-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 9990; display: inline-flex; align-items: center; gap: .5em; padding: .75em 1.1em; border: 0; border-radius: 999px; background: var(--cerp-cor); color: var(--cerp-texto-cor); font: inherit; font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, .22); cursor: pointer; }
.cerp-flutuante svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cerp-bolha { min-width: 1.6em; padding: 0 .4em; border-radius: 999px; background: #fff; color: var(--cerp-cor); font-size: .85em; text-align: center; }
.cerp-flutuante.cerp-vazio-btn .cerp-bolha { display: none; }
.cerp-fundo { position: fixed; inset: 0; z-index: 9991; background: rgba(0, 0, 0, .45); }
.cerp-gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9992; display: flex; flex-direction: column; width: min(440px, 100vw); background: var(--wp--preset--color--base, #fff); color: var(--wp--preset--color--contrast, #1e1e1e); box-shadow: -10px 0 40px rgba(0, 0, 0, .2); }
.cerp-gaveta[hidden], .cerp-fundo[hidden], .cerp-flutuante[hidden] { display: none; }
/* 2.3.0: "Só no celular" — o tema tem o botão dele na tela grande */
@media (min-width: 782px) { .cerp-flutuante-celular { display: none !important; } }
.cerp-gaveta header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--cerp-borda); }
.cerp-gaveta h2 { margin: 0; font-size: 1.2em; }
.cerp-gaveta-sub { margin: .15rem 0 0; font-size: .88em; opacity: .7; }
.cerp-fechar { width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--cerp-fundo-suave); color: inherit; font-size: 1.5em; line-height: 1; cursor: pointer; }
.cerp-gaveta-busca { position: relative; padding: .75rem 1.1rem 0; }
.cerp-gaveta-itens { flex: 1; overflow-y: auto; padding: .5rem 1.1rem; }
.cerp-gaveta footer { padding: 1rem 1.1rem; border-top: 1px solid var(--cerp-borda); }
.cerp-gaveta footer .cerp-btn { width: 100%; }
.cerp-travado { overflow: hidden; }
.cerp-li { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--cerp-borda); }
.cerp-li-foto { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 8px; background: var(--cerp-fundo-suave); }
.cerp-li-foto img { width: 100%; height: 100%; object-fit: cover; }
.cerp-li-info { flex: 1; min-width: 0; }
.cerp-li h4 { margin: 0; font-size: .95em; line-height: 1.3; }
.cerp-li p { margin: .15rem 0 .4rem; font-size: .82em; opacity: .7; }
.cerp-li-ctl { display: flex; align-items: center; gap: .75rem; }
.cerp-li-ctl .cerp-step input { width: 4.5em; min-height: 34px; }
.cerp-li-ctl .cerp-step button { min-width: 34px; }
.cerp-rm { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .85em; text-decoration: underline; opacity: .7; cursor: pointer; }
.cerp-sugestoes { display: none; margin-top: .4rem; overflow: hidden; border: 1px solid var(--cerp-borda); border-radius: var(--cerp-raio); }
.cerp-sugestoes.cerp-on { display: block; }
.cerp-sug { display: grid; grid-template-columns: 1fr auto; gap: 0 .75rem; width: 100%; padding: .55em .75em; border: 0; border-bottom: 1px solid var(--cerp-borda); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cerp-sug:last-child { border-bottom: 0; }
.cerp-sug:hover { background: var(--cerp-fundo-suave); }
.cerp-sug[disabled] { opacity: .5; cursor: default; }
.cerp-sug-nome { font-size: .92em; }
.cerp-sug-det { grid-row: 2; font-size: .78em; opacity: .65; }
.cerp-sug-acao { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--cerp-cor); font-size: .82em; font-weight: 600; white-space: nowrap; }
.cerp-sug-nada { margin: 0; padding: .6em .75em; font-size: .88em; }
.cerp-toast { position: fixed; left: 50%; bottom: 84px; z-index: 9995; padding: .6em 1em; border-radius: 999px; background: #1e1e1e; color: #fff; font-size: .9em; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }
.cerp-toast.cerp-on { opacity: 1; transform: translate(-50%, 0); }
.cerp-ajuda { font-size: .85em; opacity: .75; }

/* cotação e contato */
.cerp-cotacao, .cerp-contato { display: flex; flex-direction: column; gap: 1.25rem; max-width: 760px; }
.cerp-cot-bloco { display: flex; flex-direction: column; gap: .85rem; padding: 1.25rem; border: 1px solid var(--cerp-borda); border-radius: var(--cerp-raio); }
.cerp-cot-bloco h2, .cerp-contato h2 { margin: 0; font-size: 1.2em; }
.cerp-cot-titulo { display: flex; align-items: baseline; justify-content: space-between; }
.cerp-cot-conta { font-size: .9em; opacity: .7; }
.cerp-cot-busca { position: relative; }
.cerp-cot-busca label, .cerp-campo { display: flex; flex-direction: column; gap: .3rem; font-size: .92em; font-weight: 600; }
.cerp-campo span { font-weight: 400; opacity: .7; }
.cerp-campo input[type=file] { padding: .45em; }
.cerp-grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .85rem; }
.cerp-arquivo-info:empty, .cerp-aviso-form:empty { display: none; }
.cerp-arquivo-info, .cerp-aviso-form { margin: 0; font-size: .9em; }
.cerp-aviso-form { padding: .7em .9em; border-radius: var(--cerp-raio); }
.cerp-erro { color: #b32d2e; }
.cerp-aviso-form.cerp-erro { background: #fcf0f1; }
.cerp-aviso-form.cerp-ok { background: var(--cerp-fundo-suave); }
.cerp-ok { color: inherit; }
.cerp-cot-acoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.cerp-cot-pronto { padding: 1.25rem; border: 2px solid var(--cerp-cor); border-radius: var(--cerp-raio); }
.cerp-cot-pronto h3 { margin: 0 0 .5rem; }
.cerp-enviando { opacity: .7; pointer-events: none; }

/* página da cotação pelo link */
.cerp-pagina-cot { max-width: 860px; margin: 2rem auto; padding: 0 1rem; }
.cerp-cot-num { margin: 0; font-weight: 600; color: var(--cerp-cor); }
.cerp-cot-quem { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .5rem 1.5rem; margin: 1rem 0 1.5rem; font-size: .95em; }
.cerp-tabela { width: 100%; border-collapse: collapse; font-size: .95em; }
.cerp-tabela th, .cerp-tabela td { padding: .5em .6em; border-bottom: 1px solid var(--cerp-borda); text-align: left; }
.cerp-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.cerp-texto-livre { white-space: normal; }

@media (max-width: 781px) {
  .cerp-cat-corpo { grid-template-columns: 1fr; }
  .cerp-abrir-filtros { display: inline-flex; }
  .cerp-filtros { position: static; display: none; padding: 1rem; border: 1px solid var(--cerp-borda); border-radius: var(--cerp-raio); }
  .cerp-filtros-abertos .cerp-filtros { display: flex; }
  .cerp-cats { flex-direction: row; flex-wrap: wrap; }
  .cerp-cats button { width: auto; border: 1px solid var(--cerp-borda); border-radius: 999px; }
  .cerp-grade { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
  .cerp-card-corpo { padding: .65rem; }
  .cerp-flutuante span { display: none; }
}
@media print {
  .cerp-flutuante, .cerp-gaveta, .cerp-fundo, .cerp-cot-acoes { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cerp-toast, .cerp-btn { transition: none; }
}

/* inscrição para ofertas */
.cerp-inscricao { display: flex; flex-direction: column; gap: .9rem; max-width: 560px; }
.cerp-inscricao h2 { margin: 0; font-size: 1.25em; }
.cerp-inscricao .cerp-ajuda { margin: 0; }
.cerp-check { display: flex; align-items: flex-start; gap: .5em; font-size: .92em; line-height: 1.35; cursor: pointer; }
.cerp-check input { width: 1.1em; height: 1.1em; margin: .12em 0 0; flex: none; accent-color: var(--cerp-cor); }
.cerp-janela-inscricao { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 1.5rem; border: 0; border-radius: var(--cerp-raio); background: var(--wp--preset--color--base, #fff); color: inherit; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.cerp-janela-inscricao::backdrop { background: rgba(0, 0, 0, .45); }
.cerp-janela-inscricao .cerp-fechar { position: absolute; top: .4rem; right: .5rem; width: 40px; height: 40px; border: 0; background: transparent; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.cerp-janela-inscricao .cerp-fechar:hover { background: var(--cerp-fundo-suave); }
.cerp-janela-inscricao .cerp-grade-campos { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: no-preference) { .cerp-janela-inscricao[open] { animation: cerp-surgir .2s ease-out; } }
@keyframes cerp-surgir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* calcular frete (2.2.0) */
.cerp-frete{margin:1rem 0;display:grid;gap:.4rem;max-width:28rem}
.cerp-frete-linha{display:flex;gap:.5rem}
.cerp-frete-linha input{flex:1;min-width:0}
.cerp-frete-opcoes{list-style:none;margin:.25rem 0 0;padding:0;border:1px solid #e5e7eb;border-radius:8px}
.cerp-frete-opcoes li{display:flex;justify-content:space-between;gap:.75rem;padding:.5rem .75rem;border-top:1px solid #e5e7eb}
.cerp-frete-opcoes li:first-child{border-top:0}
.cerp-frete-preco{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}