/* One shared file for EN, DE, ES, FR, IT and JP. Change these tokens once. */
@layer tt-card-layout {
  :is(#tt-static-motion, body) #content.tt-blog-single .tt-blog-single-hero:not(#tt-no-banner-padding) {
    --tt-inner-hero-padding: 0 0 30px;
    background: #ffffff !important;
    display: block !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  html body #content.tt-blog-single .tt-blog-single-hero::before {
    display: none !important;
  }
  html body #content.tt-blog-single .tt-blog-single-hero .tt-info-breadcrumb {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
@layer tt-storefront-typography {
  html body #content.tt-blog-single .tt-blog-single-hero :is(.tt-blog-title, .tt-blog-meta, .tt-blog-lead),
  html body #content.tt-blog-single .tt-blog-single-hero :is(.tt-blog-title, .tt-blog-meta, .tt-blog-lead) * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }
}
@layer tt-breadcrumb-theme {
  html body #content.tt-blog-single .tt-blog-single-hero .tt-info-breadcrumb,
  html body #content.tt-blog-single .tt-blog-single-hero .tt-info-breadcrumb :is(a, span) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }
  html body #content.tt-blog-single .tt-blog-single-hero .tt-info-breadcrumb a:is(:hover, :focus-visible),
  html body #content.tt-blog-single .tt-blog-single-hero .tt-info-breadcrumb a:is(:hover, :focus-visible) * {
    color: #12646c !important;
    -webkit-text-fill-color: #12646c !important;
  }
}
@layer tt-storefront-typography {
  html body .tt-blog-card .tt-blog-read-more { font-weight: 700 !important; }
  html body #content .tt-blog-card .tt-blog-card-body h3,
  html body #content .tt-blog-card .tt-blog-card-body h3 * {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    font-size: 20px !important;
    line-height: 1.35 !important;
  }
}
@layer tt-blog-theme {
  .tt-blog-card .tt-blog-read-more::after { content: none !important; display: none !important; }
  .tt-blog-card .tt-blog-read-more { gap: 10px; }
  .tt-blog-card .tt-blog-read-arrow {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateX(0) !important;
    transition: transform 300ms ease !important;
  }
  .tt-blog-card:is(:hover, :focus-within) .tt-blog-read-arrow { transform: translateX(6px) !important; }
  @media (prefers-reduced-motion: reduce) {
    .tt-blog-card .tt-blog-read-arrow,
    .tt-blog-card:is(:hover, :focus-within) .tt-blog-read-arrow { transform: none !important; transition: none !important; }
  }
}
:root {
  --tt-blog-heading-color: #12646c;
  --tt-blog-button-background: #12646c;
  --tt-blog-button-text: #fff;
  --tt-blog-button-hover-background: #000;
  --tt-blog-button-hover-text: #fff;
  --tt-blog-button-duration: 300ms;
}
/* Important declarations in this layer override legacy page color rules. */
@layer tt-blog-theme {
  .tt-blog-theme .tt-blog-cta .tt-blog-title,
  .tt-blog-theme .tt-blog-cta .tt-blog-title * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  .tt-blog-theme .tt-blog-cta .tt-blog-button {
    background: var(--tt-blog-button-background) !important;
    border-color: var(--tt-blog-button-background) !important;
    color: var(--tt-blog-button-text) !important;
    -webkit-text-fill-color: var(--tt-blog-button-text) !important;
  }
  .tt-blog-theme .tt-blog-cta .tt-blog-button:is(:hover, :focus-visible) {
    background: var(--tt-blog-button-hover-background) !important;
    border-color: var(--tt-blog-button-hover-background) !important;
  }
  .tt-blog-theme .tt-blog-checklist {
    display: grid;
    gap: 10px;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 28px !important;
  }
  .tt-blog-theme .tt-blog-checklist > li {
    position: relative;
    list-style: none !important;
    margin: 0 !important;
    padding: 14px 16px 14px 52px !important;
    background: #f4f9f9;
    border: 1px solid #dce9e9;
    border-radius: 10px;
    line-height: 1.65 !important;
  }
  .tt-blog-theme .tt-blog-checklist > li::marker { content: ''; }
  .tt-blog-theme .tt-blog-checklist > li::before {
    content: '\2713';
    position: absolute;
    top: 15px;
    left: 15px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e0eeee;
    color: var(--tt-blog-heading-color);
    -webkit-text-fill-color: var(--tt-blog-heading-color);
    font: 700 15px/1 Arial, sans-serif;
  }
  .tt-blog-theme .tt-blog-checklist > li > strong {
    color: var(--tt-blog-heading-color) !important;
    -webkit-text-fill-color: var(--tt-blog-heading-color) !important;
  }
  .tt-blog-theme .tt-blog-title,
  .tt-blog-theme .tt-blog-title *,
  .tt-blog-theme .tt-blog-content :is(h1, h2, h3, h4, h5, h6),
  .tt-blog-theme .tt-blog-content :is(h1, h2, h3, h4, h5, h6) * {
    color: var(--tt-blog-heading-color) !important;
    -webkit-text-fill-color: var(--tt-blog-heading-color) !important;
  }
  /* Hero titles sit on a dark image; article and card titles keep the teal token. */
  .tt-blog-theme .tt-blog-title--hero,
  .tt-blog-theme .tt-blog-title--hero * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  .tt-blog-theme .tt-blog-button {
    --tt-hover-duration: var(--tt-blog-button-duration);
    background: var(--tt-blog-button-background) !important;
    border-color: var(--tt-blog-button-background) !important;
    color: var(--tt-blog-button-text) !important;
    -webkit-text-fill-color: var(--tt-blog-button-text) !important;
    text-decoration: none !important;
    transition: background-color var(--tt-blog-button-duration) ease, color var(--tt-blog-button-duration) ease, border-color var(--tt-blog-button-duration) ease, translate var(--tt-blog-button-duration) ease !important;
  }
  .tt-blog-theme .tt-blog-button--outline {
    background: #fff !important;
    color: var(--tt-blog-button-background) !important;
    -webkit-text-fill-color: var(--tt-blog-button-background) !important;
  }
  .tt-blog-theme .tt-blog-button:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background: var(--tt-blog-button-hover-background) !important;
    border-color: var(--tt-blog-button-hover-background) !important;
    color: var(--tt-blog-button-hover-text) !important;
    -webkit-text-fill-color: var(--tt-blog-button-hover-text) !important;
    filter: none !important;
  }
  .tt-blog-theme .tt-blog-button * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }
  .tt-blog-theme .tt-blog-button:focus-visible { outline: 2px solid var(--tt-blog-heading-color); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .tt-blog-theme .tt-blog-button { --tt-hover-duration: 0s; transition: none !important; }
  }
}