/* Shared breadcrumb colors for all six storefronts. */
:root {
  --tt-breadcrumb-color: #fff;
  --tt-breadcrumb-hover-color: #12646c;
}
@layer tt-breadcrumb-theme {
  :is(.breadcrumb, [class$="-breadcrumb"], [class*="-breadcrumb "], .tt-breadcrumb-theme),
  :is(.breadcrumb, [class$="-breadcrumb"], [class*="-breadcrumb "], .tt-breadcrumb-theme) :is(a, span, li, strong) {
    color: var(--tt-breadcrumb-color) !important;
    -webkit-text-fill-color: var(--tt-breadcrumb-color) !important;
  }
  :is(.breadcrumb, [class$="-breadcrumb"], [class*="-breadcrumb "], .tt-breadcrumb-theme) a {
    border-radius: 3px;
    transition: color 300ms ease !important;
  }
  /* White on the navy banners, with the theme teal on hover and keyboard focus. */
  :is(.breadcrumb, [class$="-breadcrumb"], [class*="-breadcrumb "], .tt-breadcrumb-theme) a:is(:hover, :focus-visible),
  :is(.breadcrumb, [class$="-breadcrumb"], [class*="-breadcrumb "], .tt-breadcrumb-theme) a:is(:hover, :focus-visible) * {
    color: var(--tt-breadcrumb-hover-color) !important;
    -webkit-text-fill-color: var(--tt-breadcrumb-hover-color) !important;
  }
  :is(.breadcrumb, [class$="-breadcrumb"], [class*="-breadcrumb "], .tt-breadcrumb-theme) a:is(:hover, :focus-visible) {
    background-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }
  :is(.breadcrumb, [class$="-breadcrumb"], [class*="-breadcrumb "], .tt-breadcrumb-theme) a:focus-visible { outline: 2px solid var(--tt-breadcrumb-hover-color); outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) {
    :is(.breadcrumb, [class$="-breadcrumb"], [class*="-breadcrumb "], .tt-breadcrumb-theme) a { transition: none !important; }
  }
}