:root {
  --shop-ascii-duration: 180ms;
  --shop-ascii-ease: var(--shop-hover-ease, cubic-bezier(.16, 1, .3, 1));
  --shop-ascii-cursor-size: 12px;
}

.ascii-detail--category > .ascii-detail__mark {
  display: inline-block;
  flex: 0 0 1ch;
  pointer-events: none;
  user-select: none;
  color: currentColor;
  font: var(--shop-ascii-cursor-size)/1 var(--mono);
  letter-spacing: 0;
  opacity: 0;
  transition: opacity var(--shop-ascii-duration) var(--shop-ascii-ease);
}

.ascii-detail--category[aria-pressed="true"] > .ascii-detail__mark {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ascii-detail--category > .ascii-detail__mark {
    transition: none;
  }
}

@media (max-width: 360px) {
  .category-rail {
    gap: 4px;
  }

  .category-rail [data-category] {
    gap: 4px;
  }
}