.site-header .shell { padding-bottom: 0; }
.site-header { --orange: var(--brand-accent); width: 100%; flex: 0 0 auto; }
.site-header .brand { min-width: 220px; }
.site-header .brand-title,
.site-header .brand-subtitle { letter-spacing: 0; }
html[lang="en"] .site-header.brand-title-wrapped .brand-subtitle { display: none; }
.site-header .nav a,
.site-header .language button { letter-spacing: 0; }
.site-header .brand-mark {
  flex-basis: 84px;
  width: 84px;
  height: 68px;
  flex-shrink: 0;
  padding: 0;
}
.site-header .nav,
html[lang="en"] .site-header .nav {
  gap: clamp(20px, 2.4vw, 34px);
  margin-left: 36px;
}
.site-header .nav a::after { background: var(--orange); }
.site-header .language button.active,
.site-header .language button:hover {
  color: var(--orange);
  background: rgba(247, 180, 39, .15);
}
.site-header .language button { min-width: 42px; }
.site-header { transition: background-color .3s var(--motion-smooth), border-color .3s var(--motion-smooth); }
.site-header .brand-mark { transition: transform .35s var(--motion-smooth); }
.site-header .brand:hover .brand-mark { transform: translateY(-1px) scale(1.025); }
.site-header .nav a::after { transition: transform .28s var(--motion-smooth); }
.site-header .language button { transition: color .24s var(--motion-smooth), background-color .24s var(--motion-smooth); }

@media (min-width: 1024px) {
  .site-header { color: var(--white); background: var(--carbon); border-bottom-color: #FFFFFF24; }
  .site-header .brand-mark { flex-basis: 72px; width: 72px; height: 58px; object-fit: contain; }
  .site-header .brand-subtitle { color: var(--muted-on-dark); font-size: .6875rem; }
  .site-header .nav a,
  html[lang="en"] .site-header .nav a { font-size: .875rem; font-weight: 600; }
  .site-header .nav a { color: var(--text-on-dark); }
  .site-header .nav a:hover,
  .site-header .nav a[aria-current="page"] { color: var(--white); }
  .site-header .language button { color: var(--muted-on-dark); border-radius: 2px; }
}

@media (max-width: 1023px) {
  .site-header { height: auto; background: var(--carbon); }
  .site-header .shell { position: relative; display: block; padding: 12px 0 0; }
  .site-header .brand { gap: 10px; min-width: 0; width: fit-content; }
  .site-header .brand-mark { flex-basis: 64px; width: 64px; height: 54px; }
  .site-header .brand-title { font-size: 1.4375rem; }
  .site-header .brand-subtitle { color: var(--muted-on-dark); font-size: .625rem; }
  .site-header .nav,
  html[lang="en"] .site-header .nav {
    display: flex;
    width: 100%;
    margin: 10px 0 0;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
  }
  .site-header .nav a,
  html[lang="en"] .site-header .nav a {
    padding: 12px 0 14px;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 0;
  }
  .site-header .nav a::after { bottom: 7px; }
  .site-header .nav .language {
    position: absolute;
    top: 18px;
    right: 0;
    margin: 0;
    padding: 0;
    border: 0;
    gap: 4px;
  }
  .site-header .language button { min-height: 34px; padding: 6px 9px; font-size: .75rem; letter-spacing: 0; }
}

@media (max-width: 820px) {
  :root { --site-header-height: 8.875rem; }
}

@media (max-width: 720px) {
  .site-header .brand { max-width: calc(100% - 8.5rem); }
  html[lang="en"] .site-header .brand { width: calc(100% - 8.5rem); }
  .site-header .brand > span { min-width: 0; }
  .site-header .brand-mark { flex-basis: 58px; width: 58px; height: 50px; }
  .site-header .brand-title { overflow: hidden; font-size: 1.375rem; white-space: nowrap; text-overflow: ellipsis; }
  html[lang="en"] .site-header .brand-title {
    overflow: visible;
    font-size: clamp(1rem, 4.2vw, 1.25rem);
    line-height: 1.05;
    overflow-wrap: normal;
    white-space: normal;
    text-overflow: clip;
    word-break: normal;
  }
  .site-header .nav a,
  html[lang="en"] .site-header .nav a { font-size: .8125rem; }
  .site-header .language { top: 12px; }
  .site-header .language button { padding-inline: 7px; }
}

:root {
  --site-header-height: 5.125rem;
  --site-canvas-max: 90rem;
  --site-canvas-gutter: clamp(1.25rem, 3.4vw, 4rem);
  --motion-smooth: cubic-bezier(.22, .61, .36, 1);
  --max: var(--site-canvas-max);
  --page-gutter: var(--site-canvas-gutter);
  --desktop-gutter: var(--site-canvas-gutter);
  --carbon: #1d2427;
  --steel: #4b565a;
  --slate: #687276;
  --paper: #f5f6f6;
  --white: #fff;
  --line: #d9dee0;
  --ink: var(--carbon);
  --ink-soft: var(--steel);
  --muted: var(--slate);
  --green: var(--steel);
  --brand-accent: #f7b427;
  --brand-accent-hover: #e5a215;
  --orange: var(--brand-accent);
  --orange-dark: var(--brand-accent);
  --text-on-dark: #d5dcdf;
  --muted-on-dark: #b4bec3;
  --brand-tint: #fff3e8;
  --desktop-font: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; background: var(--paper); scroll-behavior: smooth; }
body.qihe-page {
  display: flex;
  min-width: 0;
  min-height: 100svh;
  flex-direction: column;
  margin: 0;
  overflow-x: hidden;
  color: var(--carbon);
  background: var(--paper);
  font-family: var(--desktop-font);
  -webkit-font-smoothing: antialiased;
}
body.qihe-page > .site-main { width: 100%; min-width: 0; flex: 1 0 auto; }
body.qihe-page :is(a) { color: inherit; text-decoration: none; }
body.qihe-page :is(button, input, textarea, select) { font-family: inherit; }
body.qihe-page :is(a, button, [role="button"], [role="tab"], [role="menuitem"]) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body.qihe-page img { display: block; max-width: 100%; }
body.qihe-page :is(.shell, .site-header .shell, #products .product-shell, .about-shell, .contact-content) {
  width: min(var(--site-canvas-max), calc(100% - 2 * var(--site-canvas-gutter)));
  margin-inline: auto;
}
body.qihe-page :is(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.generic-page { min-height: calc(100svh - var(--site-header-height)); padding: 4.5rem 0; background: #f5f6f6; }
.generic-page h1 { margin: 0 0 1.5rem; }
body.qihe-page :is(
  .site-main, .shell, .site-header .shell, .nav, .hero, .hero .shell, .hero-actions,
  .about-shell, .about-content, .about-summary, .about-index, .product-layout,
  .product-sidebar, .product-categories, .product-results, .product-result-heading,
  .product-search, .product-search-field, .product-grid, .news-area, .updates-feed,
  .news-entry, .pagination-wrap, .pagination, .contact-content, .contact-copy,
  .direct-contact, .direct-row, .direct-phone-contact
) { min-width: 0; }
body.qihe-page :is(
  h1, h2, h3, p, .brand-title, .brand-subtitle, .product-category span,
  .product-tile-copy, .direct-label, .direct-value, .news-entry-title, .news-entry-summary
) {
  overflow-wrap: anywhere;
}
body.qihe-page :is(.pagination, .product-pagination) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

/* Keep generic content images inside the shared canvas. */
.generic-page .entry-content img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(18rem, 70svh, 48rem);
  margin-inline: auto;
  object-fit: contain;
}