:root {
  --font-noto-sans: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-noto-serif: "Noto Serif SC", "SimSun", serif;
}

body.admin-bar .fixed.top-0 {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .fixed.top-0 {
    top: 46px;
  }
}

.hj-dropdown {
  display: none;
}

.hj-nav-parent:hover .hj-dropdown {
  display: block;
}

/* Header scroll-state correction
   Tailwind arbitrary classes that are emitted in PHP are not always available in the
   compiled utility CSS, and the previous JS only changed logo colors. On the home
   page this left white nav text/dropdown triggers on a white scrolled header. */
[data-hj-header] {
  will-change: background-color, box-shadow, border-color;
}

.hj-logo-switcher,
.hj-logo-static {
  display: block;
  height: 46px;
  width: 163px;
}

.hj-logo-switcher {
  position: relative;
}

.hj-logo-switcher img,
.hj-logo-static {
  object-fit: contain;
  object-position: left center;
}

.hj-logo-switcher img {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

[data-hj-logo] .hj-logo-light {
  opacity: 0;
}

[data-hj-logo] .hj-logo-dark {
  opacity: 1;
}

[data-hj-header].is-scrolled {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .10) !important;
  backdrop-filter: saturate(180%) blur(18px);
}

[data-hj-header].is-scrolled [data-hj-logo] .hj-logo-light {
  opacity: 1;
}

[data-hj-header].is-scrolled [data-hj-logo] .hj-logo-dark {
  opacity: 0;
}

[data-hj-header].is-scrolled .hidden.lg\:block {
  background: rgba(248, 250, 252, .96) !important;
  border-color: rgba(15, 23, 42, .08) !important;
}

[data-hj-header].is-scrolled .hidden.lg\:block,
[data-hj-header].is-scrolled .hidden.lg\:block a,
[data-hj-header].is-scrolled .hidden.lg\:block span {
  color: #64748b !important;
}

[data-hj-header].is-scrolled [data-hj-home-color],
[data-hj-header].is-scrolled nav > a,
[data-hj-header].is-scrolled .hj-nav-parent > a,
[data-hj-header].is-scrolled [data-hj-menu-toggle] {
  color: #111827 !important;
}

[data-hj-header].is-scrolled nav > a:hover,
[data-hj-header].is-scrolled .hj-nav-parent:hover > a,
[data-hj-header].is-scrolled .hidden.lg\:block a:hover {
  color: var(--primary) !important;
}

[data-hj-header].is-scrolled nav > a.text-primary,
[data-hj-header].is-scrolled nav > a[aria-current="page"] {
  color: var(--primary) !important;
}

[data-hj-header] .hj-dropdown {
  background: rgba(255, 255, 255, .98) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 22px 55px rgba(15, 23, 42, .16) !important;
}

[data-hj-header] .hj-dropdown a {
  color: #111827 !important;
}

[data-hj-header] .hj-dropdown a:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

.hj-mobile-menu {
  display: none;
}

.hj-mobile-menu.is-open {
  display: block;
}

.hj-tab-panel {
  display: none;
}

.hj-tab-panel.is-active {
  display: block;
}

.hj-product-detail {
  display: none;
}

.hj-product-detail.is-active {
  display: block;
}

.hj-product-button.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.hj-product-button.is-active .hj-product-spec {
  color: rgba(255, 255, 255, .7);
}

.hj-contact-success {
  display: none;
}

.hj-contact-success.is-visible {
  display: flex;
}

.hj-contact-form.is-hidden {
  display: none;
}

.hj-prose h2,
.hj-prose h3 {
  color: var(--foreground);
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: .75rem;
}

.hj-prose p,
.hj-prose li {
  color: var(--muted-foreground);
  line-height: 1.8;
}

.hj-prose p {
  margin-bottom: 1rem;
}

.hj-prose ul,
.hj-prose ol {
  margin: 0 0 1rem 1.2rem;
}

.hj-prose strong {
  color: var(--foreground);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}