/* ===================================================================
 * Products Page
 * Additive layer for products.html only.
 * Everything structural comes from layout.css / components.css / main.css.
 * =================================================================== */

:root {
  /* Deskfab product accent (industrial orange). Scoped to Deskfab affordances. */
  --product-accent-deskfab: #f5a623;
}

/* ===================================================================
 * Body copy blocks (replaces repeated inline styles)
 * =================================================================== */

.product-list {
  list-style: disc;
  padding-left: var(--spacing-6);
  text-align: left;
}

.product-list li {
  margin-bottom: var(--spacing-2);
}

/* ===================================================================
 * Meta rows and tags (sectors, deployment targets, status)
 * =================================================================== */

.product-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-6);
}

.product-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border: 1px solid var(--line-primary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-1) var(--spacing-3);
}

/* ===================================================================
 * Action rows
 * =================================================================== */

.product-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-12);
}

/* External-link affordance inside a button or link */
.product-external-icon {
  margin-left: var(--spacing-2);
  font-size: 10px;
}

/* ===================================================================
 * Deskfab accent hint (subtle — icon tint only)
 * =================================================================== */

.product-icon-deskfab {
  color: var(--product-accent-deskfab);
}

@media (max-width: 768px) {
  .product-actions .btn {
    width: 100%;
  }
}