/* ─── Products page (list only — product column widths) ─── */
/*
   Column budget for the products table:
     Name              : flexible — grows to fill remaining space
     Plan              : 120px   (badge — short codes like "premium")
     Duration          : 120px   (centered, e.g. "30 days")
     Price             : 160px   (right-aligned, e.g. "9.99 MDL")
     Optimal           : 140px   (centered badge / em-dash)
     Actions           : 56px    (chevron only — trailing affordance)
*/

.js-products-table-wrapper .col-plan { width: 120px; }
.js-products-table-wrapper .col-duration { width: 120px; }
.js-products-table-wrapper .col-price { width: 160px; }
.js-products-table-wrapper .col-optimal { width: 140px; }
.js-products-table-wrapper .col-actions { width: 56px; }
/* col-name: intentionally no fixed width — it consumes the residual space. */

.js-products-table-wrapper .col-duration,
.js-products-table-wrapper .col-optimal,
.js-products-table-wrapper thead th.col-duration,
.js-products-table-wrapper thead th.col-optimal {
  text-align: center;
}
.js-products-table-wrapper thead th.col-price,
.js-products-table-wrapper tbody td.col-price {
  text-align: right;
  padding-right: var(--space-4);
  white-space: nowrap;
}
.js-products-table-wrapper tbody td.col-duration,
.js-products-table-wrapper tbody td.col-optimal {
  text-align: center;
  white-space: nowrap;
}

.product-optimal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--success, #10b981);
}

/* ─── Product detail page (rendered at /products/{product_id}) ─── */

.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
}

@media (max-width: 720px) {
  .product-detail-grid {
    grid-template-columns: 1fr;
  }
}

.product-detail-section {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle, var(--color-border, #e5e7eb));
}
.product-detail-section:last-child {
  border-bottom: none;
}

.product-detail-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4) 0;
}

.product-detail-field-label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 var(--space-1) 0;
}

.product-detail-field-value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin: 0;
  word-break: break-word;
}

.product-detail-field-value.text-mono {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}

.product-detail-field-empty {
  color: var(--text-muted);
  font-style: italic;
}

.product-detail-capability-entries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}
.product-detail-capability-entry {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: var(--transition), opacity 120ms ease, color 120ms ease;
}
.product-detail-capability-entry:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.product-detail-capability-entry--excluded {
  opacity: 0.55;
}
.product-detail-capability-entry--excluded .product-detail-capability-entry-code {
  text-decoration: line-through;
  color: var(--text-muted);
}
.product-detail-capability-entry--excluded:hover {
  opacity: 1;
}
.product-detail-capability-entry--excluded:hover .product-detail-capability-entry-code {
  text-decoration: none;
  color: var(--text-primary);
}
.product-detail-capability-entry-header {
  margin-bottom: var(--space-2);
}
.product-detail-capability-entry-code {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.product-detail-capability-fields {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
}
.product-detail-capability-field-row {
  display: contents;
}
.product-detail-capability-field-key {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: lowercase;
}
.product-detail-capability-field-value {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  word-break: break-word;
}

.product-detail-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  gap: var(--space-3);
  color: var(--text-secondary);
}
.product-detail-not-found-icon {
  color: var(--text-muted);
}