/* Shared navigation: model grids, advice and service have distinct groups. */
.retail-navigation .header__nav-inner { position: relative; }
.retail-navigation__groups { display: flex; align-items: center; gap: .25rem; min-inline-size: 0; }
.retail-navigation .retail-navigation__item { position: static; }
.retail-navigation .retail-navigation__trigger {
  min-block-size: 2.5rem;
  padding: .5rem .625rem;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--heading, #0f172a);
  font-family: inherit;
  font-size: .8125rem;
}
.retail-navigation .retail-navigation__trigger:hover,
.retail-navigation .retail-navigation__trigger[aria-expanded="true"] { background: #f1f3f5; }
.retail-navigation .retail-navigation__trigger .nav__chevron { transform: none; }
.retail-navigation .retail-navigation__trigger[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
.retail-navigation .retail-navigation__panel {
  inset-block-start: 100%;
  inset-inline-start: var(--container-padding, 1.5rem);
  inline-size: calc(100% - var(--container-padding, 1.5rem) - var(--container-padding, 1.5rem));
  max-inline-size: 26rem;
  max-block-size: calc(100vh - var(--header-height, 149px) - 1rem);
  max-block-size: calc(100dvh - var(--header-height, 149px) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 0 0 var(--radius-md, .75rem) var(--radius-md, .75rem);
  transform: none;
}
.retail-navigation .retail-navigation__panel--wide { max-inline-size: 44rem; }
.retail-navigation .retail-navigation__panel[hidden] { display: none; }
.retail-navigation__columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; }
.retail-navigation__column { min-inline-size: 0; }
.retail-navigation__heading { margin: 0 0 .75rem; color: var(--heading, #0f172a); font-size: .875rem; line-height: 1.5; font-weight: 800; }
.retail-navigation__description { margin: -.25rem 0 .75rem; color: var(--text-muted, #5f6e84); font-size: .8125rem; line-height: 1.5; }
.retail-navigation__list { display: grid; gap: .125rem; margin: 0; padding: 0; list-style: none; }
.retail-navigation__list a { display: block; padding: .625rem .5rem; border-radius: .25rem; color: var(--text, #334155); font-size: .875rem; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
.retail-navigation__list a:hover { background: #f3f4f6; color: var(--heading, #0f172a); text-decoration: underline; text-underline-offset: .2em; }
.retail-navigation .nav__actions { flex-shrink: 0; }
.retail-navigation .nav__cta { border-radius: var(--radius-pill, 999px); }
.retail-navigation :focus-visible { outline: 2px solid var(--cta-bg, #1D4E89); outline-offset: 3px; }
.retail-mobile-trigger { inline-size: 100%; border: 0; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.retail-mobile-submenu { visibility: hidden; }
.retail-mobile-submenu .retail-mobile-group { padding-block: .5rem; }
.retail-mobile-submenu.is-open { max-height: none; overflow: visible; visibility: visible; }
.retail-mobile-submenu .retail-mobile-group + .retail-mobile-group { margin-block-start: .5rem; border-top: 1px solid var(--border, #e5e7eb); }
.retail-mobile-heading { margin: .5rem 1rem; color: var(--heading, #0f172a); font-size: .8125rem; line-height: 1.5; font-weight: 800; }
.retail-mobile-description { margin: 0 1rem .5rem; color: var(--text-muted, #5f6e84); font-size: .8125rem; line-height: 1.5; }
.retail-mobile-submenu a { min-block-size: 2.75rem; }
@media (min-width: 768px) {
  .retail-navigation__panel--wide .retail-navigation__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .retail-navigation__panel--wide .retail-navigation__column + .retail-navigation__column { border-inline-start: 1px solid var(--border, #e5e7eb); padding-inline-start: 1.5rem; }
}
/* Keep four clear sections visible in the existing tablet navigation row. */
@media (min-width: 768px) and (max-width: 1023px) {
  .retail-navigation .retail-navigation__trigger { padding-inline: .25rem; font-size: .75rem; gap: .25rem; }
  .retail-navigation .retail-navigation__trigger .nav__chevron { width: .875rem; height: .875rem; flex-shrink: 0; }
  .retail-navigation .retail-navigation__secondary { display: none; }
}
@media (min-width: 1024px) {
  .retail-navigation .retail-navigation__trigger { padding-inline: .875rem; font-size: .875rem; }
}
