/* Scoped gradient-menu reference: the header remains compact and routing stays native. */
.colors-identity .header-navigation [data-colors-gradient-menu] { max-width: 100%; }
.colors-gradient-menu { max-width: 100%; font-family: inherit; }
.colors-gradient-menu__list {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.colors-gradient-menu__item { display: flex; flex: 0 0 auto; margin: 0; padding: 0; }
.colors-gradient-menu__link {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; box-sizing: border-box; border-radius: 999px; border: 1px solid #eee5df;
  background: #fff; color: #66554d; text-decoration: none; box-shadow: 0 6px 18px #4b2a1714;
  transition: width .5s cubic-bezier(.22,1,.36,1), box-shadow .5s, border-color .25s;
}
.colors-gradient-menu__background, .colors-gradient-menu__glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(45deg, var(--gradient-from), var(--gradient-to));
  opacity: 0; transition: opacity .5s;
}
.colors-gradient-menu__background { z-index: -1; }
.colors-gradient-menu__glow { z-index: -2; top: 8px; filter: blur(14px); }
.colors-gradient-menu__icon {
  display: grid; place-items: center; line-height: 1;
  transition: transform .5s, opacity .25s; transform: scale(1);
}
.colors-gradient-menu__icon svg { width: 24px; height: 24px; display: block; }
.colors-gradient-menu__title {
  position: absolute; padding-inline: 16px; white-space: nowrap; color: var(--gradient-text, #fff);
  font-size: 13px; font-weight: 700; line-height: 1.6; opacity: 0; transform: scale(.5);
  transition: transform .5s, opacity .25s; pointer-events: none;
}
.colors-gradient-menu__current {
  position: absolute; bottom: -5px; inset-inline-start: calc(50% - 3px);
  width: 6px; height: 6px; border-radius: 50%; background: #a7472d;
}
.colors-gradient-menu__link.is-active { border-color: #a7472d66; color: #a7472d; background: #fcf4ef; }
.colors-gradient-menu__link:is(:hover, :focus-visible) { width: 158px; box-shadow: none; border-color: transparent; }
.colors-gradient-menu__link:is(:hover, :focus-visible) .colors-gradient-menu__background { opacity: 1; }
.colors-gradient-menu__link:is(:hover, :focus-visible) .colors-gradient-menu__glow { opacity: .45; }
.colors-gradient-menu__link:is(:hover, :focus-visible) .colors-gradient-menu__icon { transform: scale(0); opacity: 0; }
.colors-gradient-menu__link:is(:hover, :focus-visible) .colors-gradient-menu__title { transform: scale(1); opacity: 1; transition-delay: .12s; }
.colors-gradient-menu__link:focus-visible { outline: 2px solid #a7472d; outline-offset: 5px; }
/* Before React, or without JavaScript, every destination stays readable and usable. */
.colors-identity .site-header .colors-gradient-menu-fallback {
  display: flex; align-items: center; justify-content: center; gap: 5px; overflow: visible;
}
.colors-identity .site-header .colors-gradient-menu-fallback > a {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 8px 10px; border-radius: 99px; font-size: 12px; line-height: 1.5;
  white-space: nowrap; text-decoration: none; color: #594138;
}
.colors-identity .site-header .colors-gradient-menu-fallback > a[aria-current="page"] { background: #a7472d; color: #fff; }
.colors-gradient-menu-fallback > a:focus-visible { outline: 2px solid #a7472d; outline-offset: 3px; }
/* On touch screens, labels remain visible; hover is never required to find a destination. */
.mobile-drawer .colors-gradient-menu--drawer { display: block; }
.colors-gradient-menu--drawer .colors-gradient-menu__list { flex-direction: column; align-items: stretch; gap: 8px; }
.colors-gradient-menu--drawer .colors-gradient-menu__item { display: block; }
.mobile-drawer .colors-gradient-menu--drawer .colors-gradient-menu__link {
  display: flex; justify-content: flex-start; gap: 14px; width: 100%; height: 50px;
  min-height: 50px; padding: 10px 16px; border-radius: 18px; font-size: 14px; line-height: 1.6;
}
.colors-gradient-menu--drawer .colors-gradient-menu__title { position: static; padding: 0; color: inherit; transform: none; opacity: 1; }
.colors-gradient-menu--drawer .colors-gradient-menu__icon { transform: none; opacity: 1; }
.colors-gradient-menu--drawer .colors-gradient-menu__current { bottom: 12px; inset-inline-start: auto; inset-inline-end: 14px; }
.mobile-drawer .colors-gradient-menu--drawer .colors-gradient-menu__link:is(:hover, :focus-visible) { color: var(--gradient-text, #fff); }
.colors-gradient-menu--drawer .colors-gradient-menu__link:is(:hover, :focus-visible) .colors-gradient-menu__icon { transform: none; opacity: 1; }
@media (min-width: 1024px) {
  .colors-identity .header-navigation { display: block; justify-self: center; }
}
@media (min-width: 1024px) and (max-width: 1250px) {
  .colors-gradient-menu__list { gap: 8px; }
  .colors-gradient-menu__link { width: 46px; height: 46px; }
  .colors-gradient-menu__link:is(:hover, :focus-visible) { width: 138px; }
  .colors-gradient-menu__icon svg { width: 22px; height: 22px; }
  .colors-identity .site-header .colors-gradient-menu-fallback > a { padding-inline: 7px; font-size: 11px; }
}
@media (max-width: 1023px) {
  .colors-identity .site-header .header-navigation { display: none !important; }
  .colors-identity .site-header .header-actions [data-menu-toggle] { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
  .colors-gradient-menu *, .colors-gradient-menu *::before, .colors-gradient-menu *::after { transition: none !important; animation: none !important; }
}
.colors-gradient-menu__icon img{width:28px;height:28px;object-fit:contain}.colors-gradient-menu__icon{overflow:visible}.colors-gradient-menu__icon img{scale:1.3}
/* The generated kids silhouette inherits exactly the same tint and active states as the neighboring SVG icons. */
@supports (mask-image: url("")) {
  .colors-gradient-menu__icon:has(> img) { position: relative; width: 28px; height: 28px; }
  .colors-gradient-menu__icon:has(> img)::before {
    content: ""; position: absolute; inset: -4px; background: currentColor; pointer-events: none;
    mask: url('/images/brand/colors-kids-icon-20261014.png') center / contain no-repeat;
    -webkit-mask: url('/images/brand/colors-kids-icon-20261014.png') center / contain no-repeat;
  }
  .colors-gradient-menu__icon > img { visibility: hidden; }
}