/* ─── Product List page wrapper ───────────────────────────────────────────── */

.product-list {
  padding-top: 3rem;
  padding-bottom: var(--space-section);
}

/* ─── Page header: heading left, CTA right ──────────────────────────────── */

.product-list__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.product-list__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h1);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-ink);
}

/* ─── Product list table (double-bezel card) ─────────────────────────────── */

.product-list-table {
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border);
  padding: 0.375rem;
  border-radius: var(--radius-card);
}

.product-list-table__inner {
  background: var(--color-surface-raised);
  border-radius: var(--radius-inner);
  overflow: hidden;
}

.product-list-table__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}

.product-list-table__table thead {
  border-bottom: 1px solid var(--color-border);
}

.product-list-table__table th {
  font-size: var(--text-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 500;
  padding: 0.875rem 1.25rem;
  text-align: left;
}

.product-list-table__table td {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.product-list-table__table tbody tr:last-child td {
  border-bottom: none;
}

.product-list-table__table tbody tr {
  transition: background var(--duration-fast) var(--ease-default),
              opacity var(--duration-fast) var(--ease-default);
}

.product-list-table__table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* ─── Row reveal animation (staggered) ──────────────────────────────────── */

.product-list-table__table tbody tr[data-reveal] {
  opacity: 0;
  animation: reveal-up var(--duration-slow) var(--ease-default) forwards;
  animation-delay: calc(var(--index, 0) * 50ms);
}

/* ─── Inactive row treatment ─────────────────────────────────────────────── */

.product-list-table__row--inactive {
  opacity: 0.45;
}

.product-list-table__row--inactive:hover {
  opacity: 0.7;
}

/* ─── Inactive status badge ──────────────────────────────────────────────── */

.product-list-table__badge--inactive {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 0.125rem 0.5rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ─── Numeric cells (price, purchases) ──────────────────────────────────── */

.product-list-table__cell--numeric {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  white-space: nowrap;
}

/* ─── View link ──────────────────────────────────────────────────────────── */

.product-list-table__link {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--duration-fast) var(--ease-default);
}

.product-list-table__link:hover {
  color: var(--color-ink);
}

/* ─── Mobile: hide non-essential columns on narrow screens ──────────────── */

@media (max-width: 39.999rem) {
  .product-list-table__cell--numeric,
  .product-list-table__table th:nth-child(4) {
    display: none;
  }

  .product-list-table__table td:nth-child(2),
  .product-list-table__table td:nth-child(3),
  .product-list-table__table td:nth-child(4) {
    display: none;
  }
}