/* KJX customer-facing brand layer. Transaction/status colors stay semantic. */
img[data-media-original][hidden] { display: none !important; }
.media-load-note { display: block; padding: 12px; color: #52627b; background: #f4f7fb; font-size: 12px; line-height: 1.65; text-align: center; }
.solution-preview-media > .media-load-note { padding: 8px; font-size: 11px; }
.media-load-failed .solution-preview-proof { display: none; }
.sc-card-cover > .media-load-note { position: relative; z-index: 2; margin: 32px 20px; }
.sd-hero > .media-load-note { position: absolute; right: 4%; top: 24px; max-width: 230px; border-radius: 6px; }
@media(max-width:768px) { .sd-hero > .media-load-note { position: static; margin: 12px 20px; max-width: none; } }
.kjx-public {
  /* Logo retains its approved purple artwork; actions use one engineering blue. */
  --brand: #245cb8;
  --brand-dark: #18488f;
  --brand-soft: #edf3fc;
  --brand-mark: #352773;
  --bg: #f6f7f9;
  --ink: #182331;
  --muted: #596575;
  --line: #e2e6ec;
  --kjx-header-offset: 140px;
}
.kjx-public .nav-bottom { border-bottom: 1px solid var(--line); }
.kjx-public .nav-links a.active { color: var(--brand); }
.kjx-public .ns-form { border: 1px solid #b8c5d8; border-radius: 6px; }
.kjx-public .ns-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.kjx-public .ns-input { min-width: 0; background: #fff; }
.kjx-public .ns-btn { background: var(--brand); }
.kjx-public .ns-btn:hover { background: var(--brand-dark); }
.kjx-public .nav-quote-btn {
  background: var(--brand) !important;
  border-radius: 6px !important;
  box-shadow: none;
  transition: background-color .18s !important;
}
.kjx-public .nav-quote-btn:hover { background: var(--brand-dark) !important; box-shadow: none; transform: none; }
.kjx-public .nav-bom-cart { background: #fff; color: var(--ink); border-color: var(--line); border-radius: 6px; transition: background-color .18s, border-color .18s, color .18s; }
.kjx-public .nav-bom-cart:hover { background: var(--brand-soft); border-color: var(--brand); }
.kjx-public .nav-bom-badge { background: var(--brand); box-shadow: none; }
.kjx-public .nav-user a.btn { background: #fff; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; transform: none; font-size: 13px; font-weight: 600; }
/* Override the legacy solid-button foreground together with its background. */
.kjx-public .nav-user a.btn:not(.ghost) { color: var(--muted); }
.kjx-public .nav-user a.btn:hover,
.kjx-public .nav-user a.btn:focus-visible,
.kjx-public .nav-user a.btn:not(.ghost):hover,
.kjx-public .nav-user a.btn:not(.ghost):focus-visible { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.kjx-public .nav a:focus-visible, .kjx-public .nav button:focus-visible,
.kjx-public .nav input:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.kjx-public .btn.ghost { background: #fff; color: var(--brand); border-color: #bac9df; }
.kjx-public .btn.ghost:hover { background: var(--brand-soft); border-color: var(--brand); }
.kjx-public a:focus-visible, .kjx-public button:focus-visible,
.kjx-public input:focus-visible, .kjx-public select:focus-visible,
.kjx-public textarea:focus-visible, .kjx-public summary:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 3px;
}
.kjx-public .pd-cart-btn { background: var(--brand); box-shadow: none; }
.kjx-public .pd-cart-btn:hover { background: var(--brand-dark); box-shadow: none; transform: none; }
.kjx-public .pd-cart-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.kjx-public #chat-fab-btn { background: var(--brand) !important; box-shadow: 0 4px 16px rgba(24,72,143,.18) !important; }
.kjx-public .dc-series-btn[aria-selected="true"],
.kjx-public .dc-note-actions a:not(.ghost),
.kjx-public .dc-guide-code { background: var(--brand); }
.kjx-public .dc-series-total, .kjx-public .dc-badge,
.kjx-public .dc-matrix-tag, .kjx-public .dc-line-status,
.kjx-public .dc-guide-meta { color: var(--brand); }
.kjx-public .dc-badge, .kjx-public .dc-matrix-tag,
.kjx-public .dc-line-status { background: var(--brand-soft); }
.kjx-public .dc-note { border-left-color: var(--brand); }
.kjx-public #product-lines-title, .kjx-public #engineering-guides-title,
.kjx-public #source-rules-title, .kjx-public .dc-platform-picker,
.kjx-public .dc-series { scroll-margin-top: var(--kjx-header-offset); }
.kjx-public .kd-wrap { --kd-header-offset: var(--kjx-header-offset); }
.kjx-public .kd-wrap a { color: var(--brand); }
.kjx-public .kd-actions a.kd-primary,
.kjx-public .kd-pack .kd-actions a,
.kjx-public .kd-filter button { background: var(--brand); border-color: var(--brand); color: #fff; }
.kjx-public .kd-actions a:focus-visible,
.kjx-public .kd-filter button:focus-visible { outline-color: var(--brand); }
/* Existing commerce/project pages share the brand, not transaction state colors. */
.kjx-public .sc-hero, .kjx-public .contact-hero {
  background: #f6f7f9;
  color: var(--ink);
}
.kjx-public .sc-hero::before { content: none; }
.kjx-public .sc-hero-stats .num,
.kjx-public .sc-service-step em, .kjx-public .sc-guide-link { color: var(--brand); }
.kjx-public .sc-category-link.active { background: var(--brand); color: #fff; }
.kjx-public .sc-category-link:hover { background: var(--brand-soft); color: var(--brand); }
.kjx-public .sc-category-link.active:hover { background: var(--brand-dark); color: #fff; }
.kjx-public .sc-service-step:hover { border-color: var(--brand); }
.kjx-public .contact-card .ic { background: var(--brand-soft); }
.kjx-public .contact-card .act:hover { background: var(--brand-dark); }
.kjx-public #contact-message-section { scroll-margin-top: var(--kjx-header-offset); }
.kjx-public .cat-tree-item.active > a,
.kjx-public .cat-sub-list li.sub-active a,
.kjx-public .cat-sub-sub-list li.sub-sub-active a {
  background: var(--brand-soft); color: var(--brand); border-left-color: var(--brand);
}
.kjx-public .cat-tree-item.active .cat-count,
.kjx-public .mall-active-filters .maf-chip,
.kjx-public .mall-active-filters .maf-chip button {
  background: var(--brand-soft); color: var(--brand);
}
.kjx-public .mall-view-toggle .vt-btn.active { color: var(--brand); }
.kjx-public .cat-count, .kjx-public .facet-cnt,
.kjx-public .mall-header .result-count, .kjx-public .mall-view-toggle .vt-btn,
.kjx-public .batch-bar .batch-tip { color: #526174; font-size: 12px; }
.kjx-public .facet-item.checked, .kjx-public .facet-item.checked .facet-cnt,
.kjx-public .facet-more summary, .kjx-public .mall-header .result-count strong,
.kjx-public .cat-tree-item > a:hover .cat-count { color: var(--brand); }
.kjx-public .mall-breadcrumb .sep { color: #596575; }
.kjx-public .facet-more summary { font-size: 12px; }
.kjx-public .mall-active-filters .maf-clear { background: var(--brand); }
.kjx-public .mall-active-filters .maf-clear:hover { background: var(--brand-dark); }
.kjx-public .mall-active-filters .maf-chip button:hover { background: var(--bad); color: #fff; }
.kjx-public .mall-query-hint { color: var(--brand); background: var(--brand-soft); border-color: #cbd8ec; }
/* Keep the same brand scale on laptops and wide monitors; avoid the former
   1400px jump that made zooming appear to change the site's visual identity. */
.kjx-public .nav-top.container,
.kjx-public .nav-bottom > .container { max-width: 1280px; }
@media (max-width:720px) {
  .kjx-public { --kjx-header-offset: 128px; }
}
@media (max-width:480px) {
  /* The cart remains in the menu; avoid a third header row for signed-in users. */
  .kjx-public .nav-actions .nav-cart { display: none; }
  .kjx-public .nav .logo { padding-right: 0; gap: 6px; }
  .kjx-public .nav-bom-cart { padding: 7px 6px; gap: 4px; }
}
@media (max-width:360px) {
  /* BOM and the drawer both retain the quote destination on narrow screens. */
  .kjx-public .nav-actions .nav-quote-btn { display: none !important; }
}
@media (min-width:1101px) {
  .kjx-public .nav-top { height: 84px; gap: 16px; }
  .kjx-public .nav .logo { gap: 10px; padding-right: 16px; }
  .kjx-public .nav .logo-img { width: 40px; height: 40px; }
  .kjx-public .nav .logo-name { font-size: 20px; }
  .kjx-public .nav .logo-en-full { font-size: 7px; letter-spacing: .25px; }
  .kjx-public .nav-search { min-width: 160px; margin: 0 8px; }
  .kjx-public .ns-form { height: 42px; }
  .kjx-public .ns-btn { min-width: 72px; padding: 0 16px; font-size: 14px; }
  .kjx-public .nav-actions { gap: 10px; }
  .kjx-public .nav-user { gap: 8px; }
  .kjx-public .nav-user .btn { padding: 8px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .kjx-public .nav-quote-btn, .kjx-public .kjx-start-card,
  .kjx-public .solution-preview-card, .kjx-public .contact-card,
  .kjx-public .sc-card, .kjx-public .sc-service-step { transition: none !important; transform: none !important; }
}