.alt-mobilebar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--alt-mb-bg);
  border-top: 1px solid var(--alt-mb-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.alt-mobilebar__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
}

.alt-mobilebar__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  color: var(--alt-mb-text);
  text-decoration: none;
  transition: color var(--alt-hover-duration) ease;
}
.alt-mobilebar__item:hover,
.alt-mobilebar__item:focus-visible { color: var(--alt-brand); }

.alt-mobilebar__icon { position: relative; display: inline-flex; }

.alt-mobilebar__count {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--alt-brand);
  color: var(--alt-on-dark);
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}
.alt-mobilebar__count:empty { display: none; }

.alt-mobilebar__label {
  font-family: var(--alt-font-heading);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* The bar floats over the page, so give the document room to scroll past it. */
@media (max-width: 1279px) {
  body:has(.alt-mobilebar) { padding-bottom: 62px; }
}

/* ---- anchor colour re-assertion (see fix_link_specificity) ---- */
a.alt-mobilebar__item { color: var(--alt-mb-text); }
a.alt-mobilebar__item:hover,
a.alt-mobilebar__item:focus-visible { color: var(--alt-brand); }