/* =========================================
   CATEGORIA • Edison Matcon
   Pequenos cards lado a lado + WhatsApp
   ========================================= */

/* Tokens (herda do tema com fallbacks corretos) */
:root{
  --pad: clamp(16px, 3vw, 28px);
  --gap: clamp(12px, 2.2vw, 18px);
  --radius: 16px;

  /* use nomes diferentes para o fallback (evita ciclo) */
  --bg: var(--site-bg, #0b0f19);
  --panel: var(--site-card, #11172a);
  --line: var(--site-line, #2a3554);
  --text: var(--site-text, #eaf0ff);
  --muted: var(--site-muted, #a8b3d1);

  --brand: var(--site-brand, #2563eb);
  --brand-2: var(--site-brand-2, #fbbf24);
  --danger: #e11d48;
  --shadow: 0 10px 35px rgba(0,0,0,.35);
}

/* ===== Fundo e glow ajustáveis ===== */
:root{
  /* Ajuste AQUI a cor/gradiente do fundo desta página */
  --cat-bg: radial-gradient(1200px 500px at 20% -10%, #0d1430 0%, transparent 60%), var(--bg);
  /* Se quiser chapado: --cat-bg: #0b0f19; */

  /* Cores do anel/glow dos cards */
  --card-ring: #2a3554;
  --card-ring-hover: #3b4d7a;
}
body.category-page{ background: var(--cat-bg); color: var(--text); }

/* Cabeçalho + breadcrumb */
.cat-header{margin-bottom:14px}
.crumbs{color:var(--muted);font-size:.95rem;margin:0 0 6px}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--text)}

/* Título */
.cat-header .section-head h2{
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  letter-spacing:.2px; margin: 2px 0 4px;
}

/* Grid de produtos */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
}
@media (min-width:760px){
  .prod-grid{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
}

/* Card */
.prod-card{
  background: linear-gradient(180deg,#30160e,#0a1022);
  border: 1px solid var(--card-ring);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:12px;
  display:flex;
  flex-direction:column;
  min-height: 430px;                 /* fix: px */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.prod-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  border-color: var(--card-ring-hover);
}

.prod-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:14px;
  border:1px solid #b7c7f7;
  background:#0e1323;
}

.prod-title{font-weight:800;margin:10px 4px 6px;color:var(--text)}
.prod-desc{color:var(--muted);font-size:.95rem;margin:0 4px 8px}

/* clamp para evitar “pulos” de altura */
.prod-title,
.prod-desc{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Preço */
.price{display:flex;align-items:baseline;gap:8px;margin:0 4px 12px}
.price .real{font-weight:800;color:var(--text)}
.price .old{color:#c9d2ef;opacity:.85;text-decoration:line-through}

/* Ações no rodapé do card */
.actions{display:flex;gap:10px;margin-top:auto}

/* Botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px; padding:10px 14px; min-height:42px;
  border-radius:12px; text-decoration:none; font-weight:800;
  border:1px solid transparent; cursor:pointer;
  color:#fff; background:var(--brand);
  box-shadow: var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid rgba(37,99,235,.4);outline-offset:2px}

.btn-outline{background:transparent;border-color:#91fdef;color:var(--text)}
.btn-outline:hover{border-color:#3d723d}

.btn-wa{
  background:#25d366;           /* WhatsApp */
  color:#063b19;
  border-color:#21c25c;
}
.btn-wa:hover{filter:brightness(1.05)}
.btn-wa svg{width:18px;height:18px}

/* ações em coluna no mobile */
@media (max-width:560px){
  .actions{flex-direction:column}
  .btn,.btn-outline,.btn-wa{width:100%}
}

/* Pager (se usar) */
.pager{
  display:flex;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap
}
.pager .page{
  background:#0b0f19;border:1px solid var(--line);color:var(--text);
  padding:8px 12px;border-radius:10px;text-decoration:none
}
.pager .page:hover{border-color:#72503d}
.pager .current{
  background:var(--brand);border-color:var(--brand);color:#fff;font-weight:800
}
.pager .disabled{ opacity:.5; pointer-events:none }

/* respiro abaixo do header fixo */
main.container{margin-top:8px}