/* ═══════════════════════════════════════════════════════════
   Agency Polish 2026 — Typography & Spacing
   Finer font weights · breathing room · modern hierarchy
   ═══════════════════════════════════════════════════════════ */

/* ── Trustbar spacing ── */
.site-trustbar {
  padding-block: 0.5rem !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  gap: 1.2rem !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
}

/* ── Header layout ── */
.site-header {
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  padding-block: 0.72rem !important;
  gap: 1rem !important;
}

.site-header.simple-header {
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
}

/* ── Brand lockup ── */
.brand-lockup img {
  height: 38px !important;
  width: auto !important;
}

/* ── Main nav spacing ── */
.main-nav {
  min-width: min(100%, 13rem) !important;
}

/* ── Header actions ── */
.header-actions {
  gap: 0.72rem !important;
}

/* ── Search box ── */
.search-box {
  gap: 0.24rem !important;
}

.search-box input {
  border-radius: var(--radius-md) !important;
  padding: 0.48rem 0.72rem !important;
  font-size: 0.86rem !important;
  font-weight: 400 !important;
}

/* ── Primary action button ── */
.header-primary-action {
  border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  padding: 0.48rem 1rem !important;
  letter-spacing: -0.01em !important;
  transition: all var(--duration-base) var(--ease-standard) !important;
}

.header-primary-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
}

/* ── Hero section ── */
.hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
}

.hero-copy {
  max-width: 52rem !important;
}

.eyebrow {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--brand-primary) !important;
  margin-bottom: 0.8rem !important;
}

.hero h1, .legal-hero h1 {
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
}

.lead {
  font-size: 1.08rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--muted) !important;
  max-width: 42rem !important;
}

/* ── Hero actions ── */
.hero-actions {
  gap: 0.8rem !important;
  margin-top: 1.8rem !important;
}

.primary-link, .secondary-link {
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border-radius: var(--radius-md) !important;
  padding: 0.62rem 1.3rem !important;
  letter-spacing: -0.01em !important;
  transition: all var(--duration-base) var(--ease-standard) !important;
}

.primary-link:hover, .secondary-link:hover {
  transform: translateY(-1px);
}

/* ── Catalog section ── */
.catalog {
  padding-block: clamp(2rem, 5vw, 3.5rem) !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
}

.catalog-heading {
  margin-bottom: 1.8rem !important;
}

.catalog-heading h2, .page-section h2 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

/* ── Cards ── */
.catalog-result-card, .product-card, .category-overview-card {
  border-radius: var(--radius-lg) !important;
  padding: 1.2rem !important;
  transition: all var(--duration-base) var(--ease-standard) !important;
}

.catalog-result-card:hover, .product-card:hover, .category-overview-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg) !important;
}

.catalog-result-card h3, .product-card h3 {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
}

/* ── Footer ── */
.site-footer {
  padding-block: 2.5rem !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  gap: 2rem !important;
}

.site-footer p {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  line-height: 1.5 !important;
}

.site-footer-nav {
  gap: 1rem !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
}

/* ── Legal pages ── */
.legal-main {
  padding-block: clamp(2rem, 5vw, 3.5rem) !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
  max-width: 52rem !important;
}

.legal-section {
  margin-bottom: 2rem !important;
}

.legal-section h2 {
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0.8rem !important;
}

.legal-section p {
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--ink-soft) !important;
}

.legal-meta {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--muted-2) !important;
}

/* ── Page sections ── */
.page-section {
  padding-block: clamp(2rem, 5vw, 3.5rem) !important;
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
}

/* ── Result count ── */
.result-count {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--muted-2) !important;
}

/* ── Nav menu items typography ── */
.nav-menu a strong {
  font-weight: 600 !important;
}

.nav-menu a small {
  font-weight: 400 !important;
}

/* ── Print button ── */
.print-button {
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  border-radius: var(--radius-md) !important;
  letter-spacing: -0.01em !important;
}

/* ── More menu toggle ── */
.header-more-toggle {
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  border-radius: var(--radius-md) !important;
}

/* ── Mobile spacing fixes ── */
@media screen and (max-width: 1050px) {
  .site-header {
    padding-inline: 1rem !important;
    gap: 0.8rem !important;
  }

  .hero {
    padding-block: 2rem !important;
    padding-inline: 1rem !important;
  }

  .catalog, .page-section {
    padding-inline: 1rem !important;
  }

  .site-footer {
    padding-inline: 1rem !important;
  }

  .legal-main {
    padding-inline: 1rem !important;
  }
}

@media screen and (max-width: 640px) {
  .site-trustbar {
    padding-inline: 1rem !important;
    gap: 0.8rem !important;
    font-size: 0.72rem !important;
  }

  .site-trustbar span:nth-child(4) {
    display: none;
  }

  .hero h1 {
    font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
  }

  .lead {
    font-size: 1rem !important;
  }

  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .primary-link, .secondary-link {
    text-align: center !important;
  }
}

/* ── Selection page ── */
.selection-body .page-section {
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
}

/* ── Checkout page ── */
.checkout-body .page-section {
  padding-inline: clamp(1rem, 4vw, 2.5rem) !important;
}

/* ── Smooth scroll ── */
html {
  scroll-behavior: smooth !important;
}

/* ── Selection improvements ── */
::selection {
  background: color-mix(in srgb, var(--brand-primary) 20%, transparent) !important;
  color: var(--ink) !important;
}