*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  letter-spacing: 0.01em;
  font-family: inherit;
}

/* Shared header (main.js + index): full width, L/R align with product-detail PRODUCTS strip */
.site-header-pad-x {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: calc(5px + 1.35rem);
  padding-right: 1.5rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .site-header-pad-x {
    padding-left: calc(5px + 1.75rem);
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .site-header-pad-x {
    padding-left: calc(5px + 2.25rem);
    padding-right: 2.5rem;
  }
}

.nav-link {
  position: relative;
  transition: color 0.28s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  background: #b89252;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.nav-link:hover::after,
.nav-active::after {
  transform: scaleX(1);
}

.products-menu,
.solutions-menu {
  position: relative;
}

.products-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.products-dropdown,
.solutions-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 360px;
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 3px solid #b89252;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 18px 40px rgba(8, 20, 46, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0;
  visibility: hidden;
  /* Open downward from the trigger: start slightly above final position, drop into place (not “grow” from a vertical midpoint) */
  transform: translateY(-0.4rem);
  transform-origin: top left;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 40;
}

.products-menu:hover .products-dropdown,
.products-menu:focus-within .products-dropdown,
.solutions-menu:hover .solutions-dropdown,
.solutions-menu:focus-within .solutions-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.products-dropdown a,
.solutions-dropdown a {
  display: block;
  padding: 1rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #1f3358;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: background-color 0.2s ease, color 0.2s ease;
  line-height: 1.35;
  text-transform: none;
}

.products-dropdown a:last-child,
.solutions-dropdown a:last-child {
  border-bottom: 0;
}

.products-dropdown a:hover,
.solutions-dropdown a:hover {
  background: rgba(243, 248, 255, 0.82);
  color: #112b57;
}

.products-submenu {
  position: relative;
}

.products-submenu-trigger {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.products-subpanel {
  position: absolute;
  left: 100%;
  top: -1px;
  min-width: 350px;
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 3px solid #b89252;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 18px 40px rgba(8, 20, 46, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 45;
}

.products-submenu:hover .products-subpanel,
.products-submenu:focus-within .products-subpanel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.products-subpanel a {
  display: block;
  padding: 1rem 1.1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #1f3358;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  text-transform: none;
}

.products-subpanel a:last-child {
  border-bottom: 0;
}

.products-subpanel a:hover {
  background: rgba(243, 248, 255, 0.82);
  color: #112b57;
}


.partner-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.partner-card:hover {
  transform: translateY(-5px);
  border-color: rgba(184, 146, 82, 0.8);
}

.why-card:hover {
  border-color: rgba(184, 146, 82, 0.7);
  box-shadow: 0 15px 35px rgba(8, 20, 46, 0.1);
  transform: translateY(-4px);
}

/* Home: Why Choose Us — 三列微错位，中列下沉 */
@media (min-width: 1024px) {
  .home-why-choose__item--center {
    margin-top: 2.75rem;
  }
}

.home-why-choose__item {
  transition: transform 0.25s ease;
}

@media (min-width: 1024px) {
  .home-why-choose__item:hover {
    transform: translateY(-3px);
  }
}

.solution-card,
.news-card {
  border-radius: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-card:hover,
.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(9, 23, 49, 0.2);
}

/* 页脚深色底：Logo 作白色字标；文字整体偏白 */
.footer-logo--on-dark {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.footer-link {
  color: #e2e8f0;
  transition: color 0.24s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: #b89252;
}

.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(6, 16, 35, 0.85), rgba(13, 27, 54, 0.45));
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.content-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(2, 9, 21, 0.06);
}

.fade-in-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.fade-in-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .nav-link::after {
    display: none;
  }

  .products-dropdown {
    display: none;
  }
}

@media (max-width: 767px) {
  body {
    letter-spacing: 0;
  }
}

/* Home: “Welcome + radial” — four value props around a center hub (Touch Think–style) */
.home-welcome-radial {
  position: relative;
  overflow: hidden;
}

.home-welcome-radial__overlay {
  background: linear-gradient(135deg, rgba(2, 8, 20, 0.92) 0%, rgba(6, 18, 45, 0.88) 50%, rgba(3, 12, 30, 0.94) 100%);
}

.home-welcome-radial__hub {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 17rem;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
}

/* Outer ring (lightweight stand-in; for Touch Think–style 4-arc ring use one SVG/PNG) */
.home-welcome-radial__hub::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.home-welcome-radial__hubInner {
  position: relative;
  z-index: 1;
  display: flex;
  width: 58%;
  height: 58%;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.95);
}

/* White “K” on transparent — generated from logo矢量图 (blue on gray can’t use filter: invert without solid white block) */
.home-welcome-radial__logoK-wrap {
  display: flex;
  width: 3.2rem;
  max-width: 88%;
  height: 3.1rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .home-welcome-radial__logoK-wrap {
    width: 3.45rem;
    height: 3.35rem;
  }
}

@media (min-width: 1024px) {
  .home-welcome-radial__logoK-wrap {
    width: 3.75rem;
    height: 3.6rem;
  }
}

.home-welcome-radial__logoK {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 1024px) {
  .home-welcome-radial__hub {
    max-width: 20rem;
  }
}

/* Home hero banner carousel */
.hero-banner-slide {
  opacity: 0;
  transition: opacity 0.65s ease;
  pointer-events: none;
}

.hero-banner-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 10;
}

.hero-banner-slide:not(.is-active) {
  z-index: 0;
}

.catalog-product-card:focus-visible {
  outline: 2px solid #b89252;
  outline-offset: 3px;
}

/*
 * 全站主内容区排版（与 hot products 右栏：主色深蓝标题 + 略小、冷灰蓝副文）
 * 仅针对带 text-slate-900/600/700 等 utility 的元素，不改 hero/深色底白字/已有 text-brandNavy
 */
main h1.text-slate-900,
main h2.text-slate-900,
main h3.text-slate-900,
main h1.text-slate-800,
main h2.text-slate-800,
main h3.text-slate-800 {
  color: #112b57 !important;
}

/* 副文：色与行高；字号 — 与 hot products 描述节奏接近 */
main p.text-slate-600,
main p.text-slate-700 {
  line-height: 1.65 !important;
  color: #5f6f88 !important;
}

main p.text-slate-600:not(.text-xs),
main p.text-slate-700:not(.text-xs) {
  font-size: 0.8125rem !important;
}

main p.text-slate-600.text-xs,
main p.text-slate-700.text-xs {
  font-size: 0.75rem !important;
  line-height: 1.62 !important;
  color: #6b7c95 !important;
}

main li.text-slate-600,
main li.text-slate-700 {
  font-size: 0.8125rem !important;
  line-height: 1.65 !important;
  color: #5f6f88 !important;
}

main ul.text-slate-600,
main ul.text-slate-600 li,
main ul.text-slate-700,
main ul.text-slate-700 li,
main ol.text-slate-600 li {
  font-size: 0.8125rem !important;
  line-height: 1.65 !important;
  color: #5f6f88 !important;
}

@media (max-width: 639px) {
  main p.text-slate-600:not(.text-xs),
  main p.text-slate-700:not(.text-xs) {
    font-size: 0.75rem !important;
    color: #6b7c95 !important;
  }

  main li.text-slate-600,
  main li.text-slate-700,
  main ul.text-slate-600,
  main ul.text-slate-600 li,
  main ul.text-slate-700,
  main ul.text-slate-700 li,
  main ol.text-slate-600 li {
    font-size: 0.75rem !important;
    color: #6b7c95 !important;
  }
}

/* Home: Hot products — 左栏与主图贴齐 | 4:3 主图 | 右侧文案 */
.hot-products-shell {
  align-items: stretch;
  border: none;
  box-shadow: none;
  outline: none;
}

@media (min-width: 1024px) {
  .hot-products-shell {
    display: grid !important;
    /* 中列 auto = 与主图同宽，不额外撑开，文案紧跟图侧 */
    grid-template-columns: 22.5rem auto minmax(0, 1fr);
    grid-template-rows: minmax(min(560px, 62vh), auto);
    align-items: stretch;
    justify-items: stretch;
    gap: 0;
    column-gap: 0;
    min-height: min(560px, 62vh);
  }

  .hot-products-shell > .hot-products-rail {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
  }

  .hot-products-shell > .hot-products-media--strip {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    width: auto;
    max-width: 100%;
    height: 100%;
    /* 同高前提下比正方更宽，占屏更抓眼；可改为 3/2 更扁长 */
    aspect-ratio: 4 / 3;
    /* 与左侧菜单同列相贴，勿居中出缝 */
    justify-self: start;
  }

  .hot-products-shell > .hot-products-panel-wrap {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
  }
}

@media (min-width: 1280px) {
  .hot-products-shell {
    grid-template-columns: 26.5rem auto minmax(0, 1fr);
  }
}

/* 小屏：居中比例块；lg 由 grid 决定 */
.hot-products-media--strip {
  min-height: 0;
}

/* 热区右栏：标题 logo 深蓝；正文略小、冷灰/浅蓝调；版心见 HTML hot-products-panel-body / -main */
.hot-products-panel-title {
  color: #112b57;
}

.hot-products-panel-desc,
.hot-products-panel-desc p {
  font-size: 0.75rem; /* 12px */
  line-height: 1.62;
  color: #6b7c95;
}

@media (min-width: 640px) {
  .hot-products-panel-desc,
  .hot-products-panel-desc p {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.65;
    color: #5f6f88;
  }
}

.hot-products-rail {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: none;
  box-shadow: none;
  outline: none;
  border-radius: 0;
  background-color: #fff;
}

.hot-products-rail > * {
  position: relative;
  z-index: 1;
}

.hot-products-rail-tablist {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.hot-products-rail-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1rem 0.9rem;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 0.875rem; /* one step over .hot-products-rail-item (0.8125rem) */
  font-weight: 800;
  font-family: Montserrat, system-ui, sans-serif;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  color: #112b57;
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.hot-products-rail-title:hover,
.hot-products-rail-title.is-active:hover {
  background: #b89252;
  color: #112b57;
}

.hot-products-rail-title:focus-visible {
  outline: 2px solid #b89252;
  outline-offset: -2px;
  z-index: 1;
}

.hot-products-rail-title.is-active {
  box-shadow: inset 4px 0 0 #b89252;
}

a.hot-products-rail-title {
  text-decoration: none;
  color: inherit;
}

a.hot-products-rail-title:visited {
  color: inherit;
}

.hot-products-rail-nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hot-products-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 主列表：行间浅色分隔线（纯白底） */
.hot-products-rail-list > li {
  box-shadow: none;
  outline: none;
  border-bottom: 1px solid #e2e8f0;
}

.hot-products-rail-list > li:last-child {
  border-bottom: none;
}

.hot-products-rail-sublist > li {
  border: none;
  box-shadow: none;
  outline: none;
}

.hot-products-rail-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.9rem 0.85rem;
  -webkit-appearance: none;
  appearance: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(17, 43, 87, 0.92);
  background: transparent;
  border: none;
  box-shadow: none;
  border-top: none;
  border-bottom: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.hot-products-rail-item--sub {
  padding-left: 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-transform: none;
  color: rgba(30, 58, 95, 0.9);
}

/* Accordion: L1 / L2; no horizontal rules inside dropdown blocks */
.hot-products-rail-group {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: none;
}

.hot-products-rail-item--parent {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
}

.hot-products-rail-chevron {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
  font-size: 0.65rem;
}

.hot-products-rail-group.is-open .hot-products-rail-chevron {
  transform: rotate(0deg);
  opacity: 0.95;
}

.hot-products-rail-group:not(.is-open) .hot-products-rail-chevron {
  transform: rotate(-90deg);
}

.hot-products-rail-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0.96;
  transition: max-height 0.3s ease;
  /* 与父区同色感，不形成横向「分割条」 */
  background: transparent;
  border: none;
  box-shadow: none;
}

.hot-products-rail-group.is-open .hot-products-rail-sublist {
  max-height: 20rem; /* enough for 2+ sub rows */
  opacity: 1;
}

.hot-products-rail-sublist .hot-products-rail-item--sub {
  border: none;
}

/* Desktop: natural row heights; accordion groups must not be forced to equal flex slices */
@media (min-width: 1024px) {
  .hot-products-rail-nav {
    display: flex;
    flex-direction: column;
  }

  /* Let the menu block use only its content height so we can center it in the rail (avoids a huge gap under the list) */
  .hot-products-rail-nav .hot-products-rail-list {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .hot-products-rail-nav .hot-products-rail-list > li {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .hot-products-rail-nav .hot-products-rail-item--parent,
  .hot-products-rail-nav .hot-products-rail-list > li > .hot-products-rail-item {
    min-height: 2.75rem;
  }

  .hot-products-rail-nav .hot-products-rail-item--sub {
    min-height: 2.5rem;
  }

  /* flex-start: accordion opens downward only. With justify-content: center, the whole block
     re-centers when sublist height changes — it looks like the menu “grows” up and down. */
  .hot-products-rail-tablist {
    justify-content: flex-start;
    gap: 0.45rem;
    /* 顶边与右栏 .hot-products-panel-wrap 的 py-6 (1.5rem) 一致，标题首行与右栏 h3 对齐 */
    padding: 1.5rem 0 1.5rem;
  }

  .hot-products-rail-title {
    /* 上内边距由 tablist 顶距统一承担，与右侧标题区同一起点 */
    padding: 0 0.9rem 0.5rem;
  }
}

/* 与 panel xl:py-7 (1.75rem) 一致 */
@media (min-width: 1280px) {
  .hot-products-rail-tablist {
    padding: 1.75rem 0 1.75rem;
  }
}

.hot-products-rail-item:hover,
.hot-products-rail-item.is-active:hover {
  background: #b89252;
  color: #112b57;
}

.hot-products-rail-item:focus-visible {
  outline: 2px solid #b89252;
  outline-offset: -2px;
  z-index: 1;
}

/* Current category: same blue as other rows; left accent only (gold fill = hover only) */
.hot-products-rail-item.is-active {
  box-shadow: inset 4px 0 0 #b89252;
}

/* Product detail template (single SKU pages) */
/* Top product nav block (not sticky — full-width artwork scrolls with page) */
.product-detail-nav-sticky {
  position: relative;
  z-index: 1;
  overflow: visible; /* do not clip — any ancestor overflow:hidden breaks position:sticky below */
  margin-left: -1rem;
  margin-right: -1rem;
  /* No breadcrumb row — no top/side padding here (full-bleed strip sits flush) */
  padding: 0;
  background: rgba(244, 247, 251, 0.98);
  border-bottom: none;
}

@media (min-width: 640px) {
  .product-detail-nav-sticky {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0;
  }
}

@media (min-width: 1024px) {
  .product-detail-nav-sticky {
    margin-left: -2rem;
    margin-right: -2rem;
    padding: 0;
  }
}

.product-detail-page-nav {
  margin-bottom: 0;
  overflow: visible;
}

/* Path / store hierarchy — small, quiet; same horizontal alignment as blue strip + tab row */
.product-detail-breadcrumb {
  text-align: left;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #94a3b8;
}

@media (min-width: 640px) {
  .product-detail-breadcrumb {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
  }
}

.product-detail-breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-detail-breadcrumb a:hover {
  color: #b89252;
}

/* Anchor jump — clear the sticky in-page link row (Overview, Highlights, …) */
#product-overview,
#product-features,
#product-applications,
#product-specs,
#product-mechanical,
#product-downloads {
  scroll-margin-top: 4.5rem;
}

.product-detail-breadcrumb-sep {
  color: #cbd5e1;
  user-select: none;
}

.product-detail-breadcrumb-current {
  font-weight: 600;
  color: #1e3a5f;
  letter-spacing: 0.04em;
}

/* Products blue banner (scrolls) — art: assets/images/shared/industrial-touch-display-blue-studio-hero.jpg; full-bleed */
.product-detail-inpage-wrap {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw) 0;
  position: relative;
  box-shadow: 0 14px 36px rgba(5, 15, 35, 0.12);
}

/* Host: flush under PRODUCTS; keeps height when the inner bar is position:fixed */
.product-detail-inpage-sticky-host {
  position: relative;
  overflow: visible;
  width: 100vw;
  max-width: 100vw;
  margin: 0 calc(50% - 50vw) 0;
}

/* Overview / Highlights … — in flow; .is-pinned = fixed to viewport (see product-detail-nav.js) */
.product-detail-inpage-sticky {
  position: relative;
  z-index: 50;
  width: 100%;
  box-sizing: border-box;
  border-left: 3px solid #b89252;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 2px 12px rgba(5, 15, 35, 0.06);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

body[data-page="product-7in-cdm"] .product-detail-inpage-sticky.is-pinned,
body[data-page="product-156hbm-i01"] .product-detail-inpage-sticky.is-pinned,
body[data-page="product-101hbm-i01"] .product-detail-inpage-sticky.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.99);
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  border-left: 3px solid #b89252;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.08),
    0 2px 0 rgba(184, 146, 82, 0.35) inset,
    0 10px 28px rgba(5, 15, 35, 0.12);
}

/* About: 962 at natural aspect + cert row — same content width, edges aligned */
body[data-page="about"] .about-quality-visuals {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
}

body[data-page="about"] .about-quality-hero-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  vertical-align: top;
}

/* About: six certs — one row, same width as 962; equal column-gap */
body[data-page="about"] .about-cert-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 0.5rem;
  row-gap: 0;
  align-items: end;
  justify-items: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}

@media (min-width: 640px) {
  body[data-page="about"] .about-cert-row {
    column-gap: 0.75rem;
  }
}

@media (min-width: 1024px) {
  body[data-page="about"] .about-cert-row {
    column-gap: 1rem;
  }
}

body[data-page="about"] .about-cert-item {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  box-shadow: none;
  outline: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

body[data-page="about"] .about-cert-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(28vh, 12rem);
  object-fit: contain;
  object-position: bottom center;
  vertical-align: top;
  border: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

@media (min-width: 640px) {
  body[data-page="about"] .about-cert-item img {
    max-height: min(32vh, 15rem);
  }
}

@media (min-width: 1024px) {
  body[data-page="about"] .about-cert-item img {
    max-height: min(40vh, 20rem);
  }
}

/* About: factory image + caption (aligned with content-card / brand gold) */
.about-factory-cap {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}

/* About page — timeline (reference layout) */
.about-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.5rem;
  list-style: none;
  border-left: 2px solid rgba(184, 146, 82, 0.45);
}

.about-timeline li {
  position: relative;
  padding-bottom: 1.75rem;
  margin: 0;
}

.about-timeline li:last-child {
  padding-bottom: 0;
}

.about-timeline li::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: 0.35rem;
  width: 0.65rem;
  height: 0.65rem;
  margin-left: -0.36rem;
  border-radius: 50%;
  background: #b89252;
  box-shadow: 0 0 0 3px #f8fbff;
}

.product-detail-inpage-sticky .product-detail-inpage-index {
  background: transparent;
  border-top: none;
}

/* Taller strip when breadcrumb is omitted (e.g. product-7in page) */
.product-detail-products-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  min-height: max(12.5rem, 22vh);
  /* Bottom flush: title nudges down and clips — see .product-detail-products-title */
  padding: 2.1rem 1.5rem 0 1.35rem;
  overflow: hidden;
  border: none;
  border-left: 5px solid #b89252;
  background-color: #102a4d;
  /* Photo + soft “mist” layer + top tint — 朦胧, less literal photo read */
  background-image:
    linear-gradient(
      98deg,
      rgba(4, 18, 42, 0.68) 0%,
      rgba(8, 30, 62, 0.52) 40%,
      rgba(20, 55, 98, 0.38) 100%
    ),
    linear-gradient(
      185deg,
      rgba(230, 236, 245, 0.22) 0%,
      rgba(10, 28, 52, 0.5) 55%,
      rgba(8, 22, 48, 0.58) 100%
    ),
    url("images/shared/industrial-touch-display-blue-studio-hero.jpg");
  background-size: cover, cover, 128% auto;
  background-position: left center, center, center 40%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  box-sizing: border-box;
}

a.product-detail-products-banner {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: filter 0.2s ease;
}

a.product-detail-products-banner:hover {
  filter: brightness(1.06);
}

a.product-detail-products-banner:focus-visible {
  outline: 2px solid rgba(232, 213, 178, 0.95);
  outline-offset: 3px;
}

/* Inner pages: same title treatment as product strip; image URL per page. Shorter band than .product-detail-products-banner. */
.inner-page-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  min-height: max(10rem, 17vh);
  padding: 1.6rem 1.5rem 0 1.35rem;
  overflow: hidden;
  border: none;
  border-left: 5px solid #b89252;
  background-color: #102a4d;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.inner-page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    98deg,
    rgba(4, 18, 42, 0.58) 0%,
    rgba(8, 30, 62, 0.42) 50%,
    rgba(20, 55, 98, 0.32) 100%
  );
}

@media (min-width: 640px) {
  .product-detail-products-banner {
    min-height: max(14.5rem, 25vh);
    padding: 2.35rem 2rem 0 1.75rem;
  }
  .inner-page-banner {
    min-height: max(11.25rem, 20vh);
    padding: 1.75rem 1.85rem 0 1.6rem;
  }
}

@media (min-width: 1024px) {
  .product-detail-products-banner {
    min-height: max(19rem, 30vh);
    max-height: 34rem;
    padding: 2.6rem 2.5rem 0 2.25rem;
  }
  .inner-page-banner {
    min-height: max(14rem, 24vh);
    max-height: 24rem;
    padding: 2rem 2.2rem 0 2.05rem;
  }
}

/* Knowledge articles: same horizontal padding as .site-header-pad-x so the sidebar aligns with main nav (e.g. Contact Us). */
.knowledge-main {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: calc(5px + 1.35rem);
  padding-right: 1.5rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .knowledge-main {
    padding-left: calc(5px + 1.75rem);
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .knowledge-main {
    padding-left: calc(5px + 2.25rem);
    padding-right: 2.5rem;
  }
}

.product-detail-products-title,
.inner-page-banner__title {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.05rem, 5.6vw, 3.5rem);
  font-weight: 800;
  font-style: italic;
  /* Tight tracking, flush bottom with a sliver of overshoot (clipped by banner) */
  letter-spacing: -0.02em;
  line-height: 1;
  transform-origin: left bottom;
  /* Taller only (scaleY); nudge down for bottom clip */
  transform: scaleY(1.22) translate3d(0, 0.16em, 0);
  text-transform: uppercase;
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 18px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1024px) {
  .product-detail-products-title,
  .inner-page-banner__title {
    transform: scaleY(1.24) translate3d(0, 0.18em, 0);
  }
}

/* Contact hero: same typographic voice as inner-page banners (Montserrat extrabold italic), centered */
.contact-form-hero__title {
  display: block;
  margin: 0;
  padding: 0;
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.05rem, 5.6vw, 3.5rem);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: #f8fafc;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 2px 18px rgba(0, 0, 0, 0.2);
  transform: scaleY(1.22) translate3d(0, 0.16em, 0);
  transform-origin: center bottom;
}

@media (min-width: 1024px) {
  .contact-form-hero__title {
    transform: scaleY(1.24) translate3d(0, 0.18em, 0);
  }
}

/* Slightly smaller when the form sits inside another page */
.contact-form-hero__title--in-page {
  font-size: clamp(1.85rem, 4.5vw, 2.85rem);
}

.product-detail-inpage-index {
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  padding: 0.55rem 1.5rem 0.6rem 1.35rem;
}

@media (min-width: 640px) {
  .product-detail-inpage-index {
    padding: 0.6rem 2rem 0.65rem 1.75rem;
  }
}

@media (min-width: 1024px) {
  .product-detail-inpage-index {
    padding: 0.65rem 2.5rem 0.7rem 2.25rem;
  }
}

.product-detail-sticky {
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  padding: 0;
  overflow-x: auto;
}

.product-detail-sticky::-webkit-scrollbar {
  display: none;
}

.product-detail-sticky-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin: 0;
  /* first link tucks to strip edge; gap handles spacing between links */
  padding: 0.35rem 0.65rem 0.35rem 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #475569;
  border: none;
  border-radius: 4px;
  background: transparent;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

@media (min-width: 640px) {
  .product-detail-sticky-link {
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem 0.4rem 0;
  }
}

@media (min-width: 1024px) {
  .product-detail-sticky {
    gap: 0.25rem 0.4rem;
  }

  .product-detail-sticky-link {
    font-size: 0.8rem;
  }
}

.product-detail-sticky-link:hover {
  color: #0c1e3c;
  background-color: rgba(255, 255, 255, 0.45);
}

.product-detail-sticky-link.is-active {
  font-weight: 800;
  color: #0c1e3c;
  background-color: rgba(255, 255, 255, 0.75);
}

.product-detail-sticky-link:focus-visible {
  outline: 2px solid #112b57;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Product detail pages (KT-07, KT-156, KT-101): no rounded corners on framed panels and boxes */
body[data-page="product-7in-cdm"] .content-card,
body[data-page="product-156hbm-i01"] .content-card,
body[data-page="product-101hbm-i01"] .content-card {
  border-radius: 0;
}

body[data-page="product-7in-cdm"] .product-gallery-thumb,
body[data-page="product-156hbm-i01"] .product-gallery-thumb,
body[data-page="product-101hbm-i01"] .product-gallery-thumb {
  margin: 0;
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

body[data-page="product-7in-cdm"] .product-gallery-thumb:focus-visible,
body[data-page="product-156hbm-i01"] .product-gallery-thumb:focus-visible,
body[data-page="product-101hbm-i01"] .product-gallery-thumb:focus-visible {
  outline: 2px solid #b89252;
  outline-offset: 2px;
}

body[data-page="product-7in-cdm"] .product-gallery-thumb:hover[aria-selected="false"],
body[data-page="product-156hbm-i01"] .product-gallery-thumb:hover[aria-selected="false"],
body[data-page="product-101hbm-i01"] .product-gallery-thumb:hover[aria-selected="false"] {
  border-color: rgba(17, 43, 87, 0.35);
}

/* Any non-visible overflow on ancestors breaks position: sticky (Overview row). */
body[data-page="product-7in-cdm"],
body[data-page="product-156hbm-i01"],
body[data-page="product-101hbm-i01"] {
  overflow-x: visible;
}

/* Shared header (main.js) uses border-b on the logo/nav row; remove for seamless handoff to PRODUCTS */
body[data-page="product-7in-cdm"] #site-header > div:nth-child(2),
body[data-page="product-156hbm-i01"] #site-header > div:nth-child(2),
body[data-page="product-101hbm-i01"] #site-header > div:nth-child(2) {
  border-bottom: 0;
}

body[data-page="product-7in-cdm"] main,
body[data-page="product-156hbm-i01"] main,
body[data-page="product-101hbm-i01"] main,
body[data-page="product-7in-cdm"] main > div:first-child,
body[data-page="product-156hbm-i01"] main > div:first-child,
body[data-page="product-101hbm-i01"] main > div:first-child {
  overflow: visible;
}

body[data-page="product-7in-cdm"] .product-detail-inpage-wrap,
body[data-page="product-156hbm-i01"] .product-detail-inpage-wrap,
body[data-page="product-101hbm-i01"] .product-detail-inpage-wrap,
body[data-page="product-7in-cdm"] .product-detail-products-banner,
body[data-page="product-156hbm-i01"] .product-detail-products-banner,
body[data-page="product-101hbm-i01"] .product-detail-products-banner,
body[data-page="product-7in-cdm"] .product-detail-inpage-sticky-host,
body[data-page="product-156hbm-i01"] .product-detail-inpage-sticky-host,
body[data-page="product-101hbm-i01"] .product-detail-inpage-sticky-host,
body[data-page="product-7in-cdm"] .product-detail-inpage-sticky,
body[data-page="product-156hbm-i01"] .product-detail-inpage-sticky,
body[data-page="product-101hbm-i01"] .product-detail-inpage-sticky,
body[data-page="product-7in-cdm"] .product-detail-inpage-index,
body[data-page="product-156hbm-i01"] .product-detail-inpage-index,
body[data-page="product-101hbm-i01"] .product-detail-inpage-index {
  border-radius: 0;
}

body[data-page="product-7in-cdm"] .product-detail-spec-section-title,
body[data-page="product-156hbm-i01"] .product-detail-spec-section-title,
body[data-page="product-101hbm-i01"] .product-detail-spec-section-title {
  border-radius: 0;
}

body[data-page="product-7in-cdm"] .product-detail-sticky-link,
body[data-page="product-156hbm-i01"] .product-detail-sticky-link,
body[data-page="product-101hbm-i01"] .product-detail-sticky-link {
  border-radius: 0;
}

/* Block titles above spec tables (LCD PANEL, etc.) — distinct from row labels */
.product-detail-spec-section-title {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.85rem 0.6rem 0.9rem;
  border-left: 4px solid #b89252;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, rgba(17, 43, 87, 0.07) 0%, rgba(17, 43, 87, 0.02) 50%, transparent 100%);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #0c1e3c;
}

#product-specs h3.product-detail-spec-section-title {
  margin-top: 2.25rem;
}

#product-specs h3.product-detail-spec-section-title:first-of-type {
  margin-top: 1.5rem;
}

.product-detail-spec th,
.product-detail-spec td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.product-detail-spec th {
  width: 34%;
  min-width: 10rem;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #334e7a;
  background: rgba(248, 251, 255, 0.9);
}

.product-detail-spec tr:last-child th,
.product-detail-spec tr:last-child td {
  border-bottom: 0;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* All products catalog (products.html) */
.products-catalog-layout {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .products-catalog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14.5rem;
    align-items: start;
    gap: 3rem;
  }
}

.products-catalog-sidebar__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #112b57;
}

.products-catalog-category-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.products-catalog-category {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  padding: 0.45rem 0;
  text-align: left;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #64748b;
  cursor: pointer;
  transition: color 0.2s ease;
}

.products-catalog-category:hover,
.products-catalog-category:focus-visible {
  color: #112b57;
  outline: none;
}

.products-catalog-category.is-active {
  font-weight: 700;
  color: #112b57;
}

.products-catalog-category__icon {
  margin-top: 0.2rem;
  flex-shrink: 0;
  font-size: 0.55rem;
  opacity: 0.55;
}

.products-catalog-category.is-active .products-catalog-category__icon {
  opacity: 1;
}

.products-catalog-category__label {
  flex: 1;
  min-width: 0;
}

.products-catalog-category__count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
}

.products-catalog-category.is-active .products-catalog-category__count {
  color: #112b57;
}

.products-catalog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
}

.products-catalog-page-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.products-catalog-page,
.products-catalog-page-nav {
  min-height: 2.25rem;
  min-width: 2.25rem;
  border: 1px solid rgba(17, 43, 87, 0.18);
  background: #fff;
  padding: 0.35rem 0.65rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #112b57;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.products-catalog-page-nav {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.products-catalog-page:hover:not(.is-active),
.products-catalog-page-nav:hover:not(:disabled) {
  border-color: #112b57;
  background: #f8fbff;
}

.products-catalog-page.is-active {
  border-color: #112b57;
  background: #112b57;
  color: #fff;
}

.products-catalog-page-nav:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* Mobile touch and iOS polish (no layout change) */
html {
  -webkit-tap-highlight-color: transparent;
}

body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@supports (-webkit-overflow-scrolling: touch) {
  .products-dropdown,
  .solutions-dropdown,
  .products-subpanel,
  #mobile-menu,
  .no-scrollbar {
    -webkit-overflow-scrolling: touch;
  }
}

a,
button,
[role="button"],
.catalog-product-card,
.products-catalog-category,
.hero-banner-dot,
input[type="submit"],
input[type="button"] {
  touch-action: manipulation;
}