/* ============================================================
   FOUGHT — Product List & Detail Page Styles
   ============================================================ */

/* ── Product List Page ── */
.product-list-header {
  padding: calc(var(--nav-height) + var(--space-3xl)) 0 var(--space-xl);
  text-align: center;
}

.product-list-header h1 {
  margin-bottom: var(--space-sm);
}

.product-list-header p {
  margin: 0 auto;
  color: var(--text-subtle);
  font-size: 1.1rem;
}

.product-list-grid {
  padding: var(--space-xl) 0 var(--space-4xl);
}

.product-list-grid .product-card h3 {
  font-size: 1.4rem;
}

/* ── Product Detail Page ── */
.product-detail-hero {
  padding: calc(var(--nav-height) + var(--space-3xl)) 0 var(--space-2xl);
  text-align: center;
}

.product-detail-hero .product-logo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  margin: 0 auto var(--space-lg);
  box-shadow: var(--shadow-glow);
}

.product-detail-hero h1 {
  margin-bottom: var(--space-sm);
}

.product-detail-hero .product-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.product-detail-hero .product-short-desc {
  color: var(--text-subtle);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Features ── */
.features-section {
  padding: var(--space-3xl) 0;
  background: var(--bg-deep);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

/* ── Pricing ── */
.pricing-section {
  padding: var(--space-3xl) 0;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  max-width: 700px;
  margin: 0 auto;
}

.pricing-card {
  padding: var(--space-xl);
  text-align: center;
}

.pricing-card h3 {
  font-size: 1.2rem;
  margin-bottom: var(--space-sm);
}

.pricing-card .price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}

.pricing-card .price-period {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-md);
}

.pricing-card .pricing-features {
  text-align: left;
  margin-bottom: var(--space-lg);
}

.pricing-card .pricing-features li {
  padding: var(--space-xs) 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pricing-card .pricing-features li::before {
  content: '✓';
  color: var(--ok);
  font-weight: 700;
}

.pricing-card.featured {
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: var(--shadow-glow);
}

/* ── How It Works ── */
.how-section {
  padding: var(--space-3xl) 0;
  background: var(--bg-deep);
}

.steps-container {
  max-width: 600px;
  margin: 0 auto;
}

/* ── Supported Banks ── */
.banks-section {
  padding: var(--space-3xl) 0;
}

.banks-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.bank-card {
  padding: var(--space-lg) var(--space-xl);
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-strong);
}

/* ── CTA ── */
.product-cta-section {
  padding: var(--space-3xl) 0;
  text-align: center;
  background: var(--bg-deep);
}

.product-cta-section h2 {
  margin-bottom: var(--space-md);
}

.product-cta-section p {
  margin: 0 auto var(--space-xl);
  color: var(--text-subtle);
}

/* ── FAQ ── */
.faq-section {
  padding: var(--space-3xl) 0;
}

.faq-container {
  max-width: 700px;
  margin: 0 auto;
}

/* ── Status (Coming Soon) ── */
.status-section {
  padding: var(--space-3xl) 0;
  text-align: center;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  font-size: 1.2rem;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 2px solid rgba(245, 158, 11, 0.25);
  margin-bottom: var(--space-lg);
}

.status-section p {
  margin: 0 auto;
  color: var(--text-subtle);
  font-size: 1.05rem;
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.breadcrumb a {
  color: var(--text-subtle);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb .separator {
  color: var(--muted);
}