/* V246. Shared text hierarchy for explicitly marked product heroes only.
   Existing banner/product media, galleries and all other templates retain their layout. */
@layer comemso-fixes-v213 {
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] {
  --hero-246-text: #fff;
  --hero-246-accent: #53d4fa;
  --hero-246-outline-hover-bg: #fff;
  --hero-246-outline-hover-text: #001c32;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] > .cmo-hero-layout {
  row-gap: 20px !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] .cmo-hero-heading-row {
  margin: 0 !important;
  padding: 0 !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] [data-product-hero-category] {
  font-family: Roboto, Helvetica, Arial, sans-serif !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--hero-246-accent) !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] [data-product-hero-title] {
  font-family: Roboto, Helvetica, Arial, sans-serif !important;
  font-size: clamp(2rem, 3vw, 3.3rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  color: var(--hero-246-text) !important;
  -webkit-text-fill-color: currentColor !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] [data-product-hero-lead] {
  font-family: Roboto, Helvetica, Arial, sans-serif !important;
  font-size: clamp(1rem, 1.25vw, 1.15rem) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  color: var(--hero-246-text) !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] .cmo-hero-copy > [data-design-actions] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] .cmo-hero-copy > [data-design-actions] > a {
  font-family: Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-height: 48px !important;
  height: auto !important;
  max-width: 100% !important;
  padding: 12px 18px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] .cmo-hero-copy [data-design-button="primary"] {
  color: #fff !important;
  background: #006097 !important;
  border: 1px solid #006097 !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] .cmo-hero-copy [data-design-button="primary"]:is(:hover, :focus-visible) {
  background: #004d78 !important;
  border-color: #004d78 !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] .cmo-hero-copy [data-design-button="outline"] {
  color: var(--hero-246-text) !important;
  background: transparent !important;
  border: 1px solid currentColor !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] .cmo-hero-copy [data-design-button="outline"]:is(:hover, :focus-visible) {
  color: var(--hero-246-outline-hover-text) !important;
  background: var(--hero-246-outline-hover-bg) !important;
}
html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] .cmo-hero-copy > [data-design-actions] > a:focus-visible {
  outline: 3px solid var(--hero-246-accent) !important;
  outline-offset: 4px !important;
}

html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] [data-product-hero-support] {
  font-family: Roboto, Helvetica, Arial, sans-serif !important;
  font-size: clamp(1rem, 1.25vw, 1.15rem) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  text-transform: none !important;
  margin: 16px 0 0 !important;
  color: var(--hero-246-text) !important;
  -webkit-text-fill-color: currentColor !important;
}
@media (max-width: 1099.98px) {
  html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"]:is([data-v182-width-hero="detail"], [data-v213-wide-hero="micro"]) {
    --hero-246-text: #001c32;
    --hero-246-accent: #006097;
    --hero-246-outline-hover-bg: #001c32;
    --hero-246-outline-hover-text: #fff;
  }
}
@media print {
  html body.cmo-design-system main:is(#main-content, #page-content) [data-product-hero="v246"] {
    --hero-246-text: #001c32;
    --hero-246-accent: #006097;
    --hero-246-outline-hover-bg: #001c32;
    --hero-246-outline-hover-text: #fff;
  }
}

}