/* ONLYDROP v455 — The permanent category switcher uses the same quiet
   black/white/neon typographic language as the global top navigation.
   Layout, slide-in/out transitions and category switching stay untouched. */

/* One continuous black rail, not a stack of individually framed controls. */
html body #views > .category-switcher {
  background:#0b0e11 !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  gap:0 !important;
  padding:7px 0 !important;
  width:clamp(136px,12vw,166px) !important;
}
html body #views > .category-switcher::before,
html body #views > .category-switcher::after {
  display:none !important;
  content:none !important;
}

/* The entire row remains a button/hitbox, but draws only its label. */
html body #views > .category-switcher > button.filter,
html body #views > .category-switcher > button.filter:hover,
html body #views > .category-switcher > button.filter:active,
html body #views > .category-switcher > button.filter.active,
html body #views > .category-switcher > button.filter[aria-pressed="true"] {
  appearance:none !important;
  position:relative !important;
  border:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  border-radius:0 !important;
  outline:none;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  clip-path:none !important;
  transform:none !important;
  rotate:none !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
  margin:0 !important;
  min-height:42px !important;
  padding:11px 13px !important;
  font:700 10px/1.35 var(--od-site-copy,'Manrope','Space Grotesk',Arial,sans-serif) !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  text-align:left !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  transition:color .18s ease !important;
}
html body #views > .category-switcher > button.filter::before,
html body #views > .category-switcher > button.filter::after {
  content:none !important;
  display:none !important;
}
html body #views > .category-switcher > button.filter:not(.active):not([aria-pressed="true"]) {
  color:#e8ece8 !important;
  -webkit-text-fill-color:#e8ece8 !important;
}
html body #views > .category-switcher > button.filter:not(.active):not([aria-pressed="true"]):hover {
  color:#d2ff4a !important;
  -webkit-text-fill-color:#d2ff4a !important;
}
html body #views > .category-switcher > button.filter:is(.active,[aria-pressed="true"]) {
  color:#d2ff4a !important;
  -webkit-text-fill-color:#d2ff4a !important;
}
html body #views > .category-switcher > button.filter:focus-visible {
  outline:2px solid #f5f7f3 !important;
  outline-offset:-3px !important;
}

/* Phones keep their existing horizontal, scrollable rail and full tap targets. */
@media (max-width:760px) {
  html body #views > .category-switcher {
    width:92vw !important;
    max-width:92vw !important;
    padding:3px 4px !important;
    gap:0 !important;
    scrollbar-width:none !important;
  }
  html body #views > .category-switcher::-webkit-scrollbar {
    display:none !important;
  }
  html body #views > .category-switcher > button.filter {
    flex:0 0 auto !important;
    width:auto !important;
    min-width:91px !important;
    max-width:146px !important;
    min-height:44px !important;
    padding:10px 11px !important;
    font-size:9px !important;
    line-height:1.3 !important;
    text-align:center !important;
    scroll-snap-align:start;
  }
}

/* Match accessibility preference without changing the panel's slide timing. */
@media (prefers-reduced-motion:reduce) {
  html body #views > .category-switcher > button.filter {
    transition:none !important;
  }
}