/* Shared product shell: route labels describe real destinations only. */
:root {
  --vn-ink: #070d1c;
  --vn-surface: #101a31;
  --vn-surface-raised: #172544;
  --vn-gold: #d6b465;
  --vn-gold-soft: #f0d995;
  --vn-text: #f6f1df;
  --vn-muted: #b4bdcf;
  --vn-border: color-mix(in srgb, var(--vn-gold) 42%, transparent);
  --vn-focus: #fff1b8;
}

body {
  background-color: var(--vn-ink);
  color: var(--vn-text);
}

.product-nav {
  align-items: center;
  background: linear-gradient(100deg, rgba(7, 13, 28, .96), rgba(23, 37, 68, .94));
  border-bottom: 1px solid var(--vn-border);
  display: flex;
  gap: .35rem;
  justify-content: center;
  margin: 0;
  padding: .7rem max(1rem, calc((100vw - 76rem) / 2));
  position: relative;
  z-index: 8;
}

.product-nav a {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--vn-muted);
  font-size: .78rem;
  letter-spacing: .07em;
  padding: .48rem .75rem;
  text-decoration: none;
  text-transform: uppercase;
}

.product-nav a:hover,
.product-nav a:focus-visible { color: var(--vn-gold-soft); }

.product-nav a[aria-current="page"] {
  background: rgba(214, 180, 101, .12);
  border-color: var(--vn-border);
  color: var(--vn-gold-soft);
}

.route-context {
  color: var(--vn-gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0 0 .25rem;
  text-transform: uppercase;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--vn-focus);
  outline-offset: 3px;
}

@media (max-width: 540px) {
  .product-nav { gap: .1rem; justify-content: flex-start; overflow-x: auto; padding-inline: .55rem; }
  .product-nav a { flex: 0 0 auto; font-size: .67rem; padding: .42rem .55rem; }
}