/* Page-specific styles for solution-healthcare-pharma-customer-ai-store */
/* Add overrides here — never edit compat.css for page-specific changes */

/* Featured products (.prod-grid / .prod-card) had no styling anywhere in the
   CSS chain — compat.css only auto-grids any *-grid wrapper, so the cards
   rendered as bare, unstyled blocks with oversized raw SVG icons. */
.prod-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.prod-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.prod-media {
  width: 56px;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border-radius: 10px;
  color: var(--teal-ink);
  margin-bottom: 1rem;
}
.prod-media svg { width: 28px; height: 28px; }
.prod-body { display: flex; flex-direction: column; flex: 1; }
.prod-badge {
  align-self: flex-start;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--teal-ink);
  background: rgba(39, 183, 188, .12);
  padding: .25rem .6rem;
  border-radius: 999px;
  margin-bottom: .55rem;
}
.prod-badge.rx { color: #B3261E; background: rgba(179, 38, 30, .1); }
.prod-body h3 {
  font-size: 1.04rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
  margin: 0 0 .35rem;
}
.prod-body > p {
  font-size: .87rem;
  font-weight: 500;
  color: var(--slate);
  line-height: 1.45;
  margin: 0 0 .9rem;
}
.prod-price {
  margin-top: auto;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
}
.prod-price s {
  font-weight: 500;
  font-size: .85rem;
  color: var(--slate-soft);
  margin-left: .4rem;
}