/* ==========================================================================
   WEB360 — Products Module (Product Manager Phase A)
   Universal catalog grid. --mt-* tokens (with safe fallbacks); dark-safe;
   no template branding here (templates skin via body.tpl-{name} .prd-* hooks).
   Emitted once per page via the renderer's <link> guard.
   ========================================================================== */

.prd-section { padding: var(--mt-section-py, 64px) 0; }

.prd-head { max-width: 720px; margin-left: auto; margin-right: auto; }
.prd-eyebrow { display: inline-block; }
.prd-title { margin-top: .25rem; }
.prd-subtitle { color: var(--mt-text-muted, #64748b); }

.prd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--mt-space-4, 24px);
}

.prd-card {
  background: var(--mt-surface-1, #ffffff);
  border: 1px solid var(--mt-border, #e2e8f0);
  border-radius: var(--mt-radius-lg, 14px);
  overflow: hidden;
  transition: transform var(--mt-duration-fast, .15s) ease,
              box-shadow var(--mt-duration-fast, .15s) ease;
}
.prd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
}

.prd-card-link { display: block; color: inherit; text-decoration: none; }

.prd-card-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mt-surface-2, #f1f5f9);
  overflow: hidden;
}
.prd-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prd-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--mt-brand-primary, #3b4bd8);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--mt-radius-full, 999px);
}

.prd-card-body { padding: var(--mt-space-3, 16px); }

.prd-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .35rem;
  color: var(--mt-text, #0f172a);
}

.prd-card-summary {
  font-size: .85rem;
  color: var(--mt-text-muted, #64748b);
  margin: 0 0 .6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prd-card-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mt-brand-primary, #3b4bd8);
  margin-bottom: .5rem;
}

.prd-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--mt-brand-primary, #3b4bd8);
  transition: gap var(--mt-duration-fast, .15s) ease;
}
.prd-card:hover .prd-card-cta { gap: 9px; }

@media (max-width: 575.98px) {
  .prd-grid { grid-template-columns: 1fr; }
}