/* Shared header styles (overrides), aligned with products header design. */

/* Use higher specificity to win over existing page-specific rules. */
.header.product-header {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-gray-200);
  padding: var(--spacing-xl) var(--spacing-3xl);
  position: static; /* not sticky */
}

.header.product-header .header-title {
  font-size: var(--font-3xl);
  font-weight: 700;
  color: var(--color-gray-900);
  background: var(--gradient-title);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

@supports not (-webkit-background-clip: text) {
  .header.product-header .header-title {
    background: none;
    color: var(--color-gray-900);
  }
}

.header.product-header .header-subtitle {
  font-size: var(--font-sm);
  color: var(--color-gray-800);
  margin-top: 2px;
  margin-bottom: 0;
  letter-spacing: 0.01em;
}