/* Home-only variant. Keep the page container and shared category cards intact. */
.main--home .home-categories {
  min-width: 0;
  max-width: 100%;
}

.main--home .home-categories__viewport {
  box-sizing: border-box;
  width: calc(100% + 12px);
  max-width: none;
  margin-inline: -6px;
  padding: 5px 6px 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.main--home .home-categories__track {
  display: grid;
  width: max-content;
  grid-auto-flow: column;
  grid-auto-columns: 182px;
  grid-template-rows: repeat(2, minmax(58px, auto));
  gap: 8px;
}

.main--home .home-categories__track .category-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 58px;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #191919;
  text-align: left;
  white-space: normal;
  box-shadow: 0 2px 7px #20203006, 0 1px 2px #20203004;
  scroll-snap-align: start;
  transform: none;
  transition: box-shadow 100ms ease, background-color 100ms ease;
}

.main--home .home-categories__track .category-card__name {
  display: block;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  color: inherit;
  overflow-wrap: anywhere;
}

.main--home .home-navigation__icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #494950;
  background: linear-gradient(145deg, #fcfcfd, #f2f2f4);
  box-shadow: 0 2px 4px #16162308, inset 0 1px 0 #fff;
}

.main--home .home-navigation__icon svg {
  display: block;
  width: 19px;
  height: 19px;
}

.main--home .home-categories--spheres .home-categories__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
}

.main--home .home-categories--spheres .category-card {
  flex: 0 0 auto;
  min-height: 44px;
  gap: 8px;
  padding: 7px 11px 7px 7px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: #f0f0f2;
  box-shadow: none;
  white-space: nowrap;
}

.main--home .home-categories--spheres .category-card__name {
  font-weight: 400;
  line-height: 18px;
  overflow-wrap: normal;
}

.main--home .home-categories--spheres .home-navigation__icon {
  flex-basis: 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(150deg, #fff, #f7f7f8);
  box-shadow: 0 2px 4px #1616230b, inset 0 1px 0 #fff;
}

.main--home .home-categories__track .category-card:focus-visible {
  outline: 2px solid #676773;
  outline-offset: 2px;
}

.main--home .home-categories__track .category-card:active {
  box-shadow: 0 4px 14px #2020301a;
}

.main--home .home-categories__track .category-card:active .home-navigation__icon {
  box-shadow: 0 3px 7px #16162312;
}

/* Match the existing tablet breakpoint; all fixed button sizes stay the same. */
@media (min-width: 769px) {
  .main--home .home-categories--spheres .home-categories__track {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (hover: hover) and (pointer: fine) {
  .main--home .home-categories__viewport {
    scrollbar-width: thin;
    scrollbar-color: #d5d5db transparent;
  }
  .main--home .home-categories__viewport::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .main--home .home-categories__viewport::-webkit-scrollbar-thumb {
    background: #d5d5db;
    border-radius: 3px;
  }
  .main--home .home-categories__track .category-card:hover {
    box-shadow: 0 3px 10px #2020300e;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main--home .home-categories__track .category-card,
  .main--home .home-categories__nav {
    transition: none;
  }
  .main--home .home-categories__viewport {
    scroll-behavior: auto;
  }
}