:root{
  --wa:#25D366;
  --wa-dark:#1fb257;
  --brand:#27ae96;
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --card-shadow:0 10px 24px rgba(15,23,42,.10);
}

/* Product card shell (do not remove your current classes; just add .product-card where possible) */
.product-card{
  position:relative; background:#fff; border:1px solid #eef2f6; border-radius:14px;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{ transform:translateY(-3px); box-shadow:var(--card-shadow); }

/* Hover action area */
.product-card .pc-actions{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; gap:10px; opacity:0; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.product-card:hover .pc-actions{ opacity:1; transform:translateY(0); pointer-events:auto; }

.pc-btn{
  flex:1 1 auto; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; text-decoration:none; border:1px solid transparent;
  box-shadow:0 6px 14px rgba(15,23,42,.10);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pc-btn.wa{ background:var(--wa); color:#fff; }
.pc-btn.wa:hover{ background:var(--wa-dark); }
.pc-btn.view{ background:#fff; color:var(--ink); border-color:#e5e7eb; }
.pc-btn.view:hover{ border-color:#cbd5e1; }
.pc-btn i{ margin-right:8px; }

/* Keeps text areas unobstructed by overlay */
.product-card .pc-spacer{ height:46px; }

/* Tabs polish (Description / Tags / Reviews) */
.product-tabs{ border-bottom:1px solid var(--line); display:flex; gap:18px; }
.product-tabs .tab{
  padding:10px 14px; font-weight:600; color:var(--muted); text-decoration:none; position:relative;
}
.product-tabs .tab.active{ color:var(--ink); }
.product-tabs .tab.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brand);
}