/* =========================================================================
   Card de produto (usado na página inicial e na página de produtos)
   Marcação: templates/element/site/produto_card.php, dentro de <ul class="lp-grid">
   ========================================================================= */

.lp-grid {
  --lp-green: var(--theme-primary-color, #84be64);
  --lp-green-soft: #e7f2e0;
  --lp-green-ink: #3e7a28;
  --lp-navy: var(--theme-secondary-color, #1b1e3a);
  --lp-bg: #f3f4f1;
  --lp-line: #dde2d8;
  --lp-muted: #596071;
  --lp-white: #fff;
  --lp-ease: cubic-bezier(.22, .8, .24, 1);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Versão com no máximo 3 colunas (página inicial) */
.lp-grid.lp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Neutraliza regras globais do bootstrap/site.css dentro dos cards */
.lp-grid a { display: inline; justify-content: normal; font-weight: inherit; color: inherit; }
.lp-grid h3, .lp-grid p, .lp-grid ul { margin: 0; }
.lp-grid ul { padding: 0; list-style: none; }
.lp-grid img { display: block; max-width: 100%; }
.lp-grid button { font: inherit; }
.lp-grid :focus-visible { outline: 3px solid var(--lp-green-ink); outline-offset: 2px; border-radius: 4px; }

.lp-grid .lp-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; background: var(--lp-white);
  border-radius: 16px; box-shadow: 0 0 0 1px var(--lp-line); overflow: hidden; color: var(--lp-navy);
  transition: box-shadow .3s var(--lp-ease), transform .3s var(--lp-ease);
}
.lp-grid .lp-card:hover { box-shadow: 0 0 0 1.5px var(--lp-green), 0 18px 34px -22px rgba(27, 30, 58, .45); transform: translateY(-3px); }
.lp-grid .lp-pic { aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--lp-line); display: grid; place-items: center; padding: 18px; overflow: hidden; }
.lp-grid .lp-pic img { max-height: 100%; width: auto; object-fit: contain; border-radius: 10px; mix-blend-mode: multiply; transition: transform .6s var(--lp-ease); }
.lp-grid .lp-card:hover .lp-pic img { transform: scale(1.06); }
.lp-grid .lp-info { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 0; flex: 1; }
.lp-grid .lp-cat { font-size: .8rem; font-weight: 700; color: var(--lp-green-ink); }
.lp-grid .lp-card h3 { font-size: 1.12rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.lp-grid .lp-card h3 a { text-decoration: none; color: var(--lp-navy); }
.lp-grid .lp-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; } /* card inteiro clicável */
.lp-grid .lp-use { font-size: .93rem; color: var(--lp-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-grid .lp-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lp-grid .lp-specs li { font-size: .78rem; font-weight: 700; padding: .2em .6em; border-radius: 6px; background: var(--lp-bg); color: #3a3f55; }
.lp-grid .lp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 16px; }
.lp-grid .lp-cod { font-size: .82rem; color: var(--lp-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp-grid .lp-add {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 999px; padding: .55em .95em; font-weight: 800; font-size: .86rem; line-height: 1.2; cursor: pointer;
  background: var(--lp-green-soft); color: var(--lp-green-ink);
  transition: background-color .25s, color .25s, transform .2s var(--lp-ease);
}
.lp-grid .lp-add:hover { background: #d6ebca; }
.lp-grid .lp-add:active { transform: scale(.95); }
.lp-grid .lp-add[aria-pressed="true"] { background: var(--lp-green); color: var(--lp-navy); }
.lp-grid .lp-add[aria-pressed="true"] i { animation: lp-pop .35s var(--lp-ease); }
@keyframes lp-pop { 0% { transform: scale(.4) rotate(-20deg); } 100% { transform: none; } }

/* "Ver detalhes": só visual; o clique vai para o link que cobre o card inteiro */
.lp-grid .lp-ver { pointer-events: none; }
.lp-grid .lp-card:hover .lp-ver { background: var(--lp-green); color: var(--lp-navy); }

/* ---------- Página inicial ("Confira nossas ofertas") ---------- */
.produtos-home .lp-grid { margin-top: 8px; }
.produtos-home-todos { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) { .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .lp-grid, .lp-grid.lp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .lp-grid { gap: 12px; }
  .lp-grid .lp-pic { padding: 12px; }
  .lp-grid .lp-info { padding: 12px 12px 0; }
  .lp-grid .lp-card h3 { font-size: 1rem; }
  .lp-grid .lp-use, .lp-grid .lp-specs { display: none; }
  .lp-grid .lp-foot { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-grid *, .lp-grid *::before, .lp-grid *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}