/* Desktop dropdowns stay laid out while their visibility fades. */
@media (min-width: 1024px) {
  #tt-nav #tt-nav-cats > li > .tt-dropdown {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity var(--tt-hover-duration, 0.3s) ease, visibility 0s linear var(--tt-hover-duration, 0.3s) !important;
  }
  #tt-nav #tt-nav-cats > li > .tt-category-dropdown { display: grid !important; }
  #tt-nav #tt-nav-cats > li:hover > .tt-dropdown,
  #tt-nav #tt-nav-cats > li:focus-within > .tt-dropdown {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
    transition: opacity var(--tt-hover-duration, 0.3s) ease, visibility 0s !important;
  }
  #tt-nav #tt-nav-cats > li > :is(a, .tt-nav-toggle) { transition: background-color var(--tt-hover-duration, 0.3s) ease, color var(--tt-hover-duration, 0.3s) ease; }
  #tt-nav #tt-nav-cats .tt-category-dropdown a,
  #tt-nav #tt-nav-cats .tt-category-dropdown a:hover,
  #tt-nav #tt-nav-cats .tt-category-dropdown a:focus {
    box-sizing: border-box;
    border-bottom-width: 2px !important;
    padding-left: 22px !important;
    font-weight: 700 !important;
    transform: none !important;
    transition: background-color var(--tt-hover-duration, 0.3s) ease, color var(--tt-hover-duration, 0.3s) ease, border-color var(--tt-hover-duration, 0.3s) ease !important;
  }
  #tt-nav #tt-nav-cats .tt-category-dropdown a::before {
    width: 4px !important;
    height: 28px !important;
    transform: translateY(-50%) scaleY(.36) !important;
    transition: transform var(--tt-hover-duration, 0.3s) ease, background-color var(--tt-hover-duration, 0.3s) ease !important;
  }
  #tt-nav #tt-nav-cats .tt-category-dropdown a:hover::before,
  #tt-nav #tt-nav-cats .tt-category-dropdown a:focus::before {
    transform: translateY(-50%) scaleY(1) !important;
  }
  #tt-nav #tt-nav-cats .tt-company-dropdown a { transition: background-color var(--tt-hover-duration, 0.3s) ease, color var(--tt-hover-duration, 0.3s) ease; }
  #tt-nav #tt-nav-cats .tt-dropdown a:focus-visible { outline: 2px solid #12646C; outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  #tt-nav #tt-nav-cats > li > .tt-dropdown,
  #tt-nav #tt-nav-cats a,
  #tt-nav #tt-nav-cats a::before { transition: none !important; }
}
/* Mobile drawer: change these two values to adjust the opening speed and feel. */
:root {
  --tt-drawer-duration: 480ms;
  --tt-drawer-easing: cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 1024px) {
  body #tt-mobile-drawer {
    width: min(380px, 92vw);
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--tt-drawer-duration) var(--tt-drawer-easing), visibility 0s linear var(--tt-drawer-duration) !important;
  }
  body #tt-mobile-drawer.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--tt-drawer-duration) var(--tt-drawer-easing), visibility 0s linear 0s !important;
  }
  body #tt-mobile-backdrop {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(7, 24, 39, .58);
    transition: opacity var(--tt-drawer-duration) ease, visibility 0s linear var(--tt-drawer-duration) !important;
  }
  body #tt-mobile-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--tt-drawer-duration) ease, visibility 0s linear 0s !important;
  }
  body #tt-mobile-drawer :is(.tt-drawer-lang-selector, #tt-mobile-search, .tt-drawer-scrollable) {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease !important;
  }
  body #tt-mobile-drawer.open :is(.tt-drawer-lang-selector, #tt-mobile-search, .tt-drawer-scrollable) {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 320ms ease 90ms, transform 360ms var(--tt-drawer-easing) 90ms !important;
  }
  body #tt-mobile-language-toggle {
    --tt-hover-duration: 220ms;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 220ms ease, border-color 220ms ease !important;
  }
  body #tt-mobile-language-toggle :is(svg, span) { pointer-events: none; }
  body #tt-mobile-language-toggle :is(svg, .tt-language-chevron) { flex: 0 0 auto; }
  body #tt-mobile-language-toggle:hover,
  body #tt-mobile-language-toggle[aria-expanded="true"] { background: #12646c; border-color: #80bbc1; }
  body #tt-mobile-drawer .tt-drawer-lang-selector {
    margin: 12px 16px;
    padding: 14px;
    border: 1px solid rgba(174,201,204,.2);
    border-radius: 16px;
    background: rgba(18,100,108,.14);
  }
  body #tt-mobile-drawer .tt-drawer-lang-label { margin-bottom: 10px; color: #aec9cc; letter-spacing: .08em; }
  body #tt-mobile-drawer .tt-drawer-lang-btns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  body #tt-mobile-drawer .tt-drawer-lang-btn {
    --tt-hover-duration: 220ms;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 6px;
    border-radius: 10px;
    border: 1px solid rgba(174,201,204,.22);
    background: rgba(255,255,255,.04);
    color: #e5eff0 !important;
    font-size: 13px;
    text-decoration: none;
    transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease !important;
  }
  body #tt-mobile-drawer .tt-drawer-lang-btn:hover { background: rgba(174,201,204,.15); border-color: #aec9cc; }
  body #tt-mobile-drawer .tt-drawer-lang-btn.active {
    background: #aec9cc;
    border-color: #aec9cc;
    color: #071827 !important;
  }
  body #tt-mobile-drawer .tt-drawer-lang-btn.active::after { content: '\2713'; font-size: 13px; }
  body #tt-mobile-drawer .tt-drawer-lang-btn:active,
  body #tt-mobile-language-toggle:active { transform: scale(.97) !important; }
  body :is(#tt-mobile-language-toggle, #tt-drawer-close, .tt-drawer-lang-btn):focus-visible { outline: 2px solid #fbaa06; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --tt-drawer-duration: 0ms; }
  body #tt-mobile-drawer,
  body #tt-mobile-drawer.open,
  body #tt-mobile-backdrop,
  body #tt-mobile-backdrop.active,
  body #tt-mobile-drawer :is(.tt-drawer-lang-selector, #tt-mobile-search, .tt-drawer-scrollable),
  body #tt-mobile-drawer.open :is(.tt-drawer-lang-selector, #tt-mobile-search, .tt-drawer-scrollable) { transition: none !important; }
  body #tt-mobile-drawer .tt-drawer-lang-btn,
  body #tt-mobile-language-toggle { --tt-hover-duration: 0s; transition: none !important; }
}
/* Drawer navigation hover: fixed padding avoids an abrupt text jump. */
@media (max-width: 1024px) {
  body #tt-mobile-drawer :is(#tt-mobile-nav, .tt-mobile-secondary-nav) li a {
    --tt-hover-duration: 340ms;
    --tt-hover-easing: cubic-bezier(.22, 1, .36, 1);
    padding: 11px 8px !important;
    color: rgba(255,255,255,.9) !important;
    background-color: transparent;
    transform: translateX(0) !important;
    transition: background-color 340ms ease, color 340ms ease, transform 340ms var(--tt-hover-easing), border-color 340ms ease !important;
  }
  body #tt-mobile-drawer :is(#tt-mobile-nav, .tt-mobile-secondary-nav) li a:is(:hover, :focus-visible) {
    padding: 11px 8px !important;
    background-color: rgba(174,201,204,.12) !important;
    color: #aec9cc !important;
    border-bottom-color: rgba(174,201,204,.24);
    transform: translateX(4px) !important;
  }
  body #tt-mobile-drawer :is(#tt-mobile-nav, .tt-mobile-secondary-nav) li a:focus-visible {
    outline: 2px solid #aec9cc;
    outline-offset: -2px;
  }
  body #tt-mobile-drawer :is(#tt-mobile-nav, .tt-mobile-secondary-nav) li a:active {
    background-color: rgba(174,201,204,.2) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body #tt-mobile-drawer :is(#tt-mobile-nav, .tt-mobile-secondary-nav) li a {
    --tt-hover-duration: 0s;
    transition: none !important;
  }
  body #tt-mobile-drawer :is(#tt-mobile-nav, .tt-mobile-secondary-nav) li a:is(:hover, :focus-visible) {
    transform: none !important;
  }
}
/* Bold header navigation, including dropdown and mobile menu links. */
body #tt-nav #tt-nav-cats > li > :is(a, .tt-nav-toggle),
body #tt-nav #tt-nav-cats .tt-dropdown a,
body #tt-mobile-drawer #tt-mobile-nav a,
body #tt-mobile-drawer .tt-mobile-secondary-nav a {
  font-weight: 700 !important;
}
/* Override the global typography layer for header menu labels. */
@layer tt-storefront-typography {
  html body #tt-nav #tt-nav-cats > li > :is(a, .tt-nav-toggle),
  html body #tt-nav #tt-nav-cats .tt-dropdown a,
  html body #tt-nav #tt-nav-cats a :where(span, strong, b),
  html body #tt-mobile-drawer #tt-mobile-nav a,
  html body #tt-mobile-drawer #tt-mobile-nav a :where(span, strong, b),
  html body #tt-mobile-drawer .tt-mobile-secondary-nav a,
  html body #tt-mobile-drawer .tt-mobile-secondary-nav a :where(span, strong, b) {
    font-weight: 700 !important;
    -webkit-text-stroke: 0 !important;
    letter-spacing: 0.2px !important;
  }
}