.jof-wrap{max-width:1100px;margin:0 auto}
.jof-filters{display:flex;gap:8px;align-items:center;margin-bottom:16px}
#jof-loja{padding:10px 12px;border:1px solid #ddd;border-radius:6px;min-width:260px}
#jof-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.jof-card{border:1px solid #eee;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.jof-thumb img{width:100%;height:auto;display:block}
.jof-body{padding:14px}
.jof-title{margin:0 0 8px 0;font-size:16px;line-height:1.3}
.jof-validade{font-size:12px;opacity:.75;margin-bottom:12px}
.jof-actions{margin-top:8px}
.jof-pagination{display:flex;justify-content:center;margin-top:16px}
#jof-more{padding:8px 12px;border:1px solid #ddd;border-radius:6px;background:#fafafa}

/* dica inicial */
.jof-empty-hint{color:#666;font-size:14px}

/* botão padrão + variação vermelha (alinha com botões do site) */
.jof-btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  transition:transform .04s ease, opacity .2s ease;
  border:0;
}
.jof-btn:hover{transform:translateY(-1px)}
.jof-btn:active{transform:translateY(0)}

/* ajuste para combinar com o botão vermelho do layout */
.jof-btn-red{
  background:#E53935; /* troque para o HEX oficial, se quiser */
  color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.jof-btn-red:hover{opacity:.92}
.jof-btn-red:focus{outline:2px solid rgba(229,57,53,.35); outline-offset:2px}

/* esconder qualquer label remanescente */
.jof-filters label{display:none}