/* Hallmark · genre: modern-minimal · macrostructure: multi-page compact system · design-system: design.md · designed-as-app */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · contrast: pass (40–41) · slop: pass (42–49) · mobile: pass (34, 49, 50–57) */
@import url("/tokens.css?v=20260723-hierarchy");

html,
body {
  overflow-x: clip;
}

body {
  font-size: var(--text-body);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

main :is(p, li, dd, dt) {
  font-size: var(--text-body) !important;
  line-height: 1.62;
}

.home-page > section :is(p, li, dd, dt) {
  font-size: var(--text-body) !important;
  line-height: 1.62;
}

body > section:not(.banner):not(.hero) :is(p, li, dd, dt) {
  font-size: var(--text-body) !important;
  line-height: 1.62;
}

main :is(td, th) {
  font-size: var(--text-sm) !important;
  line-height: 1.5;
}

main :is(
  small,
  .eyebrow,
  .breadcrumb,
  .meta,
  .tag,
  .badge,
  .news-date,
  .product-code,
  .hero-inci,
  .section-kicker,
  .category-en,
  .feature-en,
  .hero__feature-sub,
  .advantage-item__subtitle,
  .info-sub,
  .form-hint,
  .pdf-badge
) {
  font-size: var(--text-xs) !important;
  line-height: 1.45;
}

main :is(
  .hero-desc,
  .hero-copy,
  .hero-text,
  .hero-lede,
  .section-sub,
  .section-subtitle,
  .section-desc,
  .banner-desc,
  .banner-subtitle
) {
  font-size: var(--text-md) !important;
  line-height: 1.6;
}

body > .hero :is(
  .hero-desc,
  .hero-sub,
  .hero-copy,
  .hero-text,
  .hero-lede
) {
  font-size: var(--text-md) !important;
  line-height: 1.6;
}

main :is(h1, h2, h3, h4, h5, h6) {
  min-width: 0;
  overflow-wrap: anywhere;
  font-style: normal;
}

body > section :is(h1, h2, h3, h4, h5, h6) {
  min-width: 0;
  overflow-wrap: anywhere;
  font-style: normal;
}

/* Clear five-step heading hierarchy shared by every page family. */
:is(main, body > section) h1 {
  font-size: var(--text-page-title) !important;
  font-weight: 600 !important;
  line-height: 1.06 !important;
}

:is(main, body > section) h2 {
  font-size: var(--text-section-title) !important;
  font-weight: 600 !important;
  line-height: 1.14 !important;
}

:is(main, body > section) h3 {
  font-size: var(--text-subsection-title) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
}

:is(main, body > section) h4,
:is(main, body > section) h5 {
  font-size: var(--text-card-title) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.home-page > .hero .hero-title {
  font-size: var(--text-display) !important;
  font-weight: 600 !important;
  line-height: 1.04 !important;
}

/* Home hero: a deliberate text measure and language-aware wrapping. */
body.home-page > .hero .hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 44rem;
  min-width: 0;
}

body.home-page > .hero .hero-content .hero-sub {
  max-width: 100%;
  margin-block: 0 var(--space-xs);
  line-height: 1.45 !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body.home-page > .hero .hero-content .hero-title {
  width: 100%;
  max-width: 18ch;
  margin-block: 0 var(--space-sm);
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none;
  text-wrap: balance;
}

html[lang="ru"] body.home-page > .hero .hero-content .hero-title {
  max-width: 22ch;
}

html[lang="zh-CN"] body.home-page > .hero .hero-content .hero-title,
html[lang="zh"] body.home-page > .hero .hero-content .hero-title {
  max-width: 14em;
}

body.home-page > .hero .hero-content .hero-desc {
  max-width: 58ch;
  margin-block: 0 var(--space-md);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}

body.home-page > .hero .hero-content .hero-features {
  width: 100%;
}

body > .banner .banner-content h1 {
  font-size: var(--text-page-title) !important;
  font-weight: 600 !important;
  line-height: 1.06 !important;
}

html[lang="en"] :is(main, body > section) :is(h1, h2, h3, h4, h5) {
  letter-spacing: -0.018em;
}

html[lang="zh-CN"] :is(main, body > section) :is(h1, h2, h3, h4, h5),
html[lang="zh"] :is(main, body > section) :is(h1, h2, h3, h4, h5) {
  letter-spacing: -0.01em;
}

html[lang="ru"] :is(main, body > section) :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

html[lang="ru"] .home-page > .hero .hero-title,
html[lang="ru"] body > .banner .banner-content h1 {
  font-weight: 400 !important;
}

main :is(
  .section-title,
  .section-heading,
  .section-head h3,
  .section-head-center h3,
  .section-header h2,
  .section-header h3
) {
  font-size: var(--text-section-title) !important;
  line-height: 1.14;
}

.home-page > section :is(
  .section-title,
  .section-heading,
  .section-head h3,
  .section-head-center h3,
  .section-header h2,
  .section-header h3
) {
  font-size: var(--text-section-title) !important;
  line-height: 1.14;
}

body > section:not(.banner):not(.hero) :is(
  .section-title,
  .section-heading,
  .section-head h3,
  .section-head-center h3,
  .section-header h2,
  .section-header h3
) {
  font-size: var(--text-section-title) !important;
  line-height: 1.14;
}

main :is(
  .card-title,
  .product-title,
  .product-card h3,
  .application-card h3,
  .formula-card h3,
  .solution-card h3,
  .sol-card h3,
  .news-card h3,
  .info-card h3,
  .sidebar-section h3
) {
  font-size: var(--text-card-title) !important;
  line-height: 1.3;
}

.home-page > section :is(
  .card-title,
  .product-title,
  .product-card h3,
  .application-card h3,
  .formula-card h3,
  .solution-card h3,
  .sol-card h3,
  .news-card h3,
  .info-card h3
) {
  font-size: var(--text-card-title) !important;
  line-height: 1.3;
}

body > section:not(.banner):not(.hero) :is(
  .card-title,
  .product-title,
  .product-card h3,
  .application-card h3,
  .formula-card h3,
  .solution-card h3,
  .sol-card h3,
  .news-card h3,
  .info-card h3
) {
  font-size: var(--text-card-title) !important;
  line-height: 1.3;
}

html[lang="ru"] :is(
  main,
  body > section
) :is(
  .section-title,
  .section-heading,
  .section-head h3,
  .section-head-center h3,
  .section-header h2,
  .section-header h3,
  .card-title,
  .product-title,
  .product-card h3,
  .application-card h3,
  .formula-card h3,
  .solution-card h3,
  .sol-card h3,
  .news-card h3,
  .info-card h3
) {
  font-weight: 400 !important;
}

html[lang="ru"] main :is(h1, h2, h3, h4, h5, h6),
html[lang="ru"] body > section :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

:is(main, body > section) :is(.sidebar-title, .sidebar-section h3) {
  font-size: var(--text-lg) !important;
  line-height: 1.25;
}

:is(main, body > section) .cta-title {
  font-size: var(--text-subsection-title) !important;
  line-height: 1.2;
}

button,
.btn,
input,
textarea,
select {
  font-size: var(--text-button);
}

button,
.btn {
  white-space: nowrap;
}

.home-page > section :is(
  a,
  button,
  .btn,
  .hero-cta,
  .section-link
) {
  font-size: var(--text-button);
}

input,
textarea,
select {
  min-height: var(--control-height);
  line-height: 1.4;
}

:is(a, button, input, textarea, select):focus-visible {
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}

:is(
  .section-header,
  .section-head,
  .section-head-center,
  .section-heading
) {
  margin-bottom: var(--space-lg) !important;
}

:is(
  .product-grid,
  .product-grid-row2,
  .solutions-grid,
  .solutions__grid,
  .app-grid,
  .application-grid,
  .formula-grid,
  .ingredient-grid,
  .spec-grid,
  .advantage-grid,
  .advantages__grid,
  .showcase-grid,
  .cert-grid,
  .news-grid,
  .cards-grid,
  .related-products-grid,
  .solution-problem-grid
) {
  gap: var(--content-gap) !important;
}

:is(
  .content-layout,
  .contact-grid,
  .hero-inner,
  .footer-inner,
  .footer__inner,
  .value__inner
) {
  gap: var(--content-gap) !important;
}

:is(.section-btn-wrap, .formula-more-wrap) {
  margin-top: var(--space-md) !important;
}

.contact-section,
.contact-ways-wrap {
  padding-block: var(--section-space-compact) !important;
}

.form-section,
.contact-ways-inner,
.mission-panel,
.sustain-copy,
.why-content,
.value__content {
  padding: var(--card-padding) !important;
}

.footer-inner,
.footer__inner {
  padding-top: var(--space-2xl) !important;
  padding-bottom: var(--space-xl) !important;
}

.footer :is(p, li, a, small) {
  font-size: var(--text-sm) !important;
  line-height: 1.55;
}

.footer h4 {
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  line-height: 1.3;
}

html[lang="ru"] .footer h4 {
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

/* Page-family rhythm: preserve every module while removing excess vertical air. */
.home-page .section,
body:has(.factory-env) .section,
body:has(.concept-section) .section,
body:has(.formula-center) .section {
  padding-block: var(--section-space) !important;
}

.home-page .hero-content {
  position: relative;
  z-index: 2;
}

body:has(.intro-section) .section,
body:has(.section-narrow) .section,
.applications-section,
.solution-band,
.solutions,
.custom-banner,
.cta-section {
  padding-block: var(--section-space-compact) !important;
}

body:has(.solutions__grid) .hero__content,
body:has(.formula-center) .hero__content {
  padding-block: var(--section-space-compact) !important;
}

.hero__features,
.hero-categories,
.content-layout,
.main-wrap,
.product-row,
.news-item {
  gap: var(--content-gap) !important;
}

.main-wrap,
body:has(.product-list-section) .main-content,
body:has(.tab-nav) .main-content,
body:has(.news-list) .main {
  padding-top: var(--section-space-compact) !important;
  padding-bottom: var(--section-space) !important;
}

.filter-tabs {
  gap: var(--space-xs) !important;
  margin-bottom: var(--space-xl) !important;
}

.product-row,
.news-item {
  padding-block: var(--space-md) !important;
}

.side-column {
  gap: var(--content-gap) !important;
}

.side-card,
.sidebar-section,
.tab-content {
  padding: var(--card-padding) !important;
}

.tab-content .section-title {
  margin-bottom: var(--space-md) !important;
}

main :is(
  .menu-item a,
  .sidebar-menu a,
  .contact-main,
  .contact-sub,
  .help-desc,
  .filter-btn,
  .tab-btn,
  .custom-select-trigger,
  .custom-select-option,
  .tag-item,
  .path-label,
  .download-item,
  .product-meta,
  .product-spec,
  .news-meta,
  .formula-card__meta,
  .sol-card__btn
) {
  font-size: var(--text-sm) !important;
  line-height: 1.5;
}

/* Russian navigation: readable on desktop without crowding long labels. */
@media (min-width: 56.3125rem) {
  html[lang="ru"] .nav-list {
    gap: var(--space-3xs) !important;
  }

  html[lang="ru"] .nav-item > a {
    max-width: none;
    overflow: visible;
    font-size: var(--text-sm) !important;
    line-height: 1.2;
    letter-spacing: normal;
    text-overflow: clip;
  }

  html[lang="ru"] .dropdown li a,
  html[lang="ru"] .language-current {
    font-size: var(--text-sm) !important;
  }
}

@media (min-width: 67.5625rem) {
  html[lang="ru"] .nav-list {
    gap: var(--space-2xs) !important;
  }

  html[lang="ru"] .nav-item > a {
    font-size: var(--text-nav-compact) !important;
  }
}

@media (min-width: 73.8125rem) {
  html[lang="ru"] .nav-item > a {
    font-size: var(--text-nav) !important;
  }
}

body > section:not(.banner):not(.hero) :is(
  small,
  .eyebrow,
  .meta,
  .tag,
  .badge,
  .news-date,
  .product-code,
  .section-kicker,
  .category-en,
  .feature-en,
  .hero__feature-sub,
  .advantage-item__subtitle,
  .info-sub,
  .form-hint,
  .form-privacy,
  .pdf-badge
) {
  font-size: var(--text-xs) !important;
  line-height: 1.45;
}

.home-page :is(.product-info, .formula-card-body) p,
.home-page .feature-en {
  color: var(--color-neutral) !important;
}

/* Product catalogue cards: title → description → action hierarchy. */
body.home-page > section.products .product-card .product-info h3 {
  margin: 0 0 var(--space-2xs) !important;
  color: var(--color-ink) !important;
  font-size: var(--text-product-card-title) !important;
  line-height: 1.2 !important;
}

body.home-page > section.products .product-card .product-info p {
  margin: 0 0 var(--space-xs) !important;
  color: var(--color-neutral) !important;
  font-size: var(--text-base-mobile) !important;
  line-height: 1.55 !important;
}

body.home-page > section.products .product-card .product-info .link-more {
  color: var(--color-accent) !important;
  font-size: var(--text-button) !important;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

html[lang="ru"] body.home-page > section.products .product-card .product-info h3 {
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

/* Linked product images retain the existing card geometry. */
body.home-page > section.products .product-img {
  display: block;
}

/* EN/RU category sidebar: restore compact title / description hierarchy. */
:is(html[lang="en"], html[lang="ru"]) main .right-card.solution-card .right-card-title {
  margin: 0 0 var(--space-sm) !important;
  padding-bottom: var(--space-xs);
  font-size: var(--text-lg) !important;
  line-height: 1.25 !important;
}

:is(html[lang="en"], html[lang="ru"]) main .right-card.solution-card .solution-list {
  gap: var(--space-sm);
}

:is(html[lang="en"], html[lang="ru"]) main .right-card.solution-card .solution-item {
  align-items: flex-start;
  gap: var(--space-xs);
  min-width: 0;
}

:is(html[lang="en"], html[lang="ru"]) main .right-card.solution-card .solution-info {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}

:is(html[lang="en"], html[lang="ru"]) main .right-card.solution-card .solution-name {
  margin: 0 !important;
  color: var(--color-ink) !important;
  font-size: var(--text-button) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

:is(html[lang="en"], html[lang="ru"]) main .right-card.solution-card .solution-desc {
  margin: 0 !important;
  color: var(--color-neutral) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.45 !important;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

html[lang="ru"] main .right-card.solution-card .right-card-title {
  font-weight: 400 !important;
  letter-spacing: normal !important;
}

@media (max-width: 520px) {
  html[lang="ru"] body.home-page > section.products .product-card .product-info h3 {
    font-size: var(--text-card-title) !important;
    line-height: 1.22 !important;
  }
}

.home-page .hero .feature-en {
  font-size: var(--text-xs) !important;
  line-height: 1.45;
}

@media (max-width: 768px) {
  body {
    font-size: var(--text-base-mobile);
  }

  :is(
    main h1,
    .home-page > section h1,
    body > .hero h1,
    body > .banner h1
  ) {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--text-page-title) !important;
    line-height: 1.06 !important;
  }

  .home-page > .hero .hero-title {
    font-size: var(--text-display) !important;
    line-height: 1.04 !important;
  }

  main :is(p, li, dd, dt) {
    font-size: var(--text-base-mobile) !important;
    line-height: 1.58;
  }

  .home-page > section :is(p, li, dd, dt) {
    font-size: var(--text-base-mobile) !important;
    line-height: 1.58;
  }

  body > section:not(.banner):not(.hero) :is(p, li, dd, dt) {
    font-size: var(--text-base-mobile) !important;
    line-height: 1.58;
  }

  main :is(
    .section-title,
    .section-heading,
    .section-head h3,
    .section-head-center h3,
    .section-header h2,
    .section-header h3
  ) {
    font-size: var(--text-section-title) !important;
  }

  .home-page > section :is(
    .section-title,
    .section-heading,
    .section-head h3,
    .section-head-center h3,
    .section-header h2,
    .section-header h3
  ) {
    font-size: var(--text-section-title) !important;
  }

  body > section:not(.banner):not(.hero) :is(
    .section-title,
    .section-heading,
    .section-head h3,
    .section-head-center h3,
    .section-header h2,
    .section-header h3
  ) {
    font-size: var(--text-section-title) !important;
  }

  :is(
    .section-header,
    .section-head,
    .section-head-center,
    .section-heading
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-bottom: var(--space-md) !important;
  }

  :is(
    .product-grid,
    .product-grid-row2,
    .solutions-grid,
    .solutions__grid,
    .app-grid,
    .application-grid,
    .formula-grid,
    .ingredient-grid,
    .spec-grid,
    .advantage-grid,
    .advantages__grid,
    .showcase-grid,
    .cert-grid,
    .news-grid,
    .cards-grid,
    .related-products-grid,
    .solution-problem-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-sm) !important;
  }

  .contact-section,
  .contact-ways-wrap,
  .home-page .section,
  body:has(.factory-env) .section,
  body:has(.concept-section) .section,
  body:has(.formula-center) .section,
  body:has(.intro-section) .section,
  body:has(.section-narrow) .section,
  .applications-section,
  .solution-band,
  .solutions,
  .custom-banner,
  .cta-section {
    padding-block: var(--space-lg) !important;
  }

  .main-wrap,
  body:has(.product-list-section) .main-content,
  body:has(.tab-nav) .main-content,
  body:has(.news-list) .main {
    padding-top: var(--space-lg) !important;
    padding-bottom: var(--space-xl) !important;
  }

  .side-card,
  .sidebar-section,
  .tab-content {
    padding: var(--space-md) !important;
  }

  .footer-inner,
  .footer__inner {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-lg) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: var(--dur-micro) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-micro) !important;
  }
}