/* Homepage category navigation: full desktop links, a native mobile disclosure. */
.category-band-heading .eyebrow {
  font-family: var(--font);
  text-transform: uppercase;
}

.category-mobile-all,
.category-picker {
  display: none;
}

@media (max-width: 760px) {
  .category-desktop {
    display: none;
  }

  .category-band-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
  }

  .category-band-heading .eyebrow {
    margin: 0;
    max-width: 26ch;
    font-size: .6875rem;
    letter-spacing: 1.3px;
    line-height: 1.6;
  }

  .category-mobile-all {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
    min-height: 44px;
    font-size: .875rem;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .category-picker {
    display: block;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
  }

  .category-picker summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 14px 16px;
    border-radius: 16px;
    color: var(--primary);
    cursor: pointer;
    list-style: none;
  }

  .category-picker summary::-webkit-details-marker {
    display: none;
  }

  .category-picker-label {
    flex: 1;
    min-width: 0;
    font-size: .9375rem;
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .category-picker-count {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    padding: 2px 7px;
    border-radius: 50px;
    background: var(--ivory);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
  }

  .category-picker-chevron {
    flex: 0 0 auto;
  }

  .category-picker[open] summary {
    border-bottom: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
  }

  .category-picker[open] .category-picker-chevron {
    transform: rotate(180deg);
  }

  .category-picker-list {
    max-height: min(52vh, 24rem);
    overflow-y: auto;
    padding: 6px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }

  .category-picker-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
    font-size: .875rem;
    line-height: 1.5;
    text-decoration: none;
  }

  .category-picker-list a:last-child {
    border-bottom: 0;
  }

  .category-picker-list a > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .category-picker-list a > span:last-child {
    flex: 0 0 auto;
  }

  .category-picker-list a:focus-visible {
    outline-offset: -2px;
    border-radius: 4px;
  }

  .category-picker-hint {
    margin: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .75rem;
    text-align: center;
  }
}

@media (max-width: 760px) and (hover: hover) {
  .category-picker summary:hover,
  .category-picker-list a:hover {
    background: var(--ivory);
  }
}