/*
 * Final polish: one typography scale, one weight system and one spacing
 * rhythm for the whole site. Loaded last, so it refines earlier files.
 *
 * Type scale (px):  12 · 13 · 14 · 15 (body) · 16 · 18 · 22 · 28 · 36
 * Weights:          400 body · 500 labels · 600 UI/emphasis · 700 headings
 * Section rhythm:   64px desktop · 48px tablet · 40px phone
 */

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: clamp(24px, 2.3vw, 28px);
  --fs-4xl: clamp(28px, 3vw, 36px);
  --section-y: 64px;
  --head-gap: 28px;
  --radius-card: 16px;
}

/* ============ BASE TYPOGRAPHY ============ */
html, body { font-family: var(--font-sans); }
body {
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";   /* Inter: single-storey a, open digits */
}
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { letter-spacing: -0.015em; }
strong, b { font-weight: 600; }

/* Headings: 700 everywhere, consistent sizes */
.page-title,
.dash-welcome h1,
.paywall-card h1,
.detail-title { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.page-title { font-size: var(--fs-3xl); }
.detail-title { font-size: var(--fs-4xl); }

.section-head h2,
.reviews-head h2,
.catalog-head h2,
.detail-more .catalog-head h2,
.home-cta-inner h2,
.promo-copy h2 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.section-head h2,
.reviews-head h2,
.catalog-head h2 { font-size: var(--fs-3xl); }

.card h2,
.rail-head h2,
.discover-box h2,
.detail-card h2,
.panel h2,
.chat-list-head h2,
.hub-cats h2 { font-weight: 700; font-size: var(--fs-xl); }
.hub-cats h2,
.chat-list-head h2 { font-size: var(--fs-lg); }

.page-lead,
.section-lead { font-size: var(--fs-base); line-height: 1.6; }

.section-eyebrow,
.dash-eyebrow,
.dash-menu-label { font-weight: 700; letter-spacing: 0.08em; }
.section-eyebrow { font-size: var(--fs-xs); margin-bottom: 8px; }

/* Emphasis that was extra-bold now uses 600/700 */
.btn-primary,
.btn-outline,
.btn-ghost,
.header-nav .header-cta,
.more-btn,
.chip,
.tabs a,
.filter-btn,
.dash-menu a,
.dash-menu button,
.text-button { font-weight: 600; }
.pill,
.status-badge,
.pay-status,
.tab-count,
.menu-count,
.chat-unread,
.nav-badge,
.menu-badge,
.hero-badge { font-weight: 700; }

/* Numbers & prices: tabular, 700 */
.product-price,
.detail-price,
.seller-card-price,
.rail-price,
.cart-item-total,
.cart-item-unit,
.pay-card-amount,
.pay-row-amount,
.kpi-value,
.stat-item strong,
.rating-summary > strong,
.paywall-fee strong,
.cart-summary-total dd { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Product titles */
.product-title { font-size: var(--fs-lg); font-weight: 600; }
.product-seller,
.seller-card-cat,
.detail-company { font-weight: 600; letter-spacing: 0.05em; }
.seller-card-body h2,
.rail-info strong,
.cart-item-name,
.recent-name { font-weight: 600; }

/* ============ BUTTON SIZING ============ */
.btn-primary,
.btn-outline,
.btn-ghost { min-height: 42px; padding: 10px 20px; font-size: var(--fs-md); line-height: 1.2; }
.btn-lg { min-height: 48px; padding: 12px 26px; font-size: var(--fs-base); }
.btn-sm { min-height: 34px; padding: 7px 14px; font-size: var(--fs-sm); }
.header-nav .header-cta { min-height: 40px; padding: 9px 18px; }

/* ============ HEADER ============ */
.site-header-inner { padding: 14px 24px; }
.header-nav { gap: 20px; }
.header-nav a,
.header-nav .link-button { font-size: var(--fs-md); font-weight: 600; }

/* ============ HOME: SECTION RHYTHM ============ */
.home-section,
section#catalog,
.home-stats,
.trust-strip,
.hub { padding-left: 24px; padding-right: 24px; }

.hub { padding-top: 32px; padding-bottom: 32px; }
section#catalog { padding-top: var(--section-y); padding-bottom: var(--section-y); border-top: 0; }
.home-section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.rails-section { padding-top: 32px; padding-bottom: var(--section-y); }
.discover-section { padding-top: 0; }
.home-stats { padding-top: 40px; padding-bottom: 40px; }
.trust-strip { padding-top: 40px; padding-bottom: 32px; }
.home-cta { padding: 0 24px var(--section-y); }

.section-head,
.reviews-head { margin-bottom: var(--head-gap); }
section#catalog .catalog-head { margin-bottom: 20px; }
.chip-row { margin: 0 0 var(--head-gap); }
.how-cta { margin-top: 36px; }

/* Grids share one gap */
.product-grid { gap: 24px; }
.review-grid,
.how-grid,
.supplier-grid,
.category-grid,
.rails-grid,
.discover-grid { gap: 20px; }

/* Cards share one radius */
.product-card,
.review-card,
.how-item,
.supplier-card,
.rail-box,
.discover-box,
.hub-cats,
.hub-user,
.promo { border-radius: var(--radius-card); }

/* ============ HOME: DETAILS ============ */
.promo-copy h2 { font-size: clamp(24px, 2.4vw, 32px); }
.promo-copy p { font-size: var(--fs-base); }
.hub-cats li a { font-size: var(--fs-md); font-weight: 500; }
.hub-cat-count { font-weight: 600; }
.stat-item strong { font-size: 28px; }
.stat-item span { font-size: var(--fs-md); }
.how-item strong,
.review-card h3,
.trust-item strong { font-size: var(--fs-lg); font-weight: 600; }
.how-item p,
.review-card blockquote,
.trust-item span { font-size: var(--fs-md); line-height: 1.6; }
.how-num { font-weight: 700; }
.review-card figcaption strong { font-size: var(--fs-md); font-weight: 600; }
.home-cta-inner h2 { font-size: var(--fs-3xl); }
.home-cta-inner p { font-size: var(--fs-base); }
.tag-cloud a,
.location-list strong { font-weight: 500; }
.product-body { padding: 16px 18px 18px; }
.product-price { font-size: var(--fs-xl); }

/* ============ FOOTER ============ */
.site-footer h3 { font-weight: 700; letter-spacing: -0.01em; }
.site-footer a,
.site-footer p,
.site-footer li { font-size: var(--fs-md); }

/* ============ RESPONSIVE RHYTHM ============ */
@media (max-width: 1100px) {
  :root { --section-y: 48px; --head-gap: 24px; }
}

@media (max-width: 760px) {
  :root { --section-y: 40px; --head-gap: 20px; }
  .home-section,
  section#catalog,
  .home-stats,
  .trust-strip,
  .hub,
  .home-cta { padding-left: 16px; padding-right: 16px; }
  .site-header-inner { padding: 12px 16px; }
  .product-grid { gap: 14px; }
}