/**
 * Site-wide theme — match homepage Cepai-inspired style on all pages
 * Loaded after style.css; overrides old blue/green accents.
 */
:root {
  --site-accent: #c8102e;
  --site-accent-hover: #a00d25;
  --site-dark: #1a1a1a;
  --site-text: #333333;
  --site-muted: #666666;
  --site-line: #e5e5e5;
  --site-bg: #ffffff;
  --site-bg-soft: #f7f7f7;
}

/* —— Remap legacy palette —— */
/* Primary blue → dark / accent contexts handled below */
/* Green accents → red */

/* —— Header / Nav (all pages) —— */
.navigation-n12m-1 {
  z-index: 1041;
  background: #fff !important;
  border-bottom: 1px solid var(--site-line) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}
.navigation-n12m-1 .navbar-ul > li {
  color: var(--site-text) !important;
}
.navigation-n12m-1 .navbar-ul > li:hover,
.navigation-n12m-1 .navbar-ul > li.active {
  color: var(--site-accent) !important;
  border-bottom-color: var(--site-accent) !important;
}
.navigation-n12m-1 .lv-2 a:hover,
.navigation-n12m-1 .lv-3 a:hover {
  color: var(--site-accent) !important;
  background: var(--site-bg-soft) !important;
}
.navigation-n12m-1 .language:focus,
.navigation-n12m-1 .language:hover {
  color: var(--site-accent) !important;
}
.navigation-n12m-1 .search-box .search-btn {
  background: var(--site-accent) !important;
}
.navigation-n12m-1.n-pin {
  background: #fff !important;
}

@media (min-width: 1201px) {
  .navigation-n12m-1 {
    background: #fff !important;
  }
  .navigation-n12m-1.n-pin {
    background: #fff !important;
  }
}

/* —— Headlines —— */
.headline-n101m-2 h2,
.headline-n118m-4 h2 {
  color: var(--site-dark) !important;
}
.headline-n118m-5 {
  background: var(--site-dark) !important;
}
.headline-n118m-5 h2 {
  color: #fff !important;
}
.headline-n118m-4 i {
  background: var(--site-accent) !important;
  transform: none !important;
  width: 8px !important;
  height: 22px !important;
  border-radius: 0 !important;
}
.headline-n118m-5 i {
  background: #fff !important;
  transform: none !important;
  width: 8px !important;
  height: 22px !important;
  border-radius: 0 !important;
}

/* —— Links / buttons / accents —— */
a:hover {
  color: var(--site-accent);
}
.paragraph-n118m-1 .btn,
.btn.more {
  background: var(--site-accent) !important;
}
.paragraph-n118m-1 .btn:hover,
.btn.more:hover {
  background: var(--site-accent-hover) !important;
}
.paragraph-n118m-1 .btn:hover:before {
  background: var(--site-dark) !important;
}

/* Product / case hovers */
.product-list-n4m-1 ul li:hover .item,
.product-list-n4m-1 ul li:hover .more,
.case-list-n118m-1 .container .item:hover .blk {
  border-color: var(--site-accent) !important;
}
.product-list-n4m-1 .text .th a:hover,
.product-list-n4m-1 ul li:hover .more,
.case-list-n118m-1 .container .item:hover .title {
  color: var(--site-accent) !important;
}
.case-list-n118m-1 .back-pob {
  background: var(--site-accent) !important;
}
.case-list-n118m-1 .container .owl-buttons .imco {
  background: var(--site-dark) !important;
}
.case-list-n118m-1 .container .owl-buttons .imco:hover {
  background: var(--site-accent) !important;
}

/* News list */
.news-list-n118m-1 ul li:before {
  background: var(--site-accent) !important;
}
.news-list-n118m-1 ul li a .time .day {
  color: var(--site-accent) !important;
}
.news-list-n118m-1 ul li:hover:before {
  background: var(--site-accent) !important;
}

/* About stats strip — normal rectangle, no diamond skew */
.about-us-list-n118m-1 {
  background: var(--site-accent) !important;
  transform: none !important;
  margin: 0 0 20px 0 !important;
  border-radius: 0 !important;
}
.about-us-list-n118m-1 .about-bg {
  border-radius: 0 !important;
  padding: 16px 20px !important;
}
.about-us-list-n118m-1 .about-bg ul li {
  border-right-color: rgba(255, 255, 255, 0.35) !important;
  transform: none !important;
}
@media (min-width: 768px) {
  .about-us-list-n118m-1 {
    transform: none !important;
    margin: 0 0 20px 0 !important;
  }
  .about-us-list-n118m-1 .about-bg ul li {
    transform: none !important;
  }
}
.about-us-list-n118m-3 .text:hover {
  color: var(--site-accent) !important;
}
.about-us-list-n118m-3 .owl-nav .owl-prev,
.about-us-list-n118m-3 .owl-nav .owl-next,
.about-us-list-n118m-3 .owl-buttons .imco {
  background: var(--site-dark) !important;
}

/* Breadcrumb / inner-page top banner */
.breadcrumb-n118m-1 li a:hover,
.breadcrumb-n118m-1 li .f-home,
.breadcrumb-n118m-1 li:nth-last-child(2) a {
  color: var(--site-accent) !important;
}

/* Sidebar / category */
.product-category-n113m-1 .expand:hover,
.product-category-n113m-1 .active a,
.product-category-n113m-1 a:hover {
  color: var(--site-accent) !important;
}
.product-category-n113m-1 .active a:before,
.product-category-n113m-1 a:hover:before {
  background: var(--site-accent) !important;
}
.product-list-n118m-1 .owl-nav .owl-prev,
.product-list-n118m-1 .owl-nav .owl-next,
.product-list-n118m-1 .owl-buttons .imco {
  background: var(--site-dark) !important;
}
.product-list-n118m-1 .item a .text {
  color: var(--site-dark) !important;
}
.product-list-n118m-1 .item a:hover .text {
  color: #fff !important;
  background-color: var(--site-accent) !important;
}

/* Contact info blocks */
.contact-info-n114m-1 .imco,
.contact-info-n114m-1 .box-right p {
  color: var(--site-dark) !important;
}

/* Video controls */
.video-n118m-1 .item .controls .play:hover {
  color: var(--site-accent) !important;
}
.video-n118m-1 .item:hover .controls .ltc {
  border-left-color: var(--site-accent);
  border-top-color: var(--site-accent);
}
.video-n118m-1 .item:hover .controls .rbc {
  border-right-color: var(--site-accent);
  border-bottom-color: var(--site-accent);
}

/* Carousel dots */
.carousel-n114m-1 .nivo-controlNav a.active,
.slideBox .hd ul li.on {
  background: var(--site-accent) !important;
}

/* Pagination */
.pagination .current,
.pagination a:hover {
  background: var(--site-accent) !important;
  border-color: var(--site-accent) !important;
  color: #fff !important;
}

/* Area backgrounds (footer gradient etc.) */
.area-background-n4m-72 > .area-background-cont {
  background: linear-gradient(to right, #111, #2a0a10) !important;
}
.area-background-n3m-13 > .area-background-cont .pob {
  background: var(--site-dark) !important;
}
.area-background-n3m-13 > .area-background-cont .lbp,
.area-background-n3m-13 > .area-background-cont .rbp {
  background: #444 !important;
}

/* —— Footer —— */
/* Contact block: logo above text, left-aligned; links align with Address */
.friendly-link-n122m-2 footer {
  align-items: flex-start;
}
.friendly-link-n122m-2 .cinfos {
  align-items: flex-start;
}
.friendly-link-n122m-2 .cinfos .fllogo {
  text-align: left !important;
  align-self: flex-start;
  /* Reserve space so logo never overlaps Address */
  height: 48px;
  max-height: 48px;
  margin: 0 0 18px 0 !important;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.friendly-link-n122m-2 .cinfos .fllogo img {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain;
  object-position: left center;
}
/* Product / Case / About Valve titles line up with Address (below logo) */
.friendly-link-n122m-2 .links {
  padding-top: 66px; /* 48px logo + 18px gap */
  box-sizing: border-box;
}
.friendly-link-n122m-2 .cinfos .cus .info .value:hover,
.friendly-link-n122m-2 .links .blk .value:hover,
.ftnav .sub-menu a:hover,
.ftnav ul li a:hover {
  color: var(--site-accent) !important;
}
.friendly-link-n122m-2 .sns a,
.sns.fximgdiv a {
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  color: inherit;
}
.friendly-link-n122m-2 .sns a:hover,
.sns.fximgdiv a:hover {
  background: transparent !important;
}
.friendly-link-n122m-2 .sns a img,
.sns.fximgdiv a img {
  width: 32px;
  height: 32px;
  display: block;
  background: transparent !important;
  border-radius: 0 !important;
}

/* —— Side contact bar —— */
.contact-box-n101m-1 {
  z-index: 10060 !important;
}
.contact-box-n101m-1 .item i {
  background: var(--site-accent) !important;
}
.contact-box-n101m-1 .item i:hover {
  background: var(--site-dark) !important;
}
.contact-box-n101m-1 .pnl .search-box .search-btn,
.contact-box-n101m-1 .pnl .close:hover {
  background: var(--site-accent);
  color: var(--site-accent);
}
.contact-box-n101m-1 .item .tools {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10061;
  top: 0;
  right: 100%;
  padding-right: 18px;
  min-height: 50px;
}
.contact-box-n101m-1 .item:hover .tools,
.contact-box-n101m-1 .item .tools:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.contact-box-n101m-1 .item .tools a:hover {
  color: #fff !important;
  background: var(--site-accent) !important;
}

@media (max-width: 768px) {
  .contact-box-n101m-1 .item i {
    color: var(--site-accent) !important;
    background: #fff !important;
  }
}

/* —— Inner pages layout polish —— */
body:not(.home-fullpage) .navigation-n12m-1 {
  position: relative !important;
  background: #fff !important;
  border-bottom: 1px solid var(--site-line) !important;
}
/* Remove absolute-nav spacer — was causing white gap above banner */
body:not(.home-fullpage) .navigation-n12m-1_blk {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body:not(.home-fullpage) {
  color: var(--site-text);
}

/* Inner page top banner: flush under header, fixed long-image height */
body:not(.home-fullpage) .breadcrumb-n118m-1 {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  /* Full-width unified gray for breadcrumb trail — no black sides */
  background: #f2f2f2 !important;
  overflow: hidden;
}
body:not(.home-fullpage) .breadcrumb-n118m-1 .bg {
  height: clamp(200px, 28vh, 360px) !important;
  padding-bottom: 0 !important;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #222;
}
body:not(.home-fullpage) .breadcrumb-n118m-1 .bg .square-cont {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body:not(.home-fullpage) .breadcrumb-n118m-1 .bg .square-cont > span {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body:not(.home-fullpage) .breadcrumb-n118m-1 .bg .square-cont > span > img,
body:not(.home-fullpage) .breadcrumb-n118m-1 .bg img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
/* Breadcrumb path row: same gray, full page width */
body:not(.home-fullpage) .breadcrumb-n118m-1 > .container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: #f2f2f2 !important;
  padding-left: 4% !important;
  padding-right: 4% !important;
  box-sizing: border-box;
}
body:not(.home-fullpage) .breadcrumb-n118m-1 > .container > .row {
  margin: 0;
}

/* Product title bar: gray + red rectangle (no skew) */
.headline-n118m-4 {
  background: #f2f2f2 !important;
  padding: 10px 15px !important;
  margin-bottom: 20px;
}
.headline-n118m-4 i {
  width: 8px !important;
  height: 22px !important;
  display: inline-block !important;
  background: var(--site-accent) !important;
  float: left;
  margin: 4px 14px 0 0 !important;
  transform: none !important;
}
.headline-n118m-4 h2 {
  color: var(--site-dark) !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  text-transform: capitalize;
}
/* Sidebar title: keep dark bar, white rect (no skew) */
.headline-n118m-5 i {
  transform: none !important;
}
/* About US / page titles → same as product title bar (图5/图6) */
body:not(.home-fullpage) .col-md-9 .headline-n101m-2 {
  margin: 0 0 16px 0 !important;
  text-align: left !important;
  background: #f2f2f2 !important;
  padding: 10px 15px !important;
  min-height: 44px;
  box-sizing: border-box;
}
body:not(.home-fullpage) .col-md-9 .headline-n101m-2 h2 {
  margin: 0 !important;
  padding: 6px 10px 6px 0 !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--site-dark) !important;
  text-align: left !important;
  text-transform: capitalize !important;
  overflow: hidden;
}
body:not(.home-fullpage) .col-md-9 .headline-n101m-2 h2:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 22px;
  background: var(--site-accent);
  margin-right: 14px;
  transform: none;
}
/* Keep two columns starting on the same row */
body:not(.home-fullpage) .container.main.custom-style > .additional.row {
  align-items: flex-start;
}
body:not(.home-fullpage) .container.main .col-md-3 .headline-n118m-5,
body:not(.home-fullpage) .col-md-9 .headline-n101m-2 {
  min-height: 44px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  body:not(.home-fullpage) .breadcrumb-n118m-1 .bg {
    height: 160px !important;
  }
}

/* Product detail / lists often use these */
.pro-detail a,
.more:hover,
.th a:hover {
  color: var(--site-accent);
}

/* Form buttons */
button[type="submit"],
input[type="submit"],
.form-submit input,
.submit {
  background-color: var(--site-accent) !important;
  border-color: var(--site-accent) !important;
}
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--site-accent-hover) !important;
}

/* Hide pagepiling dots if any leftover */
#pp-nav {
  display: none !important;
}