/* WhiteOptics visual unify — n33 search right of nav + tight footer; Logo untouched */
:root {
  --wo-brand: #0082dc;
  --wo-brand-dark: #006bb8;
  --wo-ink: #1f2933;
  --wo-muted: #5b6570;
  --wo-line: #e6eaef;
  --wo-bg: #ffffff;
}
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--wo-ink) !important;
}
.header .container-pc .nav > .item > a,
.header .container-pc .navbar {
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
}
.header .container-pc .nav > .item.active > a,
.header .container-pc .nav > .item:hover > a {
  color: var(--wo-brand) !important;
}
/* Search: remove harsh red, use brand blue */
.header .container-pc .toplink input.text2,
.header input#KeyName,
input.text2 {
  border: 1px solid var(--wo-line) !important;
  border-radius: 4px !important;
  color: var(--wo-ink) !important;
  height: 34px !important;
  padding: 0 10px !important;
}
.header .container-pc .toplink input[type="button"],
#SearchButton {
  color: #fff !important;
  background: var(--wo-brand) !important;
  border: 1px solid var(--wo-brand) !important;
  border-radius: 4px !important;
  height: 34px !important;
  padding: 0 14px !important;
}
.about-box .title h2,
.product-box .title h2,
.product-box .title h3,
.news-box .title h2 {
  color: var(--wo-ink) !important;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}
.about-box .text,
.about-box .text p {
  color: var(--wo-muted) !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.about-box .more a,
.product-box .more a,
a.more,
.note .more {
  display: inline-block !important;
  background: var(--wo-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
.about-box .more a:hover,
.product-box .more a:hover {
  background: var(--wo-brand-dark) !important;
}
.product-box .list .item p,
.product-box .pic p {
  color: var(--wo-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center;
}
.product-box .list .item .pic img,
.product-box .img-box img {
  filter: contrast(1.05) saturate(0.95);
}
.foot-box,
.copyright,
.copyright h3,
.copyright p,
.copyright a {
  color: #c5ccd4 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}
.copyright a { color: #9ec9f0 !important; }
/* Hide near-invisible hero H1 visual glitch; keep for a11y if present */
.waz h1 { font-size: 0 !important; line-height: 0 !important; }

/* Homepage product cards: balanced frame (no tiny clamp) */
.product-box .list .img-box img {
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
.product-box .list .img-box {
  display: block !important;
  height: auto !important;
  padding: 10px !important;
}
.product-box .list .item { margin-bottom: 14px !important; }
.product-box .list .pic { padding-bottom: 12px !important; }
.product-box .list .pic p {
  margin: 10px 0 0 !important;
  padding: 0 6px !important;
  line-height: 1.4 !important;
}
.product-box .list { margin-top: 12px !important; }
.product-box .title { margin-bottom: 8px !important; }

/* Contact / About sidebar: align address & email rows */
.sub-contact .note p { margin: 0 0 6px !important; min-height: 0 !important; }
.sub-contact .note p:empty { display: none !important; }
.sub-contact .note li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
}
.update_contact1_right dl { margin: 0 !important; }
.update_contact1_right dd { margin: 0 0 8px !important; padding: 0 !important; min-height: 0 !important; }
.update_contact1_right dd:empty { display: none !important; }
.update_contact1_right dd li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.65 !important;
  word-break: break-all;
}

/* Product LEARN MORE: brand blue instead of red */
.product-box .more a,
.product-list .more a,
.pro-list .more a,
.list .more a,
a.more,
.more a,
.note a.more,
.pic .more,
.item .more a,
a[title*="LEARN"],
.product-box a.more,
.wrap-in .more a {
  background-color: #0082dc !important;
  background: #0082dc !important;
  color: #fff !important;
  border-color: #0082dc !important;
}
.product-box .more a:hover,
.more a:hover,
a.more:hover {
  background-color: #006bb8 !important;
  background: #006bb8 !important;
  color: #fff !important;
}
/* text-style LEARN MORE links */
.list .item a,
.pro_box a,
.product a {
  /* don't force all links; only red accents below */
}
.title h2::after,
.title h2::before,
.product-box .title h2::before,
.product-box .title h2::after {
  background-color: #0082dc !important;
}

/* Product list LEARN MORE (product-wrap) */
.product-wrap .list a.more,
.product-wrap a.more,
.wrap-in .list a.more,
.list a.more {
  background-color: #0082dc !important;
  background: #0082dc !important;
  color: #ffffff !important;
  border: none !important;
}
.product-wrap .list a.more:hover,
.wrap-in .list a.more:hover,
.list a.more:hover {
  background-color: #006bb8 !important;
  color: #ffffff !important;
}
/* kill remaining red accents sitewide where safe */
.product-wrap .list .title a,
.product-wrap .list h3 a {
  color: #1f2933 !important;
}
.product-wrap .list h3 a:hover,
.product-wrap .list .title a:hover {
  color: #0082dc !important;
}

/* Homepage About LEARN MORE: vertical center text */
.about-box .more a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  line-height: 1 !important;
  padding: 0 22px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  text-align: center !important;
}

/* About LEARN MORE: true optical vertical center (kill bottom border offset) */
.about-box .more a,
.about-box .more a:link,
.about-box .more a:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  min-height: 36px !important;
  line-height: 36px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  background: #0082dc !important;
  background-color: #0082dc !important;
  color: #fff !important;
  text-decoration: none !important;
  vertical-align: middle !important;
}
.about-box .more a:hover {
  background: #006bb8 !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}


/* Homepage product categories: larger frame, full image visible */
.product-box .list .img-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  overflow: visible !important;
  background: #fff !important;
}
.product-box .list .img-box img,
.product-box .list .pic img,
.product-box .list img.lazy {
  max-height: none !important;
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
.product-box .list .pic {
  overflow: visible !important;
  height: auto !important;
  padding-bottom: 10px !important;
}
.product-box .list .item {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Remove decorative blue circle icon above 关于 WhiteOptics */
.about-box .title h2::before,
.about-box .title h2:before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  margin: 0 !important;
  border: 0 !important;
}
.about-box .title {
  margin-top: 20px !important;
}

/* FINAL: homepage product category — full photo, larger frame */
.product-box .list .item,
.product-box .list .pic,
.product-box .list .img-box {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
.product-box .list .img-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 16px 12px 8px !important;
  background: #fff !important;
}
.product-box .list .img-box img,
.product-box .list .pic img,
.product-box .list img.lazy,
.product-box .list a.img-box img {
  max-height: none !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
}
.product-box .list .pic p {
  margin-top: 8px !important;
}

/* wo-nav: exclude header dropdown from Learn-More blue
   (do NOT reset .container-pc .nav .item > a — that killed line-height:106px and misaligned logo/nav) */
.header .navigation a,
.header .navigation .more > a,
.header .navigation li.more > a,
.header .navigation .level-1 > li.more > a,
.header .navigation .level-1 > li.more > a:hover,
.header .navigation .level-1 > li.more.active > a,
.header .navigation .level-2 a,
.header .navigation .more a:hover,
.header .container-pc .nav .item dl a {
  background: transparent !important;
  background-color: transparent !important;
  color: #1f2933 !important;
  border: none !important;
  border-radius: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
  line-height: inherit !important;
  display: block !important;
  box-shadow: none !important;
}

/* n31: PC header — midline + search right of nav; mobile logo room */
@media (min-width: 768px) {
  .header .container-pc {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
  }
  /* Search restored to the right of nav (was absolute right:-100px → h-scroll) */
  .header .container-pc .logo {
    order: 1 !important;
  }
  .header .container-pc .navbar {
    order: 2 !important;
  }
  .header .container-pc .toplink {
    order: 3 !important;
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: static !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: 56px !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    z-index: 9 !important;
  }
  .header .container-pc .toplink > div {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .header .container-pc .toplink input.text2,
  .header .container-pc .toplink input#KeyName,
  .header .container-pc #KeyName {
    width: 160px !important;
    max-width: 160px !important;
    height: 34px !important;
    margin: 0 !important;
    border: 1px solid #c5cdd6 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }
  .header .container-pc .toplink input[type="button"],
  .header .container-pc #SearchButton {
    height: 34px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
  }
  .header .container-pc .logo {
    float: none !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
  }
  .header .container-pc .logo a {
    display: flex !important;
    align-items: center !important;
    line-height: 0 !important;
    height: 56px !important;
  }
  .header .container-pc .logo a img {
    display: block !important;
    height: 56px !important;
    width: auto !important;
    max-height: 56px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  .header .container-pc .navbar {
    float: none !important;
    padding-right: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    flex: 0 0 auto !important;
  }
  .header .container-pc .nav {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header .container-pc .nav > .item {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }
  .header .container-pc .nav > .item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    line-height: 1.2 !important;
    padding: 0 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* n29 mobile: shrink logo so it does not crowd DE / hamburger */
@media (max-width: 767px) {
  .header .container-wap .logo {
    max-width: calc(100% - 120px) !important;
    padding: 14px 8px 14px 0 !important;
  }
  .header .container-wap .logo a img {
    height: auto !important;
    max-height: 42px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .header .container-wap .language {
    right: 48px !important;
  }
}
.header .navigation .level-1 > li.active > a,
.header .navigation .level-1 > li:hover > a,
.header .navigation .level-1 > li.more.active > a,
.header .navigation .level-1 > li.more:hover > a {
  background-color: rgba(0, 130, 220, 0.06) !important;
  background: rgba(0, 130, 220, 0.06) !important;
  color: #0082dc !important;
}
.header .navigation .level-2 > li > a:hover {
  background-color: rgba(0, 130, 220, 0.06) !important;
  color: #0082dc !important;
}

/* wo-cat: balanced frames — roomy images, no text/frame overlap */
.product-box .list .item,
.product-box .list .pic {
  overflow: visible !important;
  height: auto !important;
  position: relative !important;
}
.product-box .list .img-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  overflow: hidden !important;
}
.product-box .list .img-box img,
.product-box .list .pic img,
.product-box .list img.lazy,
.product-box .list a.img-box img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  position: static !important;
}
.product-box .list .pic {
  padding: 10px 10px 14px !important;
  margin-top: 12px !important;
  background: #fff !important;
}
.product-box .list .pic p {
  position: static !important;
  display: block !important;
  margin: 10px 0 0 !important;
  padding: 0 4px !important;
  line-height: 1.4 !important;
  min-height: 1.4em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #1f2933 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  background: transparent !important;
}
.product-box .list .pic p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}
/* Categories badge: keep readable size, flex-center text (no overlap) */
.product-box .title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.product-box .title h2,
.product-box .title h3 {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 767px) {
  .product-box {
    padding-bottom: 56px !important;
  }
  .product-box .title {
    width: 210px !important;
    height: 210px !important;
    padding-top: 0 !important;
    margin-bottom: 4px !important;
  }
  .product-box .title h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }
  .product-box .title h2 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  .product-box .list {
    padding-top: 28px !important;
  }
  .product-box .list .item {
    margin-bottom: 12px !important;
    overflow: visible !important;
  }
  .product-box .list .img-box {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px !important;
  }
  .product-box .list .pic {
    padding: 10px 10px 12px !important;
    margin-top: 10px !important;
  }
  .product-box .list .pic p {
    margin-top: 10px !important;
    font-size: 13px !important;
  }
}
@media (min-width: 768px) {
  .product-box .title {
    width: 275px !important;
    height: 275px !important;
    padding-top: 0 !important;
  }
  .product-box .list .img-box {
    min-height: 0 !important;
    height: auto !important;
  }
}