@font-face { font-family: 'Nuova Volte'; src: url('../fonts/nuova-volte/nuovavolte-light-trial.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nuova Volte'; src: url('../fonts/nuova-volte/nuovavolte-regular-trial.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nuova Volte'; src: url('../fonts/nuova-volte/nuovavolte-medium-trial.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nuova Volte'; src: url('../fonts/nuova-volte/nuovavolte-semibold-trial.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nuova Volte'; src: url('../fonts/nuova-volte/nuovavolte-bold-trial.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
/* The supplied static semibold face represents the requested H1 weight of 550. */
@font-face { font-family: 'Nuova Volte'; src: url('../fonts/nuova-volte/nuovavolte-semibold-trial.ttf') format('truetype'); font-weight: 550; font-style: normal; font-display: swap; }

/* Storefront typography, including navigation, forms and body copy. */
html,
html body,
html body *:where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-family: 'Nuova Volte', Arial, 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
html body :is(h1, .h1):where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-size: 64px !important;
  font-weight: 550 !important;
  line-height: 1.15 !important;
}
html body :is(h2, .h2):where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-size: 42px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
html body :is(h3, .h3):where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}
/* Unspecified smaller headings keep the body size and use the heading weight. */
html body :is(h4, h5, h6, .h4, .h5, .h6):where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
/* Links, spans and emphasis within headings follow their heading's typography. */
html body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) *:where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
html body p {
  line-height: 1.5 !important;
}
/* Layered important rules beat page and mobile stylesheet overrides. */
@layer tt-storefront-typography {
html,
html body,
html body *:where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-family: 'Nuova Volte', Arial, 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
html body :is(h1, .h1):where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-size: 64px !important;
  font-weight: 550 !important;
  line-height: 1.15 !important;
}
html body :is(h2, .h2):where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-size: 42px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}
html body :is(h3, .h3):where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}
/* Unspecified smaller headings keep the body size and use the heading weight. */
html body :is(h4, h5, h6, .h4, .h5, .h6):where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
/* Links, spans and emphasis within headings follow their heading's typography. */
html body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) *:where(:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fat):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-thin):not(.fa-duotone):not(.glyphicon):not([class^="icon-"]):not([class*=" icon-"]):not(svg):not(svg *)) {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
html body p {
  line-height: 1.5 !important;
}
}


/* Homepage brand is an H1; keep it inside the hero at smaller viewports. */
@layer tt-storefront-typography {
  html body .tt-hero-slider h1.tt-hero-brand {
    font-size: 64px !important;
    font-weight: 550 !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: calc(100% - 28px) !important;
    box-sizing: border-box;
  }
  @media (max-width: 1023px) {
    html body .tt-hero-slider h1.tt-hero-brand {
      font-size: clamp(40px, 5vw, 56px) !important;
    }
  }
  @media (max-width: 767px) {
    html body .tt-hero-slider h1.tt-hero-brand {
      font-size: clamp(28px, 7vw, 44px) !important;
      letter-spacing: 2px !important;
    }
  }
}


/* Surgical-care icon size. */
@layer tt-storefront-typography {
  .tt-sc-icon,
  .tt-sc-icon i {
    font-size: 50px !important;
  }
}


/* Shared button typography across native controls and action links. */
@layer tt-storefront-typography {
  html body :is(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"], a.button, a.btn, a[class*="-btn"], a[class*="btn-"], a[class*="button"], a[class*="cta-primary"], a[class*="cta-secondary"], a.arrow-link, .tt-hero-copy a, .tt-button-motion) {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
  }
  html body :is(button, [role="button"], a.button, a.btn, a[class*="-btn"], a[class*="btn-"], a[class*="button"], a[class*="cta-primary"], a[class*="cta-secondary"], a.arrow-link, .tt-hero-copy a, .tt-button-motion) *:where(:not(i):not(svg):not(svg *):not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="icon-"])) {
    font-size: inherit !important;
    font-weight: inherit !important;
    text-transform: inherit !important;
  }
}

/* All storefront H3 headings share the same size on every screen. */
@layer tt-storefront-typography {
  :is(body, #content) h3,
  :is(body, #content) h3 :where(a, span, strong, b, em) {
    font-size: 24px !important;
  }
}
/* Emphasize homepage statistics and capability labels. */
@layer tt-storefront-typography {
  :is(body, #content) :is(.tt-proof-desc, .tt-capability-desc) > strong {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }
  :is(body, #content) :is(.tt-proof-desc, .tt-capability-desc) > span {
    font-weight: 400 !important;
    opacity: 0.65 !important;
  }
  :is(body, #content) :is(.tt-proof-svg, .tt-capability-svg) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 25px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: flex-start !important;
  }
}

/* Product card names: shared across listings and homepage modules. */
@layer tt-storefront-typography {
  :is(body, #content) :is(#tt-showcase-full, .pbox, .tt-product-card, .tt-search-product-card, .tt-related-card, .tt-prod-card) :is(.name, .name a, .tt-product-name, .tt-product-name a, .tt-search-product-name, .tt-search-product-name a, h3, h3 a) {
    letter-spacing: 1.05px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }
}

/* Keep the header contact action bold above shared typography rules. */
@layer tt-storefront-typography {
  html body #tt-header #tt-cta #tt-cta-btn,
  html body #tt-header #tt-cta #tt-cta-btn span {
    font-weight: 700 !important;
  }
}
/* Number badges in the About support cards override the global body weight. */
@layer tt-storefront-typography {
  html body .tt-about-card-grid article > strong {
    font-weight: 700 !important;
  }
}
/* FAQ accordion questions override the global body font weight. */
@layer tt-storefront-typography {
  html body .tt-faq-page .tt-faq-item > summary,
  html body .tt-faq-page .tt-faq-item > summary * {
    font-weight: 700 !important;
  }
}