/* MDES theme completion patch — visual rules only. */

/* Corporate and Applications imagery: cache-busted navy edition. */
.corporate-page-v3 .corporate-hero-bg-v3,
.corporate-page-v2 .corporate-hero-bg-v2 {
  background-image: url("../images/corporate/mdes-corporate-hero-v2.webp?v=20260808-v7") !important;
  background-position: center right !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

#page-applications .solutions-hero-v216 {
  background-image:
    linear-gradient(90deg, #04182a 0%, #061f35 46%, rgba(7, 31, 51, .78) 68%, rgba(7, 31, 51, .38) 100%),
    url("../images/applications/mdes-applications-hero-v2.webp?v=20260808-v7") !important;
}

#page-applications .solutions-card-project-v216 {
  background-image: url("../images/applications/mdes-applications-hero-v2.webp?v=20260808-v7") !important;
}

/* One consistent badge for every numbered product/category card. */
html body #page-products #categoryGrid.category-grid .category-card .cat-body > span,
html body.mdes-cable-page #page-products #categoryGrid.cable-main-category-grid .category-card .cat-body > span,
html body #page-references .reference-project-content-v261 .reference-number-v261,
html body #page-catalogs .catalog-number-v264,
html body .product-card.chema-solution-card-v340 .solution-count-v340,
html body .product-card.chema-solution-card-v338 .solution-count-v338,
html body .mdes-related-solution-card-v351 > span {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 !important;
  border: 1px solid #D8DDE1 !important;
  border-radius: 10px !important;
  background: #F1F3F5 !important;
  color: #0B2646 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow: none !important;
}

html body #page-products #categoryGrid.category-grid .category-card .cat-body > span {
  margin: 0 0 14px !important;
}

html body.mdes-cable-page #page-products #categoryGrid.cable-main-category-grid .category-card .cat-body > span,
html body .product-card.chema-solution-card-v340 .solution-count-v340,
html body .product-card.chema-solution-card-v338 .solution-count-v338 {
  margin: 0 auto 14px !important;
}

/* Category guide: remove the legacy bright blue. */
html body .mdes-category-guide .mdes-guide-back {
  border: 1px solid #D8DDE1 !important;
  background: #F1F3F5 !important;
  color: #0B2646 !important;
  box-shadow: 0 10px 24px rgba(11, 38, 70, .06) !important;
}

html body .mdes-category-guide .mdes-guide-back:hover {
  border-color: #0B2646 !important;
  background: #0B2646 !important;
  color: #fff !important;
}

html body .mdes-category-guide .mdes-guide-crumb a,
html body .mdes-category-guide .mdes-guide-crumb a:visited,
html body .mdes-category-guide .mdes-guide-crumb a:hover {
  color: #0B2646 !important;
}

html body #page-products .product-panel {
  border-top-color: #0B2646 !important;
}

html body #page-products .category-description {
  border-left-color: #0B2646 !important;
}

/* Knowledge Center: navy + metallic gray, without the old cyan/orange accents. */
html body .knowledge-page-v300 {
  background: #F1F3F5 !important;
}

html body #knowledgeContentV300 .mdes-knowledge-back-v31,
html body #knowledgeContentV300 .knowledge-back-top-v325,
html body #knowledgeContentV300 .knowledge-back-top-v327 {
  border-color: #D8DDE1 !important;
  background: #F1F3F5 !important;
  color: #0B2646 !important;
}

html body #knowledgeContentV300 .mdes-knowledge-back-v31:hover,
html body #knowledgeContentV300 .knowledge-back-top-v325:hover,
html body #knowledgeContentV300 .knowledge-back-top-v327:hover {
  border-color: #0B2646 !important;
  background: #0B2646 !important;
  color: #fff !important;
}

html body #knowledgeContentV300 .knowledge-answer-v401,
html body #knowledgeContentV300 .knowledge-article-lead-v300 {
  border-left-color: #0B2646 !important;
  background: #F1F3F5 !important;
  color: #273846 !important;
}

html body #knowledgeContentV300 .knowledge-answer-v401 strong,
html body #knowledgeContentV300 .knowledge-group-block-v303 > h2,
html body #knowledgeContentV300 .knowledge-card-v300 span,
html body #knowledgeContentV300 .knowledge-group-card-v312 span,
html body #knowledgeContentV300 .knowledge-topic-card-v312 span,
html body #knowledgeContentV300 .knowledge-card-v300 a,
html body #knowledgeContentV300 .knowledge-group-card-v312 a {
  color: #0B2646 !important;
}

html body #knowledgeContentV300 .knowledge-card-image-v302,
html body #knowledgeContentV300 .knowledge-article-image-v302,
html body #knowledgeContentV300 .knowledge-summary-v300 {
  border-color: #D8DDE1 !important;
  background: #F1F3F5 !important;
}

html body #knowledgeContentV300 .knowledge-table-wrap-v401 {
  border-color: #D8DDE1 !important;
}

html body #knowledgeContentV300 .knowledge-table-wrap-v401 h3,
html body #knowledgeContentV300 .knowledge-table-v401 th {
  background: #0B2646 !important;
  color: #fff !important;
}

html body #knowledgeContentV300 .knowledge-faq-v401 details {
  border-color: #D8DDE1 !important;
}

@media (max-width: 760px) {
  #page-applications .solutions-hero-v216 {
    background-image:
      linear-gradient(rgba(4, 24, 42, .92), rgba(4, 24, 42, .92)),
      url("../images/applications/mdes-applications-hero-v2.webp?v=20260808-v7") !important;
  }
}

/* V7: corporate image must keep the logo navy instead of picking up cyan. */
html body .corporate-page-v3 .corporate-hero-bg-v3,
html body .corporate-page-v2 .corporate-hero-bg-v2 {
  filter: saturate(.68) contrast(1.07) brightness(.96) !important;
}

html body .corporate-page-v3 .corporate-hero-overlay-v3,
html body .corporate-page-v2 .corporate-hero-overlay-v2 {
  background:
    linear-gradient(90deg,
      rgba(3, 10, 18, .98) 0%,
      rgba(5, 16, 29, .94) 43%,
      rgba(7, 22, 39, .58) 69%,
      rgba(7, 20, 35, .22) 100%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: auto, 42px 42px, 42px 42px !important;
}

/* V7: neutralize the late-injected legacy cyan category heading style. */
html body #page-products .product-panel #categoryTitle {
  background: linear-gradient(90deg, #fff 0%, #f5f6f7 72%, #eef0f2 100%) !important;
  border-color: #D8DDE1 !important;
  border-left: 7px solid #0B2646 !important;
  box-shadow: 0 16px 38px rgba(11, 38, 70, .07) !important;
}

html body #page-product-detail .detail-info h1::after,
html body #page-product-detail .detail-info h2::after {
  background: #0B2646 !important;
}

@media (max-width: 1050px) {
  html body .corporate-page-v3 .corporate-hero-overlay-v3,
  html body .corporate-page-v2 .corporate-hero-overlay-v2 {
    background: linear-gradient(90deg, rgba(3,10,18,.98), rgba(6,18,31,.91) 70%, rgba(7,20,35,.64)) !important;
  }
}

@media (max-width: 760px) {
  html body .corporate-page-v3 .corporate-hero-overlay-v3,
  html body .corporate-page-v2 .corporate-hero-overlay-v2 {
    background: linear-gradient(180deg, rgba(3,10,18,.97), rgba(6,18,31,.92)) !important;
  }
}

/* V8: use the same navy industrial image treatment on the home page. */
html body #page-home .hero.hero-info-slider-v299::before {
  background: url("../images/corporate/mdes-corporate-hero-v2.webp?v=20260808-v8") center right / cover no-repeat !important;
  opacity: .96 !important;
  filter: saturate(.68) contrast(1.07) brightness(.96) !important;
}

html body #page-home .hero.hero-info-slider-v299::after {
  background:
    linear-gradient(90deg,
      rgba(3, 10, 18, .98) 0%,
      rgba(5, 16, 29, .94) 43%,
      rgba(7, 22, 39, .58) 69%,
      rgba(7, 20, 35, .22) 100%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: auto, 42px 42px, 42px 42px !important;
}

/* V8: applications hero now matches the corporate hero. */
html body #page-applications .solutions-hero-v216 {
  background-image:
    linear-gradient(90deg,
      rgba(3, 10, 18, .98) 0%,
      rgba(5, 16, 29, .94) 43%,
      rgba(7, 22, 39, .58) 69%,
      rgba(7, 20, 35, .22) 100%),
    url("../images/applications/mdes-applications-hero-v2.webp?v=20260808-v8") !important;
  background-position: center, center right !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat !important;
}

html body #page-applications .solutions-kicker-v216 {
  color: #CDCFD2 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.34) !important;
}

html body #page-applications .solutions-hero-copy-v216 h1 {
  color: #fff !important;
  text-shadow: 0 9px 28px rgba(0,0,0,.22) !important;
}

html body #page-applications .solutions-hero-copy-v216 > p {
  color: rgba(255,255,255,.84) !important;
}

@media (max-width: 1050px) {
  html body #page-home .hero.hero-info-slider-v299::after,
  html body #page-applications .solutions-hero-v216 {
    background-image:
      linear-gradient(90deg, rgba(3,10,18,.98), rgba(6,18,31,.91) 70%, rgba(7,20,35,.64)),
      url("../images/applications/mdes-applications-hero-v2.webp?v=20260808-v8") !important;
  }

  html body #page-home .hero.hero-info-slider-v299::after {
    background-image: linear-gradient(90deg, rgba(3,10,18,.98), rgba(6,18,31,.91) 70%, rgba(7,20,35,.64)) !important;
  }
}

@media (max-width: 760px) {
  html body #page-home .hero.hero-info-slider-v299::after {
    background: linear-gradient(180deg, rgba(3,10,18,.97), rgba(6,18,31,.92)) !important;
  }

  html body #page-applications .solutions-hero-v216 {
    background-image:
      linear-gradient(180deg, rgba(3,10,18,.96), rgba(6,18,31,.91)),
      url("../images/applications/mdes-applications-hero-v2.webp?v=20260808-v8") !important;
    background-position: center, center !important;
    background-size: cover, cover !important;
  }
}

/* V9: one navy + metallic hero palette for all main section pages. */
html body #page-products .products-title-bar-v257,
html body #page-references .references-hero-v258,
html body #page-catalogs .catalogs-hero-v264,
html body #page-knowledge .knowledge-hero-v300,
html body #page-contact .contact-hero-v289 {
  background: linear-gradient(108deg, #07111F 0%, #091A30 58%, #0B223D 100%) !important;
  border-bottom: 4px solid #B1B3B6 !important;
}

html body #page-products .products-title-bar-v257::before,
html body #page-references .references-hero-v258::before,
html body #page-catalogs .catalogs-hero-v264::before,
html body #page-knowledge .knowledge-hero-v300::before,
html body #page-contact .contact-hero-v289::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(177,179,182,.10), transparent 28%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) !important;
  background-size: auto, 42px 42px, 42px 42px !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html body #page-references .references-hero-visual-v258,
html body #page-catalogs .catalogs-hero-visual-v264,
html body #page-contact .contact-hero-v289 .catalogs-hero-visual-v264 {
  filter: grayscale(1) contrast(1.08) brightness(.72) !important;
  opacity: .13 !important;
}

html body #page-products .products-title-bar-v257 h1,
html body #page-references .references-hero-inner-v258 h1,
html body #page-catalogs .catalogs-hero-inner-v264 h1,
html body #page-knowledge .knowledge-hero-v300 h1,
html body #page-contact .contact-hero-v289 h1 {
  color: #fff !important;
  text-shadow: 0 7px 24px rgba(0,0,0,.22) !important;
}

html body #page-references .references-hero-inner-v258 .kicker,
html body #page-catalogs .catalogs-hero-inner-v264 .kicker,
html body #page-knowledge .knowledge-hero-v300 .kicker,
html body #page-contact .contact-hero-v289 .kicker {
  color: #CDCFD2 !important;
}

html body #page-products .products-title-bar-v257 h1::after {
  background: #B1B3B6 !important;
}

html body #page-catalogs .catalogs-hero-inner-v264 p,
html body #page-knowledge .knowledge-hero-v300 p,
html body #page-contact .contact-hero-v289 p {
  color: rgba(255,255,255,.80) !important;
}

/* V10: keep the request count inside its own button, away from languages. */
html body .header .right-tools .basket-button {
  box-sizing: border-box !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 42px !important;
  margin: 0 7px 0 0 !important;
  padding: 0 !important;
}

html body .header .right-tools .basket-button #requestCount {
  box-sizing: border-box !important;
  position: absolute !important;
  top: -5px !important;
  right: 0 !important;
  left: auto !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #0B2646 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 0 0 2px #fff !important;
  transform: none !important;
  z-index: 3 !important;
}

/* V10: reveal the industrial image on mobile without weakening text contrast. */
@media (max-width: 760px) {
  html body #page-home .hero.hero-info-slider-v299::before {
    background-position: 66% center !important;
    background-size: auto 100% !important;
    opacity: 1 !important;
    filter: saturate(.72) contrast(1.08) brightness(.98) !important;
  }

  html body #page-home .hero.hero-info-slider-v299::after {
    background:
      linear-gradient(90deg,
        rgba(3,10,18,.92) 0%,
        rgba(3,10,18,.82) 36%,
        rgba(3,10,18,.48) 70%,
        rgba(3,10,18,.18) 100%),
      linear-gradient(180deg,
        rgba(3,10,18,.12) 0%,
        rgba(3,10,18,.18) 56%,
        rgba(3,10,18,.72) 100%) !important;
  }

  html body #page-home .hero-copy {
    position: relative !important;
    z-index: 1 !important;
  }
}

@media (max-width: 390px) {
  html body .header .right-tools .basket-button {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    margin-right: 5px !important;
  }
}

/* V11: keep the active navigation line close to its label. */
html body .header .nav a.active::after {
  bottom: -6px !important;
  height: 3px !important;
}

@media (max-width: 1120px) {
  html body .header .nav.open a.active::after,
  html body .header #nav.open a.active::after {
    left: 6px !important;
    right: auto !important;
    bottom: 5px !important;
    width: 46px !important;
  }
}