/*
  ELX Energy typography control layer.
  Loaded after page styles to normalize visual hierarchy across catalog,
  product pages, cart, lead forms, and marketing sections.
*/

:root {
  --type-display: clamp(2.75rem, 2.05rem + 2.8vw, 4.25rem);
  --type-h1: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  --type-h2: clamp(1.75rem, 1.42rem + 1.35vw, 2.75rem);
  --type-h3: clamp(1.25rem, 1.1rem + 0.65vw, 1.75rem);
  --type-card-title: clamp(1.35rem, 1.05rem + 1.05vw, 2rem);
  --type-product-title: clamp(2.1rem, 1.55rem + 2vw, 3.45rem);
  --type-price: clamp(2.25rem, 1.62rem + 2.35vw, 3.8rem);
  --type-body: clamp(0.95rem, 0.91rem + 0.16vw, 1.0625rem);
  --type-body-large: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --type-small: clamp(0.8125rem, 0.79rem + 0.08vw, 0.875rem);
  --type-label: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --type-button: clamp(0.9375rem, 0.9rem + 0.14vw, 1rem);

  --leading-tight: 0.96;
  --leading-title: 1.08;
  --leading-heading: 1.16;
  --leading-body: 1.62;
  --leading-compact: 1.34;
}

body {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

:where(main, .page-main, .site-main) h1 {
  font-size: var(--type-h1) !important;
  line-height: var(--leading-title) !important;
  letter-spacing: 0 !important;
}

:where(main, .page-main, .site-main) h2,
.section-title {
  font-size: var(--type-h2) !important;
  line-height: var(--leading-heading) !important;
  letter-spacing: 0 !important;
}

:where(main, .page-main, .site-main) h3 {
  font-size: var(--type-h3) !important;
  line-height: var(--leading-heading) !important;
  letter-spacing: 0 !important;
}

.hero h1,
.catalog-hero h1 {
  font-size: var(--type-display) !important;
  line-height: var(--leading-tight) !important;
  max-width: 12.5ch;
}

/* Category and catalog pages are shopping surfaces, not landing-page heroes. */
body:has(.shop-layout):not(.home-page) .hero h1,
body:has(.catalog-hero) .catalog-hero h1,
body:has(.catalog-hero) .hero.catalog-hero h1,
body:has(.catalog-hero) .catalog-hero .container > h1 {
  font-size: clamp(2.625rem, 1.9rem + 2.45vw, 3.625rem) !important;
  line-height: 1.02 !important;
  max-width: 13ch !important;
}

body:has(.shop-layout):not(.home-page) .hero p,
body:has(.shop-layout):not(.home-page) .hero-text,
body:has(.catalog-hero) .catalog-hero p {
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.125rem) !important;
  line-height: 1.55 !important;
  font-weight: 540 !important;
}

.hero-text,
.catalog-hero p,
.section-lead,
.lead-text,
.text-lead {
  font-size: var(--type-body-large) !important;
  line-height: 1.55 !important;
  font-weight: 560 !important;
}

.eyebrow,
.kicker,
.product-kicker,
.hero-kicker,
.section-kicker,
.catalog-kicker,
.spec-badge,
.package-spec,
.catalog-specs span,
.product-specs span,
.status-pill,
.badge,
.label {
  font-size: var(--type-label) !important;
  line-height: 1.2 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
}

.btn,
.cart-button,
[data-add-cart],
.hero-secondary-link,
.package-action,
.product-actions .btn,
.product-actions button,
.card-actions button,
.cart-checkout,
.cart-continue,
.lead-modal-form button[type="submit"] {
  font-size: var(--type-button) !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.shop-card h3,
.product-card h3,
.catalog-card h3,
.package-card h3,
.solution-card h3 {
  font-size: var(--type-card-title) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  font-weight: 920 !important;
}

body:has(.shop-layout) .shop-card h3,
body:has(.shop-layout) .product-card h3,
.catalog-featured-grid .shop-card h3,
.catalog-card h3 {
  font-size: clamp(1.5rem, 1.22rem + 0.95vw, 1.875rem) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
}

.shop-card p,
.product-card p,
.catalog-card p,
.package-card p,
.solution-card p,
.card-copy,
.product-list,
.product-list li {
  font-size: var(--type-body) !important;
  line-height: 1.5 !important;
}

.item-price,
.package-price,
.catalog-card .item-price,
.shop-card .item-price {
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

body:has(.shop-layout) .item-price,
body:has(.shop-layout) .shop-card .item-price,
.catalog-featured-grid .item-price,
.catalog-card .item-price {
  font-size: clamp(1.5rem, 1.22rem + 0.82vw, 1.875rem) !important;
  line-height: 1.06 !important;
  font-weight: 900 !important;
}

.product-info h1,
.product-title {
  font-size: var(--type-product-title) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  max-width: 14.5ch;
}

.product-info .price,
.product-price,
.price {
  font-size: var(--type-price) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  font-weight: 920 !important;
}

.product-meta,
.product-meta span,
.product-topline,
.product-back-link,
.product-breadcrumbs,
.product-info .stock,
.stock,
.availability {
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
  font-weight: 720 !important;
}

.product-wide-sections .section-tabs,
.section-tabs {
  gap: clamp(1rem, 1.7vw, 2rem) !important;
}

.product-wide-sections .section-tab,
.section-tab {
  font-size: clamp(1.35rem, 1.05rem + 0.9vw, 2rem) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.product-sections,
.section-card,
.tab-panel {
  font-size: var(--type-body-large) !important;
  line-height: var(--leading-body) !important;
}

.product-sections p,
.section-card p,
.tab-panel p,
.product-description-list li,
.product-description-specs li {
  font-size: var(--type-body-large) !important;
  line-height: 1.58 !important;
  font-weight: 560 !important;
}

.product-description-list strong,
.product-description-specs strong,
.section-card strong,
.tab-panel strong {
  font-weight: 760 !important;
}

.spec-panel {
  font-size: var(--type-body) !important;
}

.spec-row {
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr) !important;
  gap: clamp(1.2rem, 3vw, 4rem) !important;
  min-height: auto !important;
  padding: clamp(0.9rem, 1.8vw, 1.35rem) 0 !important;
}

.spec-row strong {
  color: #7e8891 !important;
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
}

.spec-row span {
  color: #12161b !important;
  font-size: var(--type-body) !important;
  line-height: 1.45 !important;
  font-weight: 520 !important;
}

/* Product detail pages: keep the main product content above SEO/FAQ in hierarchy. */
body:has(.product-layout--wide-detail) .product-wide-sections .section-tab {
  font-size: clamp(1.0625rem, 0.96rem + 0.42vw, 1.25rem) !important;
  line-height: 1.12 !important;
  font-weight: 880 !important;
}

body:has(.product-layout--wide-detail) .product-wide-sections #description p,
body:has(.product-layout--wide-detail) .product-wide-sections #description li {
  font-size: clamp(0.96875rem, 0.91rem + 0.24vw, 1.0625rem) !important;
  line-height: 1.62 !important;
  font-weight: 520 !important;
}

body:has(.product-layout--wide-detail) .product-wide-sections #description h3 {
  font-size: clamp(1.125rem, 1.02rem + 0.42vw, 1.25rem) !important;
  line-height: 1.24 !important;
  font-weight: 860 !important;
}

body:has(.product-layout--wide-detail) .product-wide-sections .spec-row {
  font-size: clamp(0.875rem, 0.84rem + 0.14vw, 0.96875rem) !important;
  line-height: 1.44 !important;
}

body:has(.product-layout--wide-detail) .product-faq {
  padding: clamp(3rem, 5.4vw, 4.75rem) 0 !important;
}

body:has(.product-layout--wide-detail) .product-faq .section-head {
  max-width: 760px !important;
  margin-bottom: clamp(1.25rem, 2.2vw, 2rem) !important;
}

body:has(.product-layout--wide-detail) .product-faq .section-head h2 {
  max-width: 14em !important;
  font-size: clamp(1.75rem, 1.42rem + 1.25vw, 2.25rem) !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

body:has(.product-layout--wide-detail) .product-faq .section-head p {
  max-width: 68ch !important;
  font-size: clamp(0.9375rem, 0.9rem + 0.14vw, 1rem) !important;
  line-height: 1.56 !important;
  font-weight: 500 !important;
}

body:has(.product-layout--wide-detail) .product-faq .answer-card {
  padding: clamp(1.125rem, 1.8vw, 1.5rem) clamp(1rem, 1.9vw, 1.375rem) !important;
}

body:has(.product-layout--wide-detail) .product-faq .answer-card h3 {
  font-size: clamp(1rem, 0.94rem + 0.22vw, 1.125rem) !important;
  line-height: 1.22 !important;
  font-weight: 850 !important;
}

body:has(.product-layout--wide-detail) .product-faq .answer-card p {
  font-size: clamp(0.875rem, 0.85rem + 0.08vw, 0.9375rem) !important;
  line-height: 1.58 !important;
  font-weight: 470 !important;
}

.product-accordion,
.product-accordions,
.accordion,
.product-care {
  font-size: var(--type-body) !important;
}

.accordion summary,
.product-accordion summary,
.care-row summary,
.product-care summary {
  font-size: clamp(1rem, 0.94rem + 0.24vw, 1.125rem) !important;
  line-height: 1.25 !important;
  font-weight: 820 !important;
}

.accordion p,
.product-accordion p,
.care-row p,
.product-care p {
  font-size: var(--type-body) !important;
  line-height: 1.55 !important;
  font-weight: 480 !important;
}

.lead-modal-dialog h2,
.product-dialog h2,
.cart-dialog h2 {
  font-size: clamp(2rem, 1.45rem + 2vw, 3.25rem) !important;
  line-height: 1.02 !important;
  font-weight: 920 !important;
}

.lead-modal-dialog > p,
.product-dialog p,
.cart-empty,
.cart-note {
  font-size: var(--type-body-large) !important;
  line-height: 1.55 !important;
}

.cart-line strong {
  font-size: clamp(1.05rem, 0.96rem + 0.35vw, 1.25rem) !important;
  line-height: 1.18 !important;
}

.cart-line-price,
.cart-summary strong,
.cart-summary span {
  font-size: clamp(1.45rem, 1.1rem + 1.35vw, 2.25rem) !important;
  line-height: 1.05 !important;
}

.cart-form label {
  font-size: var(--type-label) !important;
  line-height: 1.2 !important;
}

.cart-form input,
.cart-form select,
.cart-form textarea,
.lead-modal-form input,
.lead-modal-form select,
.lead-modal-form textarea,
.catalog-search input {
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
}

.site-footer,
.site-footer p,
.site-footer a,
.footer-links a,
.footer-meta,
.legal-text {
  font-size: var(--type-small) !important;
  line-height: 1.5 !important;
}

/* FAQ and secondary editorial blocks should never overpower products. */
.seo-faq {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 !important;
}

.seo-faq .section-head {
  max-width: 760px !important;
  margin-bottom: clamp(1.5rem, 2.8vw, 2.375rem) !important;
}

.seo-faq .section-head h2 {
  max-width: 14em !important;
  font-size: clamp(1.875rem, 1.42rem + 1.45vw, 2.625rem) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
}

.seo-faq .section-head p {
  max-width: 68ch !important;
  font-size: clamp(0.9375rem, 0.9rem + 0.16vw, 1.0625rem) !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
}

.seo-faq .answer-card {
  padding: clamp(1.125rem, 2vw, 1.625rem) clamp(1rem, 2vw, 1.5rem) !important;
}

.seo-faq .answer-card h3 {
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.1875rem) !important;
  line-height: 1.22 !important;
  font-weight: 850 !important;
}

.seo-faq .answer-card p {
  font-size: clamp(0.875rem, 0.84rem + 0.12vw, 0.9375rem) !important;
  line-height: 1.58 !important;
  font-weight: 470 !important;
}

.seo-faq .answer-toggle span:first-child {
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem) !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
}

.seo-faq .answer-panel,
.seo-faq .answer-panel p {
  font-size: clamp(0.875rem, 0.84rem + 0.12vw, 0.9375rem) !important;
  line-height: 1.58 !important;
}

/* Service, contacts, warranty, and document-like pages stay quieter than commerce pages. */
.page-head h1,
.legal h1,
.doc h1,
body:has(.page-head) main h1,
body:has(.legal) main h1,
body:has(.doc) main h1 {
  font-size: clamp(2.375rem, 1.75rem + 2vw, 3.25rem) !important;
  line-height: 1.05 !important;
}

.page-head .lead,
.legal .lead,
.doc p,
.doc li,
.document-card p,
.document-card li {
  font-size: clamp(0.95rem, 0.9rem + 0.18vw, 1.0625rem) !important;
  line-height: 1.6 !important;
}

.doc h2,
.legal h2,
.document-card h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important;
  line-height: 1.18 !important;
}

/* Dedicated cart page: operational clarity over oversized display type. */
.cart-hero h1,
body:has(.cart-layout) main h1 {
  font-size: clamp(2rem, 1.45rem + 1.85vw, 2.875rem) !important;
  line-height: 1.06 !important;
}

.cart-empty h2,
body:has(.cart-layout) .cart-empty h2 {
  font-size: clamp(1.75rem, 1.32rem + 1.35vw, 2.375rem) !important;
  line-height: 1.08 !important;
}

.cart-hit-card h3,
.cart-table strong,
.cart-row strong {
  font-size: clamp(1rem, 0.92rem + 0.28vw, 1.1875rem) !important;
  line-height: 1.2 !important;
}

.cart-total,
.cart-summary-total,
.cart-hit-price,
body:has(.cart-layout) .item-price {
  font-size: clamp(1.5rem, 1.16rem + 1vw, 2rem) !important;
  line-height: 1.08 !important;
}

/* Homepage section hierarchy: one calm scale across the page. */
body.home-page main .section-head h2,
body.home-page main .seo-summary h2,
body.home-page main .process-copy h2,
body.home-page main .trust-copy h2,
body.home-page main .lead-copy h2,
body.home-page main .seo-faq .section-head h2,
body.home-page main .manifest .statement,
body.home-page main .reviews-head h3,
body.home-page main #packages .section-head h2,
body.home-page main #benefits .section-head h2,
body.home-page main #process .process-copy h2,
body.home-page main #faq .section-head h2,
body.home-page main #contact .lead-copy h2 {
  max-width: 16em !important;
  font-size: clamp(2rem, 1.55rem + 1.2vw, 2.5rem) !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.home-page main .manifest .statement {
  max-width: 18em !important;
}

.home-page .section-head p,
.home-page .process-copy p,
.home-page .trust-copy p,
.home-page .lead-copy p,
body.home-page main .seo-summary p,
body.home-page main .reviews-head p,
.home-page .seo-faq .section-head p {
  font-size: clamp(0.96875rem, 0.92rem + 0.18vw, 1.0625rem) !important;
  line-height: 1.56 !important;
}

@media (max-width: 760px) {
  :root {
    --type-display: clamp(2.15rem, 9vw, 2.7rem);
    --type-h1: clamp(2rem, 8.2vw, 2.55rem);
    --type-h2: clamp(1.55rem, 6.4vw, 2rem);
    --type-h3: clamp(1.16rem, 4.8vw, 1.45rem);
    --type-card-title: clamp(1.35rem, 6.2vw, 1.85rem);
    --type-product-title: clamp(2rem, 8.2vw, 2.65rem);
    --type-price: clamp(2.15rem, 9vw, 3rem);
    --type-body: clamp(0.94rem, 3.9vw, 1rem);
    --type-body-large: clamp(0.98rem, 4.2vw, 1.0625rem);
    --type-button: clamp(0.94rem, 4vw, 1rem);
  }

  .hero h1,
  .catalog-hero h1,
  .product-info h1,
  .product-title {
    max-width: 100%;
  }

  body:has(.shop-layout):not(.home-page) .hero h1,
  body:has(.catalog-hero) .catalog-hero h1,
  body:has(.catalog-hero) .hero.catalog-hero h1,
  body:has(.catalog-hero) .catalog-hero .container > h1 {
    font-size: clamp(2.125rem, 9vw, 2.625rem) !important;
  }

  body:has(.shop-layout) .shop-card h3,
  body:has(.shop-layout) .product-card h3,
  .catalog-featured-grid .shop-card h3,
  .catalog-card h3 {
    font-size: clamp(1.35rem, 6.4vw, 1.75rem) !important;
  }

  body:has(.shop-layout) .item-price,
  body:has(.shop-layout) .shop-card .item-price,
  .catalog-featured-grid .item-price,
  .catalog-card .item-price {
    font-size: clamp(1.35rem, 6.1vw, 1.75rem) !important;
  }

  .product-wide-sections .section-tab,
  .section-tab {
    font-size: clamp(1.25rem, 6vw, 1.65rem) !important;
  }

  body:has(.product-layout--wide-detail) .product-wide-sections .section-tab {
    font-size: clamp(1rem, 4.8vw, 1.25rem) !important;
  }

  body:has(.product-layout--wide-detail) .product-faq .section-head h2 {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
  }

  .seo-faq .section-head h2 {
    font-size: clamp(1.55rem, 7vw, 2.125rem) !important;
  }

  .seo-faq .answer-card h3,
  .seo-faq .answer-toggle span:first-child {
    font-size: clamp(1rem, 4.7vw, 1.25rem) !important;
  }

  .page-head h1,
  .legal h1,
  .doc h1,
  body:has(.page-head) main h1,
  body:has(.legal) main h1,
  body:has(.doc) main h1 {
    font-size: clamp(2rem, 8.5vw, 2.5rem) !important;
  }

  .cart-hero h1,
  body:has(.cart-layout) main h1 {
    font-size: clamp(1.9rem, 8vw, 2.4rem) !important;
  }

  body.home-page main .section-head h2,
  body.home-page main .seo-summary h2,
  body.home-page main .process-copy h2,
  body.home-page main .trust-copy h2,
  body.home-page main .lead-copy h2,
  body.home-page main .seo-faq .section-head h2,
  body.home-page main .manifest .statement,
  body.home-page main .reviews-head h3,
  body.home-page main #packages .section-head h2,
  body.home-page main #benefits .section-head h2,
  body.home-page main #process .process-copy h2,
  body.home-page main #faq .section-head h2,
  body.home-page main #contact .lead-copy h2 {
    font-size: clamp(1.75rem, 7vw, 2.125rem) !important;
    line-height: 1.1 !important;
  }

  .spec-row {
    grid-template-columns: 1fr !important;
    gap: 0.35rem !important;
    padding: 0.9rem 0 !important;
  }

  .lead-modal-dialog h2,
  .product-dialog h2,
  .cart-dialog h2 {
    font-size: clamp(1.9rem, 8.8vw, 2.55rem) !important;
  }
}

/* Homepage trust rows: keep proof labels secondary to section headings. */
body.home-page main .trust .trust-item strong,
body.home-page main .trust .trust-item .trust-brand {
  color: #8fae35 !important;
  font-size: clamp(1.75rem, 1.35rem + 1.35vw, 2.25rem) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.home-page main .trust .trust-item span {
  max-width: 34rem !important;
  font-size: clamp(0.96875rem, 0.9rem + 0.22vw, 1.0625rem) !important;
  line-height: 1.52 !important;
  font-weight: 700 !important;
}

@media (max-width: 760px) {
  body.home-page main .trust .trust-item strong,
  body.home-page main .trust .trust-item .trust-brand {
    font-size: clamp(1.5rem, 6.2vw, 1.75rem) !important;
    line-height: 1.08 !important;
  }

  body.home-page main .trust .trust-item span {
    font-size: clamp(0.9375rem, 4vw, 1rem) !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
  }
}