.family-nav[data-family="iit"] {
  --nav-bg: rgba(10, 4, 24, .96);
  --nav-accent: #00E5FF;
  --nav-action: #6DB33F;
  --nav-text: #F2EBFF;
  --nav-muted: #A89DC9;
}

/* Canonical Merruma Open Weave roles (BR-FND-01, dark appearance — this bar is a dark band in both
   appearances). Scoped to the Merruma family only: the estate bridge stays quieter than Merruma's
   own identity, so no other family theme changes here. */
.family-nav[data-family="merruma"] {
  --nav-bg: rgba(37, 26, 41, .98);  /* night page surface */
  --nav-accent: #D5A1E3;            /* action.primary, dark */
  --nav-action: #D5A1E3;
  --nav-text: #FBF6F0;              /* text.primary, dark */
  --nav-muted: #D0C1D0;             /* text.secondary, dark */
  font-family: "Inclusive Sans", "Segoe UI", system-ui, sans-serif;
}

.family-nav[data-family="undrudge"] {
  /* Undrudge tokens. This bar renders above the fold on every request, so leaving it sky-blue
     over a violet page is the most visible possible half-repainted state. */
  --nav-bg: rgba(21, 32, 51, .98);
  --nav-accent: #6B4CFF;
  --nav-action: #6B4CFF;
  --nav-text: #F3F7FA;
  --nav-muted: rgba(243, 247, 250, .72);
}

.family-skip {
  position: fixed;
  z-index: 9999;
  top: .5rem;
  left: .5rem;
  transform: translateY(-160%);
  padding: .75rem 1rem;
  background: #fff;
  color: #0A0418;
  font-weight: 750;
}

.family-skip:focus {
  transform: translateY(0);
}

.family-header {
  position: sticky;
  z-index: 1100;
  top: 0;
}

.family-nav {
  color: var(--nav-text);
  background: var(--nav-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--nav-accent) 30%, transparent);
  backdrop-filter: blur(18px);
  font-family: "Sora", system-ui, sans-serif;
}

.family-nav__inner {
  display: flex;
  align-items: center;
  width: min(1440px, 100%);
  min-height: 72px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.family-nav__brand {
  flex: 0 0 auto;
}

.family-nav__brand img {
  display: block;
  width: 168px;
  height: auto;
  max-height: 62px;
  object-fit: contain;
}

.family-nav__panel {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.family-nav__links {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: clamp(.2rem, .7vw, .75rem);
  margin: 0;
  padding: 0 1rem;
  list-style: none;
}

.family-nav a {
  color: var(--nav-text);
  text-decoration: none;
}

.family-nav__links a {
  display: block;
  padding: .65rem .55rem;
  border-bottom: 2px solid transparent;
  font-size: clamp(.74rem, .82vw, .9rem);
  font-weight: 620;
  white-space: nowrap;
}

.family-nav__links a:hover,
.family-nav__links a[aria-current="page"] {
  color: var(--nav-accent);
  border-bottom-color: var(--nav-accent);
}

.family-nav__actions {
  display: flex;
  gap: .55rem;
}

.family-nav__actions a,
.product-subnav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: .55rem;
  padding: .58rem .85rem;
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
}

.family-nav__quote {
  border: 1px solid color-mix(in srgb, var(--nav-accent) 55%, transparent);
}

.family-nav__portal,
.product-subnav__cta {
  background: var(--nav-action);
  color: #071006 !important;
}

.family-nav[data-family="undrudge"] .family-nav__portal,
.family-nav[data-family="undrudge"] .product-subnav__cta {
  color: #fff !important;
}

/* Merruma's action colour on this dark bar is Open Lilac, which is a LIGHT surface — white on it
   measures 1.6:1. onColour.dark.actionPrimary is Night Ink, and it is the only approved answer. */
.family-nav[data-family="merruma"] .family-nav__portal,
.family-nav[data-family="merruma"] .product-subnav__cta {
  color: #251A29 !important;
}

.family-nav[data-family="merruma"] .family-nav__quote {
  color: #FBF6F0;
}

/* Focus is two rings that render together, not one accent outline — and a single Open Lilac ring
   would disappear against the Open Lilac call to action, the most important control in this bar.
   The rings themselves are painted by merruma-marketing.css, whose `.merruma :focus-visible` carries
   !important; this rule's job is to clear the estate's `outline: 3px solid var(--nav-accent)` above,
   which would otherwise win because family-navigation.css loads second. */
.family-nav[data-family="merruma"] :focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-radius: 4px;
}

.family-nav__toggle {
  display: none;
  border: 1px solid color-mix(in srgb, var(--nav-accent) 45%, transparent);
  border-radius: .5rem;
  padding: .55rem .7rem;
  background: transparent;
  color: var(--nav-text);
  font-weight: 700;
}

.product-subnav {
  display: flex;
  align-items: center;
  width: min(1440px, 100%);
  min-height: 52px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  border-top: 1px solid color-mix(in srgb, var(--nav-accent) 16%, transparent);
  background: color-mix(in srgb, var(--nav-bg) 90%, var(--nav-accent));
}

.product-subnav__name {
  flex: 0 0 auto;
  padding-right: 1.1rem;
  color: var(--nav-accent) !important;
  font-family: "Unbounded", "Sora", sans-serif;
  font-size: .88rem;
  font-weight: 650;
}

.product-subnav__scroller {
  display: flex;
  flex: 1;
  align-items: center;
  gap: .85rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.product-subnav ul {
  display: flex;
  flex: 1;
  gap: .95rem;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-subnav ul a {
  color: var(--nav-muted);
  font-size: .78rem;
  font-weight: 620;
  white-space: nowrap;
}

.product-subnav ul a:hover {
  color: var(--nav-text);
}

/* Merruma's product name is set in its own display face, which the layout self-hosts. The estate
   default reaches for Unbounded/Sora, neither of which is loaded on the Merruma layout. */
.family-nav[data-family="merruma"] .product-subnav__name {
  font-family: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
}

/* SC 2.5.8 Target Size, and the brand's own 44px working floor. The estate bar leaves its primary
   links at ~42px and its product-bar links at 15px tall — the latter fails even the 24px minimum,
   because a nav link is not "inline in a sentence" and the gaps are narrower than the spacing
   exception allows. Scoped to the Merruma family so the fix lands with the identity that requires
   it, rather than silently reflowing the other product bars. */
.family-nav[data-family="merruma"] .family-nav__links a,
.family-nav[data-family="merruma"] .product-subnav ul a,
.family-nav[data-family="merruma"] .product-subnav__name {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.family-nav[data-family="merruma"] .family-nav__actions a,
.family-nav[data-family="merruma"] .product-subnav__cta,
.family-nav[data-family="merruma"] .family-nav__toggle {
  min-height: 44px;
}

.family-nav :focus-visible {
  outline: 3px solid var(--nav-accent);
  outline-offset: 3px;
}

@media (max-width: 899px) {
  .family-nav__inner {
    justify-content: space-between;
  }

  .family-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
  }

  .family-nav__toggle-lines,
  .family-nav__toggle-lines::before,
  .family-nav__toggle-lines::after {
    display: block;
    width: 1rem;
    height: 2px;
    background: currentColor;
  }

  .family-nav__toggle-lines {
    position: relative;
  }

  .family-nav__toggle-lines::before,
  .family-nav__toggle-lines::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .family-nav__toggle-lines::before { top: -.32rem; }
  .family-nav__toggle-lines::after { top: .32rem; }

  .family-nav__panel {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    display: none;
    align-items: stretch;
    padding: .75rem 1rem 1.25rem;
    background: var(--nav-bg);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
  }

  .family-nav__panel[data-nav-open="true"] {
    display: block;
  }

  .family-nav__links,
  .family-nav__actions {
    align-items: stretch;
  }

  .family-nav__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 0 .8rem;
  }

  .family-nav__links a {
    padding-inline: .25rem;
  }

  .family-nav__actions a {
    flex: 1;
  }
}

@media (max-width: 430px) {
  .family-nav__brand img {
    width: 138px;
  }

  .family-nav__links {
    grid-template-columns: 1fr;
  }
}